*{box-sizing:border-box}:root{--navy:#003660;--navy-dark:#002744;--border:#d8e0e7;--muted:#687785;--bg:#f5f7f9;--card:#fff;--danger:#a92b2b}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:#102438;background:var(--bg)}body{display:flex;min-height:100vh;flex-direction:column}.app-header{background:var(--navy);color:#fff;padding:18px 26px;box-shadow:0 2px 9px rgba(0,0,0,.12)}.header-inner{max-width:1500px;margin:0 auto}.app-header h1{margin:0;font-size:clamp(1.2rem,2vw,1.8rem)}.version{font-size:.8rem;font-weight:400;opacity:.8;margin-left:8px}.app-shell{width:min(1500px,100%);margin:0 auto;padding:22px;display:grid;grid-template-columns:minmax(300px,360px) minmax(430px,1fr) minmax(280px,340px);gap:18px;align-items:start;flex:1}.panel{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:0 5px 18px rgba(16,36,56,.06);padding:20px}.panel h2{margin:0 0 18px;color:var(--navy);font-size:1.25rem}.field-group{margin-bottom:16px}.field-group label{display:block;font-weight:700;margin-bottom:7px}.field-group label span{color:var(--muted);font-weight:400}input,select,button{font:inherit}input[type=text],input[type=number],select,input[type=file]{width:100%;min-height:42px;border:1px solid #bdc9d3;border-radius:8px;background:#fff;padding:9px 11px;color:#102438}input[type=file]{padding:8px}.size-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.actions .primary{grid-column:1/-1}button{border-radius:8px;border:1px solid #b9c6d0;padding:10px 13px;cursor:pointer;font-weight:700}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:var(--navy);color:#fff;border-color:var(--navy)}.primary:hover:not(:disabled){background:var(--navy-dark)}.secondary{background:#fff;color:var(--navy)}.danger{color:var(--danger)}#removeImage{margin-top:8px}.panel-heading h2{margin-bottom:3px}.panel-heading p{margin:0;color:var(--muted);font-size:.92rem}.preview-stage{min-height:650px;border-radius:12px;background:linear-gradient(45deg,#f7f9fb 25%,transparent 25%),linear-gradient(-45deg,#f7f9fb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f7f9fb 75%),linear-gradient(-45deg,transparent 75%,#f7f9fb 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;display:grid;place-items:center;padding:34px;overflow:hidden}.preview-scaler{transform-origin:center center;display:inline-block}.binder-page,.queue-card-page,.print-item{--page-width-mm:50;--page-height-mm:60;position:relative;width:calc(var(--page-width-mm)*1mm);height:calc(var(--page-height-mm)*1mm);background:#fff;border:.25mm solid var(--navy);padding:3.3mm;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;overflow:hidden;color:var(--navy)}.binder-page{box-shadow:0 4px 14px rgba(0,0,0,.12)}.image-block{width:56%;max-height:18mm;margin:0 0 2.1mm;display:flex;justify-content:center;align-items:center;flex:0 1 auto}.image-block img{width:100%;height:100%;max-height:18mm;object-fit:contain;display:block}.rule{width:86%;border-top:.25mm solid var(--navy);margin:.5mm 0 1.5mm;flex:0 0 auto}.preview-title{width:100%;margin:0;color:var(--navy);font-size:7mm;line-height:1.02;font-weight:800;white-space:nowrap;flex:0 0 auto}.preview-text{width:100%;margin:1.7mm 0 0;color:var(--navy);font-size:3.6mm;line-height:1.12;font-weight:600;overflow-wrap:anywhere;flex:0 0 auto}.preview-text.strong{font-weight:700}.mini-rule{width:26%;border-top:.25mm solid var(--navy);margin-top:1.7mm;flex:0 0 auto}.queue-panel{position:sticky;top:18px}.queue-header p{margin:-10px 0 14px;color:var(--muted);font-size:.9rem}.empty-state{border:2px dashed #cfdae3;border-radius:10px;min-height:150px;display:grid;place-items:center;align-content:center;text-align:center;color:var(--muted);gap:6px;padding:16px}.empty-state strong{color:var(--navy)}.queue-list{display:flex;flex-direction:column;gap:12px;max-height:560px;overflow:auto}.queue-item{border:1px solid var(--border);border-radius:10px;padding:10px;background:#fff}.queue-item-top{display:flex;gap:10px;align-items:center}.queue-thumb{width:74px;height:92px;background:#f7f9fb;border-radius:6px;display:grid;place-items:center;overflow:hidden;flex:0 0 auto}.queue-thumb-scaler{transform-origin:center center}.queue-meta{min-width:0;flex:1}.queue-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-size{color:var(--muted);font-size:.85rem;margin-top:3px}.remove-item{margin-top:8px;width:100%;padding:7px;color:var(--danger);background:#fff;border-color:#e3bcbc}.queue-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.app-footer{text-align:center;background:#fff;border-top:1px solid var(--border);color:#44596a;padding:15px 20px;font-size:.9rem}.app-footer span{margin:0 7px}.hidden{display:none!important}.print-root{display:block;position:fixed;left:-10000px;top:0;visibility:hidden;pointer-events:none}@media(max-width:1100px){.app-shell{grid-template-columns:minmax(300px,360px) 1fr}.queue-panel{grid-column:1/-1;position:static}.queue-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));max-height:none}}@media(max-width:760px){.app-shell{display:block;padding:12px}.panel{margin-bottom:12px}.preview-stage{min-height:470px;padding:20px}.size-grid{grid-template-columns:1fr}}@media print{@page{size:A4 portrait;margin:0}html,body{width:210mm;min-height:297mm;margin:0!important;padding:0!important;background:#fff!important}body>*:not(.print-root){display:none!important}.print-root{display:block!important;position:static!important;left:auto!important;top:auto!important;visibility:visible!important;pointer-events:auto!important;width:210mm;background:#fff}.print-sheet{width:210mm;height:297mm;position:relative;break-after:page;page-break-after:always;overflow:hidden;background:#fff}.print-sheet:last-child{break-after:auto;page-break-after:auto}.print-item{position:absolute;box-shadow:none!important;margin:0;transform:none!important}}

.text-settings {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.text-settings h3 {
  margin: 0 0 14px;
  color: var(--navy);
  font-size: 1rem;
}

.color-row {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
}

input[type="color"] {
  width: 58px;
  min-height: 42px;
  padding: 3px;
  border: 1px solid #bdc9d3;
  border-radius: 8px;
  background: #fff;
}

.size-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}

.unit-input {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border: 1px solid #bdc9d3;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.unit-input input {
  border: 0 !important;
  border-radius: 0 !important;
  min-width: 0;
}

.unit-input span {
  padding: 0 9px;
  color: var(--muted);
  font-size: .85rem;
}

.settings-note {
  margin: -2px 0 2px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.35;
}


.editing-banner {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #b9cddc;
  background: #eef5fa;
  border-radius: 8px;
  color: var(--navy);
  font-size: .9rem;
  font-weight: 700;
}

.cancel-edit {
  width: 100%;
  margin-top: 8px;
}

.header-logo{
  width:48px;
  height:48px;
  object-fit:contain;
  flex:0 0 48px;
  border-radius:50%;
}
.topbar .brand{
  display:flex;
  align-items:center;
  gap:12px;
}
@media (max-width:640px){
  .header-logo{width:40px;height:40px;flex-basis:40px}
}


/* ===== BinderMaker dark theme – v0.2.7 ===== */
:root{
  --navy:#061b2b;
  --navy-dark:#03131f;
  --navy-soft:#0a2840;
  --panel:#0b2234;
  --panel-2:#0e2a41;
  --lime:#8ee000;
  --lime-bright:#a8f000;
  --lime-soft:#6fb800;
  --white:#f7fbff;
  --text:#f2f7fb;
  --muted:#a8bac8;
  --border:#2a4a61;
  --border-strong:#4f6e82;
  --bg:#071826;
  --card:#0b2234;
  --danger:#d62d20;
}

html,body{
  background:
    radial-gradient(circle at 50% 0%, rgba(0,95,120,.18), transparent 38%),
    linear-gradient(180deg,#061725 0%,#081b2b 45%,#061521 100%);
  color:var(--text);
}

body{
  min-height:100vh;
}

.app-header,
.topbar{
  background:
    linear-gradient(180deg,#031727 0%,#062238 100%) !important;
  color:#fff !important;
  border-bottom:1px solid rgba(142,224,0,.45);
  box-shadow:0 5px 18px rgba(0,0,0,.28);
}

.app-header h1,
.topbar h1,
.brand h1{
  color:#fff !important;
}

.version{
  color:var(--lime) !important;
  opacity:1 !important;
}

.app-shell{
  background:transparent;
}

.panel{
  background:
    linear-gradient(180deg,rgba(14,42,65,.98),rgba(8,30,47,.98)) !important;
  border:1px solid var(--border) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.03);
}

.panel h2,
.panel h3,
.queue-title,
.field-group label,
.text-settings h3{
  color:var(--white) !important;
}

.preview-panel h2,
.queue-panel h2,
.text-settings h3{
  color:var(--lime) !important;
}

.field-group label span,
.panel-heading p,
.hint,
.settings-note,
.queue-size,
.queueSummary,
.queue-summary,
.queue-item-size,
.queue-header p{
  color:var(--muted) !important;
}

input[type="text"],
input[type="number"],
input[type="file"],
select{
  background:#081b2a !important;
  color:#f7fbff !important;
  border-color:#31526a !important;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder{
  color:#8096a6;
}

input:focus,
select:focus{
  border-color:var(--lime) !important;
  outline:2px solid rgba(142,224,0,.18) !important;
}

input:disabled,
select:disabled{
  background:#061522 !important;
  color:#718696 !important;
  border-color:#20384a !important;
  opacity:.85;
}

input[type="color"]{
  background:#081b2a !important;
  border-color:#31526a !important;
}

.unit-input{
  background:#081b2a !important;
  border-color:#31526a !important;
}

.unit-input span{
  color:var(--muted) !important;
}

button{
  border-color:#365b73 !important;
}

button.primary,
#addQueueBtn,
#printQueueBtn{
  background:linear-gradient(180deg,#9deb00,#79c800) !important;
  color:#06131d !important;
  border-color:#a8f000 !important;
  box-shadow:0 4px 12px rgba(126,210,0,.16);
}

button.primary:hover:not(:disabled),
#addQueueBtn:hover,
#printQueueBtn:hover:not(:disabled){
  background:linear-gradient(180deg,#b1ff14,#8bdc00) !important;
}

button.secondary,
.edit-item{
  background:#0d2b43 !important;
  color:#f3f9fd !important;
  border-color:#3d627a !important;
}

button.secondary:hover,
.edit-item:hover{
  background:#123651 !important;
}

.remove-item,
button.danger{
  background:#431418 !important;
  color:#ffefef !important;
  border-color:#a73a40 !important;
}

.remove-item:hover,
button.danger:hover{
  background:#5a171d !important;
}

button:disabled{
  opacity:.4 !important;
}

.preview-stage{
  background:
    linear-gradient(45deg,rgba(255,255,255,.03) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(255,255,255,.03) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,rgba(255,255,255,.03) 75%),
    linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.03) 75%),
    #071b2b !important;
  background-size:18px 18px !important;
  background-position:0 0,0 9px,9px -9px,-9px 0 !important;
  border:1px solid rgba(255,255,255,.03);
}

