/* ══ LANGAME Training Portal ══════════════════════════════════════════════ */
:root{
  --bg:#0D1117;--surface:#161B22;--surface2:#1C2128;--border:#30363D;
  --cyan:#00D4FF;--purple:#7B5FFF;--orange:#FF6B35;--green:#2EA043;
  --yellow:#D29922;--red:#F85149;--text:#E6EDF3;--muted:#8B949E;--dim:#484F58;
  --radius:10px;--sidebar:260px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.6}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
a{color:var(--cyan);text-decoration:none}button{cursor:pointer;font-family:inherit}

/* ── SPLASH ─────────────────────────────────────────────────────────────── */
.splash{
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:var(--bg);z-index:9999;transition:opacity .5s;
}
.splash.hidden{opacity:0;pointer-events:none}
.splash-icon{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--cyan),var(--purple));display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:900;color:#fff}
.splash-name{font-size:26px;font-weight:800;color:var(--cyan);letter-spacing:2px}
.splash-sub{font-size:13px;color:var(--muted)}

/* ── LAYOUT ─────────────────────────────────────────────────────────────── */
.layout{display:flex;min-height:100vh}
.main{margin-left:var(--sidebar);flex:1;min-height:100vh;display:flex;flex-direction:column}

/* ── SIDEBAR ─────────────────────────────────────────────────────────────── */
.sidebar{width:var(--sidebar);background:var(--surface);border-right:1px solid var(--border);position:fixed;top:0;left:0;height:100vh;display:flex;flex-direction:column;z-index:100;overflow-y:auto}
.sidebar-top{padding:18px;border-bottom:1px solid var(--border)}
.sidebar-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.logo-icon{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--cyan),var(--purple));display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;color:#fff;flex-shrink:0}
.brand-name{font-weight:800;font-size:15px;color:var(--cyan);letter-spacing:1px}
.brand-sub{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}

/* ── USER CARD ───────────────────────────────────────────────────────────── */
.user-card{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:border-color .18s;position:relative}
.user-card:hover{border-color:var(--cyan)}
.user-card:hover .avatar-edit-hint{opacity:1}
.avatar-wrap{position:relative;flex-shrink:0}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--cyan));display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;overflow:hidden;flex-shrink:0}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-edit-hint{position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none}
.uc-info{flex:1;min-width:0}
.uc-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uc-role{font-size:11px;color:var(--muted);margin-top:1px}
#avatar-input{display:none}

.badge{display:inline-block;padding:1px 8px;border-radius:100px;font-size:10px;font-weight:700}
.badge-admin  {background:rgba(0,212,255,.12);color:var(--cyan)}
.badge-manager{background:rgba(123,95,255,.12);color:var(--purple)}

/* ── NAV ─────────────────────────────────────────────────────────────────── */
.nav-group{padding:10px 0}
.nav-label{padding:4px 16px;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--dim);font-weight:600}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 16px;color:var(--muted);font-size:13px;border-left:3px solid transparent;transition:all .15s;cursor:pointer;user-select:none}
.nav-item:hover{color:var(--text);background:rgba(0,212,255,.05)}
.nav-item.active{color:var(--cyan);border-left-color:var(--cyan);background:rgba(0,212,255,.08)}
.ni-icon{width:20px;text-align:center;flex-shrink:0}
.nav-progress{margin-left:auto;font-size:10px;font-weight:700;color:var(--dim)}
.nav-item.active .nav-progress{color:var(--cyan)}
.sidebar-footer{margin-top:auto;padding:14px;border-top:1px solid var(--border)}
.btn-logout{width:100%;background:transparent;border:1px solid var(--border);color:var(--muted);padding:8px;border-radius:8px;font-size:13px;transition:all .15s}
.btn-logout:hover{border-color:var(--red);color:var(--red)}

/* ── TOPBAR ──────────────────────────────────────────────────────────────── */
.topbar{height:54px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 28px;gap:10px;position:sticky;top:0;z-index:50}
.topbar-title{font-size:16px;font-weight:700}
.topbar-sub{font-size:12px;color:var(--muted)}

/* ── CONTENT ─────────────────────────────────────────────────────────────── */
.content{padding:28px;flex:1}

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 18px;border-radius:8px;font-size:13.5px;font-weight:600;border:none;transition:all .15s;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-primary{background:var(--cyan);color:#000}
.btn-primary:hover{background:#29dcff;box-shadow:0 0 20px rgba(0,212,255,.3)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--cyan);color:var(--cyan)}
.btn-danger{background:rgba(248,81,73,.1);color:var(--red);border:1px solid rgba(248,81,73,.3)}
.btn-danger:hover{background:rgba(248,81,73,.2)}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}
.btn-ghost:hover{color:var(--text);border-color:var(--border)}
.btn-sm{padding:5px 12px;font-size:12px;border-radius:6px}
.btn-full{width:100%}
.btn-icon{width:30px;height:30px;padding:0;border-radius:6px;font-size:14px}

/* ── FORMS ───────────────────────────────────────────────────────────────── */
.form-group{margin-bottom:14px}
.form-label{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:5px;display:block}
.form-input{
  width:100%;background:var(--surface2) !important;border:1px solid var(--border);
  color:var(--text) !important;padding:10px 13px;border-radius:8px;font-size:14px;
  font-family:inherit;transition:border-color .15s;outline:none;
  -webkit-text-fill-color:var(--text) !important;
  appearance:none;-webkit-appearance:none;
}
.form-input:focus{border-color:var(--cyan)}
.form-input::placeholder{color:var(--dim) !important}
/* ── Fix browser autofill white background ── */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px #1C2128 inset !important;
  -webkit-text-fill-color:var(--text) !important;
  caret-color:var(--text);
}
select.form-input option{background:var(--surface2);color:var(--text)}
textarea.form-input{resize:vertical;min-height:90px;line-height:1.6}

