@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

/* ═════════ FÆLLES TOKENS (Matt) ═════════ */
:root{
  color-scheme:dark;
  --ef-bg:#141414; --ef-panel:#1c1c1c; --ef-panel2:#101010; --ef-line:#2e2e2e;
  --ef-ink:#e8e6e0; --ef-dim:#8d8a82; --ef-acc:#c8f060; --ef-accfg:#111111;
  --ef-err:#ff8a6b; --ef-font:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
  --ef-shadow:rgba(0,0,0,.6); --ef-veil:rgba(20,20,20,.92);
}
:root[data-theme=light]{
  color-scheme:light;
  --ef-bg:#e9e8e4; --ef-panel:#f6f5f1; --ef-panel2:#ffffff; --ef-line:#d2d0c8;
  --ef-ink:#181816; --ef-dim:#66645c; --ef-acc:#4a6300; --ef-accfg:#ffffff;
  --ef-err:#c2391f; --ef-shadow:rgba(0,0,0,.2); --ef-veil:rgba(233,232,228,.94);
}

/* ═════════ FÆLLES HEADER (← Suite + lys/mørk) ═════════ */
:root{--ef-bar:36px}
#ef-bar{box-sizing:border-box;height:var(--ef-bar);display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;background:var(--ef-panel);border-bottom:1px solid var(--ef-line);position:relative;z-index:99999;
  font:400 10px/1 var(--ef-font);letter-spacing:.14em;text-transform:uppercase}
#ef-bar a,#ef-bar span,#ef-bar button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ef-dim);
  background:transparent;border:0;border-radius:0;padding:6px 0;margin:0;width:auto;text-decoration:none;cursor:pointer}
#ef-bar a:hover,#ef-bar button:hover{color:var(--ef-acc);background:transparent}
#ef-bar span{cursor:default}
html[data-app] body{min-height:calc(100vh - var(--ef-bar))}
html[data-app=frame-studio] body{height:calc(100vh - var(--ef-bar))}
html[data-app=echozine] body{height:calc(100% - var(--ef-bar))}
html[data-app=echozine] #bTheme{display:none}
html[data-app=matt] main{min-height:calc(100vh - 70px - var(--ef-bar))}
html[data-app=framer] .layout{min-height:calc(100vh - 62px - var(--ef-bar))}

/* ═════════ MATT ═════════ */
html[data-app=matt][data-theme]{--bg:var(--ef-bg);--panel:var(--ef-panel);--line:var(--ef-line);--ink:var(--ef-ink);--dim:var(--ef-dim);--acc:var(--ef-acc)}
html[data-app=matt] input,html[data-app=matt] select,html[data-app=matt] button{background:var(--ef-panel2)}
html[data-app=matt] button.primary{background:var(--ef-acc);color:var(--ef-accfg)}
html[data-app=matt] button.primary:hover{color:var(--ef-accfg)}
html[data-app=matt] .err{color:var(--ef-err)}
html[data-app=matt] #wrap{box-shadow:0 6px 30px var(--ef-shadow)}

/* ═════════ ECHOZINE (har egne tokens; justeres til Matt) ═════════ */
html[data-app=echozine][data-theme]{--bg:var(--ef-bg);--panel:var(--ef-panel);--line:var(--ef-line);--ink:var(--ef-ink);--dim:var(--ef-dim);--acc:var(--ef-acc);--accfg:var(--ef-accfg);--inp:var(--ef-panel2);--red:var(--ef-err)}

/* ═════════ FÆLLES OVERSKRIFTER ═════════ */
html[data-app] h1,html[data-app] .logo,html[data-app] header h1,html[data-app] .top h1{
  font-family:var(--ef-font);font-weight:700;font-style:normal;letter-spacing:.05em;text-transform:uppercase}
html[data-app] h1 em,html[data-app] .logo em{font-style:normal;font-weight:700}