.binder-page,
.queue-card-page,
.print-item{
  background:#fff !important;
  color:#003660 !important;
}

.queue-item{
  background:linear-gradient(180deg,#0b263b,#081d2d) !important;
  border-color:#294a60 !important;
}

.queue-item-preview,
.queue-thumb{
  background:#071826 !important;
}

.empty-state{
  border-color:#35566b !important;
  color:var(--muted) !important;
  background:rgba(4,20,31,.35);
}

.empty-state h3{
  color:var(--lime) !important;
}

.text-settings{
  border-top-color:#2b4a60 !important;
}

.editing-banner{
  background:#0d3149 !important;
  border-color:#5a7a8d !important;
  color:#dfffa7 !important;
}

.app-footer{
  background:#041522 !important;
  border-top:1px solid rgba(142,224,0,.35) !important;
  color:#dbe7ef !important;
}

.app-footer a,
.app-footer strong{
  color:var(--lime) !important;
}

.header-logo{
  filter:drop-shadow(0 0 8px rgba(142,224,0,.24));
}


/* v0.2.8 – print/preview content is isolated from the dark UI theme.
   Text colors inside the binder page are controlled by app.js / user settings. */
.binder-page h1,
.binder-page h2,
.binder-page h3,
.binder-page p,
.binder-page .title,
.binder-page .text-line,
.queue-card-page h1,
.queue-card-page h2,
.queue-card-page h3,
.queue-card-page p,
.queue-card-page .title,
.queue-card-page .text-line,
.print-item h1,
.print-item h2,
.print-item h3,
.print-item p,
.print-item .title,
.print-item .text-line {
  color: inherit;
}

/* Override the interface-theme h3 rule specifically inside generated pages.
   Inline colors from BinderMaker remain authoritative. */
.panel .binder-page h3,
.panel .queue-card-page h3 {
  color: inherit !important;
}


/* v0.2.9 – generated binder content always follows the user's selected color.
   This rule is deliberately stronger than the dark interface theme. */
.binder-page .preview-title,
.binder-page .preview-text,
.queue-card-page .preview-title,
.queue-card-page .preview-text,
.print-item .preview-title,
.print-item .preview-text {
  color: var(--text-color, #000000) !important;
}

.binder-page .rule,
.binder-page .mini-rule,
.queue-card-page .rule,
.queue-card-page .mini-rule,
.print-item .rule,
.print-item .mini-rule {
  border-top-color: var(--text-color, #000000) !important;
}


/* v0.2.12 – individually selectable standard fonts for each text row */
.text-row-settings{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
}
.text-row-settings .field-group{
  margin-bottom:12px;
}
.text-row-controls{
  display:grid;
  grid-template-columns:minmax(92px,.72fr) minmax(0,1.28fr);
  gap:8px;
  align-items:center;
}
.text-row-controls .unit-input{
  min-width:0;
}
.text-row-controls select{
  min-width:0;
  width:100%;
}
@media(max-width:420px){
  .text-row-controls{grid-template-columns:1fr}
}