.error-msg{background:rgba(248,81,73,.1);border:1px solid rgba(248,81,73,.3);color:var(--red);padding:10px 13px;border-radius:8px;font-size:13px;margin-bottom:14px;display:none}
.error-msg.show{display:block}
.success-msg{background:rgba(46,160,67,.1);border:1px solid rgba(46,160,67,.3);color:var(--green);padding:10px 13px;border-radius:8px;font-size:13px;margin-bottom:14px;display:none}
.success-msg.show{display:block}

/* ══ AUTH ════════════════════════════════════════════════════════════════ */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:20px}
.auth-box{width:100%;max-width:420px}
.auth-logo{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:28px}
.auth-logo-icon{width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,var(--cyan),var(--purple));display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;color:#fff}
.auth-logo-text{text-align:center}
.auth-logo-text .main{font-size:22px;font-weight:800;color:var(--cyan);letter-spacing:2px}
.auth-logo-text .sub{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-top:2px}

.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.auth-card-header{padding:20px 24px 0;border-bottom:1px solid var(--border);padding-bottom:18px;background:var(--surface2)}
.auth-card-header h2{font-size:18px;font-weight:700;margin-bottom:3px}
.auth-card-header p{font-size:12.5px;color:var(--muted)}
.auth-card-body{padding:20px 24px 24px}
.auth-switch{margin-top:16px;text-align:center;font-size:13px;color:var(--muted)}
.auth-switch a{color:var(--cyan);cursor:pointer;font-weight:600}
.auth-switch a:hover{text-decoration:underline}

/* ══ DASHBOARD ════════════════════════════════════════════════════════════ */
.dash-header{margin-bottom:22px}
.dash-header h1{font-size:24px;font-weight:800;margin-bottom:3px}
.dash-header p{color:var(--muted);font-size:13.5px}