/* ═════════ FORSIDE ═════════ */
html[data-app=index][data-theme]{--paper:var(--ef-bg);--paper2:var(--ef-panel);--paper3:var(--ef-line);--ink:var(--ef-ink);--ink2:var(--ef-dim);--ink3:var(--ef-dim);--rust:var(--ef-acc)}
html[data-app=index] body{font-family:var(--ef-font)}
html[data-app=index] body::before{display:none}
html[data-app=index] .name{font-family:var(--ef-font);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.05em}
html[data-app=index] .card:hover .num,html[data-app=index] .card:hover .arrow{color:var(--ef-acc)}

/* ═════════ FRAME STUDIO ═════════ */
html[data-app=frame-studio][data-theme]{--bg:var(--ef-bg);--surface:var(--ef-panel);--surface2:var(--ef-panel2);--border:var(--ef-line);--border2:color-mix(in srgb,var(--ef-line),var(--ef-ink) 18%);--ink:var(--ef-ink);--ink2:var(--ef-dim);--ink3:var(--ef-dim);--gold:var(--ef-acc);--gold2:var(--ef-acc);--red:var(--ef-err)}
html[data-app=frame-studio] header,html[data-app=frame-studio] footer{background:var(--ef-panel);border-color:var(--ef-line)}
html[data-app=frame-studio] header{border-bottom:2px solid var(--ef-acc)}
html[data-app=frame-studio] footer{border-top:1px solid var(--ef-line)}
html[data-app=frame-studio] header h1{color:var(--ef-ink);font-size:16px}
html[data-app=frame-studio] .stat .sk{color:var(--ef-dim)}
html[data-app=frame-studio] .stat-sep{color:var(--ef-line)}
html[data-app=frame-studio] .btn-primary{color:var(--ef-accfg)}
html[data-app=frame-studio] .btn-accent{background:var(--ef-panel);color:var(--ef-acc)}
html[data-app=frame-studio] .btn-accent:hover{background:var(--ef-panel2)}
html[data-app=frame-studio] .upload-zone:hover,html[data-app=frame-studio] .upload-zone.drag-over{background:var(--ef-panel2)}
html[data-app=frame-studio] .canvas-area{background-image:linear-gradient(rgba(128,128,128,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(128,128,128,.08) 1px,transparent 1px)}

/* ═════════ FUJI SIM ═════════ */
html[data-app=fujisim][data-theme]{--bg:var(--ef-bg);--panel:var(--ef-panel);--border:var(--ef-line);--gold:var(--ef-acc);--gold-dim:var(--ef-dim);--text:var(--ef-ink);--text-dim:var(--ef-dim);--active-bg:var(--ef-panel2)}
html[data-app=fujisim] .dropzone:hover,html[data-app=fujisim] .dropzone.drag{background:var(--ef-panel2)}
html[data-app=fujisim] .crop-ok-btn:hover,html[data-app=fujisim] .dl-btn:hover,html[data-app=fujisim] #toast{color:var(--ef-accfg)}

/* ═════════ IMGCONV ═════════ */
html[data-app=imgconv][data-theme]{--bg:var(--ef-bg);--surface:var(--ef-panel);--surface2:var(--ef-panel2);--border:var(--ef-line);--accent:var(--ef-acc);--accent2:var(--ef-acc);--text:var(--ef-ink);--muted:var(--ef-dim);--danger:var(--ef-err)}
html[data-app=imgconv] body::before{background-image:linear-gradient(color-mix(in srgb,var(--ef-acc) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ef-acc) 5%,transparent) 1px,transparent 1px)}
html[data-app=imgconv] .fmt-btn.active,html[data-app=imgconv] #dlZipBtn,html[data-app=imgconv] .dl-link:hover{color:var(--ef-accfg)}
html[data-app=imgconv] #dlZipBtn:hover{background:var(--ef-acc);filter:brightness(1.12)}
html[data-app=imgconv] .check-row input[type=checkbox]:checked::after{color:var(--ef-accfg)}
html[data-app=imgconv] #dragOverlay.active,html[data-app=imgconv] #dragOverlay.lit{background:var(--ef-veil)}
html[data-app=imgconv] #convertBtn{font-family:var(--ef-font);font-style:normal;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:12px}

