/* Layout: appskal – mörk toppbar, verktyg | plan + tidslinje | egenskaper. Planen är alltid innebandyns 40×20 m. */
:root{
  --bg:#E6EAE4; --panel:#FFFFFF; --panel2:#F3F5F1; --line:#D3D9CF; --ink:#14181D; --muted:#525B64;
  --accent:#C2410C; --accent-weak:#FFEEE3; --on-accent:#FFFFFF; --danger:#B42318;
  --head:#14181D; --head-ink:#F3F5F1; --head-line:#353C45; --head-muted:#AAB2BA;
  --stage:#1B2733; --stage-ink:#E7ECF0; --focus:#2563EB;
  --f-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:Barlow,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B0F13; --panel:#151A20; --panel2:#1C232A; --line:#2A323B; --ink:#E6EAEE; --muted:#A0A9B2;
  --accent:#FF8A4C; --accent-weak:#3A2418; --on-accent:#14181D; --danger:#FF8F85;
  --head:#080B0E; --head-ink:#E6EAEE; --head-line:#2A323B; --head-muted:#9AA3AC;
  --stage:#0F161D; --stage-ink:#E7ECF0; --focus:#7AA7FF; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B0F13; --panel:#151A20; --panel2:#1C232A; --line:#2A323B; --ink:#E6EAEE; --muted:#A0A9B2;
  --accent:#FF8A4C; --accent-weak:#3A2418; --on-accent:#14181D; --danger:#FF8F85;
  --head:#080B0E; --head-ink:#E6EAEE; --head-line:#2A323B; --head-muted:#9AA3AC;
  --stage:#0F161D; --stage-ink:#E7ECF0; --focus:#7AA7FF; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.35;
  padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));padding-block:12px;overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg text{font-family:var(--f-display)}

#app{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}

