:root {
  --bg:#F5F3EE;--surface:#FFF;--surface2:#EDE9E0;--ink:#1A1714;--ink2:#5C5650;--ink3:#9C948A;
  --accent:#2D5F3F;--al:#E8F2EC;--amber:#B8621A;--ambl:#FDF0E6;--blue:#1D4068;--bl:#E6EEF8;
  --purple:#5B3E7E;--pl:#EDE8F5;--red:#8B2E2E;--rl:#F5E8E8;--teal:#1D5C68;--tl:#E6F2F5;
  --orange:#9B4A10;--ol:#FDEEDE;--slate:#3A4A5C;--sll:#E8ECF2;--border:#D8D2C8;
  --sh:0 2px 16px rgba(26,23,20,.08);--shlg:0 8px 40px rgba(26,23,20,.14);--r:12px;--rs:8px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;font-size:14px;line-height:1.6;}

/* HEADER */
header{background:var(--ink);color:#fff;padding:20px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.hl h1{font-family:'DM Serif Display',serif;font-size:21px;font-weight:400;}
.hl p{font-size:11px;color:rgba(255,255,255,.5);margin-top:2px;}
.hr{display:flex;gap:8px;align-items:center;}
.hbdg{padding:4px 12px;border-radius:40px;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;}
.hbdg.g{background:var(--accent);color:#fff;}.hbdg.b{background:#1D4068;color:#fff;}
.sbtn{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);padding:5px 13px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;}
.sbtn:hover{background:rgba(255,255,255,.18);}

/* TABS */
.tb{background:var(--surface);border-bottom:1px solid var(--border);padding:0 40px;display:flex;overflow-x:auto;scrollbar-width:none;}
.tb::-webkit-scrollbar{display:none;}
.tab{padding:11px 15px;font-size:12px;font-weight:500;color:var(--ink2);cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;user-select:none;transition:all .2s;}
.tab:hover{color:var(--ink);}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600;}
.tsep{padding:11px 5px 11px 14px;font-size:10px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.6px;border-bottom:3px solid transparent;align-self:flex-end;}

/* MAIN */
.main{padding:24px 40px;}
.stitle{font-family:'DM Serif Display',serif;font-size:17px;font-weight:400;margin-bottom:4px;}
.ssub{font-size:12px;color:var(--ink3);margin-bottom:16px;}
.tc{display:none;}.tc.active{display:block;}