.overall-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px;margin-bottom:24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.overall-ring{position:relative;width:68px;height:68px;flex-shrink:0}
.overall-ring svg{transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--surface2);stroke-width:6}
.ring-fill{fill:none;stroke:var(--cyan);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .8s ease}
.ring-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--cyan)}
.overall-info h3{font-size:16px;font-weight:700;margin-bottom:2px}
.overall-info p{font-size:12.5px;color:var(--muted)}
.overall-stats{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.ostat{text-align:center}
.ostat .val{font-size:20px;font-weight:800;color:var(--cyan);line-height:1}
.ostat .lbl{font-size:11px;color:var(--muted);margin-top:2px}

.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.module-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.module-card:hover{border-color:rgba(0,212,255,.4);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.mc-icon{font-size:26px;margin-bottom:10px}
.mc-title{font-size:14px;font-weight:700;margin-bottom:3px}
.mc-desc{font-size:12px;color:var(--muted);margin-bottom:14px;line-height:1.5}
.mc-progress{display:flex;align-items:center;gap:8px}
.mc-bar{flex:1;height:5px;background:var(--surface2);border-radius:3px;overflow:hidden}
.mc-fill{height:100%;border-radius:3px;transition:width .6s}
.mc-pct{font-size:12px;font-weight:700;min-width:30px;text-align:right}
.mc-done{position:absolute;top:10px;right:10px;background:rgba(46,160,67,.15);border:1px solid var(--green);color:var(--green);padding:2px 8px;border-radius:100px;font-size:10px;font-weight:700}

/* ══ MODULE VIEW ══════════════════════════════════════════════════════════ */
.module-layout{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
.back-btn{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;margin-bottom:16px;cursor:pointer;transition:color .15s;background:none;border:none;padding:0}
.back-btn:hover{color:var(--cyan)}
.module-hero{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px;position:relative;overflow:hidden}
.module-hero::after{content:attr(data-icon);position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:56px;opacity:.07;line-height:1;pointer-events:none}
.mh-tag{font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:6px;opacity:.8}
.module-hero h2{font-size:20px;font-weight:800;margin-bottom:4px}
.module-hero p{font-size:13px;color:var(--muted)}

.content-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:14px}
.cs-title{font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.cs-num{background:var(--cyan);color:#000;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex-shrink:0}

.step-list{display:flex;flex-direction:column}
.step-row{display:flex;gap:12px}
.step-col{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:26px}
.step-num{width:26px;height:26px;border-radius:50%;background:var(--surface2);border:2px solid var(--cyan);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--cyan);flex-shrink:0}
.step-line{flex:1;width:2px;background:var(--border);margin:3px 0;min-height:14px}
.step-row:last-child .step-line{display:none}
.step-body{padding-bottom:16px;flex:1}
.step-title{font-size:13px;font-weight:700;margin-bottom:2px}
.step-desc{font-size:12.5px;color:var(--muted);line-height:1.6}

.alert{border-radius:8px;padding:11px 14px;margin-bottom:10px;border-left:4px solid;font-size:13px;display:flex;gap:9px;line-height:1.55}
.alert-icon{font-size:15px;flex-shrink:0;line-height:1.55}
.alert-title{font-weight:700;margin-bottom:2px}
.alert-warn{background:rgba(255,107,53,.08);border-color:var(--orange)}.alert-warn .alert-title{color:var(--orange)}
.alert-info{background:rgba(0,212,255,.07);border-color:var(--cyan)}.alert-info .alert-title{color:var(--cyan)}
.alert-tip{background:rgba(46,160,67,.08);border-color:var(--green)}.alert-tip .alert-title{color:var(--green)}

.c-list{list-style:none;display:flex;flex-direction:column;gap:5px}
.c-list li{display:flex;gap:8px;font-size:13px;color:var(--muted);line-height:1.5}
.c-list li::before{content:'•';color:var(--cyan);flex-shrink:0}

.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.compare-card{border-radius:8px;padding:14px;border:1px solid var(--border);background:var(--surface2)}
.compare-card.y{border-top:3px solid var(--yellow)}.compare-card.o{border-top:3px solid var(--orange)}
.compare-title{font-size:13px;font-weight:700;margin-bottom:8px}

.info-table{width:100%;border-collapse:collapse;font-size:12.5px}
.info-table th{background:var(--surface2);padding:8px 11px;text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:600;border-bottom:1px solid var(--border)}
.info-table td{padding:9px 11px;border-bottom:1px solid var(--border);color:var(--muted);vertical-align:top}
.info-table tr:last-child td{border-bottom:none}
.info-table td:first-child{color:var(--text);font-weight:600}

/* ── NOTES EDITOR ──────────────────────────────────────────────────────── */
.notes-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;overflow:hidden}
.notes-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.notes-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.notes-body{padding:18px}
.notes-content{font-size:13.5px;color:var(--muted);line-height:1.75;white-space:pre-wrap}
.notes-content:empty::before{content:'Нет заметок';color:var(--dim);font-style:italic}
.notes-editor-wrap{padding:14px 18px}
.notes-actions{display:flex;gap:8px;margin-top:10px;justify-content:flex-end}

/* ── CHECKLIST SIDEBAR ─────────────────────────────────────────────────── */
.checklist-sidebar{position:sticky;top:70px}
.checklist-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.checklist-head{padding:14px 18px;border-bottom:1px solid var(--border)}
.checklist-head h3{font-size:13.5px;font-weight:700;margin-bottom:3px}
.cl-progress-wrap{display:flex;align-items:center;gap:8px;margin-top:8px}
.cl-bar{flex:1;height:5px;background:var(--surface2);border-radius:3px;overflow:hidden}
.cl-fill{height:100%;background:var(--cyan);border-radius:3px;transition:width .4s}
.cl-pct{font-size:12px;font-weight:700;color:var(--cyan);min-width:32px;text-align:right}
.checklist-items{padding:4px 0}
.cl-item{display:flex;align-items:flex-start;gap:10px;padding:9px 16px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--border)}
.cl-item:last-child{border-bottom:none}
.cl-item:hover{background:var(--surface2)}
.cl-check{width:18px;height:18px;border-radius:4px;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .18s;margin-top:2px}
.cl-item.done .cl-check{background:var(--green);border-color:var(--green)}
.cl-item.done .cl-check::after{content:'';display:block;width:4px;height:8px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);margin-top:-2px}
.cl-text{font-size:12.5px;color:var(--muted);line-height:1.5;flex:1}
.cl-item.done .cl-text{text-decoration:line-through;opacity:.55}
.cl-all-done{padding:14px;text-align:center;font-size:13px;color:var(--green);font-weight:600;display:none}
.cl-all-done.show{display:block}

/* ══ TASKS ════════════════════════════════════════════════════════════════ */
.tasks-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.tasks-header h2{font-size:20px;font-weight:800}

.task-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:10px;transition:border-color .15s;position:relative;border-left:4px solid var(--border)}
.task-card.priority-high{border-left-color:var(--red)}
.task-card.priority-medium{border-left-color:var(--yellow)}
.task-card.priority-low{border-left-color:var(--green)}
.task-card.done-task{opacity:.6}
.task-card:hover{border-color:rgba(0,212,255,.3)}
.task-top{display:flex;align-items:flex-start;gap:10px}
.task-checkbox{width:20px;height:20px;border-radius:5px;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s;margin-top:2px}
.task-checkbox.checked{background:var(--green);border-color:var(--green)}
.task-checkbox.checked::after{content:'';display:block;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);margin-top:-2px}
.task-info{flex:1}
.task-title{font-size:14px;font-weight:600;margin-bottom:3px}
.task-desc{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:8px}
.task-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.task-actions{display:flex;gap:6px;margin-left:auto;flex-shrink:0}