/* Toppbar */
.top{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--head);color:var(--head-ink);min-height:60px;min-width:0}
.brand{font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:.06em;white-space:nowrap}
.brand b{color:#FF8A4C;font-weight:700}
.titlewrap{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;padding-left:12px;border-left:1px solid var(--head-line)}
.titlewrap input{background:transparent;border:1px solid transparent;border-radius:6px;padding:2px 6px;margin-left:-6px;font-weight:600;font-size:17px;color:var(--head-ink);min-width:0;width:100%;max-width:420px}
.titlewrap input:hover{border-color:var(--head-line)}
.savestate{font-size:12px;color:var(--head-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbtn{height:44px;min-width:44px;padding:0 14px;border-radius:9px;border:1px solid var(--head-line);background:transparent;color:var(--head-ink);font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.hbtn:hover{background:rgba(255,255,255,.07)}
.hbtn:disabled{opacity:.4;cursor:default}
.hbtn.icon{padding:0}
.hbtn.primary{background:#C2410C;border-color:#C2410C;color:#FFFFFF}
.hbtn.primary:hover{background:#A8380A}
.hbtn svg{flex:none}

.main{display:grid;grid-template-columns:196px minmax(0,1fr) 304px;min-height:0;position:relative}

/* Verktyg */
.tools{border-right:1px solid var(--line);background:var(--panel);padding:12px 10px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:0}
.tgroup{font-size:11px;font-weight:600;letter-spacing:.09em;color:var(--muted);text-transform:uppercase;margin:8px 4px 2px}
.tool{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;border-radius:10px;border:1px solid transparent;background:transparent;text-align:left;font-weight:500}
.tool:hover{background:var(--panel2)}
.tool[aria-pressed="true"]{background:var(--accent-weak);border-color:var(--accent);font-weight:600}
.tool .ti{width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex:none}
.tool .tl{font-size:14px}
.toolhelp{margin-top:auto;font-size:13px;color:var(--muted);background:var(--panel2);border-radius:10px;padding:10px;line-height:1.4}

/* Plan */
.center{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0;min-height:0;background:var(--stage)}
.stagebar{display:flex;align-items:center;gap:8px;padding:8px 12px;flex-wrap:wrap;color:var(--stage-ink);min-width:0}
.seg{display:inline-flex;background:rgba(255,255,255,.08);border-radius:9px;padding:3px}
.seg button{height:36px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--stage-ink);font-size:14px}
.seg button[aria-pressed="true"]{background:#F3F5F1;color:#14181D;font-weight:600}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:14px;min-height:36px;padding:0 6px;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:#FF8A4C}
.sbtn{height:36px;padding:0 12px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--stage-ink);font-size:14px;display:inline-flex;align-items:center;gap:6px}
.sbtn:hover{background:rgba(255,255,255,.08)}
.stagebar .grow{flex:1}
.steplabel{font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:.03em;white-space:nowrap}
.stagewrap{position:relative;min-height:0;padding:6px 14px 10px}
#stage{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
.caption{position:absolute;left:24px;right:24px;bottom:18px;background:rgba(10,14,18,.86);color:#F3F5F1;border-radius:10px;padding:10px 14px;max-width:640px;margin:0 auto;pointer-events:none}
.caption b{font-family:var(--f-display);color:#FF8A4C;font-size:18px;letter-spacing:.03em;margin-right:6px}
.hint{position:absolute;top:10px;left:50%;transform:translateX(-50%);background:rgba(10,14,18,.86);color:#F3F5F1;padding:8px 14px;border-radius:20px;font-size:14px;pointer-events:none;white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}

/* Tidslinje */
.timeline{background:var(--panel);border-top:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.tlhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tlhead h2{margin:0;font-family:var(--f-display);font-weight:700;font-size:18px;letter-spacing:.04em}
.tlhead .muted{color:var(--muted);font-size:14px}
.tbtn{height:36px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:var(--panel);font-size:14px;display:inline-flex;align-items:center;gap:6px}
.tbtn:hover{background:var(--panel2)}
.tbtn:disabled{opacity:.45;cursor:default}
.tbtn.icon{width:36px;padding:0;justify-content:center}
.tbtn.danger{color:var(--danger)}
.tlhead select{height:36px;border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:0 6px}
.steps{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.stepcard{flex:none;width:146px;border:1px solid var(--line);border-radius:11px;background:var(--panel);padding:5px;display:flex;flex-direction:column;gap:4px;text-align:left}
.stepcard:hover{border-color:var(--muted)}
.stepcard[aria-current="step"]{border:2px solid var(--accent);padding:4px;background:var(--accent-weak)}
.stepcard.playing{box-shadow:0 0 0 3px #FFD43B}
.stepcard svg{width:100%;height:auto;display:block;border-radius:7px;background:#1B2733}
.stepcard .sn{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepcard .sn i{font-style:normal;color:var(--muted);font-weight:500;margin-right:4px}
.stepcard .sd{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.durwrap{display:flex;align-items:center;gap:8px}
.durctl{display:inline-flex;align-items:center;gap:4px}
.durctl input{width:60px;height:36px;border:1px solid var(--line);border-radius:9px;background:var(--panel);text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.durunit{color:var(--muted);font-size:14px;margin-right:2px}
.field .durctl input.durin{width:64px;flex:none;padding:0}
.field .durctl{align-self:flex-start}
.durchips{display:flex;flex-wrap:wrap;gap:6px}
.chipbtn{height:34px;padding:0 11px;border-radius:17px;border:1px solid var(--line);background:var(--panel);font-size:14px;font-variant-numeric:tabular-nums}
.chipbtn:hover{background:var(--panel2)}
.chipbtn[aria-pressed="true"]{border:2px solid var(--accent);background:var(--accent-weak);font-weight:600;padding:0 10px}
.addstep{flex:none;width:104px;border:2px dashed var(--line);border-radius:11px;background:var(--panel2);color:var(--muted);font-weight:600;font-size:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:92px}
.addstep:hover{border-color:var(--accent);color:var(--accent)}

/* Egenskaper */
.props{border-left:1px solid var(--line);background:var(--panel);padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:16px;min-height:0}
.ph{display:flex;align-items:center;gap:10px}
.ph-t{font-weight:600;font-size:16px;flex:1}
.ph-s{display:block;font-size:13px;color:var(--muted);font-weight:500}
.chip{width:40px;height:40px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-weight:700;font-size:18px;flex:none}
.x{width:40px;height:40px;border-radius:9px;border:0;background:transparent;font-size:24px;line-height:1;color:var(--muted);display:none}
.x:hover{background:var(--panel2)}
.sec{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.lbl{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px}
.field input[type=text],.field textarea,.field select{border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:9px 11px;font-size:15px;width:100%}
.field textarea{resize:vertical;min-height:84px;line-height:1.4}
.rangerow{display:flex;justify-content:space-between;font-size:14px}
.rangerow output{color:var(--muted);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--accent);height:28px}
.segp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.segp button{height:40px;border-radius:9px;border:1px solid var(--line);background:var(--panel);font-size:14px}
.segp button[aria-pressed="true"]{border:2px solid var(--accent);background:var(--accent-weak);font-weight:600}
.pbtn{min-height:42px;border-radius:9px;border:1px solid var(--line);background:var(--panel);font-weight:600;padding:0 14px}
.pbtn:hover{background:var(--panel2)}
.pbtn.danger{color:var(--danger)}
.pbtn.accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.note{font-size:14px;color:var(--muted);line-height:1.45;margin:0}
.legend{display:grid;grid-template-columns:62px 1fr;gap:8px 10px;align-items:center;font-size:14px}
.legend svg{background:#2E6A96;border-radius:6px;display:block}
.howto{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.4}

/* Dialoger */
.modal{position:fixed;inset:0;background:rgba(8,11,14,.6);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.dlg{background:var(--panel);color:var(--ink);border-radius:16px;width:min(920px,100%);max-height:100%;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.dh{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.dh h2{margin:0;flex:1;font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:.02em;text-wrap:balance}
.dh .x{display:flex;align-items:center;justify-content:center}
.db{padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{height:38px;padding:0 14px;border-radius:19px;border:1px solid var(--line);background:var(--panel);font-weight:500}
.tabs button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink);font-weight:600}
.row{display:flex;gap:8px;flex-wrap:wrap}
.liblist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.libcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;background:var(--panel)}
.libcard svg{display:block;width:100%;height:auto;background:#1B2733}
.libcard .lb{padding:10px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.libcard .lt{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libcard .lm{font-size:13px;color:var(--muted)}
.libcard .la{display:flex;gap:6px;padding:0 12px 12px}
.libcard .la .pbtn{min-height:36px;font-size:14px;flex:1}
.empty{border:2px dashed var(--line);border-radius:12px;padding:20px;color:var(--muted);text-align:center}
.expgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px}
.gifbox{background:#1B2733;border-radius:12px;aspect-ratio:2/1.15;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#E7ECF0;text-align:center;padding:12px;max-width:100%}
.gifbox img{max-width:100%;max-height:100%;display:block;border-radius:6px}
.prog{height:6px;border-radius:3px;background:var(--panel2);overflow:hidden}
.prog div{height:100%;width:0;background:var(--accent);transition:width .15s}
fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
legend{padding:0;margin-bottom:6px}
.radios{display:flex;gap:6px;flex-wrap:wrap}
.radios label{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:9px;cursor:pointer;font-size:14px}
.radios input{accent-color:var(--accent)}
.radios label:has(input:checked){border:2px solid var(--accent);background:var(--accent-weak);padding:0 11px}
.pchk{display:flex;align-items:center;gap:8px;min-height:36px;font-size:15px;cursor:pointer}
.pchk input{width:18px;height:18px;accent-color:var(--accent)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#14181D;color:#F3F5F1;padding:10px 16px;border-radius:10px;z-index:60;font-size:14px;max-width:calc(100% - 32px);box-shadow:0 10px 30px rgba(0,0,0,.3)}
.rotate{display:none}

/* Surfplatta */
@media (max-width:1180px){
  .main{grid-template-columns:84px minmax(0,1fr)}
  .tools{padding:10px 6px;align-items:stretch}
  .tool{flex-direction:column;gap:2px;padding:6px 2px;min-height:60px;justify-content:center;text-align:center}
  .tool .tl{font-size:11px;line-height:1.1}
  .tgroup,.toolhelp{display:none}
  .props{position:absolute;top:0;right:0;bottom:0;width:min(330px,100%);z-index:20;box-shadow:-12px 0 30px rgba(0,0,0,.25);border-left:1px solid var(--line)}
  .props:not(.open){display:none}
  .x{display:flex;align-items:center;justify-content:center}
  .brand{font-size:19px}
}
.stagebar .props-toggle{display:none}
@media (max-width:1180px){ .stagebar .props-toggle{display:inline-flex} }

/* Mobil liggande och smala skärmar */
@media (max-height:540px), (max-width:760px){
  body{padding-block:0}
  #app{border-radius:0;border:0}
  .top{min-height:48px;padding:4px 8px;gap:6px}
  .brand{display:none}
  .titlewrap{padding-left:4px;border-left:0}
  .titlewrap input{font-size:15px}
  .savestate{display:none}
  .hbtn{height:40px;min-width:40px;padding:0 10px}
  .hbtn .hl{display:none}
  .main{grid-template-columns:62px minmax(0,1fr)}
  .tool{min-height:48px}
  .tool .tl{display:none}
  .stagebar{padding:4px 8px;gap:6px}
  .stagebar .opt-l{display:none}
  .stagewrap{padding:2px 6px 4px}
  .timeline{padding:6px 8px;gap:6px}
  .tlhead h2,.tlhead .muted,.tlhead .wide{display:none}
  .stepcard{width:52px;padding:3px;align-items:center;justify-content:center;min-height:44px}
  .stepcard[aria-current="step"]{padding:2px}
  .stepcard svg{display:none}
  .stepcard .sn{font-size:15px;font-weight:700}
  .stepcard .sn span,.stepcard .sd,.durunit{display:none}
  .durctl input{width:48px}
  .stepcard .sn i{color:inherit;margin:0}
  .addstep{width:52px;min-height:44px;font-size:20px}
  .addstep span{display:none}
  .timeline{flex-direction:row;align-items:center;flex-wrap:nowrap}
  .steps{flex:1;min-width:0;padding-bottom:0}
  .tlhead{order:1;flex-wrap:nowrap;gap:6px}
  .caption{left:10px;right:10px;bottom:8px;padding:6px 10px;font-size:13px}
  .expgrid{grid-template-columns:1fr}
}
/* Mobil stående */
@media (max-width:640px) and (orientation:portrait){
  .main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .tools{grid-row:2;flex-direction:row;border-right:0;border-top:1px solid var(--line);overflow-x:auto;padding:6px}
  .tool{flex:none;width:52px}
  .rotate{display:block;font-size:12px;color:var(--stage-ink);opacity:.8;text-align:center;padding:2px 0 0}
}
@media (prefers-reduced-motion: reduce){ .prog div{transition:none} }

/* ================================================================
   Fristående app: helskärm, inloggning, konto, bibliotek, admin
   ================================================================ */
:root{ --warn:#9A4A06; --chip-bg:rgba(255,138,76,.18); --chip-ink:#FFB38A; }
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){ --warn:#FBBF24; }}
:root[data-theme="dark"]{ --warn:#FBBF24; }

body{padding:0;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
@supports (height:100dvh){ html,body{height:100dvh} }
#app{height:100%;border-radius:0;border:0}
.top{padding-top:calc(8px + env(safe-area-inset-top,0px))}
.timeline{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}

/* Startskärmar */
.screen{height:100%;overflow:auto;display:flex;align-items:center;justify-content:center;
  padding:calc(24px + env(safe-area-inset-top,0px)) 16px calc(24px + env(safe-area-inset-bottom,0px));
  background:#14181D radial-gradient(circle at 50% 50%, transparent 0 118px, rgba(255,255,255,.07) 119px 121px, transparent 122px)}
.scard{width:min(420px,100%);background:var(--panel);color:var(--ink);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:18px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.sbrand{font-family:var(--f-display);font-weight:700;font-size:26px;letter-spacing:.06em}
.sbrand b{color:var(--accent);font-weight:700}
.spart{display:flex;flex-direction:column;gap:14px}
.spart h1{margin:0;font-family:var(--f-display);font-weight:700;font-size:28px;letter-spacing:.01em;text-wrap:balance}
.sform{display:flex;flex-direction:column;gap:10px}
.sform label{font-size:14px;font-weight:600}
.sform input{height:50px;border:1px solid var(--line);border-radius:10px;padding:0 14px;font-size:17px;background:var(--panel)}
#loginCode{letter-spacing:.3em;font-size:24px;text-align:center;font-variant-numeric:tabular-nums}
.sbtn-primary{min-height:50px;border:0;border-radius:10px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:16px;padding:0 18px}
.sbtn-primary:disabled{opacity:.6}
.slink{background:none;border:0;color:var(--accent);font-weight:600;padding:0;min-height:44px}
.srow{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.smuted{color:var(--muted);margin:0;line-height:1.45}
.smuted code{background:var(--panel2);padding:1px 5px;border-radius:4px}
.smsg{color:var(--danger);margin:0}
.smsg:empty{display:none}
.sfoot{font-size:13px;color:var(--muted);margin:0;border-top:1px solid var(--line);padding-top:14px}
.spinner{width:36px;height:36px;border-radius:50%;border:4px solid var(--line);border-top-color:var(--accent);animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Toppbar: lag och konto */
.savestate{display:flex;gap:6px;align-items:center;min-width:0}
.teamchip{background:var(--chip-bg);color:var(--chip-ink);border-radius:4px;padding:1px 6px;font-weight:600;font-size:11px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.teamchip:empty{display:none}
#saveState{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbtn.acct{border-radius:50%;width:44px;font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:.04em;background:#2A3139;border-color:#2A3139}

.menu{position:fixed;z-index:45;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.28);min-width:250px;max-width:calc(100vw - 16px);padding:6px;display:flex;flex-direction:column}
.menuhead{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:4px;font-size:15px}
.menuhead span{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis}
.menu button{min-height:44px;text-align:left;border:0;background:transparent;border-radius:8px;padding:0 12px;font-weight:500}
.menu button:hover{background:var(--panel2)}

/* Bibliotek */
.libbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
#libSearch{height:38px;border:1px solid var(--line);border-radius:19px;padding:0 14px;background:var(--panel);min-width:0;flex:0 1 240px}
.libcard .lm + .lm{margin-top:-2px}

/* Dela */
.sharegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;border-top:1px solid var(--line)}
.sharegrid .sec{border-top:0;padding-top:14px}
.linkrow{display:flex;gap:6px}
.linkrow input{flex:1;min-width:0;height:42px;border:1px solid var(--line);border-radius:9px;padding:0 10px;background:var(--panel2);font-size:14px}
.pbtn:disabled{opacity:.5;cursor:default}
.field select:disabled{opacity:.6}
@media (max-width:860px){ .sharegrid{grid-template-columns:1fr} }

/* Admin */
.dlg.wide{width:min(1000px,100%)}
.card{border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--panel2)}
.card h3{margin:0;font-size:17px}
.field input[type=email]{border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:9px 11px;font-size:15px;width:100%}
.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.checks{display:flex;flex-wrap:wrap;gap:0 18px}
.checks .muted{color:var(--muted);font-size:13px}
.ulist{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.urow{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.uhead{display:flex;gap:12px;align-items:flex-start}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--accent-weak);color:var(--accent);font-family:var(--f-display);font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;font-size:17px}
.uinfo{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.uname{border:1px solid transparent;border-radius:8px;padding:4px 6px;margin-left:-6px;font-weight:600;font-size:16px;background:transparent;width:100%;max-width:360px}
.uname:hover,.uname:focus{border-color:var(--line);background:var(--panel)}
.umeta{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.umeta.warn{color:var(--warn)}
.radios.col{flex-direction:column;align-items:stretch}
.radios.col label{min-height:44px;padding:8px 12px}
.radios.col label:has(input:checked){padding:7px 11px}

/* Visningsläge (öppnad via länk, utan inloggning) */
body.viewer .edit-only, body.viewer .tools, body.viewer .props, body.viewer .addstep{display:none!important}
body.viewer .main{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important}
body.viewer .titlewrap input{pointer-events:none}
body.viewer .caption{bottom:12px}

@media (max-width:640px){
  .modal{padding:0;align-items:stretch}
  .dlg,.dlg.wide{border-radius:0;max-height:none;height:100%;width:100%}
  .dh{padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .formgrid{grid-template-columns:1fr}
  .scard{padding:22px}
}
@media (prefers-reduced-motion: reduce){ .spinner{animation:none} }
.libcard .la{flex-wrap:wrap}
.libcard .la .pbtn{flex:1 1 auto;min-width:0;padding:0 10px}
@media (max-width:640px) and (orientation:portrait){
  .timeline{flex-wrap:wrap}
  .rotate{flex-basis:100%;order:3}
  body.viewer .rotate{display:none}
}

/* ================================================================
   Översikt och Mitt konto
   ================================================================ */
.page{height:100%;display:flex;flex-direction:column;background:var(--bg)}
.page .top .grow{flex:1}
.pagebody{flex:1;min-height:0;overflow-y:auto;padding:24px 16px calc(40px + env(safe-area-inset-bottom,0px))}
.pagewrap{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.pagewrap.narrow{max-width:640px}
.page h1{font-family:var(--f-display);font-weight:700;font-size:36px;letter-spacing:.01em;margin:0;line-height:1.1}
.homehead{display:flex;gap:12px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
#homeSearch{height:42px;border:1px solid var(--line);border-radius:21px;padding:0 16px;background:var(--panel);min-width:0;flex:0 1 280px}
.nudge{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--accent-weak);border:1px solid var(--accent);border-radius:12px;padding:12px 14px}
.homeextra{padding-top:4px}

.drillgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.dcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.dcard:hover{border-color:var(--muted)}
.dopen{border:0;background:none;padding:0;margin:0;text-align:left;display:flex;flex-direction:column;cursor:pointer;flex:1;color:inherit}
.dopen > svg,.newwrap > svg{width:100%;height:auto;display:block;background:#1B2733}
.dbody{padding:12px 14px 4px;display:flex;flex-direction:column;gap:3px;min-width:0}
.dtitle{font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dmeta{font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dteam{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:0 6px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.dby{font-size:13px;color:var(--ink)}
.dby b{font-weight:600}
.dact{display:flex;gap:6px;padding:10px 12px 12px;align-items:center;flex-wrap:wrap}
.dact .pbtn{min-height:38px;font-size:14px;padding:0 12px;display:inline-flex;align-items:center;gap:6px}
.dact .grow{flex:1}
.dact .pbtn.icon{width:38px;padding:0;justify-content:center}

.newcard{border:2px dashed var(--line);background:transparent}
.newcard:hover{border-color:var(--accent)}
.newcard .dopen{position:relative}
.newwrap{position:relative;display:block}
.newwrap > svg{opacity:.5}
.newplus svg{width:30px;height:30px;display:block}
.newplus{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.newplus span{width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.newcard .dtitle{color:var(--accent)}

.acctval{margin:0;font-size:17px;font-weight:600;overflow-wrap:anywhere}
.teamlist{display:flex;flex-direction:column;gap:12px}
.teamitem{display:flex;flex-direction:column;gap:2px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.teamitem:last-child{border-bottom:0;padding-bottom:0}
.teamitem b{font-size:16px}
.card .field input[type=text]{background:var(--panel)}

@media (max-width:640px){
  .page h1{font-size:30px}
  .pagebody{padding-top:16px}
  #homeSearch{flex:1 1 100%}
  .drillgrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .dact .pbtn .hl{display:none}
}

.page .top .brand{display:block}

.pausesel{width:auto;max-width:150px;flex:none;height:36px;border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:0 6px}
#gPause{max-width:240px}
@media (max-width:1560px){ #btnStepDel .wide{display:none} #btnStepDel{width:36px;padding:0;justify-content:center} }