/* MODULE CARDS */
.ovg{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
.glbl{grid-column:1/-1;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--ink3);padding:8px 0 2px;border-top:1px solid var(--border);margin-top:2px;}
.glbl:first-child{border-top:none;padding-top:0;margin-top:0;}
.mc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:15px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;}
.mc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.mc:hover{transform:translateY(-2px);box-shadow:var(--shlg);}
.mcn{font-size:10px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;}
.mct{font-family:'DM Serif Display',serif;font-size:14px;margin-bottom:7px;line-height:1.3;}
.mctags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px;}
.tag{font-size:10px;padding:2px 6px;border-radius:3px;background:var(--surface2);color:var(--ink2);font-weight:500;}
.mcd{font-size:11px;color:var(--ink2);line-height:1.5;}
.mcf{margin-top:9px;padding-top:8px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.cx{font-size:10px;font-weight:600;padding:2px 7px;border-radius:3px;}
.cxlo{background:var(--al);color:var(--accent);}.cxme{background:var(--ambl);color:var(--amber);}.cxhi{background:var(--rl);color:var(--red);}
.ppill{font-size:10px;font-weight:600;padding:2px 8px;border-radius:3px;background:var(--surface2);color:var(--ink3);}
.c-amber::before{background:#B8621A;}.c-amber2::before{background:#C4891A;}.c-orange::before{background:#9B4A10;}.c-amber3::before{background:#7A3808;}
.c-blue::before{background:#1D4068;}.c-purple::before{background:#5B3E7E;}.c-green::before{background:#2D5F3F;}
.c-teal::before{background:#1D5C68;}.c-red::before{background:#8B2E2E;}.c-slate::before{background:#3A4A5C;}

/* DETAIL PAGE */
.dh{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 22px;margin-bottom:16px;display:flex;gap:14px;align-items:flex-start;}
.dbar{width:4px;border-radius:4px;flex-shrink:0;align-self:stretch;min-height:50px;}
.dhi h2{font-family:'DM Serif Display',serif;font-size:19px;font-weight:400;margin-bottom:4px;}
.dhi p{font-size:13px;color:var(--ink2);line-height:1.5;}
.bbdg{display:inline-flex;align-items:center;gap:4px;background:var(--bl);color:var(--blue);font-size:10px;font-weight:700;padding:2px 8px;border-radius:3px;margin-top:6px;text-transform:uppercase;}

.da{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:16px;}
.ac{background:var(--surface);border:1px solid var(--border);border-radius:var(--rs);padding:12px 14px;}
.al{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--ink3);margin-bottom:5px;}
.av{font-size:12px;color:var(--ink);line-height:1.5;}
.av ul{list-style:none;padding:0;}
.av ul li::before{content:'→ ';color:var(--accent);font-weight:700;}

/* FLOWS */
.dfb{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 20px;margin-bottom:16px;}
.dfb h3{font-family:'DM Serif Display',serif;font-size:14px;font-weight:400;margin-bottom:10px;}
.fi{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:var(--rs);font-size:12px;margin-bottom:6px;}
.fi.in{background:var(--al);}.fi.out{background:var(--ambl);}
.fid{font-size:9px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:3px;flex-shrink:0;}
.fi.in .fid{background:var(--accent);color:#fff;}.fi.out .fid{background:var(--amber);color:#fff;}
.fit{flex:1;}.fim{font-size:10px;color:var(--ink3);font-weight:500;}

/* QUESTIONS - NEW 3-PART STRUCTURE */
.qs-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:16px;}
.qsh{padding:14px 18px 11px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.qsh h3{font-family:'DM Serif Display',serif;font-size:14px;font-weight:400;}
.qprog{font-size:11px;color:var(--ink3);} .qprog span{color:var(--accent);font-weight:700;}
.pbar{height:3px;background:var(--surface2);}
.pbarf{height:100%;background:var(--accent);transition:width .3s;}

/* ── QUESTION CARDS ── */
.qi { border-bottom:1px solid var(--border); }
.qi:last-child { border-bottom:none; }

.qi-hdr {
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 18px 14px; cursor:pointer; user-select:none;
  transition:background .15s;
}
.qi-hdr:hover { background:#FAFAF8; }

.qi-num {
  background:var(--surface2); color:var(--ink3); font-size:10px; font-weight:700;
  min-width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px;
}
.qi-num.done { background:var(--accent); color:#fff; }
.qi-q { flex:1; min-width:0; }
.qi-qtxt { font-size:13px; font-weight:600; color:var(--ink); line-height:1.45; }
.qi-board {
  font-size:10px; color:var(--blue); background:var(--bl);
  padding:2px 8px; border-radius:4px; margin-top:4px;
  display:inline-block; font-weight:500;
}
.qi-toggle {
  font-size:18px; color:var(--ink3); flex-shrink:0;
  line-height:1; transition:transform .2s; padding-top:2px;
}
.qi-toggle.open { transform:rotate(90deg); }

.qi-body {
  display:none;
  padding:0 20px 18px 50px; /* left-indent aligns with question text */
  border-top:1px solid var(--surface2);
  background:#FCFBF9;
}
.qi-body.open { display:block; }

/* Parts inside body */
.qi-part { margin-top:14px; }
.qi-part:first-child { margin-top:14px; }

.qi-part-label {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.6px; margin-bottom:6px;
  display:flex; align-items:center; gap:6px;
}
.qi-part-label.catalog { color:var(--blue); }
.qi-part-label.workshop { color:var(--accent); }

.qi-catalog-box {
  background:var(--bl); border:1px solid #B0C8E8;
  border-radius:var(--rs); padding:10px 14px;
  font-size:12px; color:var(--ink2); line-height:1.6;
  white-space:pre-line; margin-bottom:0;
}
.qi-catalog-ref {
  font-size:10px; color:var(--blue); font-weight:600;
  background:rgba(29,64,104,.1); padding:1px 6px; border-radius:3px;
}

.qi-ans { }
.qi-ans textarea {
  width:100%; border:1px solid var(--border); border-radius:var(--rs);
  padding:10px 12px; font-family:'DM Sans',sans-serif; font-size:13px;
  color:var(--ink); background:var(--surface); resize:vertical; min-height:72px;
  transition:all .2s; line-height:1.5;
}
.qi-ans textarea:focus { outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(45,95,63,.08); }
.qi-ans textarea.filled { background:var(--al); border-color:#7ABC90; }
.qi-ans textarea::placeholder { color:var(--ink3); }

.qi-foot {
  display:flex; justify-content:space-between; align-items:center;
  gap:8px; margin-top:10px; padding-top:10px;
  border-top:1px solid var(--border);
}
.qibdg { font-size:10px; font-weight:600; padding:3px 9px; border-radius:4px; }
.so { background:var(--surface2); color:var(--ink3); }
.sd { background:var(--al); color:var(--accent); }
.sc { background:var(--ambl); color:var(--amber); }
.scat { background:var(--bl); color:var(--blue); }

.qi-foot-btns { display:flex; gap:6px; }
.qbtn { font-size:11px; font-weight:600; padding:4px 11px; border-radius:5px; cursor:pointer; border:none; transition:background .15s; }
.qbtn.d { background:var(--accent); color:#fff; }
.qbtn.d:hover { background:#245030; }
.qbtn.c { background:var(--ambl); color:var(--amber); border:1px solid #E8A060; }
.qbtn.c:hover { background:#F0C890; }

/* ── LOGIN SCREEN ── */
#login-screen{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #164e3a 70%, #0f172a 100%);
  background-size:400% 400%;
  animation:loginBgShift 12s ease infinite;
  overflow:hidden;
}
#login-screen::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 80%, rgba(45,100,64,.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(59,130,246,.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.02) 0%, transparent 70%);
  pointer-events:none;
}
#login-screen::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
}
@keyframes loginBgShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.login-box{
  background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.2);
  border-radius:16px;padding:40px 44px;width:400px;position:relative;z-index:1;
  box-shadow:0 25px 60px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.1);
  backdrop-filter:blur(20px);
}
.login-box h2{font-family:'DM Serif Display',serif;font-size:24px;font-weight:400;margin-bottom:4px;color:var(--ink);}
.login-box p{font-size:12px;color:var(--ink3);margin-bottom:24px;}
.login-logo{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:28px;}
.login-logo span{font-size:11px;color:var(--ink3);letter-spacing:.5px;}
.lf-label{font-size:11px;font-weight:600;color:var(--ink2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px;}
.lf-input{width:100%;border:1.5px solid #e2e8f0;border-radius:10px;padding:11px 14px;font-size:13px;font-family:'DM Sans',sans-serif;background:#f8fafc;color:var(--ink);outline:none;margin-bottom:14px;transition:all .2s;}
.lf-input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(45,100,64,.1);}
.lf-btn{width:100%;background:var(--accent);color:#fff;border:none;border-radius:10px;padding:12px;font-size:14px;font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .2s;letter-spacing:.3px;}
.lf-btn:hover{background:#245030;transform:translateY(-1px);box-shadow:0 4px 12px rgba(45,100,64,.3);}
.lf-btn:disabled{background:var(--ink3);cursor:not-allowed;transform:none;box-shadow:none;}
.lf-err{font-size:13px;color:#B91C1C;background:#FEE2E2;border:1px solid #FECACA;border-radius:8px;padding:10px 14px;margin-top:12px;display:none;line-height:1.5;}
.lf-ok{font-size:12px;color:var(--accent);margin-top:10px;display:none;}

/* ── USER INDICATOR in header ── */
.user-chip{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:4px 12px 4px 8px;cursor:pointer;font-size:11px;color:rgba(255,255,255,.8);transition:background .15s;}
.user-chip:hover{background:rgba(255,255,255,.15);}
.user-avatar{width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--ink);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.role-pill{font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px;text-transform:uppercase;letter-spacing:.3px;}
.role-pill.bdg_admin{background:#8B2E2E;color:#fff;}
.role-pill.bdg_berater{background:var(--accent);color:#fff;}
.role-pill.kunde_editor{background:#6366F1;color:#fff;}
.role-pill.kunde_leser{background:var(--bl);color:var(--blue);}

/* ── SYNC STATUS ── */
#sync-dot{width:8px;height:8px;border-radius:50%;background:#666;display:inline-block;margin-right:4px;transition:background .3s;}
#sync-dot.ok{background:#4CAF50;}
#sync-dot.saving{background:var(--amber);animation:pulse .8s ease-in-out infinite;}
#sync-dot.err{background:var(--red);}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
/* ── SETTINGS INTERNAL TABS ── */
@keyframes spin{to{transform:rotate(360deg)}}
.stg-tabs{display:flex;gap:4px;padding:0 0 16px;border-bottom:1px solid var(--border);margin-bottom:20px;}
.stg-tab{padding:7px 16px;border-radius:var(--rs);font-size:12px;font-weight:600;cursor:pointer;color:var(--ink2);background:var(--surface2);border:1px solid var(--border);transition:all .15s;user-select:none;}
.stg-tab:hover{color:var(--ink);background:var(--surface);}
.stg-tab.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.stg-panel{display:none;}
.stg-panel.active{display:block;}

.swlane{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:16px;overflow:hidden;}
.sw-title{padding:12px 18px;background:var(--ink);color:#fff;font-family:'DM Serif Display',serif;font-size:14px;font-weight:400;}
.sw-title span{font-family:'DM Sans',sans-serif;font-size:11px;color:rgba(255,255,255,.5);margin-left:10px;font-weight:400;}
.sw-grid{display:grid;}
.sw-row{display:contents;}
.sw-lane-label{background:var(--surface2);padding:10px 14px;font-size:11px;font-weight:600;color:var(--ink2);border-right:2px solid var(--border);border-bottom:1px solid var(--border);display:flex;align-items:center;min-width:110px;}
.sw-cell{padding:8px 6px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);vertical-align:top;min-height:48px;}
.sw-step{border-radius:6px;padding:5px 8px;font-size:11px;font-weight:500;line-height:1.3;margin-bottom:4px;border:1px solid transparent;transition:box-shadow .15s,opacity .15s;}
.sw-step.green{background:var(--al);border-color:#7ABC90;color:var(--accent);}
.sw-step.amber{background:var(--ambl);border-color:#E8A060;color:var(--amber);}
.sw-step.blue{background:var(--bl);border-color:#6A9BC8;color:var(--blue);}
.sw-step.purple{background:var(--pl);border-color:#9B78C8;color:var(--purple);}
.sw-step.red{background:var(--rl);border-color:#C87878;color:var(--red);}
.sw-step.gray{background:var(--surface2);border-color:var(--border);color:var(--ink2);}

/* Drag & Drop */
.sw-draggable { user-select:none; }
.sw-draggable:hover { box-shadow:0 2px 8px rgba(0,0,0,.12); }
.sw-draggable:active { cursor:grabbing; }
.sw-dragging { opacity:.4; transform:scale(.97); transition:opacity .1s,transform .1s; }
.sw-droppable { transition:background .15s; }
.sw-drop-target { background:var(--al) !important; outline:2px dashed var(--accent); outline-offset:-2px; }
.sw-hdr{background:var(--ink);color:#fff;padding:8px 6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;text-align:center;border-right:1px solid rgba(255,255,255,.1);}
.sw-hdr:first-child{background:var(--ink);border-right:2px solid rgba(255,255,255,.15);}
.sw-arrow{font-size:11px;color:var(--ink3);text-align:center;padding:2px 0;}

/* FLOW DIAGRAM (big tab) */
.flow-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:22px 26px;margin-bottom:20px;}
.flow-box h2{font-family:'DM Serif Display',serif;font-size:17px;font-weight:400;margin-bottom:4px;}
.flow-box .fsub{font-size:12px;color:var(--ink3);margin-bottom:18px;}
.frow{display:grid;gap:9px;margin-bottom:5px;}
.frow.c5{grid-template-columns:repeat(5,1fr);}.frow.c4{grid-template-columns:repeat(4,1fr);}.frow.c3{grid-template-columns:repeat(3,1fr);}
.fnode{border-radius:var(--rs);padding:10px 12px;cursor:pointer;border:1.5px solid transparent;transition:all .15s;}
.fnode:hover{transform:translateY(-2px);box-shadow:var(--sh);}
.fnode.nc{cursor:default;}
.fnl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;}
.fnt{font-size:12px;font-weight:500;line-height:1.3;}
.n-amber{background:var(--ambl);border-color:#E8A060;} .n-amber .fnl{color:var(--amber);}
.n-blue{background:var(--bl);border-color:#6A9BC8;} .n-blue .fnl{color:var(--blue);}
.n-purple{background:var(--pl);border-color:#9B78C8;} .n-purple .fnl{color:var(--purple);}
.n-teal{background:var(--tl);border-color:#5A9CAC;} .n-teal .fnl{color:var(--teal);}
.n-green{background:var(--al);border-color:#7ABC90;} .n-green .fnl{color:var(--accent);}
.n-red{background:var(--rl);border-color:#C87878;} .n-red .fnl{color:var(--red);}
.n-slate{background:var(--sll);border-color:#8A9CB0;} .n-slate .fnl{color:var(--slate);}
.n-orange{background:var(--ol);border-color:#D4904A;} .n-orange .fnl{color:var(--orange);}
.farrows{display:grid;gap:9px;margin:3px 0;}
.facol{display:flex;flex-direction:column;align-items:center;gap:1px;}
.falbl{font-size:10px;color:var(--ink3);text-align:center;max-width:110px;line-height:1.2;}
.faico{color:var(--accent);font-size:15px;}

/* BIG FLOW TABLE */
.bft{width:100%;border-collapse:collapse;font-size:12px;}
.bft th{text-align:left;padding:8px 11px;font-weight:600;color:var(--ink2);font-size:10px;text-transform:uppercase;letter-spacing:.4px;background:var(--surface2);}
.bft td{padding:8px 11px;border-bottom:1px solid var(--border);}
.bft tr:nth-child(even) td{background:#FAFAF8;}

/* KONSOLIDIERUNG SPECIAL */
.konso-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.kf{background:var(--surface);border:1px solid var(--border);border-radius:var(--rs);padding:12px 14px;text-align:center;}
.kf-val{font-family:'DM Serif Display',serif;font-size:22px;color:var(--blue);font-weight:400;}
.kf-lbl{font-size:10px;color:var(--ink3);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-top:2px;}

/* EXPORT */
.expbar{background:#FFFBF0;border:1px solid #E8D890;border-radius:var(--r);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;}
.expbar p{font-size:12px;color:#7A6020;}
.expbtn{background:#7A6020;color:#fff;border:none;padding:6px 14px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;}

@media(max-width:1024px){
  .main{padding:16px;}.da{grid-template-columns:1fr 1fr;}.ovg{grid-template-columns:repeat(2,1fr);}
  header{padding:14px 16px;}.tb{padding:0 16px;}.konso-facts{grid-template-columns:repeat(2,1fr);}
}

/* ── STATUS SYSTEM ── */
/* Module card status states */
.mc.status-done {
  border-color: #7ABC90 !important;
  background: linear-gradient(135deg, #F0FAF4 0%, #fff 60%);
}
.mc.status-done::before { background: var(--accent) !important; }
.mc.status-progress { border-color: #E8A060 !important; }
.mc.status-progress::before { background: var(--amber) !important; }

/* Status badge on card */
.mc-status-badge {
  position: absolute; top: 10px; right: 10px;
  font-size: 10px; font-weight: 700; padding: 3px 8px;
  border-radius: 12px; letter-spacing: .3px; pointer-events: none;
}
.mc-status-badge.done  { background: var(--accent); color: #fff; }
.mc-status-badge.prog  { background: var(--amber);  color: #fff; }
.mc-status-badge.open  { background: var(--surface2); color: var(--ink3); }

/* Status header bar on overview */
.status-bar {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px 22px; margin-bottom: 20px;
}
.status-bar-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.status-bar-header h3 {
  font-family: 'DM Serif Display', serif; font-size: 16px; font-weight: 400;
}
.status-bar-summary {
  font-size: 12px; color: var(--ink3); font-weight: 500;
}
.status-bar-summary span { font-weight: 700; color: var(--accent); }
.status-progress-outer {
  height: 8px; background: var(--surface2); border-radius: 4px;
  overflow: hidden; margin-bottom: 12px;
}
.status-progress-inner {
  height: 100%; background: var(--accent);
  border-radius: 4px; transition: width .5s ease;
}
.status-modules-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.status-mod-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px; font-size: 11px;
  font-weight: 600; cursor: pointer; transition: all .15s;
  border: 1px solid transparent;
}
.status-mod-chip:hover { transform: translateY(-1px); }
.status-mod-chip.done  { background: var(--al); color: var(--accent); border-color: #7ABC90; }
.status-mod-chip.prog  { background: var(--ambl); color: var(--amber); border-color: #E8A060; }
.status-mod-chip.open  { background: var(--surface2); color: var(--ink2); border-color: var(--border); }
.status-mod-chip .chip-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.status-mod-chip.done .chip-dot  { background: var(--accent); }
.status-mod-chip.prog .chip-dot  { background: var(--amber); }
.status-mod-chip.open .chip-dot  { background: var(--ink3); }

/* Tab dots */
.tab-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-left: 5px; vertical-align: middle; flex-shrink: 0;
}
.tab-dot.done { background: var(--accent); }
.tab-dot.prog { background: var(--amber); }

/* Module close button */
.mod-close-btn {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r); padding: 14px 20px; margin-bottom: 16px;
  justify-content: space-between;
}
.mod-close-btn .mcs-info { font-size: 13px; color: var(--ink2); }
.mod-close-btn .mcs-info strong { color: var(--ink); display: block; font-size: 14px; margin-bottom: 2px; }
.btn-in-progress {
  background: var(--surface2); color: var(--amber); border: 1.5px solid var(--amber);
  padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background .2s, color .2s;
}
.btn-in-progress:hover { background: var(--ambl); }
.btn-in-progress.active { background: var(--ambl); color: var(--amber); border-color: var(--amber); }
.btn-in-progress.active:hover { background: var(--rl); color: var(--red); border-color: #C87878; }
.btn-mark-done {
  background: var(--accent); color: #fff; border: none;
  padding: 9px 20px; border-radius: 8px; font-size: 13px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .2s;
}
.btn-mark-done:hover { background: #245030; }
.btn-mark-done.is-done {
  background: var(--surface2); color: var(--ink3); border: 1.5px solid var(--border);
  cursor: pointer;
}
.btn-mark-done.is-done:hover { background: var(--rl); color: var(--red); border-color: #C87878; }

/* ── QUESTION TABS (clustered qs) ── */
.qtab-bar {
  display: flex; gap: 0; border-bottom: 2px solid var(--border);
  padding: 0 18px; background: var(--surface); overflow-x: auto;
  scrollbar-width: none;
}
.qtab-bar::-webkit-scrollbar { display: none; }
.qtab-btn {
  padding: 10px 16px; font-size: 12px; font-weight: 500;
  color: var(--ink2); cursor: pointer; white-space: nowrap;
  border: none; background: transparent;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s; user-select: none;
  display: flex; align-items: center; gap: 4px;
}
.qtab-btn:hover { color: var(--ink); }
.qtab-btn.active { font-weight: 700; }
.qtab-panel { display: none; }
.qtab-panel.active { display: block; }

/* ── SUB-TABS ── */
.subtab-bar { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:0; overflow-x:auto; }
.subtab-btn { padding:10px 18px; font-size:12px; font-weight:500; color:var(--ink2); cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; user-select:none; transition:all .2s; margin-bottom:-2px; background:transparent; border-top:none; border-left:none; border-right:none; }
.subtab-btn:hover { color:var(--ink); }
.subtab-btn.active { font-weight:700; border-bottom-color: var(--accent); color:var(--accent); }
.subtab-content { display:none; }
.subtab-content.active { display:block; }
.subtab-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-bottom:16px; }
.subtab-header { padding:12px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.subtab-header .st-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.subtab-header h4 { font-family:'DM Serif Display',serif; font-size:15px; font-weight:400; }
.subtab-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px; }

/* ── EDIT MODE ── */
.edit-mode .editable-wrap { position:relative; }
.edit-pen {
  position:absolute; top:4px; right:4px; opacity:0;
  background:var(--accent); color:#fff; border:none;
  width:22px; height:22px; border-radius:50%; font-size:11px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:opacity .2s; z-index:10; line-height:1; flex-shrink:0;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.edit-pen:hover { background:#245030; }
.edit-mode .edit-pen { opacity:1; }
.edit-mode .ac, .edit-mode .dhi, .edit-mode .mc, .edit-mode .kf,
.edit-mode .editable-wrap { position:relative; }
/* Attribute box icon toolbar */
.attr-icon {
  cursor:pointer; width:20px; height:20px; border-radius:5px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; transition:all .15s; flex-shrink:0; border:1.5px solid;
}
.attr-icon-info {
  border-color:#3B82F6; background:#EFF6FF; color:#3B82F6;
  font-weight:700; font-style:italic; font-family:Georgia,serif;
}
.attr-icon-info:hover { background:#3B82F6; color:#fff; }
.attr-icon-hist {
  border-color:#D97706; background:#FFFBEB; color:#92400E;
}
.attr-icon-hist:hover { background:#D97706; color:#fff; }
.attr-icon-edit {
  border-color:var(--accent); background:var(--al); color:var(--accent);
  display:none;
}
.attr-icon-edit:hover { background:var(--accent); color:#fff; }
.edit-mode .attr-icon-edit { display:inline-flex; }
.df-btn {
  display:none; border:1.5px solid var(--accent); background:var(--al); color:var(--accent);
  border-radius:5px; padding:2px 6px; font-size:10px; cursor:pointer; height:20px;
  margin-left:4px; align-items:center;
}
.edit-mode .df-btn { display:inline-flex; }
.df-add-row { display:none; margin-top:6px; gap:8px; }
.edit-mode .df-add-row { display:flex; }

/* Edit modal */
.edit-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:1000; align-items:center; justify-content:center;
}
.edit-overlay.open { display:flex; }
.edit-modal {
  background:#fff; border-radius:var(--r); padding:24px 26px; width:520px;
  max-width:90vw; max-height:85vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}
.edit-modal h3 { font-family:'DM Serif Display',serif; font-size:17px; font-weight:400; margin-bottom:4px; }
.edit-modal p { font-size:12px; color:var(--ink3); margin-bottom:14px; }
.edit-modal label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--ink3); display:block; margin-bottom:5px; }
.edit-modal textarea, .edit-modal input[type=text] {
  width:100%; border:1px solid var(--border); border-radius:var(--rs);
  padding:9px 11px; font-family:'DM Sans',sans-serif; font-size:13px;
  color:var(--ink); background:var(--bg); resize:vertical;
}
.edit-modal textarea:focus, .edit-modal input:focus { outline:none; border-color:var(--accent); background:#fff; }
.edit-modal .modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
.edit-modal .btn-save { background:var(--accent); color:#fff; border:none; padding:8px 20px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; }
.edit-modal .btn-save:hover { background:#245030; }
.edit-modal .btn-cancel { background:var(--surface2); color:var(--ink2); border:none; padding:8px 16px; border-radius:6px; font-size:13px; cursor:pointer; }
/* ── PROJECT WIZARD ────────────────────────────────── */
.wiz-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.5);
  z-index:1001; align-items:center; justify-content:center;
}
.wiz-overlay.open { display:flex; }
.wiz-modal {
  background:#fff; border-radius:var(--r); width:680px; max-width:94vw;
  max-height:88vh; display:flex; flex-direction:column;
  box-shadow:0 24px 80px rgba(0,0,0,.3);
}
.wiz-header { padding:20px 24px 0; }
.wiz-header h3 { font-family:'DM Serif Display',serif; font-size:18px; font-weight:400; margin:0 0 12px; }
.wiz-steps { display:flex; gap:4px; margin-bottom:16px; }
.wiz-step {
  flex:1; height:4px; border-radius:2px; background:var(--border); transition:background .2s;
}
.wiz-step.done { background:var(--accent); }
.wiz-step.active { background:var(--accent); }
.wiz-body { padding:0 24px 16px; overflow-y:auto; flex:1; min-height:200px; }
.wiz-body label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--ink3); display:block; margin:12px 0 5px; }
.wiz-body input, .wiz-body select, .wiz-body textarea {
  width:100%; border:1px solid var(--border); border-radius:var(--rs);
  padding:9px 11px; font-family:'DM Sans',sans-serif; font-size:13px;
  color:var(--ink); background:var(--bg); box-sizing:border-box;
}
.wiz-body input:focus, .wiz-body select:focus { outline:none; border-color:var(--accent); }
.wiz-footer { padding:12px 24px 20px; display:flex; gap:8px; justify-content:flex-end; border-top:1px solid var(--border); }
.wiz-footer button {
  padding:8px 20px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; border:none;
}
.wiz-btn-back { background:var(--surface2); color:var(--ink2); }
.wiz-btn-next { background:var(--accent); color:#fff; }
.wiz-btn-next:hover { background:#245030; }
.wiz-btn-next:disabled { opacity:.5; cursor:not-allowed; }
/* Drag & Drop module picker */
.wiz-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; min-height:260px; }
.wiz-col { border:1.5px dashed var(--border); border-radius:var(--rs); padding:10px; min-height:200px; }
.wiz-col-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--ink3); margin-bottom:8px; }
.wiz-col.drop-over { border-color:var(--accent); background:rgba(45,100,60,.04); }
.wiz-mod {
  padding:8px 12px; margin-bottom:6px; border-radius:6px; font-size:13px; font-weight:500;
  cursor:grab; transition:all .15s; display:flex; align-items:center; gap:8px;
  border:1px solid var(--border); background:#fff;
}
.wiz-mod:active { cursor:grabbing; }
.wiz-mod .wiz-mod-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.wiz-mod .wiz-mod-cat { font-size:10px; color:var(--ink3); margin-left:auto; }
/* User assignment */
.wiz-user-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); }
.wiz-user-row:last-child { border-bottom:none; }
.wiz-user-name { flex:1; font-size:13px; }
.wiz-user-email { font-size:11px; color:var(--ink3); }
.wiz-user-row select { width:160px; flex-shrink:0; }

.sw-editbar {
  display:none; padding:8px 12px; background:#F0F8F3; border-bottom:1px solid var(--border);
  align-items:center; gap:8px; flex-wrap:wrap;
}
.edit-mode .sw-editbar { display:flex; }
.sw-edbtn {
  font-size:11px; font-weight:600; padding:4px 10px; border-radius:5px; cursor:pointer;
  border:1px solid var(--accent); background:var(--al); color:var(--accent);
}
.sw-edbtn:hover { background:var(--accent); color:#fff; }
.sw-edbtn.amber { border-color:var(--amber); background:var(--ambl); color:var(--amber); }
.sw-edbtn.amber:hover { background:var(--amber); color:#fff; }
.sw-col-hdr { cursor:default; }
.edit-mode .sw-col-hdr { cursor:pointer; }
.edit-mode .sw-col-hdr:hover { background:#2a2a2a; }
.edit-mode-indicator {
  position:fixed; bottom:16px; right:16px; background:var(--accent); color:#fff;
  padding:8px 16px; border-radius:20px; font-size:12px; font-weight:600;
  z-index:999; display:none; box-shadow:var(--sh);
}
.edit-mode .edit-mode-indicator { display:block; }
#editModeBtn.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* ── PROJECT SELECTOR ── */
.proj-bar {
  background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.1);
  padding: 0 40px; display: flex; align-items: center; gap: 12px;
  height: 38px; overflow: hidden;
}
.proj-bar-label { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: .6px; flex-shrink: 0; }
.proj-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.proj-chips::-webkit-scrollbar { display: none; }
.proj-chip {
  padding: 4px 12px; border-radius: 14px; font-size: 11px; font-weight: 600;
  cursor: pointer; white-space: nowrap; border: 1px solid transparent;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.6);
  transition: all .15s; flex-shrink: 0;
}
.proj-chip:hover { background: rgba(255,255,255,.15); color: #fff; }
.proj-chip.active {
  background: var(--accent); color: #fff; border-color: rgba(255,255,255,.2);
}
.proj-chip-add {
  padding: 4px 10px; border-radius: 14px; font-size: 13px; font-weight: 400;
  cursor: pointer; color: rgba(255,255,255,.4); background: transparent;
  border: 1px dashed rgba(255,255,255,.2); flex-shrink: 0; line-height: 1;
  transition: all .15s;
}
.proj-chip-add:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.proj-bar-actions { display: flex; gap: 6px; flex-shrink: 0; }
.proj-bar-btn {
  font-size: 10px; font-weight: 600; padding: 3px 10px; border-radius: 5px;
  cursor: pointer; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); transition: all .15s;
}
.proj-bar-btn:hover { background: rgba(255,255,255,.18); color: #fff; }

/* ── SETTINGS PAGE ── */
.settings-page { max-width: 900px; }
.settings-page-hdr {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px; gap: 20px;
}
.settings-page-hdr h2 { font-family:'DM Serif Display',serif; font-size:22px; font-weight:400; margin-bottom:4px; }
.settings-page-hdr p  { font-size:12px; color:var(--ink3); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.settings-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden;
}
.settings-card-hdr {
  padding: 14px 18px 12px; border-bottom: 1px solid var(--border);
  background: var(--surface2);
  display: flex; align-items: center; gap: 8px;
}
.settings-card-hdr h4 { font-size:12px; font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.5px; }
.settings-card-body { padding: 16px 18px; }
.settings-field { margin-bottom: 14px; }
.settings-field:last-child { margin-bottom: 0; }
.settings-field label {
  font-size:11px; font-weight:600; color:var(--ink3); display:block; margin-bottom:5px;
  text-transform:uppercase; letter-spacing:.4px;
}
.settings-field input[type=text], .settings-field input[type=date] {
  width:100%; border:1px solid var(--border); border-radius:var(--rs);
  padding:9px 11px; font-family:'DM Sans',sans-serif; font-size:13px;
  color:var(--ink); background:var(--bg); transition: border-color .15s;
}
.settings-field input:focus { outline:none; border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(45,95,63,.08); }
.settings-field small { font-size:11px; color:var(--ink3); display:block; margin-top:4px; }

/* Project list */
.proj-list { display:flex; flex-direction:column; gap:8px; }
.proj-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--border); border-radius:var(--rs); background:var(--surface);
  transition: all .15s; cursor:pointer;
}
.proj-item:hover { border-color:#7ABC90; background:var(--al); }
.proj-item.active { border-color:var(--accent); background:var(--al); }
.proj-item-dot { width:10px; height:10px; border-radius:50%; background:var(--surface2); flex-shrink:0; }
.proj-item.active .proj-item-dot { background:var(--accent); }
.proj-item-info { flex:1; min-width:0; }
.proj-item-name { font-size:13px; font-weight:600; color:var(--ink); }
.proj-item-meta { font-size:11px; color:var(--ink3); }
.proj-item-actions { display:flex; gap:4px; }
.proj-item-btn {
  font-size:10px; padding:3px 8px; border-radius:4px; cursor:pointer; border:none;
  background:var(--surface2); color:var(--ink2); transition:all .15s;
}
.proj-item-btn:hover { background:var(--border); }
.proj-item-btn.danger:hover { background:var(--rl); color:var(--red); }

/* Module toggles */
.mod-toggles-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }

/* ── CUSTOM MODULE BUILDER ── */
.new-mod-form {
  background: var(--surface); border: 1.5px dashed var(--border);
  border-radius: var(--r); padding: 18px; margin-top: 14px;
}
.new-mod-form h5 {
  font-size: 12px; font-weight: 700; color: var(--ink2);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px;
}
.new-mod-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.new-mod-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.new-mod-full { margin-bottom: 10px; }
.new-mod-form label {
  font-size: 10px; font-weight: 700; color: var(--ink3);
  text-transform: uppercase; letter-spacing: .4px; display: block; margin-bottom: 4px;
}
.new-mod-form input[type=text], .new-mod-form textarea, .new-mod-form select {
  width: 100%; border: 1px solid var(--border); border-radius: var(--rs);
  padding: 7px 10px; font-family: 'DM Sans',sans-serif; font-size: 12px;
  color: var(--ink); background: var(--bg);
}
.new-mod-form input:focus, .new-mod-form textarea:focus, .new-mod-form select:focus {
  outline: none; border-color: var(--accent); background: #fff;
}
.new-mod-form textarea { resize: vertical; min-height: 56px; }
.btn-add-module {
  background: var(--accent); color: #fff; border: none;
  padding: 8px 18px; border-radius: 7px; font-size: 12px; font-weight: 600;
  cursor: pointer; margin-top: 6px;
}
.btn-add-module:hover { background: #245030; }
.custom-mod-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.custom-mod-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--rs);
}
.custom-mod-color { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.custom-mod-info { flex: 1; min-width: 0; }
.custom-mod-name { font-size: 12px; font-weight: 600; color: var(--ink); }
.custom-mod-meta { font-size: 10px; color: var(--ink3); }
.btn-del-mod {
  font-size: 10px; padding: 2px 7px; border-radius: 4px; cursor: pointer;
  border: none; background: var(--rl); color: var(--red);
}
.btn-del-mod:hover { background: var(--red); color: #fff; }
.mod-toggle-item {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  border:1px solid var(--border); border-radius:var(--rs); cursor:pointer;
  font-size:11px; color:var(--ink2); background:var(--surface);
  transition:all .15s; user-select:none;
}
.mod-toggle-item.active { background:var(--al); border-color:#7ABC90; color:var(--accent); font-weight:600; }
.mod-toggle-item input { display:none; }
.toggle-dot { width:10px; height:10px; border-radius:50%; background:var(--border); flex-shrink:0; }
.mod-toggle-item.active .toggle-dot { background:var(--accent); }

/* Logo upload area */
.logo-upload-area {
  border: 2px dashed var(--border); border-radius: var(--rs);
  padding: 16px; text-align: center; cursor: pointer;
  transition: all .15s; background: var(--surface2);
}
.logo-upload-area:hover { border-color: var(--accent); background: var(--al); }
.logo-upload-area img { max-height: 40px; max-width: 120px; object-fit: contain; }
.logo-upload-area p { font-size: 11px; color: var(--ink3); margin-top: 6px; }

/* Save bar */
.settings-save-bar {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 20px; position: sticky; top: 0; z-index: 10;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.settings-save-bar p { font-size: 12px; color: var(--ink2); }
.settings-save-bar strong { color: var(--ink); }
.btn-settings-save {
  background:var(--accent); color:#fff; border:none;
  padding:9px 24px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer;
}
.btn-settings-save:hover { background:#245030; }
.btn-settings-danger {
  background:var(--rl); color:var(--red); border:1px solid #C87878;
  padding:9px 14px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer;
}
.btn-settings-danger:hover { background:var(--red); color:#fff; }
.btn-settings-secondary {
  background:var(--surface2); color:var(--ink2); border:1px solid var(--border);
  padding:9px 16px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer;
}
.btn-settings-secondary:hover { background:var(--border); }