.priority-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:100px;font-size:10px;font-weight:700}
.pb-high  {background:rgba(248,81,73,.12);color:var(--red)}
.pb-medium{background:rgba(210,153,34,.12);color:var(--yellow)}
.pb-low   {background:rgba(46,160,67,.12);color:var(--green)}

.due-date{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:3px}
.due-date.overdue{color:var(--red)}

.task-prog-wrap{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px}
.task-prog-bar{flex:1;height:4px;background:var(--surface2);border-radius:2px;overflow:hidden}
.task-prog-fill{height:100%;background:var(--cyan);border-radius:2px;transition:width .4s}
.task-prog-text{font-size:11px;color:var(--muted);white-space:nowrap}

.tasks-empty{text-align:center;padding:60px 20px;color:var(--muted)}
.tasks-empty .ei{font-size:40px;margin-bottom:10px}
.tasks-empty h3{font-size:15px;font-weight:600;color:var(--text);margin-bottom:4px}

/* ══ MANAGER TABLE ════════════════════════════════════════════════════════ */
.manager-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}
.manager-header h2{font-size:20px;font-weight:800}
.users-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:20px}
.users-table{width:100%;border-collapse:collapse;font-size:13px}
.users-table th{background:var(--surface2);padding:10px 14px;text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap}
.users-table td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.users-table tr:last-child td{border-bottom:none}
.users-table tr:hover td{background:rgba(0,212,255,.02)}
.mod-dots{display:flex;gap:4px}
.mod-dot{width:26px;height:26px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;border:1px solid var(--border);color:var(--dim);background:var(--surface2)}
.mod-dot.full{background:rgba(46,160,67,.15);border-color:var(--green);color:var(--green)}
.mod-dot.half{background:rgba(210,153,34,.12);border-color:var(--yellow);color:var(--yellow)}

/* ══ MODAL ════════════════════════════════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal-overlay.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;width:100%;max-width:440px;position:relative;max-height:90vh;overflow-y:auto}
.modal h3{font-size:16px;font-weight:700;margin-bottom:18px}
.modal-close{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;line-height:1;width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--surface2);color:var(--text)}

/* ── UTILS ───────────────────────────────────────────────────────────────── */
.flex{display:flex}.gap-2{gap:8px}.gap-3{gap:12px}.items-center{align-items:center}.justify-between{justify-content:space-between}.ml-auto{margin-left:auto}.flex-wrap{flex-wrap:wrap}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:14px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}
.text-muted{color:var(--muted)}.text-cyan{color:var(--cyan)}.text-green{color:var(--green)}.text-red{color:var(--red)}
.fw-7{font-weight:700}.fs-12{font-size:12px}.fs-13{font-size:13px}
.spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--cyan);border-radius:50%;animation:spin .6s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.divider{border:none;border-top:1px solid var(--border);margin:18px 0}
.tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600}
.tag-green{background:rgba(46,160,67,.12);color:var(--green)}
.tag-cyan{background:rgba(0,212,255,.12);color:var(--cyan)}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media(max-width:900px){.module-layout{grid-template-columns:1fr}.checklist-sidebar{position:static}.compare-grid{grid-template-columns:1fr}}
@media(max-width:768px){:root{--sidebar:0}.sidebar{display:none}.main{margin-left:0}.content{padding:16px 14px}}

/* ══════════════════════════════════════════════════════════════════════════
   TASKS — Asana-like split panel
   ══════════════════════════════════════════════════════════════════════════ */

/* Full-height split container */
.tasks-page {
  display: flex;
  margin: -28px;
  height: calc(100vh - 54px);
  overflow: hidden;
}

/* ── Left: task list ─────────────────────────────────────────────────────── */
.tl-wrap {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.tl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
  flex-shrink: 0;
}
.tl-toolbar-title { font-size: 18px; font-weight: 800; }
.tl-toolbar-sub   { font-size: 12px; color: var(--muted); margin-top: 2px; }

.tl-body { flex: 1; padding: 12px 0; }

.tl-section-label {
  padding: 10px 22px 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--dim);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tl-section-done { margin-top: 8px; }
.tl-count {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0 7px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
}

.tl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: var(--muted);
  text-align: center;
}
.tl-empty-icon  { font-size: 44px; margin-bottom: 12px; }
.tl-empty-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.tl-empty-sub   { font-size: 13px; }

/* ── Task row ─────────────────────────────────────────────────────────────── */
.task-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 10px 22px 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.task-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background .15s;
}
.task-row:hover         { background: rgba(255,255,255,.03); }
.task-row:hover::before { background: var(--border); }
.task-row-active        { background: rgba(0,212,255,.06) !important; }
.task-row-active::before{ background: var(--cyan) !important; }
.task-row-done          { opacity: .6; }

.trow-check-wrap {
  padding: 2px 10px 0 8px;
  flex-shrink: 0;
}
.trow-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--p, var(--border));
  flex-shrink: 0;
  transition: all .18s;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.trow-check:hover    { box-shadow: 0 0 0 3px rgba(46,160,67,.2); border-color: var(--green); }
