/*
    Schichtwerk – Bestellseite, Styles
    ===================================
    Alle Farben stehen als Variablen hier oben in :root{...} – wenn du z. B. das Orange (--accent) gegen eine
    andere Farbe tauschen willst, reicht es, den Wert hier einmal zu ändern; er wird überall automatisch
    übernommen. --blue-* = die dunkelblauen "Blueprint"-Hintergrundtöne, --ink-* = Textfarben (hell -> gedimmt),
    --accent = die Signalfarbe für Buttons/Preis/Links, --ok/--danger = Grün/Rot für Status-Hinweise.
  */
  :root{
    --blue-950:#0a2036;
    --blue-900:#0f2b45;
    --blue-850:#123351;
    --blue-800:#173d5e;
    --blue-700:#1f4d72;
    --line:rgba(180,210,235,0.16);
    --line-strong:rgba(180,210,235,0.28);
    --paper:#eef2f0;
    --ink:#e9f1f6;
    --ink-dim:#9fb9cc;
    --ink-faint:#6d8ba0;
    --accent:#ff7a29;
    --accent-ink:#1a0d02;
    --accent-dim:#c85f1c;
    --ok:#7fd18c;
    --danger:#ff8a80;
    --mono:ui-monospace,"SF Mono","Cascadia Mono","Consolas","Liberation Mono",monospace;
    --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  html{ scroll-padding-top:env(safe-area-inset-top,0px); }
  *{ box-sizing:border-box; }
  html,body{ margin:0; }
  body{
    background:
      radial-gradient(1100px 700px at 12% -10%, var(--blue-800), transparent 60%),
      radial-gradient(900px 600px at 110% 10%, var(--blue-850), transparent 55%),
      var(--blue-950);
    color:var(--ink);
    font-family:var(--sans);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    min-height:100%;
  }
  /* Das feine Karo-Muster im Hintergrund (wie Blueprint/Konstruktionspapier). Größe der Karos = background-size unten. */
  .grid-bg{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:28px 28px;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.35) 60%, transparent 100%);
    mask-image:linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.35) 60%, transparent 100%);
  }
  .wrap{ position:relative; z-index:1; max-width:920px; margin:0 auto; padding:0 20px 100px; }

  /* ---------- header ---------- */
  header.hero{ padding:56px 0 28px; border-bottom:1px solid var(--line); margin-bottom:36px; }
  /* Firmenname oben im Header, "werk" farbig abgesetzt */
  .brand{ font-family:var(--mono); font-size:14px; letter-spacing:.06em; color:var(--ink-dim); text-transform:uppercase; margin-bottom:14px; }
  .brand span{ color:var(--accent); }
  .tag{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--mono); font-size:12.5px; color:var(--ink-dim);
    border:1px solid var(--line-strong); border-radius:999px; padding:5px 12px;
    margin-bottom:18px;
  }
  .tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); }
  h1{
    font-size:clamp(30px,5vw,46px); line-height:1.08; margin:0 0 14px; font-weight:600;
    letter-spacing:-0.01em;
    max-width:16ch;
  }
  header.hero p{ color:var(--ink-dim); max-width:52ch; margin:0; font-size:15.5px; }

  /* ---------- sections ---------- */
  section{ margin-bottom:34px; }
  .step{
    display:flex; align-items:baseline; gap:12px; margin-bottom:16px;
  }
  .step .num{
    font-family:var(--mono); font-size:12px; color:var(--blue-950);
    background:var(--ink-dim); border-radius:5px; padding:2px 7px; flex:none;
  }
  .step h2{ font-size:18px; margin:0; font-weight:600; }
  .step .hint{ font-size:13px; color:var(--ink-faint); margin-left:auto; font-family:var(--mono); }

  .panel{
    background:rgba(255,255,255,0.035);
    border:1px solid var(--line);
    border-radius:14px;
    padding:22px;
  }

  /* ---------- upload ---------- */
  .dropzone{
    border:1.5px dashed var(--line-strong);
    border-radius:12px;
    padding:34px 20px;
    text-align:center;
    cursor:pointer;
    transition:border-color .15s, background .15s;
  }
  .dropzone:hover, .dropzone.drag{
    border-color:var(--accent);
    background:rgba(255,122,41,0.06);
  }
  .dropzone svg{ width:34px; height:34px; color:var(--ink-faint); margin-bottom:10px; }
  .dropzone .main{ font-size:15px; margin-bottom:4px; }
  .dropzone .main b{ color:var(--accent); font-weight:600; }
  .dropzone .sub{ font-size:12.5px; color:var(--ink-faint); font-family:var(--mono); }
  input[type="file"]{ display:none; }

  .preview-area{ display:none; margin-top:18px; }
  .preview-area.show{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  @media (max-width:640px){ .preview-area.show{ grid-template-columns:1fr; } }

  .canvas-box{
    position:relative; border:1px solid var(--line); border-radius:10px;
    background:linear-gradient(180deg, var(--blue-900), var(--blue-950));
    aspect-ratio:1/1; overflow:hidden; touch-action:none;
  }
  .canvas-box canvas{ display:block; width:100%; height:100%; }
  .canvas-box .drag-hint{
    position:absolute; bottom:8px; left:0; right:0; text-align:center;
    font-family:var(--mono); font-size:10.5px; color:var(--ink-faint);
    letter-spacing:.02em; pointer-events:none;
  }
  .canvas-box .file-badge{
    position:absolute; top:8px; left:8px; right:8px;
    display:flex; justify-content:space-between; gap:8px;
    font-family:var(--mono); font-size:10.5px; color:var(--ink-dim);
    pointer-events:none;
  }

  .stats{ display:flex; flex-direction:column; gap:10px; font-size:13.5px; }
  .stats .row{
    display:flex; justify-content:space-between; gap:10px;
    border-bottom:1px solid var(--line); padding-bottom:9px;
  }
  .stats .row span:first-child{ color:var(--ink-faint); }
  .stats .row span:last-child{ font-family:var(--mono); text-align:right; }
  .stats .note{ font-size:11.5px; color:var(--ink-faint); line-height:1.5; margin-top:2px; }
  .remove-file{
    align-self:flex-start; margin-top:auto;
    font-family:var(--mono); font-size:12px; color:var(--danger);
    background:none; border:1px solid rgba(255,138,128,0.35); border-radius:7px;
    padding:6px 10px; cursor:pointer;
  }
  .remove-file:hover{ background:rgba(255,138,128,0.08); }

  /* ---------- mehrere STL-Dateien: Liste + "weitere Datei"-Button ---------- */
  .file-list{ display:flex; flex-direction:column; gap:8px; }
  .file-item{
    display:flex; align-items:center; gap:10px;
    border:1px solid var(--line); border-radius:8px; padding:9px 10px;
    cursor:pointer; font-size:12.5px;
  }
  .file-item:hover{ border-color:var(--line-strong); }
  .file-item.active{ border-color:var(--accent); background:rgba(255,122,41,0.06); }
  .file-item .fi-name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .file-item .fi-meta{ font-family:var(--mono); color:var(--ink-faint); font-size:11px; white-space:nowrap; }
  .file-item .fi-remove{
    background:none; border:none; color:var(--danger); cursor:pointer; font-size:15px; line-height:1; padding:2px 4px;
  }
  .add-file-btn{
    align-self:flex-start;
    font-family:var(--mono); font-size:12px; color:var(--ink-dim);
    background:none; border:1px dashed var(--line-strong); border-radius:7px;
    padding:8px 12px; cursor:pointer;
  }
  .add-file-btn:hover{ border-color:var(--accent); color:var(--accent); }
  #totalsRow{ border-top:1px solid var(--line-strong); padding-top:9px; margin-top:2px; font-weight:600; }

  /* ---------- Ablauf-/Produktionszeit-Hinweis vor dem Absenden-Button ---------- */
  .process-note{
    display:flex; gap:12px; align-items:flex-start;
    border:1px solid var(--line-strong); border-radius:12px;
    background:rgba(127,209,140,0.06);
    padding:16px 18px; font-size:13.5px; color:var(--ink-dim); line-height:1.6;
  }
  .process-note .process-icon{ font-size:20px; flex:none; }
  .process-note b{ color:var(--ink); }

  /* ---------- Slicer-Box, Bauraum-Check & Skalierung ---------- */
  .slicer-box{
    margin-top:10px;
    background:rgba(15,43,69,0.55);
    border:1px solid var(--line-strong);
    border-radius:10px;
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .slicer-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
  }
  .slicer-title{ font-size:13px; font-weight:600; color:var(--ink); }
  .bauraum-badge{
    font-family:var(--mono);
    font-size:11px;
    background:rgba(180,210,235,0.1);
    border:1px solid var(--line-strong);
    color:var(--ink-dim);
    padding:3px 8px;
    border-radius:6px;
  }
  .dim-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:8px;
    background:rgba(10,32,54,0.6);
    border:1px solid var(--line);
    border-radius:8px;
    padding:8px 10px;
  }
  .dim-item{ display:flex; flex-direction:column; gap:2px; }
  .dim-item label{ font-size:10.5px; font-family:var(--mono); color:var(--ink-faint); }
  .dim-item span{ font-family:var(--mono); font-size:13px; font-weight:600; color:var(--ink); }

  .bauraum-alert{
    display:flex;
    gap:10px;
    align-items:flex-start;
    background:rgba(255,138,128,0.12);
    border:1px solid var(--danger);
    border-radius:8px;
    padding:10px 12px;
    color:var(--ink);
    font-size:12.5px;
    animation:pulseAlert 2s infinite ease-in-out;
  }
  @keyframes pulseAlert{
    0%,100%{ border-color:var(--danger); }
    50%{ border-color:rgba(255,138,128,0.4); }
  }
  .bauraum-alert .alert-icon{ font-size:16px; flex:none; }
  .bauraum-alert .alert-text{ display:flex; flex-direction:column; gap:2px; line-height:1.4; }
  .bauraum-alert .alert-text b{ color:var(--danger); font-size:13px; }

  .scale-row{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12.5px;
    font-family:var(--mono);
  }
  .scale-row label{ color:var(--ink-dim); flex:none; }
  .scale-row input[type="range"]{ flex:1; }
  .scale-input-wrap{
    display:flex;
    align-items:center;
    gap:4px;
    background:var(--blue-900);
    border:1px solid var(--line-strong);
    border-radius:6px;
    padding:2px 6px;
    width:74px;
    flex:none;
  }
  .scale-input-wrap input{
    width:100%;
    border:none;
    background:none;
    color:var(--accent);
    font-family:var(--mono);
    font-size:13px;
    font-weight:600;
    padding:2px 0;
    text-align:right;
    outline:none;
  }
  .scale-input-wrap span{ color:var(--ink-faint); font-size:12px; }

  .scale-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .scale-btn{
    flex:1;
    font-family:var(--sans);
    font-size:12px;
    font-weight:600;
    padding:7px 10px;
    border-radius:6px;
    border:1px solid var(--accent);
    background:rgba(255,122,41,0.12);
    color:var(--accent);
    cursor:pointer;
    transition:all .15s;
    text-align:center;
  }
  .scale-btn:hover{
    background:var(--accent);
    color:var(--accent-ink);
  }
  .scale-btn.secondary{
    border-color:var(--line-strong);
    background:none;
    color:var(--ink-dim);
    flex:none;
  }
  .scale-btn.secondary:hover{
    border-color:var(--ink-dim);
    color:var(--ink);
  }

  /* ---------- Druckverfahren-Karten ---------- */
  .method-selection{ margin-bottom:20px; }
  .method-cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:6px;
  }
  @media (max-width:640px){ .method-cards{ grid-template-columns:1fr; } }
  .method-card{
    position:relative;
    display:flex;
    gap:12px;
    align-items:flex-start;
    background:rgba(15,43,69,0.6);
    border:1.5px solid var(--line-strong);
    border-radius:12px;
    padding:14px;
    cursor:pointer;
    transition:all .15s ease;
    user-select:none;
  }
  .method-card input{ display:none; }
  .method-card:hover{ border-color:var(--line-strong); background:rgba(23,61,94,0.7); }
  .method-card.selected{
    border-color:var(--accent);
    background:linear-gradient(135deg, rgba(255,122,41,0.12), rgba(15,43,69,0.8));
    box-shadow:0 0 16px rgba(255,122,41,0.15);
  }
  .method-card .mc-icon{ font-size:24px; line-height:1; flex:none; margin-top:2px; }
  .method-card .mc-info{ display:flex; flex-direction:column; gap:4px; }
  .method-card .mc-title{
    font-size:15px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px;
  }
  .method-card .mc-badge{
    font-size:10.5px; font-family:var(--mono); font-weight:400;
    background:rgba(180,210,235,0.12); border:1px solid var(--line-strong);
    border-radius:4px; padding:2px 6px; color:var(--ink-dim);
  }
  .method-card .mc-badge.resin{
    background:rgba(255,122,41,0.15); border-color:rgba(255,122,41,0.4); color:var(--accent);
  }
  .method-card .mc-sub{ font-size:12px; color:var(--ink-dim); line-height:1.4; }
  .method-card .mc-sub b{ color:var(--ink); font-family:var(--mono); }

  /* ---------- SLA-spezifische Boxen ---------- */
  .resin-fixed-info, .sla-postprocess-box{
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--blue-900);
    border:1px solid var(--line-strong);
    border-radius:8px;
    padding:11px 14px;
    font-size:13.5px;
  }
  .resin-fixed-info .dot{
    width:16px; height:16px; border-radius:50%; border:1px solid rgba(255,255,255,0.3); flex:none;
    box-shadow:0 0 8px rgba(112,116,122,0.6);
  }
  .resin-fixed-info b{ color:var(--ink); font-size:14px; }
  .resin-fixed-sub{ font-size:11.5px; color:var(--ink-faint); margin-top:1px; }

  .sla-fragile-note{
    display:flex;
    gap:10px;
    align-items:flex-start;
    background:rgba(255,122,41,0.08);
    border:1px solid rgba(255,122,41,0.3);
    border-radius:8px;
    padding:10px 12px;
    font-size:12.5px;
    color:var(--ink-dim);
    line-height:1.5;
    margin-top:12px;
  }
  .sla-fragile-note .fragile-icon{ font-size:16px; flex:none; }
  .sla-fragile-note b{ color:var(--accent); font-weight:600; }

  .sla-postprocess-box{ background:rgba(127,209,140,0.06); border-color:rgba(127,209,140,0.3); }
  .sla-postprocess-box .post-icon{ font-size:20px; flex:none; }
  .sla-postprocess-box b{ color:var(--ok); font-size:13.5px; }
  .sla-postprocess-box .post-sub{ font-size:11.5px; color:var(--ink-dim); margin-top:2px; }

  /* ---------- form fields ---------- */
  .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  @media (max-width:640px){ .grid2{ grid-template-columns:1fr; } }
  .field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
  .field:last-child{ margin-bottom:0; }
  .field label{ font-size:12.5px; font-family:var(--mono); color:var(--ink-dim); }
  .field .label-row{ display:flex; justify-content:space-between; }
  .field .label-row .val{ color:var(--accent); }

  select, input[type="text"], input[type="email"]{
    background:var(--blue-900); border:1px solid var(--line-strong); color:var(--ink);
    border-radius:8px; padding:11px 12px; font-family:var(--sans); font-size:14.5px;
    width:100%; appearance:none;
  }
  select:focus, input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
  select{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239fb9cc'><path d='M5.5 7.5l4.5 5 4.5-5'/></svg>");
    background-repeat:no-repeat; background-position:right 12px center; padding-right:34px;
  }
  input[type="range"]{ width:100%; accent-color:var(--accent); height:22px; }

  /* ---------- Farbmodus & Mehrfarbdruck ---------- */
  .color-mode-tabs{
    display:flex;
    gap:8px;
    margin-top:4px;
  }
  .color-mode-btn{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 12px;
    border:1px solid var(--line-strong);
    border-radius:8px;
    background:rgba(15,43,69,0.6);
    color:var(--ink-dim);
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    user-select:none;
    transition:all .15s;
  }
  .color-mode-btn input{ display:none; }
  .color-mode-btn:hover{ border-color:var(--line-strong); color:var(--ink); }
  .color-mode-btn.selected{
    border-color:var(--accent);
    background:rgba(255,122,41,0.12);
    color:var(--accent);
    font-weight:600;
  }

  .swatch .standard-tag{
    color:var(--ok);
    font-family:var(--mono);
    font-size:10.5px;
    background:rgba(127,209,140,0.1);
    border:1px solid rgba(127,209,140,0.3);
    padding:1px 5px;
    border-radius:4px;
  }

  .multicolor-box{
    background:rgba(10,32,54,0.65);
    border:1px solid var(--line-strong);
    border-radius:10px;
    padding:14px;
  }
  .multicolor-box .m-title{
    font-size:12.5px;
    color:var(--ink);
    font-weight:600;
    margin-bottom:10px;
  }
  .purge-waste-note{
    display:flex;
    gap:10px;
    align-items:flex-start;
    background:rgba(255,122,41,0.08);
    border:1px dashed rgba(255,122,41,0.4);
    border-radius:8px;
    padding:10px 12px;
    font-size:12px;
    color:var(--ink-dim);
    line-height:1.5;
    margin-top:12px;
  }
  .purge-waste-note .waste-icon{ font-size:16px; flex:none; }
  .purge-waste-note b{ color:var(--accent); display:block; margin-bottom:2px; font-size:12.5px; }

  .swatches{ display:flex; gap:10px; flex-wrap:wrap; }
  .swatch{
    display:flex; align-items:center; gap:8px;
    border:1px solid var(--line-strong); border-radius:8px; padding:8px 12px;
    cursor:pointer; font-size:13px; user-select:none;
  }
  .swatch input{ margin:0; accent-color:var(--accent); }
  .swatch .dot{ width:14px; height:14px; border-radius:50%; border:1px solid rgba(255,255,255,0.25); flex:none; }
  .swatch.selected{ border-color:var(--accent); background:rgba(255,122,41,0.08); }
  .swatch .surcharge{ color:var(--accent); font-family:var(--mono); font-size:11px; }
  .custom-color-input{ margin-top:10px; display:none; }
  .custom-color-input.show{ display:block; }

  /* ---------- price panel ---------- */
  .price-panel{
    border:1px solid var(--line-strong); border-radius:14px;
    background:linear-gradient(180deg, rgba(255,122,41,0.07), rgba(255,122,41,0.02));
    padding:22px;
  }
  .price-panel .label{ font-family:var(--mono); font-size:12px; color:var(--ink-dim); margin-bottom:6px; }
  .price-panel .amount{ font-size:38px; font-weight:600; color:var(--accent); display:flex; align-items:baseline; gap:8px; }
  .price-panel .amount small{ font-size:14px; color:var(--ink-faint); font-weight:400; font-family:var(--mono); }
  .price-breakdown{ margin-top:16px; display:flex; flex-direction:column; gap:6px; font-size:13px; }
  .price-breakdown .row{ display:flex; justify-content:space-between; color:var(--ink-dim); }
  .price-breakdown .row span:last-child{ font-family:var(--mono); color:var(--ink); }
  .price-fine{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-faint); line-height:1.6; }
  .price-fine b{ color:var(--ink-dim); }

  /* ---------- submit ---------- */
  .submit-btn{
    width:100%; padding:16px; border-radius:10px; border:none;
    background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:15.5px;
    cursor:pointer; font-family:var(--sans);
  }
  .submit-btn:disabled{ opacity:.4; cursor:not-allowed; }
  .submit-btn:not(:disabled):hover{ background:#ff8a42; }
  .form-msg{ font-size:12.5px; color:var(--ink-faint); margin-top:10px; text-align:center; }
  .form-msg.err{ color:var(--danger); }

  /* ---------- privacy footer ---------- */
  footer{ margin-top:50px; padding-top:22px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-faint); }
  footer b{ color:var(--ink-dim); }
  /* Links zu Datenschutz/Impressum unter dem Datenschutz-Absatz */
  footer .legal-links{ margin-top:10px; }
  footer .legal-links a{ color:var(--ink-dim); text-decoration:underline; }
  footer .legal-links a:hover{ color:var(--accent); }

  /* ---------- rechtstexte (Datenschutz/Impressum-Seiten) ---------- */
  .legal h2{ font-size:18px; margin:28px 0 10px; }
  .legal h2:first-child{ margin-top:0; }
  .legal p, .legal li{ font-size:14px; color:var(--ink-dim); line-height:1.7; }
  .legal ul{ padding-left:20px; margin:8px 0; }
  .legal a{ color:var(--accent); }
  .back-link{ display:inline-block; margin-bottom:26px; font-family:var(--mono); font-size:13px; color:var(--ink-dim); text-decoration:none; }
  .back-link:hover{ color:var(--accent); }

  /* ---------- modal ---------- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(5,15,25,0.72); z-index:50;
    display:none; align-items:center; justify-content:center; padding:20px;
    backdrop-filter:blur(3px);
  }
  .modal-overlay.show{ display:flex; }
  .modal{
    background:var(--blue-900); border:1px solid var(--line-strong); border-radius:14px;
    max-width:460px; width:100%; padding:26px; max-height:86vh; overflow-y:auto;
  }
  .modal h3{ margin:0 0 12px; font-size:18px; }
  .modal ol{ padding-left:20px; font-size:13.5px; color:var(--ink-dim); line-height:1.7; margin:0 0 18px; }
  .modal ol li b{ color:var(--ink); }
  .modal-actions{ display:flex; flex-direction:column; gap:10px; }
  .modal-actions a, .modal-actions button{
    display:block; text-align:center; padding:12px; border-radius:8px; font-size:14px;
    font-family:var(--sans); text-decoration:none; cursor:pointer; border:1px solid var(--line-strong);
  }
  .modal-actions .primary{ background:var(--accent); color:var(--accent-ink); border:none; font-weight:600; }
  .modal-actions .secondary{ background:transparent; color:var(--ink-dim); }
  .modal-close{
    position:absolute; top:14px; right:16px; background:none; border:none; color:var(--ink-faint);
    font-size:20px; cursor:pointer; line-height:1;
  }
  .modal{ position:relative; }
  
  /* ---------- error modal ---------- */
  .error-modal{
    max-width:380px;
    text-align:center;
  }
  .error-icon{
    font-size:42px; margin-bottom:12px;
  }
  .error-modal h3{
    margin:0 0 10px; font-size:18px; color:var(--danger);
  }
  .error-modal p{
    margin:0 0 16px; font-size:13.5px; color:var(--ink-dim); line-height:1.6;
  }
  .error-modal .modal-actions{ flex-direction:row; }
  .error-modal .modal-actions .primary{
    flex:1;
  }

  /* ---------- Paint Toolbar ---------- */
  .paint-toolbar{
    display:flex;
    flex-direction:column;
    gap:14px;
    background:rgba(15,43,69,0.75);
    border:1px solid var(--line-strong);
    border-radius:12px;
    padding:18px 20px;
    box-shadow:0 8px 24px rgba(0,0,0,0.3);
  }
  .paint-card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:10px;
    border-bottom:1px solid var(--line);
  }
  .paint-title{
    font-size:14px;
    font-weight:700;
    color:var(--ink);
  }
  .paint-badge{
    font-family:var(--mono);
    font-size:11px;
    background:rgba(255,122,41,0.15);
    color:var(--accent);
    padding:3px 8px;
    border-radius:6px;
    border:1px solid rgba(255,122,41,0.3);
  }
  .paint-section{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .paint-label{
    font-size:11.5px;
    font-family:var(--mono);
    color:var(--ink-dim);
  }
  .paint-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:rgba(15,43,69,0.9);
    border:1px solid var(--line-strong);
    border-radius:8px;
    color:var(--ink);
    font-size:13px;
    font-weight:600;
    padding:10px 14px;
    cursor:pointer;
    font-family:var(--sans);
    transition:all .2s;
  }
  .paint-btn:hover{ border-color:var(--accent); color:var(--accent); }
  .paint-btn.active{
    background:rgba(255,122,41,0.2);
    border-color:var(--accent);
    color:var(--accent);
    box-shadow:0 0 15px rgba(255,122,41,0.25);
  }
  .paint-palette{
    display:flex;
    gap:10px;
    align-items:center;
    background:rgba(10,32,54,0.6);
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px 12px;
  }
  .paint-color-dot{
    width:30px;
    height:30px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.2);
    cursor:pointer;
    transition:transform .15s, border-color .15s;
  }
  .paint-color-dot:hover{ transform:scale(1.18); border-color:rgba(255,255,255,0.6); }
  .paint-color-dot.active{
    border:2px solid #fff;
    box-shadow:0 0 0 3px var(--accent);
    transform:scale(1.18);
  }
  .paint-brush-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .paint-val{
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--accent);
    font-weight:600;
  }
  .paint-reset-btn{
    background:transparent;
    border:1px solid var(--line-strong);
    border-radius:8px;
    color:var(--ink-dim);
    font-size:12.5px;
    padding:8px 12px;
    cursor:pointer;
    font-family:var(--sans);
    transition:all .15s;
    text-align:center;
  }
  .paint-reset-btn:hover{ border-color:#e55; color:#e55; background:rgba(238,85,85,0.06); }
  .paint-hint-box{
    font-size:11.5px;
    line-height:1.5;
    color:var(--ink-dim);
    background:rgba(6,17,30,0.6);
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px 12px;
  }
  .canvas-box.paint-active canvas{ cursor:crosshair !important; }