/* ═════════ LOMO EDITOR ═════════ */
html[data-app=lomo][data-theme]{--cream:var(--ef-bg);--surface:var(--ef-panel);--border:var(--ef-line);--red:var(--ef-acc);--dark:var(--ef-ink);--ink2:var(--ef-dim);--ink3:var(--ef-dim)}
html[data-app=lomo] .filmstrip{background:var(--ef-panel);border-bottom:1px solid var(--ef-line)}
html[data-app=lomo] .sprocket{border-color:color-mix(in srgb,var(--ef-ink) 22%,transparent)}
html[data-app=lomo] .upload-zone:hover,html[data-app=lomo] .upload-zone.drag-over{background:var(--ef-panel2)}
html[data-app=lomo] .btn-primary{color:var(--ef-accfg)}
html[data-app=lomo] .btn-primary:hover:not(:disabled){background:var(--ef-acc);filter:brightness(1.12)}
html[data-app=lomo] .processing{background:var(--ef-veil)}
html[data-app=lomo] .status.done{color:var(--ef-acc)}
html[data-app=lomo] h1{font-size:clamp(40px,9vw,72px)}

/* ═════════ IMAGECARD (framer) ═════════ */
html[data-app=framer][data-theme]{--bg:var(--ef-bg);--panel:var(--ef-panel);--panel2:var(--ef-panel2);--line:var(--ef-line);--text:var(--ef-ink);--dim:var(--ef-dim);--accent:var(--ef-acc);--accent-dim:color-mix(in srgb,var(--ef-acc) 35%,var(--ef-panel))}
html[data-app=framer] .btn{color:var(--ef-accfg)}
html[data-app=framer] .top h1{font-size:18px}

/* ═════════ DARKROOM PIPELINE ═════════ */
html[data-app=darkroom][data-theme]{--bg:var(--ef-bg);--surface:var(--ef-panel);--panel:var(--ef-panel);--panel2:var(--ef-panel2);--line:var(--ef-line);--line2:color-mix(in srgb,var(--ef-line),var(--ef-ink) 18%);--text:var(--ef-ink);--dim:var(--ef-dim);--dim2:var(--ef-dim);--accent:var(--ef-acc);--accent-dim:var(--ef-acc)}
html[data-app=darkroom] body{height:calc(100vh - var(--ef-bar))}
html[data-app=darkroom] header,html[data-app=darkroom] footer{background:var(--ef-panel);border-color:var(--ef-line)}
html[data-app=darkroom] header{border-bottom:2px solid var(--ef-acc)}
html[data-app=darkroom] footer{border-top:1px solid var(--ef-line)}
html[data-app=darkroom] header h1{color:var(--ef-ink);font-size:16px}
html[data-app=darkroom] .header-sub,html[data-app=darkroom] .stat .sk{color:var(--ef-dim)}
html[data-app=darkroom] .stat-sep{color:var(--ef-line)}
html[data-app=darkroom] .btn-primary{color:var(--ef-accfg)}
html[data-app=darkroom] .btn-primary:hover{background:var(--ef-acc);filter:brightness(1.12)}
html[data-app=darkroom] .btn-danger{border-color:var(--ef-err);color:var(--ef-err)}
html[data-app=darkroom] .btn-danger:hover{background:var(--ef-err);color:var(--ef-accfg)}
html[data-app=darkroom] .canvas-area{background-image:linear-gradient(rgba(128,128,128,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(128,128,128,.08) 1px,transparent 1px)}
html[data-app=darkroom] .canvas-placeholder p{font-family:var(--ef-font);font-style:normal}

/* ═════════ FILM BORDER ═════════ */
html[data-app=filmborder][data-theme]{--bg:var(--ef-bg);--panel:var(--ef-panel);--panel2:var(--ef-panel2);--line:var(--ef-line);--text:var(--ef-ink);--dim:var(--ef-dim);--accent:var(--ef-acc);--accent-dim:color-mix(in srgb,var(--ef-acc) 35%,var(--ef-panel))}
html[data-app=filmborder] body{height:calc(100% - var(--ef-bar))}