.trow-checked        { background: var(--green) !important; border-color: var(--green) !important; }
.trow-checked::after { content: '✓'; color: #fff; font-size: 10px; font-weight: 700; }

.task-row-main {
  flex: 1;
  min-width: 0;
  padding: 1px 0;
}
.trow-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trow-title.completed { text-decoration: line-through; opacity: .5; }

.trow-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.trow-priority {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
}
.prio-dot-sm {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sub-label {
  font-size: 11px;
  color: var(--muted);
  background: var(--surface2);
  padding: 1px 7px;
  border-radius: 100px;
  border: 1px solid var(--border);
}

/* Subtask pips in row */
.sub-pip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.sub-pips      { display: flex; gap: 3px; align-items: center; }
.sub-pip       { width: 7px; height: 7px; border-radius: 50%; background: var(--border); display: inline-block; }
.pip-done      { background: var(--green); }
.sub-pip-bar   { flex: 1; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; max-width: 80px; }
.sub-pip-fill  { height: 100%; background: var(--cyan); border-radius: 2px; transition: width .4s; }

.trow-arrow {
  flex-shrink: 0;
  color: var(--dim);
  font-size: 18px;
  padding-left: 6px;
  line-height: 1;
  margin-top: 2px;
  transition: color .12s;
}
.task-row-active .trow-arrow { color: var(--cyan); }

/* ── Right: detail panel ─────────────────────────────────────────────────── */
.td-wrap {
  width: 0;
  flex-shrink: 0;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: var(--surface);
  transition: width .25s cubic-bezier(.4,0,.2,1);
}
.td-open { width: 440px; }

.tdp-inner {
  width: 440px;
  height: 100%;
  overflow-y: auto;
  padding: 0;
}

/* Detail top bar */
.tdp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 5;
}
.tdp-bar-actions { display: flex; align-items: center; gap: 8px; }
.tdp-close {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.tdp-close:hover { background: var(--surface2); color: var(--text); }

/* Priority stripe */
.tdp-stripe {
  height: 3px;
  width: 100%;
}

/* Title */
.tdp-title-wrap { padding: 18px 20px 10px; }
.tdp-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
  outline: none;
  border-radius: 6px;
  padding: 4px 6px;
  margin: -4px -6px;
  word-break: break-word;
}
.tdp-title[contenteditable]:hover  { background: var(--surface2); }
.tdp-title[contenteditable]:focus  { background: var(--surface2); box-shadow: 0 0 0 2px var(--cyan); }
.tdp-title-done { text-decoration: line-through; opacity: .5; }

/* Properties grid */
.tdp-props {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 20px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.tdp-prop-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  gap: 14px;
  font-size: 13px;
}
.tdp-prop-row:last-child { border-bottom: none; }
.tdp-prop-label {
  width: 90px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.tdp-prop-val { color: var(--text); }
.tdp-select {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}
.tdp-select:focus { border-color: var(--cyan); }
.tdp-date-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  color-scheme: dark;
}
.tdp-date-input:focus { border-color: var(--cyan); }

/* Sections */
.tdp-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.tdp-section:last-child { border-bottom: none; }
.tdp-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 10px;
}
.tdp-desc-area {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  resize: none;
  outline: none;
  line-height: 1.65;
  min-height: 80px;
  border-radius: 6px;
  padding: 6px 8px;
  margin: -6px -8px;
  transition: border-color .15s, background .15s;
}
.tdp-desc-area:hover  { background: var(--surface2); border-color: var(--border); }
.tdp-desc-area:focus  { background: var(--surface2); border-color: var(--cyan); }
.tdp-desc-area::placeholder { color: var(--dim); }
.tdp-desc-view { font-size: 13.5px; color: var(--muted); line-height: 1.65; min-height: 40px; }

/* Subtasks header */
.tdp-sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.sub-badge {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 1px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
}

/* Subtask progress bar */
.sub-prog-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.sub-prog-track {
  flex: 1;
  height: 5px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
}
.sub-prog-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--green));
  border-radius: 3px;
  transition: width .4s ease;
}
.sub-prog-pct { font-size: 12px; font-weight: 700; color: var(--cyan); min-width: 30px; text-align: right; }

/* Subtask list */
.subtasks-list { display: flex; flex-direction: column; }
.sub-empty     { font-size: 13px; color: var(--dim); font-style: italic; padding: 10px 0; }

.sub-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .1s;
  border-radius: 6px;
  margin: 0 -8px;
  padding: 9px 8px;
}
.sub-item:last-child { border-bottom: none; }
.sub-item:hover      { background: rgba(255,255,255,.03); }

