:root{
  --brand:#0D9488;--brand-strong:#0F766E;--brand-soft:#F0FDFA;--brand-ring:rgba(13,148,136,.14);
  --ink:#0f172a;--muted:#64748b;--subtle:#94a3b8;--line:#e5e7eb;--line-strong:#cbd5e1;
  --bg:#f7f9fc;--surface:#fff;--surface-2:#f8fafc;--success:#16a34a;--success-soft:#f0fdf4;
  --danger:#dc2626;--danger-soft:#fef2f2;--shadow:0 10px 30px rgba(15,23,42,.06);
  --shadow-hover:0 18px 45px rgba(15,23,42,.10);--radius:18px;--sidebar:246px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Noto Sans Thai",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.ui-icon{width:20px;height:20px;display:block;flex:0 0 auto}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:rgba(255,255,255,.96);backdrop-filter:blur(18px);border-right:1px solid rgba(226,232,240,.9);padding:22px 16px;z-index:60;display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(15,23,42,.025)}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:4px 8px 24px}.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#0D9488,#14B8A6);color:white;display:grid;place-items:center;box-shadow:0 8px 22px rgba(13,148,136,.24)}.brand-mark .ui-icon{width:21px;height:21px}.brand-copy{display:flex;flex-direction:column;line-height:1.25}.brand-copy strong{font-size:15px;letter-spacing:-.01em}.brand-copy span{font-size:11px;color:var(--subtle);margin-top:3px}.sidebar-nav{display:flex;flex-direction:column;gap:5px;flex:1}.nav-item{display:flex;align-items:center;gap:11px;min-height:44px;padding:10px 12px;border-radius:12px;color:#475569;font-weight:500;transition:background .18s ease,color .18s ease,transform .18s ease}.nav-item:hover{background:#f8fafc;color:var(--ink);transform:translateX(2px)}.nav-item.active{background:var(--brand-soft);color:var(--brand-strong);font-weight:650}.nav-item.active .ui-icon{stroke-width:2.15}.nav-divider{height:1px;background:var(--line);margin:10px 8px}.sidebar-user{display:grid;grid-template-columns:38px 1fr 36px;gap:10px;align-items:center;padding:12px 8px 0;border-top:1px solid var(--line)}.avatar{width:38px;height:38px;border-radius:12px;background:#e0e7ff;color:#3730a3;display:grid;place-items:center;font-weight:700}.user-meta{min-width:0;display:flex;flex-direction:column;line-height:1.35}.user-meta strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-meta span{font-size:11px;color:var(--subtle)}.icon-link,.mobile-menu-btn{width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.18s}.icon-link:hover,.mobile-menu-btn:hover{background:#f1f5f9;color:var(--ink)}
.app-main{min-height:100vh;margin-left:var(--sidebar)}.guest-main{margin-left:0}.mobile-topbar{display:none}.container{max-width:1320px;margin:0 auto;padding:34px 32px 70px}.page-enter{animation:pageIn .36s cubic-bezier(.2,.8,.2,1) both}.app-footer{margin-top:70px;padding-top:22px;border-top:1px solid var(--line);color:var(--subtle);font-size:12px}.app-footer span{margin:0 4px}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;margin-bottom:24px}.page-head>div:first-child{min-width:0}.page-head h1{font-size:30px;line-height:1.25;letter-spacing:-.035em;margin:5px 0 7px;font-weight:700}.page-head p{margin:0;color:var(--muted);max-width:760px}.back{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-size:13px;font-weight:600;margin-bottom:4px}.muted{color:var(--muted)}.tiny{font-size:12px}.pill,.file-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 10px;background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;font-size:12px;font-weight:600;margin:2px 4px 2px 0}
.grid{display:grid;gap:18px}.plans-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.two-col{grid-template-columns:minmax(300px,.78fr) minmax(520px,1.22fr)}.card{background:var(--surface);border:1px solid rgba(226,232,240,.95);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease;animation:cardIn .4s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--card-index,0)*35ms)}.plan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:#99f6e4}.plan-card h2{font-size:20px;margin:13px 0 4px;letter-spacing:-.02em}.card-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;margin-top:18px}.source-card{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.source-card h3{margin:0 0 4px;font-size:16px}.empty{text-align:center;border:1px dashed #cbd5e1;border-radius:22px;background:rgba(255,255,255,.6);padding:64px 24px}.empty-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:var(--brand-soft);margin:0 auto 14px;font-size:26px}.empty h2{margin:0 0 5px}
.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.btn{position:relative;border:1px solid var(--line);background:white;color:#334155;min-height:42px;padding:9px 14px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.03);transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease,color .16s ease}.btn:hover{border-color:#99f6e4;background:#f0fdfa;color:var(--brand-strong);box-shadow:0 7px 18px rgba(13,148,136,.08);transform:translateY(-1px)}.btn:active{transform:translateY(0) scale(.97)}.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-strong);border-color:var(--brand-strong);color:#fff}.btn-lg{min-height:48px;padding:11px 17px}.btn-sm{min-height:34px;padding:6px 10px;border-radius:10px}.btn.icon-only{width:42px;height:42px;min-height:42px;padding:0;border-radius:12px}.btn-sm.icon-only{width:34px;height:34px;min-height:34px}.btn-lg.icon-only{width:48px;height:48px;min-height:48px}.btn.icon-only .ui-icon{width:19px;height:19px}.btn.icon-only::after,.icon-link[data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(4px);background:#0f172a;color:white;font-size:11px;line-height:1.2;font-weight:500;padding:7px 9px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:.16s;z-index:99;box-shadow:0 7px 18px rgba(15,23,42,.18)}.btn.icon-only:hover::after,.icon-link[data-tooltip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}button:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none!important}
.form-card{background:#fff}.form-card h2{font-size:17px;letter-spacing:-.015em;margin:3px 0 15px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;margin-bottom:24px}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}label{display:flex;flex-direction:column;gap:7px;font-weight:600;color:#334155;font-size:13px}input,select,textarea{width:100%;border:1px solid #dbe1e8;border-radius:11px;background:#fff;color:var(--ink);padding:11px 12px;outline:none;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}textarea{resize:vertical;line-height:1.55}input:hover,select:hover,textarea:hover{border-color:#cbd5e1}input:focus,select:focus,textarea:focus{border-color:#2dd4bf;box-shadow:0 0 0 4px var(--brand-ring)}label small,.help-text{font-weight:400;color:var(--muted);font-size:11px;line-height:1.45}.req{font-size:10px;color:#92400e;background:#fffbeb;border-radius:999px;padding:2px 7px;margin-left:5px}.stack{display:flex;flex-direction:column;gap:16px}.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}.upload-box{border:1px dashed #99f6e4;background:#f0fdfa;border-radius:15px;padding:18px}.upload-box span{font-weight:400;color:var(--muted);font-size:12px}.process-editor{border:1px solid var(--line);background:#fbfdff;border-radius:14px;padding:14px;margin:10px 0}.stage-input{font-weight:700;margin-bottom:9px}.gospel-row{display:grid;grid-template-columns:minmax(210px,.7fr) minmax(360px,1.3fr);gap:13px;margin:10px 0}.competency-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.competency-option{display:flex;flex-direction:row;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:#fff;cursor:pointer;transition:.16s}.competency-option:hover{border-color:#99f6e4;background:#f0fdfa}.competency-option input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--brand)}
.weeks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}.week-card{border:1px solid var(--line);border-radius:16px;background:white;padding:17px;transition:.2s;animation:cardIn .4s cubic-bezier(.2,.8,.2,1) both}.week-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.week-card.done{border-color:#bbf7d0}.week-top{display:flex;justify-content:space-between;align-items:center}.week-num{font-weight:700;font-size:13px}.status{font-size:10px;border-radius:999px;padding:4px 8px;background:#f1f5f9;color:#64748b}.week-card.done .status{background:#ecfdf5;color:#15803d}.week-topic{min-height:48px;margin:12px 0 4px;font-size:17px;letter-spacing:-.015em}.week-unit{min-height:22px;font-size:12px;color:var(--muted)}
.progress-wrap{border:1px solid #bfdbfe;background:#f0fdfa;border-radius:16px;padding:16px;margin-bottom:18px}.progress{height:7px;background:#ccfbf1;border-radius:99px;overflow:hidden;margin:9px 0}.progress span{display:block;height:100%;background:linear-gradient(90deg,#0D9488,#9333EA,#EC4899,#0D9488);background-size:200% 100%;animation:shimmer 1.5s linear infinite;border-radius:99px;transition:width .28s ease}.progress-text{font-weight:700}.progress-log{font-size:12px;color:var(--muted)}.hidden{display:none!important}.alert{padding:11px 14px;border-radius:12px;margin-bottom:15px;border:1px solid transparent;animation:toastIn .28s ease}.alert-success{background:var(--success-soft);border-color:#bbf7d0;color:#166534}.alert-danger{background:var(--danger-soft);border-color:#fecaca;color:#991b1b}.toast-stack{position:fixed;right:22px;bottom:22px;z-index:999;display:flex;flex-direction:column;gap:8px}.app-toast{min-width:240px;max-width:360px;background:#0f172a;color:#fff;border-radius:13px;padding:11px 13px;box-shadow:0 16px 40px rgba(15,23,42,.24);display:flex;align-items:center;gap:9px;animation:toastIn .24s ease}.app-toast.success{background:#166534}.app-toast.error{background:#991b1b}
.ui-table{width:100%;border-collapse:separate;border-spacing:0}.ui-table th{font-size:12px;color:#475569;background:#f8fafc;font-weight:700}.ui-table th,.ui-table td{padding:10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.ui-table tr:last-child td{border-bottom:0}.assessment-scroll{overflow:auto;border:1px solid var(--line);border-radius:14px}.assessment-table{min-width:980px}.assessment-table textarea{min-width:155px}.inline-form{display:flex;gap:6px;align-items:center}.inline-form input{padding:8px;min-width:120px}.save-bar{position:sticky;bottom:14px;display:flex;justify-content:flex-end;padding:10px;border-radius:16px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border:1px solid rgba(226,232,240,.9);box-shadow:0 10px 30px rgba(15,23,42,.08);z-index:20}
.settings-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}.settings-nav{position:sticky;top:24px;background:white;border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:var(--shadow)}.settings-tab{width:100%;border:0;background:transparent;border-radius:11px;padding:10px 11px;display:flex;align-items:center;gap:10px;color:#64748b;text-align:left;cursor:pointer;font:inherit;font-weight:600;font-size:13px;transition:.16s}.settings-tab:hover{background:#f8fafc;color:#334155}.settings-tab.active{background:var(--brand-soft);color:var(--brand-strong)}.settings-tab .ui-icon{width:18px;height:18px}.settings-content{min-width:0}.settings-panel{display:none;animation:panelIn .24s ease}.settings-panel.active{display:block}.settings-panel>.card{margin-bottom:16px}.settings-section-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}.settings-section-icon{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}.settings-section-icon .ui-icon{width:20px;height:20px}.settings-section-head h2{margin:0!important;font-size:17px}.settings-section-head p{margin:2px 0 0;color:var(--muted);font-size:12px}.settings-save{position:sticky;bottom:14px;display:flex;justify-content:flex-end;z-index:20;margin-top:10px}.settings-save .save-surface{padding:8px;background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:15px;backdrop-filter:blur(15px);box-shadow:var(--shadow)}
.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 15% 15%,#eff6ff 0,transparent 34%),radial-gradient(circle at 85% 80%,#eef2ff 0,transparent 30%),#f8fafc;padding:22px}.login-card{width:min(420px,100%);background:rgba(255,255,255,.94);border:1px solid rgba(226,232,240,.95);border-radius:24px;padding:32px;box-shadow:0 28px 70px rgba(15,23,42,.11);backdrop-filter:blur(16px);animation:loginIn .45s cubic-bezier(.2,.8,.2,1)}.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:26px;font-size:17px;font-weight:700}.login-card h1{font-size:28px;letter-spacing:-.035em;margin:0}.login-card .muted{margin-top:5px}.login-card .stack{margin-top:22px}.login-card .btn{width:48px;align-self:flex-end}
.sidebar-backdrop{display:none}.mobile-topbar{display:none}
@media(max-width:980px){.form-grid.three{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr}.settings-layout{grid-template-columns:1fr}.settings-nav{position:static;display:flex;gap:5px;overflow:auto}.settings-tab{width:auto;white-space:nowrap}}
@media(max-width:820px){:root{--sidebar:268px}.sidebar{transform:translateX(-105%);transition:transform .24s cubic-bezier(.2,.8,.2,1);box-shadow:10px 0 40px rgba(15,23,42,.12)}body.sidebar-open .sidebar{transform:translateX(0)}.sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(15,23,42,.28);backdrop-filter:blur(2px);z-index:50;opacity:0;pointer-events:none;transition:.2s}body.sidebar-open .sidebar-backdrop{opacity:1;pointer-events:auto}.app-main{margin-left:0}.mobile-topbar{position:sticky;top:0;z-index:40;height:58px;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 15px;font-weight:700}.container{padding:22px 16px 60px}.page-head{flex-direction:column}.page-head .actions{width:100%}.form-grid,.form-grid.three,.upload-grid,.gospel-row,.competency-options{grid-template-columns:1fr}.source-card{align-items:flex-start;flex-direction:column}.page-head h1{font-size:25px}.settings-nav{margin:-4px 0 4px}.settings-tab{padding:9px 11px}}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}@keyframes panelIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@keyframes loginIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}@keyframes shimmer{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* =========================================================
   InsightDeck Theme — polished, presentation-ready dashboard
   ========================================================= */
:root{
  --brand:#0D9488;
  --brand-strong:#0F766E;
  --brand-soft:#F0FDFA;
  --brand-ring:rgba(13,148,136,.14);
  --secondary:#9333EA;
  --secondary-soft:#FAF5FF;
  --tertiary:#EC4899;
  --tertiary-soft:#FDF2F8;
  --info:#3B82F6;
  --success:#10B981;
  --success-soft:#ECFDF5;
  --warning:#F59E0B;
  --danger:#EF4444;
  --danger-soft:#FEF2F2;
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --surface-2:#F8FAFC;
  --ink:#0F172A;
  --muted:#64748B;
  --subtle:#94A3B8;
  --line:#E2E8F0;
  --line-strong:#CBD5E1;
  --shadow:0 8px 28px rgba(15,23,42,.055);
  --shadow-hover:0 18px 44px rgba(15,23,42,.09);
  --radius:16px;
}
body{background:linear-gradient(180deg,#F8FAFC 0%,#F8FAFC 72%,#F1F5F9 100%)}
.sidebar{background:rgba(255,255,255,.97);border-right:1px solid #E2E8F0;box-shadow:8px 0 32px rgba(15,23,42,.035)}
.sidebar::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--brand),var(--secondary),var(--tertiary))}
.brand-mark{background:linear-gradient(145deg,var(--brand),#14B8A6)!important;box-shadow:0 10px 24px rgba(13,148,136,.22)!important}
.brand-copy strong{letter-spacing:-.02em}.brand-copy span{color:#64748B}
.nav-item{color:#475569}.nav-item:hover{background:#F8FAFC;color:#0F172A}.nav-item.active{background:var(--brand-soft);color:var(--brand-strong);box-shadow:inset 3px 0 0 var(--brand)}
.avatar{background:var(--secondary-soft)!important;color:#7E22CE!important;border:1px solid #E9D5FF}
.icon-link:hover,.mobile-menu-btn:hover{background:var(--brand-soft);color:var(--brand-strong)}
.presentation-toggle{margin-top:auto;border:0;width:100%;font-family:inherit;text-align:left;background:transparent;cursor:pointer}.presentation-exit{display:none;position:fixed;top:18px;right:18px;width:44px;height:44px;border:1px solid #D1FAE5;border-radius:13px;background:#fff;color:var(--brand);box-shadow:0 12px 34px rgba(15,23,42,.12);z-index:100;place-items:center;cursor:pointer}.presentation-exit .ui-icon{width:20px;height:20px}
.page-head h1{font-weight:700;letter-spacing:-.04em}.page-head p{color:#64748B}
.pill{background:var(--brand-soft);color:var(--brand-strong);border-color:#CCFBF1}.file-chip{background:#F8FAFC;color:#475569;border-color:#E2E8F0}
.card{border-color:#E2E8F0;box-shadow:var(--shadow)}.card:hover{border-color:#CBD5E1}.plan-card{position:relative;overflow:hidden}.plan-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--brand),var(--secondary));opacity:0;transition:opacity .2s ease}.plan-card:hover::before{opacity:1}.plan-card:hover{border-color:#99F6E4!important;box-shadow:0 18px 44px rgba(13,148,136,.09)!important}
.empty{background:#fff;border-color:#CBD5E1}.empty-icon{background:var(--brand-soft);color:var(--brand)}
.btn:hover{border-color:#99F6E4;background:#F0FDFA;color:var(--brand-strong);box-shadow:0 8px 22px rgba(13,148,136,.10)}.btn-primary{background:var(--brand);border-color:var(--brand);box-shadow:0 6px 16px rgba(13,148,136,.16)}.btn-primary:hover{background:var(--brand-strong);border-color:var(--brand-strong);box-shadow:0 9px 24px rgba(13,148,136,.22)}
.btn[data-icon="sparkle"]{background:var(--secondary);border-color:var(--secondary);color:#fff}.btn[data-icon="sparkle"]:hover{background:#7E22CE;border-color:#7E22CE;color:#fff;box-shadow:0 9px 24px rgba(147,51,234,.20)}
.btn.icon-only::after,.icon-link[data-tooltip]::after{background:#0F172A}
input:focus,select:focus,textarea:focus{border-color:#2DD4BF;box-shadow:0 0 0 4px var(--brand-ring)}
.req{color:#92400E;background:#FFFBEB}.upload-box{border-color:#99F6E4;background:#F0FDFA}.process-editor{background:#FCFFFE;border-color:#D9F5F0}.competency-option:hover{border-color:#99F6E4;background:#F0FDFA}.competency-option input{accent-color:var(--brand)}.competency-option:has(input:checked){border-color:#5EEAD4!important;background:#F0FDFA!important;box-shadow:inset 0 0 0 1px rgba(13,148,136,.05)}
.week-card.done{border-color:#A7F3D0;background:linear-gradient(180deg,#fff,#FCFFFE)}.week-card.done .status{background:#ECFDF5;color:#047857}.week-card:hover{border-color:#99F6E4;box-shadow:0 12px 34px rgba(13,148,136,.08)}
.progress-wrap{border-color:#99F6E4;background:#F0FDFA}.progress{background:#CCFBF1}.progress span{background:linear-gradient(90deg,var(--brand),var(--secondary),var(--tertiary),var(--brand));background-size:240% 100%}
.alert-success{background:#ECFDF5;border-color:#A7F3D0;color:#047857}.alert-danger{background:#FEF2F2;border-color:#FECACA;color:#B91C1C}.app-toast.success{background:#047857}.app-toast.error{background:#B91C1C}
.settings-nav{background:#fff;border-color:#E2E8F0}.settings-tab:hover{background:#F8FAFC}.settings-tab.active{background:var(--brand-soft);color:var(--brand-strong);box-shadow:inset 3px 0 0 var(--brand)}
.settings-section-icon{background:var(--brand-soft)!important;color:var(--brand)!important}.settings-panel[data-settings-panel="ai"] .settings-section-icon{background:var(--secondary-soft)!important;color:var(--secondary)!important}.settings-panel[data-settings-panel="google"] .settings-section-icon{background:#EFF6FF!important;color:var(--info)!important}.settings-panel[data-settings-panel="print"] .settings-section-icon{background:#FFF7ED!important;color:#EA580C!important}
.settings-save .save-surface{border-color:#CCFBF1;background:rgba(255,255,255,.96)}
.login-page{background:radial-gradient(circle at 12% 14%,rgba(13,148,136,.14) 0,transparent 34%),radial-gradient(circle at 86% 80%,rgba(147,51,234,.11) 0,transparent 30%),radial-gradient(circle at 74% 14%,rgba(236,72,153,.07) 0,transparent 24%),#F8FAFC}.login-card{border-color:#E2E8F0;box-shadow:0 30px 80px rgba(15,23,42,.12)}.login-card::before{content:"";display:block;height:3px;margin:-32px -32px 28px;border-radius:24px 24px 0 0;background:linear-gradient(90deg,var(--brand),var(--secondary),var(--tertiary))}
.mobile-topbar{background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid #E2E8F0}
.save-bar{border-color:#CCFBF1;box-shadow:0 12px 34px rgba(13,148,136,.08)}
.ui-table th{color:#334155;background:#F8FAFC}.ui-table tr:hover td{background:#FCFFFE}

/* Presentation mode: strip navigation chrome and maximize working area */
body.presentation-mode .sidebar{transform:translateX(-105%)}
body.presentation-mode .app-main{margin-left:0}
body.presentation-mode .mobile-topbar,body.presentation-mode .app-footer{display:none!important}
body.presentation-mode .presentation-exit{display:grid}
body.presentation-mode .container{max-width:1600px;padding:24px 34px 56px}
body.presentation-mode .page-enter{animation:presentationIn .28s ease both}
@keyframes presentationIn{from{opacity:.6;transform:scale(.992)}to{opacity:1;transform:none}}

@media(max-width:980px){.presentation-toggle{margin-top:8px}}
@media(prefers-reduced-motion:reduce){body.presentation-mode .page-enter{animation:none}}

.sidebar{transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.app-main{transition:margin-left .24s cubic-bezier(.2,.8,.2,1)}

/* === Plan page: vertical 20-week timeline === */
.plan-page-head .actions{max-width:760px;justify-content:flex-end}
.plan-details-panel{margin-bottom:20px;border-color:#CCFBF1;box-shadow:0 16px 40px rgba(13,148,136,.08)}
.plan-details-panel[hidden]{display:none!important}.plan-details-panel.is-open{animation:panelReveal .28s cubic-bezier(.2,.8,.2,1) both}
.section-head,.section-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.section-head{margin-bottom:20px}.section-head h2,.section-title-row h2{margin:3px 0 3px;font-size:20px;letter-spacing:-.02em}.section-head p,.section-title-row p{margin:0;color:var(--muted);font-size:13px}.eyebrow{display:block;color:var(--brand);font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}.section-title-row{margin:30px 0 13px}.count-badge{display:inline-flex;align-items:center;min-height:32px;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:650}
.weeks-list{display:flex;flex-direction:column;gap:10px}.week-row{display:flex;align-items:center;justify-content:space-between;gap:22px;width:100%;padding:17px 18px;background:#fff;border:1px solid #E2E8F0;border-radius:16px;box-shadow:0 3px 14px rgba(15,23,42,.035);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;animation:cardIn .35s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--card-index,0)*25ms)}.week-row:hover{transform:translateY(-2px);border-color:#99F6E4;box-shadow:0 12px 28px rgba(13,148,136,.08)}.week-row.done{border-left:3px solid var(--success)}.week-row-main{min-width:0;flex:1}.week-row-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}.week-pill{display:inline-flex;align-items:center;min-height:27px;padding:4px 10px;border-radius:999px;background:var(--brand-soft);border:1px solid #99F6E4;color:var(--brand-strong);font-size:11px;font-weight:700}.week-date{color:var(--muted);font-size:12px}.week-row-title-wrap{min-width:0}.week-title-label{display:block;color:var(--subtle);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1px}.week-row .week-topic{min-height:0;margin:0;font-size:18px;line-height:1.4;font-weight:700;color:var(--ink);letter-spacing:-.015em}.week-row .week-unit{min-height:0;margin:3px 0 0;color:var(--muted);font-size:12px}.week-row-actions{flex:0 0 auto;justify-content:flex-end}.week-row .status{font-size:10px}.week-row.done .status{background:#ECFDF5;color:#047857}.week-row:not(.done) .status{background:#F8FAFC;color:#94A3B8}
.btn.with-icon .ui-icon{width:17px;height:17px}.btn-sm.with-icon .ui-icon{width:15px;height:15px}.btn-lg.with-icon .ui-icon{width:18px;height:18px}.login-card .btn{width:100%;align-self:stretch}
@keyframes panelReveal{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@media(max-width:980px){.week-row{align-items:flex-start;flex-direction:column}.week-row-actions{width:100%;justify-content:flex-start}.plan-page-head .actions{max-width:none}}
@media(max-width:620px){.week-row{padding:15px}.week-row-actions .btn{flex:1 1 auto}.week-row .week-topic{font-size:16px}.section-title-row{align-items:center}}

/* SPT LearnPlan V8 Brand */
.brand-mark.brand-logo{width:58px;height:58px;border-radius:16px;background:#fff;padding:4px;overflow:hidden;box-shadow:0 8px 22px rgba(37,99,235,.12);border:1px solid #e2e8f0}.brand-mark.brand-logo img{width:100%;height:100%;object-fit:contain;display:block}.sidebar-brand{align-items:center;padding-bottom:20px}.sidebar-brand .brand-copy strong{font-size:16px}.mobile-brand-logo{width:32px;height:32px;object-fit:contain;border-radius:8px;background:#fff}.mobile-topbar{gap:10px}.login-brand-modern{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:18px}.login-logo{width:118px;height:118px;object-fit:contain;display:block}.login-brand-modern>span{font-weight:750;font-size:18px}.swal2-popup{font-family:"Noto Sans Thai",sans-serif!important;border-radius:22px!important}.swal2-confirm,.swal2-cancel{border-radius:12px!important;font-family:"Noto Sans Thai",sans-serif!important}
/* PlanPrompt institutional design language */
:root{--brand:#1686ee;--brand-hover:#086ed3;--line:#dae9f8;--teal:#1686ee;--primary:#1686ee;--background:#f4f9ff}
body.app-shell{background:radial-gradient(ellipse at 92% 0,rgba(88,183,255,.13),transparent 30%),radial-gradient(ellipse at 4% 60%,rgba(22,134,238,.06),transparent 40%),#f5f9fe}
.sidebar{background:linear-gradient(170deg,#082747 0%,#073c6d 58%,#0c5395 100%)!important;color:#e8f6ff;border-right:1px solid rgba(255,255,255,.10)}
.sidebar .nav-item{color:#d7eeff}.sidebar .nav-item:hover{background:rgba(255,255,255,.1)}.sidebar .nav-item.active{background:#1686ee!important;color:#fff!important;box-shadow:0 10px 20px rgba(2,27,58,.25)}
.sidebar-brand{border-bottom:1px solid rgba(255,255,255,.12)}.brand-copy strong{color:#fff}.brand-copy span{color:#a8dbff}.sidebar-user{background:rgba(255,255,255,.07)}.sidebar-user .user-meta strong{color:#fff}.sidebar-user .user-meta span{color:#b6d8f3}
.card,.plan-workspace-card{border-color:#e0ecf9;box-shadow:0 10px 32px rgba(10,69,124,.045)}.btn-primary{background:linear-gradient(135deg,#138cf5,#1370d4)!important;border-color:#1885e7!important;color:white!important;box-shadow:0 7px 14px rgba(17,119,220,.15)}.btn-primary:hover{background:linear-gradient(135deg,#0a77d3,#0358b5)!important;transform:translateY(-1px)}.pill{background:#e5f3ff!important;color:#0a66b6!important}.eyebrow{color:#187adb!important}.page-enter{animation:ppAppear .42s ease-out both}@keyframes ppAppear{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.pp-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:20px}.pp-toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.pp-switch{display:flex!important;flex-direction:row!important;align-items:center;gap:10px;padding:11px;border:1px solid #daebfa;border-radius:13px;background:#f8fcff}.pp-switch input{width:19px!important;height:19px!important;flex:none;accent-color:#1384e6}.pp-count{color:#1676ca;font-size:13px;font-weight:600}.pp-table-scroller{overflow-x:auto;margin-top:14px}.pp-table-scroller .ui-table{width:100%;min-width:620px}.pp-table-scroller small{display:block;color:#6983a1}.pp-area-list{margin-top:15px;display:grid;gap:9px}.pp-inline-edit{display:grid;grid-template-columns:1.2fr 1fr auto;gap:8px;align-items:center;background:#f8fbff;border:1px solid #e5eff9;padding:9px;border-radius:14px}.pp-inline-edit input,.pp-inline-edit select{min-width:0}.pp-assignment{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px;border:1px solid #e4eef8;border-radius:13px;background:#fbfdff}.pp-assignment strong{display:block}.pp-assignment small{display:block;color:#738aa1}.pp-assignment .actions{flex-wrap:wrap}
.pp-week-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}.pp-week-card{padding:20px!important;border-radius:21px;transition:transform .18s,box-shadow .18s}.pp-week-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(17,87,156,.1)}.pp-week-heading{display:flex;align-items:start;justify-content:space-between;border-bottom:1px solid #e5eff8;margin-bottom:15px;padding-bottom:12px}.pp-week-heading h2{margin:2px 0;font-size:19px}.pp-week-heading p{margin:2px 0;color:#738aa1}.pp-week-heading small{letter-spacing:.12em;font-size:11px;color:#1e81d3;font-weight:800}.pp-round{border-radius:16px;background:#e7f4ff;color:#1477ce;font-size:19px;font-weight:800;padding:10px 15px}.pp-doc-row{padding:14px;margin-top:12px;border:1px solid #e7eff9;border-radius:16px;background:#fff}.pp-doc-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.pp-doc-top strong{font-size:14px}.pp-doc-row p{font-size:12px;margin:4px 0 9px}.pp-doc-row .actions{display:flex;flex-wrap:wrap;gap:8px}.pp-doc-row .btn{font-size:12px;padding:7px 11px}.pp-legend{display:flex;flex-wrap:wrap;gap:8px}.pp-chip{display:inline-flex;align-items:center;white-space:nowrap;font-size:11px;font-weight:700;padding:5px 10px;border-radius:100px;border:1px solid transparent}.pp-chip.upcoming{background:#eef2f7;color:#5e7187}.pp-chip.missing{background:#fff1f0;color:#b63832}.pp-chip.submitted{background:#e2f2ff;color:#136aaf}.pp-chip.late{background:#ffefe3;color:#b35b05}.pp-chip.revision{background:#ffe8e8;color:#be2626}.pp-chip.resubmitted{background:#fff0da;color:#b46603}.pp-chip.approved{background:#e0f7e9;color:#0b8b4a}.pp-review-strip{display:flex;gap:8px;padding:6px 0}.pp-step{display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:50%;font-size:13px;font-weight:800;background:#ebf0f5;color:#8699aa;border:1px solid #dbe4ed}.pp-step.approved{background:#daf7e6;border-color:#98e8bd;color:#159054}.pp-step.revision{background:#fee7e7;color:#cb3131;border-color:#f8bfbf}.pp-step.resubmitted{background:#fff0d0;border-color:#fad18c;color:#bb7408}.pp-file-link{display:block;color:#1475c8;font-size:12px;margin:6px 0;text-overflow:ellipsis;overflow:hidden}.pp-submit-form{border-top:1px dashed #dbe9f4;margin-top:10px;padding-top:12px;display:grid;gap:8px}.pp-submit-form label{font-size:12px;font-weight:600}.pp-submit-form input{font-size:12px}.pp-submit-form .btn{justify-self:start}.pp-holiday{padding:8px 12px;background:#fff5e4;color:#95611a;border-radius:10px;font-size:12px}.pp-filters{display:grid;grid-template-columns:1fr 1fr 1.6fr auto;gap:10px;align-items:center}.pp-review-detail-head{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.pp-approval-pipeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.pp-pipeline-item{display:flex;align-items:center;flex-direction:column;text-align:center;padding:16px 8px;border-radius:17px;background:#f6fbff;border:1px solid #e4effb;gap:6px}.pp-pipeline-item .pp-step{width:39px;height:39px}.pp-pipeline-item small{font-size:11px;color:#60758c}.pp-comment{background:#f7fbff;border-left:4px solid #1584eb;border-radius:12px;padding:12px 15px;margin:10px 0}.pp-comment p{margin:5px 0}.pp-sign-wrap{display:grid;gap:8px}.pp-sign-wrap canvas{display:block;width:min(100%,650px);height:auto;touch-action:none;background:#fff;border:2px dashed #a8cdea;border-radius:14px;cursor:crosshair}.pp-signature-preview{max-width:120px;max-height:55px;object-fit:contain}.pp-autosave-state{position:sticky;top:8px;z-index:10;align-self:start;background:#e5f3ff;border:1px solid #b9dcff;border-radius:12px;padding:8px 12px;font-size:12px;color:#1765a1;width:max-content;max-width:100%;margin-left:auto}
@media(max-width:1100px){.pp-columns,.pp-week-grid{grid-template-columns:1fr}}@media(max-width:750px){.pp-toggle-grid,.pp-approval-pipeline{grid-template-columns:1fr}.pp-filters{grid-template-columns:1fr 1fr}.pp-inline-edit{grid-template-columns:1fr}.pp-assignment{align-items:flex-start;flex-direction:column}}

.pp-day-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:9px}.pp-day-strip span{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:9px;background:#f0f7ff;color:#287dc3}.pp-day-strip b{font-size:12px}.pp-day-strip small{font-size:10px;color:#6c89a6}

.pp-brand-mark,.pp-login-mark,.pp-mobile-mark{position:relative;display:inline-flex;justify-content:center;align-items:center;flex:none;background:linear-gradient(135deg,#4bb9ff,#1269d7);color:#fff!important;font-family:system-ui,sans-serif;font-size:23px;font-weight:850;letter-spacing:-.08em;border:1px solid #7dcbff;border-radius:15px;box-shadow:0 7px 19px rgba(12,105,210,.2)}.pp-brand-mark{width:45px;height:45px}.pp-brand-mark span,.pp-login-mark span{position:absolute;top:-8px;right:-7px;font-size:16px;color:#f9d84e;text-shadow:0 2px 3px #1972ba}.pp-login-mark{width:68px;height:68px;font-size:35px}.pp-mobile-mark{width:32px;height:32px;font-size:19px;border-radius:11px}

/* PlanPrompt staff registry tabs */
.pp-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 20px;padding:6px;background:#eaf6ff;border:1px solid #cce9ff;border-radius:15px}.pp-tab{border:0;border-radius:11px;background:transparent;padding:11px 18px;font:inherit;font-weight:700;color:#447094;cursor:pointer;transition:all .2s}.pp-tab:hover{background:#d8efff}.pp-tab.active{background:#fff;color:#0875c9;box-shadow:0 3px 12px #348bd326}[data-pp-panel][hidden]{display:none!important}.pp-staff-photo{height:52px;width:44px;object-fit:cover;border-radius:10px;background:#e8f5ff}

/* Personnel directory and modal redesign */
.pp-staff-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.pp-staff-directory{padding:22px}.pp-staff-toolbar{display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap}.pp-staff-toolbar h2{margin:0 0 4px}.pp-staff-toolbar p{margin:0}.pp-staff-search-label{min-width:min(100%,280px);font-size:12px}.pp-staff-search-label input{margin-top:5px}.pp-area-filters{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 10px}.pp-area-filter{border:1px solid #d1e7f9;color:#426b90;background:#f5faff;border-radius:999px;padding:8px 13px;cursor:pointer;font:inherit;font-size:12px;font-weight:700;transition:all .2s}.pp-area-filter:hover{background:#e3f2ff}.pp-area-filter.active{background:#1686ee;color:#fff;border-color:#1686ee;box-shadow:0 5px 14px #1686ee25}.pp-area-filter span{opacity:.7;margin-left:5px}.pp-staff-table{min-width:1000px}.pp-staff-identity{display:flex;align-items:center;gap:12px;min-width:185px}.pp-staff-identity strong{display:block}.pp-staff-identity small{display:block;color:#74869e;font-size:11px}.pp-staff-avatar{width:44px;height:52px;align-items:center;justify-content:center;border-radius:10px;background:#e5f4ff}.pp-person-status{display:inline-block;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:700}.pp-person-status.on{background:#e1faeb;color:#117d46}.pp-person-status.off{background:#fff0ed;color:#c44137}.pp-staff-empty{padding:40px 20px;text-align:center;color:#7590aa}.pp-staff-table tr[hidden],.pp-staff-empty[hidden]{display:none!important}body.pp-modal-open{overflow:hidden}.pp-modal-overlay{position:fixed;inset:0;z-index:5000;background:rgba(7,32,62,.57);display:flex;justify-content:center;align-items:center;padding:18px;animation:ppAppear .2s ease-out}.pp-modal-overlay[hidden]{display:none!important}.pp-modal{width:min(100%,680px);max-height:min(90vh,850px);display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:22px;box-shadow:0 25px 75px #002a5760}.pp-modal-header{padding:24px 26px 18px;border-bottom:1px solid #e0edf9;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.pp-modal-header h2{margin:4px 0;font-size:23px}.pp-modal-header p{margin:0;font-size:12px;color:#6a8298}.pp-modal-close{background:#eef6fe;border:0;border-radius:11px;color:#286d9d;font-size:27px;line-height:1;cursor:pointer;width:36px;height:36px;flex:none}.pp-modal-body{padding:22px 26px 26px;overflow-y:auto}.pp-modal-body label small{display:block;margin-top:5px;color:#7289a2;font-weight:400}.pp-modal-actions{display:flex;justify-content:flex-end;gap:9px;padding-top:14px;border-top:1px solid #ebf2f9}.pp-csv-guide{background:#f1f8ff;border:1px solid #d5eafb;border-radius:15px;padding:18px;display:grid;gap:9px}.pp-csv-guide p{margin:0;font-size:13px;color:#53708a}.pp-csv-guide .btn{justify-self:start}.pp-csv-guide small{word-break:break-word;color:#6c89a6}@media(max-width:650px){.pp-staff-directory{padding:14px}.pp-staff-heading .actions{width:100%;flex-wrap:wrap}.pp-staff-heading .actions .btn{flex:1}.pp-modal-header{padding:17px}.pp-modal-body{padding:17px}.pp-staff-search-label{width:100%}}

/* v1.0.4: prevent modal clipping and keep actions accessible */
.pp-modal-overlay{box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;align-items:safe center}
.pp-modal{box-sizing:border-box;max-height:calc(100dvh - 36px);min-height:0}
.pp-modal-header{flex-shrink:0}
.pp-modal-body{min-height:0;flex:1 1 auto;overscroll-behavior:contain}
.pp-modal-actions{position:sticky;bottom:-26px;background:#fff;z-index:2;padding-bottom:4px}
@media(max-width:650px){.pp-modal-overlay{padding:8px}.pp-modal{max-height:calc(100dvh - 16px);border-radius:16px}.pp-modal-actions{flex-wrap:wrap;bottom:-17px}}