.sub-check-circle {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  transition: all .18s;
  display: flex; align-items: center; justify-content: center;
}
.sub-check-circle:hover  { border-color: var(--green); box-shadow: 0 0 0 3px rgba(46,160,67,.15); }
.sub-check-done          { background: var(--green); border-color: var(--green); }
.sub-check-done::after   { content:'✓'; color:#fff; font-size:9px; font-weight:700; }

.sub-item-title {
  flex: 1;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
  outline: none;
  border-radius: 4px;
  padding: 1px 4px;
  word-break: break-word;
  cursor: text;
  transition: background .12s;
}
.sub-item-title[contenteditable]:hover { background: var(--surface2); }
.sub-item-title[contenteditable]:focus { background: var(--surface2); box-shadow: 0 0 0 1px var(--cyan); }
.sub-title-done { text-decoration: line-through; opacity: .45; }

.sub-del-btn {
  opacity: 0;
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  flex-shrink: 0;
  transition: all .15s;
}
.sub-item:hover .sub-del-btn { opacity: 1; }
.sub-del-btn:hover            { color: var(--red); background: rgba(248,81,73,.1); }

/* Add subtask inline row */
.add-sub-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin-top: 6px;
  border-top: 1px solid var(--border);
}
.add-sub-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--cyan);
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  padding: 3px 0;
  outline: none;
}
.add-sub-input::placeholder { color: var(--dim); }

/* Responsive */
@media (max-width: 900px) {
  .tasks-page { flex-direction: column; height: auto; margin: -16px -14px; }
  .tl-wrap    { border-right: none; }
  .td-wrap    { width: 100% !important; border-left: none; border-top: 1px solid var(--border); }
  .tdp-inner  { width: 100%; }
}

/* ══ FAQ ═════════════════════════════════════════════════════════════════ */
.faq-page { display:flex; margin:-28px; height:calc(100vh - 54px); overflow:hidden; }
.faq-cats { width:240px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); overflow-y:auto; padding:12px 0; }
.faq-cat-item { display:flex; align-items:center; gap:10px; padding:9px 16px; cursor:pointer; color:var(--muted); font-size:13px; border-left:3px solid transparent; transition:all .15s; }
.faq-cat-item:hover { background:rgba(0,212,255,.05); color:var(--text); }
.faq-cat-item.active { color:var(--cyan); border-left-color:var(--cyan); background:rgba(0,212,255,.08); }
.faq-cat-icon { font-size:15px; flex-shrink:0; }
.faq-cat-label { flex:1; line-height:1.3; }
.faq-cat-count { background:var(--surface2); border:1px solid var(--border); color:var(--muted); padding:0 6px; border-radius:100px; font-size:10px; font-weight:700; }
.faq-content { flex:1; overflow-y:auto; padding:24px; }
.faq-content-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; gap:12px; }
.faq-content-title { font-size:18px; font-weight:800; }
.faq-empty { text-align:center; padding:60px 20px; color:var(--muted); }
.faq-item { background:var(--surface); border:1px solid var(--border); border-radius:8px; margin-bottom:8px; overflow:hidden; transition:border-color .15s; }
.faq-item:hover { border-color:rgba(0,212,255,.3); }
.faq-q { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; cursor:pointer; user-select:none; }
.faq-q-icon { width:22px; height:22px; border-radius:50%; background:rgba(0,212,255,.12); color:var(--cyan); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; margin-top:1px; }
.faq-q-text { flex:1; font-size:13.5px; font-weight:600; line-height:1.5; }
.faq-q-arrow { color:var(--muted); font-size:14px; flex-shrink:0; transition:transform .2s; margin-top:2px; }
.faq-a { padding:0 16px 14px 50px; }
.faq-a-body { font-size:13.5px; color:var(--muted); line-height:1.7; }
.faq-a-actions { display:flex; gap:8px; margin-top:10px; }

/* ══ SHIFT ═══════════════════════════════════════════════════════════════ */
.shift-page { max-width:900px; }
.shift-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.star-rating { display:flex; gap:6px; font-size:28px; cursor:pointer; margin-top:4px; }
.star { color:var(--dim); transition:color .12s; user-select:none; }

/* ══ ANALYTICS ════════════════════════════════════════════════════════════ */
.analytics-page { max-width:1000px; }
.analytics-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.fin-entry { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--border); font-size:13px; }
.fin-entry:last-child { border-bottom:none; }
.fin-entry:hover { background:rgba(0,212,255,.02); }
.fin-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.fin-date { color:var(--muted); min-width:80px; flex-shrink:0; }
.fin-cat  { font-weight:600; min-width:100px; flex-shrink:0; }
.fin-desc { flex:1; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fin-amount { font-weight:700; color:var(--text); flex-shrink:0; min-width:80px; text-align:right; }
.fin-del-btn { opacity:0; background:none; border:none; color:var(--dim); cursor:pointer; font-size:13px; padding:2px 6px; border-radius:4px; transition:all .12s; }
.fin-entry:hover .fin-del-btn { opacity:1; }
.fin-del-btn:hover { color:var(--red); background:rgba(248,81,73,.1); }

/* ══ BOARD VIEW ══════════════════════════════════════════════════════════ */
.board-view { display:flex; gap:14px; padding:4px 0; min-height:300px; overflow-x:auto; }
.board-col { flex:1; min-width:220px; display:flex; flex-direction:column; gap:0; }
.board-col-header { padding:10px 12px; background:var(--surface); border:1px solid var(--border); border-radius:8px 8px 0 0; display:flex; align-items:center; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); }
.board-col-body { flex:1; border:1px solid var(--border); border-top:none; border-radius:0 0 8px 8px; padding:8px; background:var(--surface2); display:flex; flex-direction:column; gap:6px; }
.board-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:12px; cursor:pointer; transition:all .15s; }
.board-card:hover { border-color:rgba(0,212,255,.35); transform:translateY(-1px); }
.board-card-active { border-color:var(--cyan) !important; background:rgba(0,212,255,.05) !important; }
.board-card-title { font-size:13px; font-weight:600; margin-bottom:6px; line-height:1.4; }
.board-card-sub { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.board-card-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ══ TASK COPY BUTTON ════════════════════════════════════════════════════ */
.trow-actions-hover { display:flex; align-items:center; opacity:0; transition:opacity .12s; }
.task-row:hover .trow-actions-hover { opacity:1; }
.trow-copy-btn { background:var(--surface2); border:1px solid var(--border); color:var(--muted); border-radius:5px; font-size:14px; padding:2px 7px; cursor:pointer; transition:all .12s; }
.trow-copy-btn:hover { color:var(--cyan); border-color:var(--cyan); }

/* ══ CHANGELOG ═══════════════════════════════════════════════════════════ */
.changelog-list { display:flex; flex-direction:column; gap:0; }
.changelog-item { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.changelog-item:last-child { border-bottom:none; }
.changelog-icon { font-size:14px; flex-shrink:0; margin-top:1px; }
.changelog-body { flex:1; }
.changelog-msg { font-size:12.5px; color:var(--text); line-height:1.4; }
.changelog-meta { font-size:11px; color:var(--dim); margin-top:2px; }

/* ══ AUTH FIX ════════════════════════════════════════════════════════════ */
/* Force dark autofill across all browsers */
input, textarea, select {
  color-scheme: dark;
}
input:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px #1C2128 inset !important; -webkit-text-fill-color:#E6EDF3 !important; caret-color:#E6EDF3; }
input:-webkit-autofill:focus { -webkit-box-shadow:0 0 0 1000px #1C2128 inset !important; border-color:#00D4FF !important; }
input:-webkit-autofill:hover { -webkit-box-shadow:0 0 0 1000px #1C2128 inset !important; }

/* Redesigned auth card */
.auth-page { background: radial-gradient(ellipse at 50% 0%, rgba(0,212,255,.06) 0%, transparent 60%), var(--bg); }
.auth-card { box-shadow: 0 24px 48px rgba(0,0,0,.4); }
.auth-card-header { background: linear-gradient(135deg, rgba(0,212,255,.06), rgba(123,95,255,.06)); }

@media(max-width:768px){
  .faq-page { flex-direction:column; margin:-16px -14px; }
  .faq-cats { width:100%; height:auto; border-right:none; border-bottom:1px solid var(--border); display:flex; flex-wrap:wrap; padding:8px; gap:4px; }
  .faq-cat-item { border-radius:6px; border-left:none !important; padding:6px 10px; font-size:12px; }
  .faq-cat-item.active { background:rgba(0,212,255,.12); }
  .board-view { flex-direction:column; }
}

/* ══ EXTRA STYLES v4 ════════════════════════════════════════════════════ */

/* View toggle buttons (tasks + FAQ) */
.view-toggle-btns,.faq-view-btns { display:flex; gap:2px; background:var(--surface2); border:1px solid var(--border); border-radius:7px; padding:2px; }
.vtb,.faq-vb { background:transparent; border:none; color:var(--muted); padding:4px 10px; border-radius:5px; font-size:14px; cursor:pointer; transition:all .15s; }
.vtb:hover,.faq-vb:hover { color:var(--text); }
.vtb-on,.faq-vb-on { background:var(--cyan); color:#000 !important; }

/* trow side area with copy btn */
.trow-side { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.trow-copy-btn { opacity:0; background:var(--surface2); border:1px solid var(--border); color:var(--muted); border-radius:5px; font-size:14px; padding:2px 8px; cursor:pointer; transition:all .12s; }
.task-row:hover .trow-copy-btn { opacity:1; }
.trow-copy-btn:hover { color:var(--cyan); border-color:var(--cyan); }
.trow-arrow { color:var(--dim); font-size:18px; line-height:1; transition:color .12s; }
.task-row-active .trow-arrow { color:var(--cyan); }

/* Board */
.board-view { display:flex; gap:12px; padding:4px 0 12px; min-height:260px; overflow-x:auto; }
.board-col { flex:1; min-width:200px; display:flex; flex-direction:column; }
.board-col-hdr { padding:10px 12px; background:var(--surface); border:1px solid var(--border); border-radius:8px 8px 0 0; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.board-col-body { flex:1; border:1px solid var(--border); border-top:none; border-radius:0 0 8px 8px; padding:8px; background:var(--surface2); display:flex; flex-direction:column; gap:6px; }
.board-empty { text-align:center; padding:20px; color:var(--dim); font-size:12px; }
.board-card { background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:11px 12px; cursor:pointer; transition:all .14s; }
.board-card:hover { border-color:rgba(0,212,255,.3); transform:translateY(-1px); }
.board-card-active { border-color:var(--cyan) !important; background:rgba(0,212,255,.05) !important; }
.board-card-title { font-size:13px; font-weight:600; margin-bottom:7px; line-height:1.4; }
.board-card-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.mb-2 { margin-bottom:8px; }

/* Shift pending banner */
.shift-pending-banner { background:rgba(0,212,255,.08); border:1px solid rgba(0,212,255,.3); border-radius:8px; padding:10px 16px; margin-bottom:14px; font-size:13.5px; color:var(--cyan); }
.shift-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.shift-tabs { display:flex; gap:4px; margin-bottom:16px; flex-wrap:wrap; }
.stab { background:var(--surface2); border:1px solid var(--border); color:var(--muted); padding:6px 14px; border-radius:6px; font-size:12.5px; font-weight:600; cursor:pointer; transition:all .12s; display:flex; align-items:center; gap:5px; }
.stab:hover { color:var(--text); border-color:var(--cyan); }
.stab-active { background:rgba(0,212,255,.1); border-color:var(--cyan); color:var(--cyan); }
.stab-badge { background:var(--orange); color:#fff; width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; }
.shift-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px 18px; margin-bottom:10px; cursor:pointer; transition:border-color .15s; }
.shift-card:hover { border-color:rgba(0,212,255,.3); }
.shift-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px; gap:10px; flex-wrap:wrap; }
.shift-card-stats { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.shift-stat { background:var(--surface2); border-radius:6px; padding:8px 12px; }
.shift-stat-lbl { font-size:11px; color:var(--muted); }
.shift-stat-val { font-size:14px; font-weight:700; margin-top:2px; }
.shift-reject-note { font-size:12.5px; color:var(--red); margin-top:10px; padding:8px 12px; background:rgba(248,81,73,.07); border-radius:6px; }

/* FAQ grid and horizontal views */
.faq-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.faq-grid-card { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:18px; transition:border-color .15s; }
.faq-grid-card:hover { border-color:rgba(0,212,255,.3); }
.faq-grid-q { font-size:13.5px; font-weight:700; margin-bottom:8px; line-height:1.4; }
.faq-grid-a { font-size:12.5px; color:var(--muted); line-height:1.6; margin-bottom:8px; }
.faq-grid-full { font-size:13px; color:var(--muted); line-height:1.7; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); }
.faq-grid-expand { font-size:11.5px; color:var(--cyan); cursor:pointer; font-weight:600; margin-bottom:6px; }
.faq-grid-expand:hover { text-decoration:underline; }
.faq-item-actions { display:flex; gap:6px; margin-top:10px; padding-top:8px; border-top:1px solid var(--border); }

.faq-horiz { display:flex; flex-direction:column; gap:12px; }
.faq-horiz-row { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:18px 20px; display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:start; transition:border-color .15s; }
.faq-horiz-row:hover { border-color:rgba(0,212,255,.25); }
.faq-horiz-q { font-size:14px; font-weight:700; line-height:1.4; display:flex; align-items:flex-start; gap:10px; }
.faq-horiz-a { font-size:13px; color:var(--muted); line-height:1.75; }

/* FAQ editor toolbar */
.faq-editor-toolbar { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:6px; }
.faq-fmt-btn { background:var(--surface2); border:1px solid var(--border); color:var(--muted); padding:4px 10px; border-radius:5px; font-size:12px; cursor:pointer; transition:all .12s; }
.faq-fmt-btn:hover { color:var(--cyan); border-color:var(--cyan); }

/* Module content editor */
.editor-tab { user-select:none; transition:all .15s; }

@media(max-width:900px){
  .faq-horiz-row { grid-template-columns:1fr; }
  .board-view { flex-direction:column; }
}

/* ══ CONTENT IMAGES ══════════════════════════════════════════════════════ */

/* Images inserted into content (FAQ + modules) */
.content-img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
  margin: 8px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: transform .2s, box-shadow .2s;
  cursor: zoom-in;
}
.content-img:hover {
  transform: scale(1.01);
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
}

/* Figure wrapper for images */
.content-figure {
  margin: 14px 0;
  padding: 0;
}
.content-figure figcaption {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
  text-align: center;
  font-style: italic;
}

/* Apply img styles everywhere content renders */
.faq-a-body img,
.faq-grid-a img,
.faq-grid-full img,
.faq-horiz-a img,
#module-main-content img,
.content-section img,
.notes-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
  margin: 10px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  cursor: zoom-in;
  transition: transform .2s;
}
.faq-a-body img:hover,
.faq-grid-full img:hover,
.faq-horiz-a img:hover,
#module-main-content img:hover,
.content-section img:hover {
  transform: scale(1.01);
}

/* Lightbox overlay for clicked images */
.img-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: zoom-out;
  animation: lb-in .2s ease;
}
@keyframes lb-in { from { opacity:0; } to { opacity:1; } }
.img-lightbox img {
  max-width: 92vw;
  max-height: 90vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.7);
  cursor: default;
}
.img-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  color: rgba(255,255,255,.7);
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  transition: color .15s;
}
.img-lightbox-close:hover { color: #fff; }

/* Upload button style */
.img-upload-btn {
  background: rgba(0,212,255,.1) !important;
  border-color: rgba(0,212,255,.4) !important;
  color: var(--cyan) !important;
}
.img-upload-btn:hover {
  background: rgba(0,212,255,.2) !important;
}