:root{
--purple:#6d28d9; --purple-d:#4c1d95; --purple-l:#f5f3ff; --purple-2:#7c3aed;
--yellow:#f5b50a; --yellow-d:#d99405; --yellow-l:#fef6dd;
--ink:#1e1b2e; --muted:#6b7280; --line:#ece9f3; --bg:#f6f4fb; --white:#fff;
--ok:#16a34a; --warn:#d97706; --bad:#dc2626; --info:#2563eb;
--radius:18px; --radius-sm:12px;
--shadow-sm:0 1px 2px rgba(76,29,149,.05), 0 2px 10px rgba(76,29,149,.05);
--shadow:0 12px 34px -10px rgba(76,29,149,.20);
--shadow-lg:0 28px 70px -16px rgba(76,29,149,.36);
--ring:0 0 0 4px rgba(124,58,237,.18);
--grad:linear-gradient(135deg,#8b5cf6 0%,#6d28d9 52%,#4c1d95 100%);
--grad-y:linear-gradient(135deg,#f7c948,#f59e0b);
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:"Sarabun","Segoe UI",Tahoma,sans-serif;background:
radial-gradient(1200px 600px at 110% -10%, #ede9fe 0%, transparent 55%),
radial-gradient(900px 500px at -10% 110%, #ede9fe 0%, transparent 50%), var(--bg);
background-attachment:fixed;color:var(--ink);font-size:15px;line-height:1.65}
a{color:var(--purple);text-decoration:none;font-weight:600;cursor:pointer}
a:hover{color:var(--purple-d)}
.boot{padding:70px;text-align:center;color:var(--muted)}
.hidden{display:none!important}
::selection{background:var(--purple-l)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#d8d2ec;border-radius:20px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#c4b9e6;background-clip:content-box}
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;border:0;cursor:pointer;
padding:11px 22px;border-radius:12px;font-size:15px;font-weight:600;font-family:inherit;
transition:transform .12s ease, box-shadow .2s ease, background .2s ease;white-space:nowrap;letter-spacing:.1px}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn:focus-visible{outline:3px solid rgba(124,58,237,.45);outline-offset:2px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 18px -6px rgba(109,40,217,.55)}
.btn-primary:hover{box-shadow:0 12px 26px -6px rgba(109,40,217,.7);transform:translateY(-2px)}
.btn-yellow{background:var(--grad-y);color:#3b2f00;box-shadow:0 8px 18px -6px rgba(217,148,5,.5)}
.btn-yellow:hover{box-shadow:0 12px 26px -6px rgba(217,148,5,.65);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--purple);border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--purple-l);border-color:#ddd4f5;transform:translateY(-1px)}
.btn-danger{background:#fef2f2;color:var(--bad);border:1.5px solid #f7c9c9;font-weight:700}
.btn-danger:hover{background:#fee2e2;border-color:#f0a9a9;transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(220,38,38,.4)}
.btn-sm{padding:7px 14px;font-size:13px;border-radius:9px}
.btn-block{width:100%}
label{display:block;font-weight:600;margin:16px 0 7px;font-size:14px;color:#3a3450}
.req{color:var(--bad)}
input,select,textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;
font-family:inherit;font-size:15px;background:#fcfbfe;color:var(--ink);transition:border .15s, box-shadow .15s, background .15s}
input::placeholder,textarea::placeholder{color:#aaa}
input:hover,select:hover,textarea:hover{border-color:#d8cef2}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--purple-2);background:#fff;box-shadow:var(--ring)}
input:disabled{background:#f7f6fb;color:#8a8599}
textarea{min-height:96px;resize:vertical;line-height:1.6}
select{appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236d28d9' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 16px center;padding-right:38px}
.hint{font-size:12.5px;color:var(--muted);margin-top:5px}
.row{display:flex;gap:16px;flex-wrap:wrap}
.row>*{flex:1;min-width:200px}
.card{background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(109,40,217,.06);border-radius:var(--radius);
box-shadow:0 10px 30px -10px rgba(76, 29, 149, 0.08), 0 1px 3px rgba(76, 29, 149, 0.03);
padding:24px;margin-bottom:20px;position:relative;
transition:all .25s cubic-bezier(0.4, 0, 0.2, 1)}
.card:hover{transform:translateY(-2px);box-shadow:0 20px 40px -15px rgba(76, 29, 149, 0.14)}
.card h2,.card h3{margin-top:0}
.card h3{color:var(--purple-d);font-size:17px;font-weight:700;display:flex;align-items:center;gap:8px}
.card-pad{padding:30px}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.app-boot{min-height:100vh;min-height:100dvh;background:var(--grad);position:relative;z-index:0}
.app-dashboard{min-height:100vh;min-height:100dvh;background:radial-gradient(circle at 10% 20%, #f3f0ff 0%, transparent 45%),
radial-gradient(circle at 90% 80%, #ede9fe 0%, transparent 45%), #f8f6fc;
position:relative;z-index:0}
.auth2{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px;
background:radial-gradient(1000px 520px at 110% -10%, #ede9fe 0%, transparent 55%),
radial-gradient(820px 460px at -10% 110%, #ede9fe 0%, transparent 50%), var(--bg);
position:relative;overflow:hidden;z-index:0}
.auth2-card{display:flex;width:100%;max-width:940px;min-height:564px;
background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.85);border-radius:28px;
overflow:hidden;box-shadow:var(--shadow-lg);animation:pop .34s cubic-bezier(.2,.9,.3,1.2);
position:relative;z-index:1}
.auth2-brand{position:relative;flex:0 0 46%;color:#fff;padding:48px 36px;
display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;
background:
radial-gradient(120% 90% at 0% 0%, rgba(196,181,253,.55) 0%, transparent 55%),
radial-gradient(120% 90% at 100% 0%, rgba(167,139,250,.40) 0%, transparent 52%),
radial-gradient(130% 100% at 50% 120%, rgba(91,33,182,.55) 0%, transparent 60%),
radial-gradient(100% 80% at 90% 90%, rgba(124,58,237,.35) 0%, transparent 50%),
linear-gradient(150deg,#8b5cf6 0%,#7c3aed 48%,#6d28d9 100%);
background-size:200% 200%, 200% 200%, 200% 200%, 200% 200%, 100% 100%;
background-position:0% 0%, 100% 0%, 50% 100%, 90% 90%, 0 0;
animation:auroraShift 18s ease-in-out infinite}
@keyframes auroraShift{
0%,100%{background-position:0% 0%, 100% 0%, 50% 100%, 90% 90%, 0 0}
50%{background-position:30% 20%, 70% 30%, 40% 80%, 60% 70%, 0 0}
}
@media(prefers-reduced-motion:reduce){.auth2-brand{animation:none}}
.ab-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
.ab-welcome{font-size:20px;font-weight:600;opacity:.95;margin-bottom:20px;letter-spacing:.3px}
.ab-logo{margin:4px 0 16px;position:relative;display:inline-block}
.ab-logo:after{content:"";position:absolute;inset:-5px;
border-radius:calc(var(--brand-logo,140px) * .2 + 5px);
background:linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.15));
z-index:-1;box-shadow:0 0 20px rgba(255,255,255,0.25);animation:pulse-ring 3s infinite ease-in-out}
@keyframes pulse-ring{0%,100%{transform:scale(1);opacity:0.8}50%{transform:scale(1.06);opacity:0.45}}
.ab-logo-img,.ab-logo-txt{width:var(--brand-logo,140px);height:var(--brand-logo,140px);
border-radius:calc(var(--brand-logo,140px) * .2);background:#fff;
box-shadow:0 16px 40px rgba(0,0,0,.30);display:block}
.ab-logo-img{object-fit:contain;padding:6px}
.ab-logo-txt{display:flex;align-items:center;justify-content:center;color:var(--purple-d);font-weight:800;font-size:36px}
.ab-name{font-size:21px;font-weight:800;letter-spacing:.2px;line-height:1.25;white-space:nowrap}
.ab-name-en{margin-top:6px;font-size:13px;font-weight:600;letter-spacing:.6px;color:rgba(255,255,255,.82);text-transform:uppercase}
.ab-tag{margin:16px 0 0;font-size:13.5px;line-height:1.75;color:rgba(255,255,255,.86);max-width:290px}
.ab-foot{margin-top:auto;padding-top:26px;font-size:12px;color:rgba(255,255,255,.8);letter-spacing:.4px}
.ab-wave{position:absolute;top:0;right:-1px;height:100%;width:62px;z-index:2}
.auth2-form{flex:1;min-width:0;padding:48px 46px;display:flex;flex-direction:column;justify-content:center;overflow:auto}
.af-title{text-align:center;color:var(--ink);font-size:24px;font-weight:800;margin:0 0 14px;letter-spacing:-.2px}
.auth-sub{color:var(--muted);font-size:13.5px;margin:0 0 18px;text-align:center}
.auth-foot{margin-top:20px;text-align:center;font-size:14px;color:var(--muted)}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.32;z-index:0;
animation:float-blob 22s infinite alternate ease-in-out;pointer-events:none}
.blob-1{width:360px;height:360px;background:#c3b5fd;top:-8%;left:-8%;animation-duration:24s}
.blob-2{width:460px;height:460px;background:#fbcfe8;bottom:-12%;right:-8%;animation-duration:28s;animation-delay:-4s}
.blob-3{width:280px;height:280px;background:#c4b5fd;top:38%;left:48%;animation-duration:20s;animation-delay:-8s}
@keyframes float-blob{
0%{transform:translate(0,0) scale(1)}
50%{transform:translate(35px,-50px) scale(1.08)}
100%{transform:translate(-15px,15px) scale(0.96)}
}
.ic-in{display:inline-flex;align-items:center;justify-content:center;
vertical-align:-.18em;margin-inline-end:6px;flex-shrink:0;line-height:0}
.ic-in-r{margin-inline-end:0;margin-inline-start:6px}
.empty-ic{display:flex;align-items:center;justify-content:center;margin-bottom:10px;
color:var(--muted,#8b85a3);opacity:.65}
.empty-ic svg{height:40px;width:auto}
.input-wrapper{position:relative;display:flex;align-items:center;margin-bottom:14px}
.input-wrapper .input-icon{position:absolute;left:14px;color:#9b94b3;display:flex;
align-items:center;justify-content:center;pointer-events:none;transition:color .2s;
width:20px;height:20px;z-index:2}
.input-wrapper input{padding-left:44px;margin-bottom:0}
.input-wrapper input:focus + .input-icon{color:var(--purple-2)}
@media(max-width:820px){
.auth2{padding:0}
.auth2-card{flex-direction:column;max-width:460px;border-radius:0;min-height:100vh;min-height:100dvh;border:0}
.auth2-brand{flex:none;padding:34px 24px 30px}
.ab-logo-img,.ab-logo-txt{width:min(var(--brand-logo,140px),88px);height:min(var(--brand-logo,140px),88px)}
.ab-logo:after{inset:-4px}
.ab-name{font-size:21px;white-space:normal}.ab-welcome{margin-bottom:14px}
.ab-tag{display:none}.ab-foot{display:none}.ab-wave{display:none}
.auth2-form{padding:30px 24px 40px}
}
.brand-grid-pattern{position:absolute;inset:0;opacity:0.12;
background-image:radial-gradient(rgba(255,255,255,0.4) 1.5px, transparent 1.5px);
background-size:20px 20px;z-index:1;pointer-events:none}
.brand-glow{position:absolute;border-radius:50%;filter:blur(50px);opacity:0.35;z-index:0;pointer-events:none}
.brand-glow-1{width:220px;height:220px;background:#fbcfe8;top:-30px;right:-30px}
.brand-glow-2{width:240px;height:240px;background:#a78bfa;bottom:-40px;left:-30px}
.layout{display:flex;min-height:100vh;min-height:100dvh;
background:radial-gradient(circle at 10% 20%, #f3f0ff 0%, transparent 45%),
radial-gradient(circle at 90% 80%, #ede9fe 0%, transparent 45%), #f8f6fc;
position:relative;z-index:0;width:100%}
.sidebar{width:266px;background:linear-gradient(180deg, #7c3aed 0%, #6d28d9 55%, #5b21b6 100%);color:#fff;
display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:30;
transition:left .28s cubic-bezier(.4,0,.2,1);box-shadow:6px 0 30px -10px rgba(30,27,75,.6)}
.sidebar .side-brand{padding:18px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar .side-brand .logo{width:38px;height:38px;border-radius:11px;background:var(--grad-y);color:#4c1d95;
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;flex-shrink:0;box-shadow:0 6px 16px -4px rgba(245, 181, 10, 0.4)}
.sidebar .side-brand b{font-size:13.5px;line-height:1.3;font-weight:700;letter-spacing:.3px}
.nav{padding:12px 10px;flex:1;overflow:auto}
.nav a{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.82);padding:7px 11px;border-radius:10px;
margin-bottom:2px;font-weight:600;cursor:pointer;font-size:13px;position:relative;transition:all .2s ease}
.nav a .ic{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-svg{display:block;opacity:.92}
.nav a.active .nav-svg{opacity:1}
.bell .nav-svg,.theme-btn .nav-svg{opacity:1}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(4px)}
.nav a.active{background:var(--grad-y);color:#4c1d95;font-weight:700;box-shadow:0 6px 18px -6px rgba(245,181,10,.55)}
.nav a.active .ic{filter:none}
.side-foot{padding:16px;border-top:1px solid rgba(255,255,255,.08)}
.main{flex:1;margin-left:266px;display:flex;flex-direction:column;min-width:0}
.side-collapse{margin-left:auto;flex-shrink:0;width:26px;height:26px;border:0;border-radius:8px;cursor:pointer;
background:rgba(255,255,255,.16);color:#fff;font-size:14px;line-height:1;transition:background .16s}
.side-collapse:hover{background:rgba(255,255,255,.3)}
.layout.side-collapsed .sidebar{width:70px}
.layout.side-collapsed .main{margin-left:70px}
.layout.side-collapsed .side-brand b,
.layout.side-collapsed .nav-t,
.layout.side-collapsed .nav-chev,
.layout.side-collapsed .nav-badge,
.layout.side-collapsed .side-foot{display:none!important}
.layout.side-collapsed .side-brand{justify-content:center;padding:14px 8px}
.layout.side-collapsed .side-collapse{margin-left:0}
.layout.side-collapsed .nav a,
.layout.side-collapsed .nav-group-hdr{justify-content:center;padding-left:0;padding-right:0}
.layout.side-collapsed .nav .ic{margin:0}
.layout.side-collapsed .nav-group-body{display:block!important}
.layout.side-collapsed .sidebar{transition:width .2s cubic-bezier(.22,1,.36,1)}
.layout.side-collapsed .main{transition:margin-left .2s cubic-bezier(.22,1,.36,1)}
@media(max-width:860px){
.side-collapse{display:none}
.layout.side-collapsed .sidebar{width:266px}
.layout.side-collapsed .main{margin-left:0}
.layout.side-collapsed .side-brand b,
.layout.side-collapsed .nav-t,
.layout.side-collapsed .nav-chev,
.layout.side-collapsed .nav-badge,
.layout.side-collapsed .side-foot{display:revert!important}
}
.cell-clip{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lnk{color:var(--purple-d);font-weight:600;cursor:pointer;text-decoration:underline}
.lnk:hover{color:var(--purple)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:1024px){ .cell-clip{max-width:180px} }
@media(max-width:640px){ .cell-clip{max-width:130px} }
.topbar{background:rgba(255,255,255,0.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border:1px solid rgba(109, 40, 217, 0.08);border-radius:20px;
margin:20px 28px 0 28px;padding:12px 24px;display:flex;
align-items:center;gap:14px;position:sticky;top:20px;z-index:20;
box-shadow:0 10px 30px -10px rgba(76, 29, 149, 0.06), 0 1px 3px rgba(76, 29, 149, 0.02)}
.topbar .ham{display:none;font-size:24px;background:0;border:0;cursor:pointer;color:var(--purple);line-height:1}
.topbar .who{margin-left:auto;text-align:right;font-size:12.5px;color:var(--muted);
display:flex;align-items:center;gap:12px;flex-direction:row-reverse;
background:#f5f3ff;padding:6px 14px;border-radius:99px;border:1px solid rgba(109, 40, 217, 0.06)}
.topbar .who b{display:block;color:var(--purple-d);font-size:14px;font-weight:700}
.topbar .who-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;
background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:14px;box-shadow:0 2px 8px rgba(109,40,217,.22);border:2px solid #fff;
user-select:none;text-transform:uppercase}
.content{padding:24px 28px 40px 28px;max-width:1400px;width:100%;margin:0 auto}
.layout.side-collapsed .content{max-width:none}
.page-title{font-size:25px;font-weight:800;color:var(--purple-d);margin:0 0 4px;letter-spacing:-.3px;
display:inline-block;position:relative}
.page-title:after{content:"";display:block;width:48px;height:4px;border-radius:3px;margin-top:7px;background:var(--grad-y)}
.page-sub{color:var(--muted);margin:0 0 24px;font-size:14.5px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head .page-title{margin-bottom:2px}
.scrim{display:none;position:fixed;inset:0;background:rgba(30,20,50,.5);backdrop-filter:blur(2px);z-index:25}
.table{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
.table th{position:sticky;top:0;z-index:5;background:#fbf9fe;color:var(--purple-d);text-align:left;
padding:14px 16px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;
border-bottom:2px solid rgba(109, 40, 217, 0.08)}
.table td{padding:14px 16px;border-top:1px solid rgba(109, 40, 217, 0.04);vertical-align:middle}
.table tbody tr{transition:all .2s ease}
.table tbody tr:nth-child(even) td{background:#fafafc}
.table tbody tr:hover td{background:rgba(109, 40, 217, 0.02)!important}
.table tbody tr[onclick]:hover{box-shadow:inset 4px 0 0 var(--purple)}
.table tbody tr.row-selected td{background:rgba(109,40,217,.10)!important;font-weight:500}
.table tbody tr.row-selected td:first-child{box-shadow:inset 4px 0 0 var(--purple)}
.table tbody tr[onclick]:active{transform:translateY(.5px)}
.table-wrap{overflow:auto;max-height:78vh;border:1px solid rgba(109, 40, 217, 0.08);border-radius:var(--radius);
box-shadow:0 8px 25px -10px rgba(76, 29, 149, 0.06);background:#fff}
.ccf-tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
background:var(--white);box-shadow:0 8px 25px -10px rgba(76,29,149,.06)}
.ccf-tbl{width:100%;border-collapse:collapse;font-size:14px;background:transparent;table-layout:fixed}
.ccf-tbl th{background:var(--purple-l);color:var(--purple-d);text-align:left;padding:11px 14px;
font-size:12.5px;font-weight:800;border-bottom:1px solid var(--line);white-space:nowrap}
.ccf-tbl td{padding:13px 14px;border-top:1px solid var(--line);vertical-align:top}
.ccf-tbl tr.ccf-cat td{background:var(--purple-l);color:var(--purple-d);font-weight:800;font-size:14px;
padding:11px 14px;overflow-wrap:anywhere;word-break:break-word}
.ccf-tbl td.ccf-no{text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.ccf-q{min-width:0;overflow-wrap:anywhere;word-break:break-word;line-height:1.65}
.ccf-tbl th.ccf-c-no{width:52px}
.ccf-tbl th.ccf-c-q{width:32%}
.ccf-tbl th.ccf-c-res{width:320px}
.ccf-tbl th.ccf-c-cm{width:34%}
.ccf-cm textarea{margin:0;resize:vertical;font-size:13.5px;padding:10px 12px;
min-height:118px;line-height:1.7}
.ccf-tbl td.ccf-cm{white-space:pre-wrap}
.ccf-chips{display:flex;gap:6px;flex-wrap:wrap}
.ccf-chip{position:relative;display:inline-flex;margin:0;font-weight:400;cursor:pointer}
.ccf-chip input{position:absolute;opacity:0;width:1px;height:1px;min-width:0;margin:0;padding:0;border:0}
.ccf-chip span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:7px 13px;
border-radius:999px;border:1.5px solid var(--line);background:var(--white);color:var(--muted);
font-size:13.5px;font-weight:700;transition:background .15s,border-color .15s,color .15s}
.ccf-chip:hover input:not(:disabled) ~ span{border-color:var(--purple-2);color:var(--purple-d)}
.ccf-chip input:focus-visible ~ span{box-shadow:var(--ring)}
.ccf-chip input:checked ~ span{color:#fff;border-color:transparent}
.ccf-chip-y input:checked ~ span{background:#15803d}
.ccf-chip-n input:checked ~ span{background:#b91c1c}
.ccf-chip-na input:checked ~ span{background:#64748b}
.ccf-chip input:disabled ~ span{cursor:default}
.ccf-chip input:disabled:not(:checked) ~ span{opacity:.4}
.ccf-qcard{border:1px solid var(--line);border-radius:16px;background:var(--white);
padding:16px 18px;margin-bottom:12px;box-shadow:var(--shadow-sm);
transition:border-color .15s,box-shadow .15s}
.ccf-qcard:has(input:checked){border-color:var(--purple-2);
box-shadow:inset 4px 0 0 var(--purple), 0 2px 12px rgba(109,40,217,.07)}
.ccf-qhead{display:flex;align-items:flex-start;gap:11px;padding-bottom:12px;margin-bottom:14px;
border-bottom:1px solid var(--line)}
.ccf-qno{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
border-radius:50%;background:var(--purple);color:#fff;font-weight:800;font-size:13px;
box-shadow:0 0 0 4px var(--purple-l)}
.ccf-qtxt{min-width:0;overflow-wrap:anywhere;word-break:break-word;font-weight:700;
color:var(--purple-d);line-height:1.55;padding-top:3px;font-size:15px}
.ccf-opt{display:block;margin:0 0 8px;cursor:pointer;font-weight:400}
.ccf-opt:last-child{margin-bottom:0}
.ccf-opt input{position:absolute;opacity:0;width:1px;height:1px;min-width:0;margin:0;padding:0;border:0}
.ccf-optb{display:flex;align-items:flex-start;gap:11px;padding:12px 15px;border:1.5px solid var(--line);
border-radius:13px;background:var(--white);font-size:14.5px;line-height:1.6;color:var(--ink);
transition:background .15s,border-color .15s,box-shadow .15s,transform .12s}
.ccf-optb::before{content:"";flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;margin-top:1px;border-radius:50%;line-height:1;font-size:11px;font-weight:900;
color:transparent;border:2px solid var(--line);background:var(--white);
transition:background .15s,border-color .15s,color .15s}
.ccf-opt:hover input:not(:disabled) ~ .ccf-optb{border-color:var(--purple-2);background:var(--purple-l);
transform:translateY(-1px)}
.ccf-opt input:focus-visible ~ .ccf-optb{box-shadow:var(--ring)}
.ccf-opt input:checked ~ .ccf-optb{border-color:var(--purple-2);background:var(--purple-l);font-weight:600;
box-shadow:0 2px 8px rgba(109,40,217,.10)}
.ccf-opt input:checked ~ .ccf-optb::before{content:"✓";border-color:var(--purple);
background:var(--purple);color:#fff}
.ccf-opt input:disabled ~ .ccf-optb{cursor:default}
.ccf-opt input:disabled ~ .ccf-optb:hover{transform:none}
.ccf-opt-txt{min-width:0;overflow-wrap:anywhere;word-break:break-word}
@media (min-width:720px){
.ccf-qcard:has(.ccf-opt){display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.ccf-qcard:has(.ccf-opt) > .ccf-qhead{flex:0 0 100%;margin-bottom:0}
.ccf-qcard:has(.ccf-opt) > .ccf-opt{flex:1 1 240px;min-width:0;margin:0}
.ccf-qcard:has(.ccf-opt) > .ccf-opt > .ccf-optb{height:100%}
.ccf-qcard:has(.ccf-opt) > .ccf-warn{flex:0 0 100%}
.ccf-qcard:has(.ccf-ansopt){display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.ccf-qcard:has(.ccf-ansopt) > .ccf-qhead{flex:0 0 100%;margin-bottom:0}
.ccf-qcard:has(.ccf-ansopt) > .ccf-ansopt{flex:1 1 240px;min-width:0;margin:0}
.ccf-qcard:has(.ccf-ansopt) > .ccf-warn{flex:0 0 100%}
.ccf-qcard:has(.ccf-ansopt) > div{flex:0 0 100%}
}
.ccf-sec{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:32px 0 15px;
padding:13px 17px;border-radius:14px;position:relative;
background:var(--purple-l);border:1px solid var(--purple-2)}
.ccf-sec:before{content:"";width:4px;height:20px;border-radius:99px;
background:var(--grad,var(--purple));flex:0 0 auto}
.ccf-sec h2{margin:0;font-size:17.5px;font-weight:800;letter-spacing:-.2px;color:var(--purple-d);
min-width:0;overflow-wrap:anywhere;word-break:break-word}
.ccf-sec .ccf-cnt{margin-left:auto}
.ccf-cnt{font-size:12.5px;font-weight:800;color:var(--purple-d);background:var(--purple-l);
border-radius:999px;padding:3px 11px;white-space:nowrap}
.ccf-warn{display:inline-block;font-size:12.5px;font-weight:700;color:#b45309;
background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);border-radius:999px;padding:4px 11px}
.ccf-empty{border:1px dashed var(--line);border-radius:var(--radius);background:var(--white);
padding:22px;text-align:center;color:var(--muted);font-size:14px}
.ccf-p3{border:1px solid var(--line);border-radius:var(--radius);
background:var(--white);padding:16px 18px}
.ccf-p3-txt{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;
font-size:14px;line-height:1.8;color:var(--ink);margin:8px 0 12px}
.ccf-ack{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:12px;
background:transparent;border:1px solid var(--line);color:var(--ink);
font-weight:700;font-size:14px;cursor:pointer}
.ccf-ack input{width:17px;height:17px;min-width:17px;margin:2px 0 0;padding:0;border:0;
flex:0 0 auto;cursor:pointer;accent-color:var(--purple-2)}
.ccf-ack span{min-width:0;overflow-wrap:anywhere;word-break:break-word}
.ccf-done{border:1px solid var(--line);border-top:4px solid var(--purple);border-radius:var(--radius);
background:var(--white);padding:16px 18px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.ccf-done-cm{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;font-size:14px;
line-height:1.8;background:var(--purple-l);border-radius:12px;padding:12px 14px;margin-top:10px}
@media (max-width:700px){
.ccf-ansview .ccf-tw{overflow-x:visible;border:0;background:transparent;box-shadow:none}
.ccf-ansview .ccf-tbl{display:block;table-layout:auto;font-size:13.5px}
.ccf-ansview .ccf-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap}
.ccf-ansview .ccf-tbl tbody,.ccf-ansview .ccf-tbl tr{display:block}
.ccf-ansview .ccf-tbl tr.ccf-cat td{display:block;border-top:0;border-radius:10px;
margin:14px 0 8px;box-shadow:inset 4px 0 0 var(--purple)}
.ccf-ansview .ccf-tbl tr.ccf-item{border:1px solid var(--line);border-radius:12px;
background:var(--white);padding:10px 13px;margin-bottom:8px;box-shadow:var(--shadow-sm)}
.ccf-ansview .ccf-tbl tr.ccf-item td{display:block;border-top:0;padding:3px 0}
.ccf-ansview .ccf-tbl td.ccf-no{display:inline;text-align:left;font-weight:800;color:var(--purple-d)}
.ccf-ansview .ccf-tbl td.ccf-no:after{content:". "}
.ccf-ansview .ccf-tbl td.ccf-q:not(.ccf-cm){display:inline;font-weight:600}
.ccf-ansview .ccf-tbl td.ccf-res:before,.ccf-ansview .ccf-tbl td.ccf-cm:before{
display:block;font-size:11.5px;font-weight:800;color:#64748b;margin:9px 0 3px}
.ccf-ansview .ccf-tbl td.ccf-res:before{content:"ผลการพิจารณา"}
.ccf-ansview .ccf-tbl td.ccf-cm:before{content:"คอมเมนต์ของกรรมการ"}
}
.ccf-ansview{margin-top:4px}
.ccf-ansview .ccf-sec{margin:18px 0 10px;padding:9px 13px}
.ccf-ansview .ccf-sec h2{font-size:15.5px}
.ccf-ansview .ccf-tbl th.ccf-c-res{width:132px}
.ccf-ansview .ccf-tbl th.ccf-c-q{width:38%}
.ccf-ansview .ccf-tbl th.ccf-c-cm{width:auto}
.ccf-ansview .ccf-tbl tr.ccf-cat td{box-shadow:inset 4px 0 0 var(--purple);
letter-spacing:.2px;font-size:13.5px;padding:12px 14px 12px 18px}
@media (min-width:701px){
.ccf-ansview .ccf-tbl tr.ccf-item:nth-of-type(even) td{background:rgba(109,40,217,.022)}
.ccf-ansview .ccf-tbl tr.ccf-item:hover td{background:var(--purple-l)}
.ccf-ansview .ccf-tbl th{padding:9px 14px;font-size:12px}
.ccf-ansview .ccf-tbl td{padding:11px 14px}
}
.ccf-na{color:var(--muted);font-size:13px;white-space:nowrap}
.ccf-ansview .ccf-na{color:#64748b}
.ccf-ansopt{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;margin-bottom:7px;
border:1.5px solid var(--line);border-radius:13px;background:var(--white);
font-size:14px;line-height:1.6;color:var(--muted)}
.ccf-ansopt:last-child{margin-bottom:0}
.ccf-ansopt::before{content:"";flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:18px;height:18px;margin-top:1px;border-radius:50%;line-height:1;font-size:11px;font-weight:900;
color:transparent;border:2px solid var(--line);background:var(--white)}
.ccf-ansopt{background:transparent;border-color:rgba(0,0,0,.07)}
.ccf-ansopt.is-on{color:var(--ink);font-weight:600;background:var(--purple-l);
border-color:var(--purple-2)}
.ccf-ansopt.is-on::before{content:"✓";border-color:var(--purple);background:var(--purple);color:#fff}
.ccf-ansopt input{position:absolute;opacity:0;width:1px;height:1px;min-width:0;margin:0;padding:0;border:0}
.ccf-ansopt:has(input:not(:disabled)){cursor:pointer}
.ccf-ansopt:has(input:not(:disabled)):hover{border-color:var(--purple-2);background:var(--purple-l)}
.ccf-pick{flex:0 0 auto;margin-left:auto;font-size:12px;font-weight:800;color:var(--purple-d);white-space:nowrap}
.ccf-cnt-hint{flex:0 0 auto;margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.rvv{padding:10px 14px;border-bottom:1px solid rgba(109,40,217,.09)}
.rvv:last-child{border-bottom:0}
.rvv + .rvv{background:transparent}
.rvv-hd{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.rvv-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:26px;height:26px;border-radius:50%;background:var(--purple-l);color:var(--purple-d)}
.rvv-ic svg{width:15px;height:15px}
.rvv-name{font-weight:800;font-size:13.5px;color:var(--ink);min-width:0;
overflow-wrap:anywhere;word-break:break-word}
.rvv-sub{font-size:11.5px;color:var(--muted);font-weight:400;white-space:nowrap}
.rvv-at{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.rvv-in{padding-left:35px}
.rvv-cm{font-size:13px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;
word-break:break-word;color:var(--ink);margin-top:6px}
.rvv-cm-none{font-size:12.5px;color:var(--muted);margin-top:6px}
.rvv-act{margin-top:9px}
.rvv-box{margin-top:10px}
@media (max-width:620px){
.rvv-in{padding-left:0}
.rvv-at{margin-left:0;flex-basis:100%}
}
.ccf-tg{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:9px;
border:1px solid var(--purple-2);background:var(--white);color:var(--purple-d);
font-size:12.5px;font-weight:700;cursor:pointer;line-height:1.5;
transition:background .15s,border-color .15s}
.ccf-tg:hover{background:var(--purple-l)}
.ccf-tg:focus-visible{box-shadow:var(--ring);outline:none}
.ccf-tg:after{content:"\25BE";font-size:11px}
.ccf-tg.is-open:after{content:"\25B4"}
.cc-acc-wrap{margin-top:10px}
.cc-acc{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
padding:13px 15px;border:1.5px solid var(--line);border-radius:14px;background:var(--white);
color:var(--ink);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
transition:border-color .15s,background .15s,box-shadow .15s}
.cc-acc:hover{border-color:var(--purple-2);background:var(--purple-l)}
.cc-acc:focus-visible{box-shadow:var(--ring);outline:none}
.cc-acc.is-open{border-color:var(--purple-2);background:var(--purple-l);
border-bottom-left-radius:0;border-bottom-right-radius:0}
.cc-acc-ic{flex:0 0 auto;width:20px;height:20px;border-radius:7px;background:var(--purple-l);
display:inline-flex;align-items:center;justify-content:center;color:var(--purple-d);
font-size:10px;transition:transform .18s ease}
.cc-acc-ic:before{content:"\25B8"}
.cc-acc.is-open .cc-acc-ic{transform:rotate(90deg);background:var(--white)}
.cc-acc-t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;color:var(--purple-d)}
.cc-acc-n{flex:0 0 auto;font-size:11.5px;font-weight:800;padding:2px 9px;border-radius:999px;
background:var(--purple-l);color:var(--purple-d)}
.cc-acc.is-open .cc-acc-n{background:var(--white)}
.cc-acc-go{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--purple)}
.cc-acc-box{border:1.5px solid var(--purple-2);border-top:0;border-radius:0 0 14px 14px;
padding:4px 15px 14px}
.cc-acc-box .ccf-tw{border:0;box-shadow:none;border-radius:0;background:transparent}
.cc-acc-box .ccf-ansview{margin-top:0}
.cc-acc-box .ccf-ansview > :first-child,
.cc-acc-box > :first-child{margin-top:0}
.cc-acc-box .ccf-tw,.cc-acc-box .ccx-wrap{margin-left:-15px;margin-right:-15px;width:auto}
.cc-acc-box .ccf-tbl th:first-child,.cc-acc-box .ccf-tbl td:first-child,
.cc-acc-box .ccx-tbl th:first-child,.cc-acc-box .ccx-tbl td:first-child{padding-left:15px}
.cc-acc-box .ccf-tbl th:last-child,.cc-acc-box .ccf-tbl td:last-child,
.cc-acc-box .ccx-tbl th:last-child,.cc-acc-box .ccx-tbl td:last-child{padding-right:15px}
.cc-acc-box .ccf-qcard{border-radius:13px;padding:13px 15px}
.cc-acc-box .ccf-cnt-hint{font-weight:700}
@media (max-width:620px){
.cc-acc{padding:11px 12px;font-size:13.5px}
.cc-acc-box .ccf-tw,.cc-acc-box .ccx-wrap{margin-left:-11px;margin-right:-11px}
.cc-acc-box .ccf-tbl th:first-child,.cc-acc-box .ccf-tbl td:first-child,
.cc-acc-box .ccx-tbl th:first-child,.cc-acc-box .ccx-tbl td:first-child{padding-left:11px}
.cc-acc-go{display:none}          /* จอแคบ — ลูกศรบอกสถานะอยู่แล้ว ไม่ต้องมีคำว่า ดูข้อมูล */
.cc-acc-box{padding:4px 11px 12px}
}
.ccpick{position:relative;display:flex;align-items:center;gap:11px;margin-top:8px;
padding:11px 14px;border:1.5px solid var(--line);border-radius:13px;background:var(--white);
font-weight:400;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.ccpick:hover{border-color:var(--purple-2)}
.ccpick input{position:absolute;opacity:0;width:1px;height:1px;min-width:0;margin:0;padding:0;border:0}
.ccpick:has(input:checked){border-color:var(--purple-2);background:var(--purple-l);
box-shadow:inset 3px 0 0 var(--purple)}
.ccpick:has(input:focus-visible){box-shadow:var(--ring)}
.ccpick-box{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:19px;height:19px;border-radius:6px;border:2px solid var(--line);background:var(--white);
color:transparent;font-size:12px;font-weight:900;line-height:1;transition:background .15s,border-color .15s}
.ccpick-box:before{content:"\2713"}
.ccpick:has(input:checked) .ccpick-box{background:var(--purple);border-color:var(--purple);color:#fff}
.ccpick-av{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:50%;background:var(--purple-l);color:var(--purple-d);
font-weight:800;font-size:13px}
.ccpick:has(input:checked) .ccpick-av{background:var(--purple);color:#fff}
.ccpick-name{flex:1;min-width:0;overflow-wrap:anywhere;word-break:break-word;
font-size:14px;font-weight:600;color:var(--ink)}
.ccpick-tag{flex:0 0 auto;font-size:11.5px;font-weight:700;white-space:nowrap}
.ccpick-wrap:has(input:checked) .ccpick-need{display:none}
.ccpick-need{font-size:12px;font-weight:700;color:#b45309;margin-top:8px}
.ccpick-hint{display:none;font-size:12px;color:var(--muted);margin-top:8px}
.ccpick-wrap:has(input:checked) .ccpick-hint{display:block}
.ccx-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.ccx-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.ccx-tbl th,.ccx-tbl td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ccx-tbl thead th{background:var(--purple-l);color:var(--purple-d);font-size:12.5px;white-space:nowrap}
.ccx-tbl thead th small{display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:1px}
.ccx-tbl tr.ccx-sec td{background:var(--purple-l);font-weight:700;color:var(--purple-d);font-size:12.5px}
.ccx-tbl tr:last-child td{border-bottom:0}
.ccx-tbl td.ccx-q{min-width:180px;overflow-wrap:anywhere;word-break:break-word}
.ccx-tbl td.ccx-sum{font-weight:700;background:rgba(109,40,217,.045)}
.ccx-tbl tr.ccx-split td{background:rgba(245,158,11,.09)}
.ccx-tbl tr.ccx-split td.ccx-sum{background:rgba(245,158,11,.16)}
@media (max-width:900px){
.ccf-tw{overflow-x:visible;border:0;background:transparent;box-shadow:none;border-radius:0}
.ccf-tbl{table-layout:auto}
.ccf-tbl,.ccf-tbl tbody,.ccf-tbl tr,.ccf-tbl td{display:block;width:auto}
.ccf-tbl thead{display:none}
.ccf-tbl tr.ccf-cat{margin:16px 0 9px}
.ccf-tbl tr.ccf-cat td{border:0;border-radius:12px}
.ccf-tbl tr.ccf-item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
padding:14px 15px;margin-bottom:10px;box-shadow:var(--shadow-sm)}
.ccf-tbl tr.ccf-item td{border:0;padding:0;width:auto}
.ccf-tbl td.ccf-no{display:inline;width:auto;text-align:left;font-weight:800;color:var(--purple-d)}
.ccf-tbl td.ccf-no::after{content:". "}
.ccf-tbl td.ccf-q{display:inline;font-weight:600}
.ccf-tbl td.ccf-res{margin:13px 0 0}
.ccf-tbl td.ccf-cm{margin-top:11px}
.ccf-sec{padding:10px 12px}
.ccf-sec h2{font-size:16px}
.ccf-sec .ccf-cnt{margin-left:0}   /* จอแคบขึ้นบรรทัดใหม่อยู่แล้ว ไม่ต้องดันไปขวา */
}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
margin-top:14px;padding:2px 2px 0}
.pg-info{font-size:13px;color:var(--muted)}
.pg-btns{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-left:auto}
.pg-btn{min-width:34px;height:34px;padding:0 10px;border-radius:9px;cursor:pointer;
font-size:13.5px;font-weight:600;line-height:1;transition:all .15s;
border:1.5px solid var(--line);background:var(--white);color:var(--purple-d)}
.pg-btn:hover:not(:disabled){border-color:var(--purple);background:var(--purple-l)}
.pg-btn.is-on{border-color:var(--purple);background:var(--purple);color:#fff}
.pg-btn:disabled{opacity:.4;cursor:default}
.pg-gap{padding:0 2px;color:var(--muted);font-size:13px}
@media(max-width:600px){
.pager{justify-content:center}
.pg-btns{margin-left:0}
.pg-info{width:100%;text-align:center}
}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:12.5px;
font-weight:600;white-space:nowrap;line-height:1.4;box-shadow:0 2px 6px rgba(0,0,0,0.02)}
.badge:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.95}
.st-ส่งเรื่อง{background:#e0f2fe;color:#0369a1}
.st-รับเรื่อง{background:#e0e7ff;color:#4338ca}
.st-กำลังพิจารณา{background:#fef3c7;color:#b45309}
.st-รอเจ้าหน้าที่ตรวจผลกรรมการ{background:#cffafe;color:#0e7490}
.st-ผ่าน{background:#dcfce7;color:#15803d}
.st-ไม่ผ่าน{background:#fee2e2;color:#b91c1c}
.st-ตีกลับแก้ไข{background:#ffedd5;color:#c2410c}
.st-ปฏิเสธ{background:#f1f5f9;color:#475569}
.st-ร่าง{background:#f1f5f9;color:#475569}
.st-แก้ไขข้อมูล{background:#fef3c7;color:#92400e}
.st-แก้ไขสลิป{background:#cffafe;color:#0e7490}
.st-แนบสลิปใหม่{background:#dbeafe;color:#1d4ed8}
.st-แก้ไขเพื่อพิจารณา{background:#ede9fe;color:#5b21b6}
.st-รอตรวจสอบแก้ไข{background:#e0f2fe;color:#0369a1}
.st-รอพิจารณาซ้ำ{background:#e8eaf6;color:#3730a3}
.st-ส่งคำขอ{background:#e0f2fe;color:#0369a1}
.st-เสร็จสิ้น{background:#dcfce7;color:#15803d}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:16px;margin-bottom:22px}
.stat{background:#fff;border:1px solid rgba(109, 40, 217, 0.06);border-radius:var(--radius);padding:22px 24px;
box-shadow:0 10px 25px -10px rgba(76, 29, 149, 0.06);position:relative;overflow:hidden;
transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1)}
.stat:hover{transform:translateY(-4px);box-shadow:0 20px 40px -15px rgba(76, 29, 149, 0.12)}
.stat:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--grad);border-radius:0 4px 4px 0}
.stat.y:before{background:var(--grad-y)}
.stat .n{font-size:36px;font-weight:800;color:var(--purple-d);line-height:1.1;letter-spacing:-.5px}
.stat .l{color:var(--muted);font-size:13.5px;margin-top:4px;font-weight:500}
.stat.y .n{color:var(--yellow-d)}
.timeline{position:relative;padding-left:30px;margin-top:8px}
.timeline:before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;
background:linear-gradient(180deg, var(--purple) 0%, rgba(109, 40, 217, 0.1) 100%);border-radius:2px}
.tl-item{position:relative;padding:0 0 20px 8px}
.tl-item:before{content:"";position:absolute;left:-24px;top:5px;width:15px;height:15px;border-radius:50%;
background:var(--yellow);border:3px solid #fff;box-shadow:0 0 0 2px var(--yellow), 0 2px 6px rgba(0,0,0,.15);
transition:all .2s ease}
.tl-item.done:before{background:var(--purple);box-shadow:0 0 0 2px var(--purple), 0 2px 6px rgba(0,0,0,.15)}
.tl-status{font-weight:700;color:var(--purple-d);font-size:15px}
.tl-item.tl-minor{padding-bottom:13px}
.tl-item.tl-minor .tl-status{font-weight:500;font-size:13.5px;color:var(--muted)}
.tl-item.tl-minor:before{left:-21px;top:7px;width:9px;height:9px;border-width:2px;
background:#cbd5e1;box-shadow:0 0 0 2px #cbd5e1}
.tl-item.tl-minor.done:before{background:#cbd5e1;box-shadow:0 0 0 2px #cbd5e1}
.tl-item.tl-slip:before{background:#06b6d4;box-shadow:0 0 0 2px #06b6d4, 0 2px 6px rgba(0,0,0,.15)}
.tl-item.tl-slip .tl-status{color:#0e7490}
.tl-slip-tag{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;vertical-align:middle;
background:#cffafe;color:#0e7490;border:1px solid #a5f3fc;padding:2px 8px;border-radius:999px}
.tl-slip-tag.ok{background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.tl-meta{font-size:12.5px;color:var(--muted)}
.tl-item.tl-now:before{background:var(--yellow);box-shadow:0 0 0 2px var(--yellow),0 0 0 7px rgba(245,181,10,.22)}
.tl-item.tl-now .tl-status{color:var(--yellow-d)}
.tl-now-tag{display:inline-block;margin-left:8px;padding:1px 9px;border-radius:999px;font-size:11px;
font-weight:800;background:var(--grad-y);color:#4c1d95;vertical-align:middle}
.tl-subwrap{margin:-10px 0 18px 10px;padding-left:14px;border-left:2px dashed rgba(109,40,217,.28)}
.tl-subtoggle{border:1px solid var(--line);background:var(--white);color:var(--muted);font-size:12px;
font-weight:700;padding:3px 11px;border-radius:999px;cursor:pointer;display:inline-flex;
align-items:center;gap:6px;font-family:inherit}
.tl-subtoggle:hover{border-color:var(--purple);color:var(--purple-d)}
.tl-subcaret{display:inline-block;transition:transform .18s ease}
.tl-subtoggle.open .tl-subcaret{transform:rotate(90deg)}
.tl-sub{margin-top:10px}
.tl-sub .tl-item:before{display:none}
.tl-sub .tl-item{padding-left:0;padding-bottom:10px}
.tl-sub .tl-item:last-child{padding-bottom:0}
.tl-gap{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;font-size:11px;
font-weight:700;background:var(--purple-l);color:var(--purple-d)}
.choose{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
.choose .opt{border:1px solid rgba(109,40,217,.06);border-radius:var(--radius);padding:24px;cursor:pointer;
transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);background:#fff;position:relative;overflow:hidden;
box-shadow:0 6px 20px -6px rgba(76, 29, 149, 0.05)}
.choose .opt:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad);
transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.choose .opt:hover{border-color:rgba(109,40,217,.12);box-shadow:0 16px 36px -12px rgba(76,29,149,.15);transform:translateY(-4px)}
.choose .opt:hover:before{transform:scaleX(1)}
.choose .opt .fee{display:inline-block;margin-top:14px;background:var(--yellow-l);color:#a16207;
padding:5px 14px;border-radius:999px;font-weight:700;font-size:13px}
.choose .opt h3{color:var(--purple-d);margin:0 0 8px;font-size:19px;font-weight:800}
.file-item{display:flex;align-items:center;gap:13px;padding:14px;border:1.5px dashed #d9d3ec;border-radius:14px;
margin-bottom:11px;flex-wrap:wrap;transition:border-color .2s, background .2s;background:#fcfbfe}
.file-item:hover{border-color:var(--purple-2)}
.file-item.done{border-style:solid;border-color:#bbf7d0;background:#f0fdf4}
.file-item .fi-label{flex:1;min-width:210px}
.file-item .fi-label b{display:block;font-size:14px}
.file-item .fi-status{font-size:12.5px;color:var(--muted)}
.file-item input[type=file]{font-size:13px;padding:8px}
.file-item input[type=file]::file-selector-button{font-family:inherit;border:0;background:var(--purple-l);
color:var(--purple);padding:7px 12px;border-radius:8px;font-weight:600;cursor:pointer;margin-right:10px}
.file-item .ok-ic{color:var(--ok);font-weight:800;font-size:18px}
.content-box{background:linear-gradient(180deg,#faf8ff,#f5f3ff);border:1px solid var(--line);
border-left:5px solid var(--purple-2,var(--purple));border-radius:14px;padding:20px 24px;
line-height:1.95;font-size:14.5px;color:var(--ink);white-space:pre-wrap;
overflow-wrap:anywhere;word-break:break-word}
.content-box img{max-width:100%;border-radius:12px}
.content-box p:first-child{margin-top:0}
.content-box b,.content-box strong{color:var(--purple-d)}
.content-box a{color:var(--purple-d);font-weight:600}
.content-box hr{border:0;border-top:1px dashed var(--line);margin:14px 0}
.qr-box{text-align:center}
.qr-box img{max-width:240px;border:1px solid var(--line);border-radius:14px;padding:10px;background:#fff;box-shadow:var(--shadow-sm)}
.toast{position:fixed;top:20px;right:20px;z-index:100;display:flex;flex-direction:column;gap:11px}
.toast .t{background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-left:5px solid var(--purple);
border-radius:13px;box-shadow:var(--shadow-lg);padding:14px 20px;min-width:250px;max-width:380px;
font-weight:500;animation:slideIn .25s cubic-bezier(.2,.9,.3,1.2);transition:opacity .3s}
@keyframes slideIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.toast .t.ok{border-color:var(--ok)} .toast .t.err{border-color:var(--bad)}
.overlay{position:fixed;inset:0;background:rgba(25,15,45,.6);backdrop-filter:blur(4px);z-index:90;
display:flex;align-items:center;justify-content:center;padding:18px}
.modal{background:#fff;border-radius:24px;max-width:780px;width:100%;max-height:90vh;overflow:auto;
padding:30px 32px;animation:pop .25s cubic-bezier(.2,.9,.3,1.2);box-shadow:var(--shadow-lg)}
.modal h2{color:var(--purple-d);margin-top:0;font-weight:800;padding-bottom:14px;border-bottom:1px solid var(--line)}
.modal.modal-full{max-width:1000px;max-height:calc(100vh - 36px);max-height:calc(100dvh - 36px);display:flex;flex-direction:column;overflow:hidden}
.modal.modal-full > .quiz-body{flex:1;min-height:0;max-height:none}
.modal.modal-full > .modal-acts{flex-shrink:0}
.modal.modal-xl{max-width:1280px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:28px 30px}
.modal h3{color:var(--purple-d)}
.alert{padding:14px 18px;border-radius:14px;margin-bottom:18px;font-size:14px;display:flex;
align-items:flex-start;font-weight:500;box-shadow:0 4px 12px rgba(76,29,149,0.03);line-height:1.7}
.alert > *{min-width:0}
.alert:before{font-size:17px;font-weight:800;flex-shrink:0;line-height:1.6;margin-right:12px;
display:inline-block;width:18px;text-align:center}
.alert.info{background:#eff6ff;color:#1d4ed8;border:1.5px solid #dbeafe}
.alert.info:before{content:"ℹ️"}
.alert.warn{background:var(--yellow-l);color:#a16207;border:1.5px solid #fde9b8}
.alert.warn:before{content:"⚠️"}
.alert.err{background:#fef2f2;color:#b91c1c;border:1.5px solid #fde0e0}
.alert.err:before{content:"❌"}
.kv{display:flex;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14px}
.kv:last-child{border-bottom:0}
.kv .k{width:210px;color:var(--muted);flex-shrink:0;font-weight:600}
.spin{display:inline-block;width:16px;height:16px;border:2.5px solid rgba(124,58,237,.2);
border-top-color:var(--purple);border-radius:50%;animation:rot .65s linear infinite;vertical-align:-3px}
@keyframes rot{to{transform:rotate(360deg)}}
hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.seg-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:6px;background:rgba(255,255,255,.7);
border:1px solid rgba(109,40,217,.07);border-radius:999px;width:fit-content;max-width:100%}
.seg-tabs .btn{border-radius:999px;padding:8px 18px;font-weight:600}
.seg-tabs .btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.seg-tabs .btn-ghost:hover{color:var(--purple-d);background:var(--purple-l);transform:none}
.seg-tabs .btn-primary{background:var(--grad);box-shadow:0 6px 16px -6px rgba(109,40,217,.6)}
#reqTabs{padding:8px;gap:8px;background:#fff;border:1px solid rgba(109,40,217,.10);
border-radius:16px;box-shadow:0 8px 24px -14px rgba(76,29,149,.18);width:fit-content;max-width:100%}
#reqTabs .btn{border-radius:11px;padding:10px 20px;font-weight:700;font-size:14.5px;transition:all .18s ease}
#reqTabs .btn-ghost{background:#faf8ff;border:1.5px solid var(--line);color:var(--muted)}
#reqTabs .btn-ghost:hover{color:var(--purple-d);background:var(--purple-l);border-color:#ddd4f5;transform:translateY(-1px)}
#reqTabs .btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 18px -7px rgba(109,40,217,.7);transform:translateY(-1px)}
.nav a .ic{background:rgba(255,255,255,.10);border-radius:9px;width:28px;height:28px;
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
transition:background .15s ease}
.nav a:hover .ic{background:rgba(255,255,255,.18)}
.nav a.active .ic{background:rgba(76,29,149,.14)}
.nav a{position:relative}
.nav a .nav-t{flex:1}
.nav-badge{margin-left:auto;background:var(--grad-y);color:#4c1d95;font-weight:800;font-size:12px;
min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:inline-flex;align-items:center;
justify-content:center;line-height:1;box-shadow:0 3px 8px -2px rgba(245,181,10,.6)}
.nav a.active .nav-badge{background:#4c1d95;color:#fff;box-shadow:none}
.nav-badge.nav-badge-urgent{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff;
box-shadow:0 3px 8px -2px rgba(185,28,28,.65)}
.nav a.active .nav-badge.nav-badge-urgent{background:#b91c1c;color:#fff;box-shadow:none}
.nav-group-hdr{padding:8px 12px;font-size:11px;font-weight:800;color:rgba(255,255,255,.72);
text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;
justify-content:space-between;border-radius:10px;background:rgba(255,255,255,.09);
margin:5px 0 0;cursor:pointer;user-select:none;
transition:background .15s,color .15s,border-radius .15s}
.nav-group-hdr.open{background:rgba(255,255,255,.14);color:#fff;
border-bottom-left-radius:0;border-bottom-right-radius:0}
.nav-group-hdr:hover{background:rgba(255,255,255,.16);color:#fff}
.nav-group-hdr .ic{width:22px;height:22px;background:transparent;border-radius:0}
.nav-group-hdr .nav-svg{height:17px;width:auto}
.nav-sub-item .ic{width:24px;height:24px;background:transparent}
.nav-sub-item .nav-svg{height:17px;width:auto}
.nav-group-hdr .nav-chev{font-size:10px;opacity:.65;transition:transform .22s ease}
.nav-group-hdr.open .nav-chev{transform:rotate(90deg);opacity:1}
.nav-group-body{overflow:hidden;max-height:0;transition:max-height .28s ease;
background:rgba(255,255,255,.06);border-radius:0 0 10px 10px;margin-bottom:3px}
.nav-group-body.open{max-height:800px}
.nav-sub-item{padding-left:20px !important;font-size:12.5px !important;
border-left:2px solid transparent;margin-left:4px !important;
border-radius:0 8px 8px 0 !important}
.nav-sub-item:hover{border-left-color:rgba(255,255,255,.3) !important}
.nav-sub-item.active{background:rgba(255,255,255,.15) !important;color:#fff !important;
font-weight:700 !important;border-left-color:#fbbf24 !important;box-shadow:none !important}
.nav-sub-item.active .ic{filter:none}
.h-steps{display:flex;align-items:flex-start;overflow-x:auto;padding:16px 4px 12px;gap:0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.h-steps::-webkit-scrollbar{display:none}
.h-step{flex:1;min-width:90px;text-align:center;position:relative;padding:0 4px;cursor:pointer;transition:opacity .2s}
.h-step:hover{opacity:.85}
.h-step-dot{width:32px;height:32px;border-radius:50%;margin:0 auto 6px;display:flex;align-items:center;
justify-content:center;font-size:14px;border:2.5px solid #c4b5fd;background:#fff;
color:#6B21A8;font-weight:700;position:relative;z-index:1;transition:all .2s ease;box-shadow:0 2px 8px rgba(109,40,217,.12)}
.h-step.done .h-step-dot{background:#6B21A8;border-color:#6B21A8;color:#fff;box-shadow:0 4px 14px rgba(109,40,217,.35)}
.h-step.active .h-step-dot{background:#fef3c7;border-color:#f59e0b;color:#92400e;box-shadow:0 4px 14px rgba(245,158,11,.3)}
.h-step.reject .h-step-dot{background:#fee2e2;border-color:#ef4444;color:#b91c1c;box-shadow:0 4px 14px rgba(239,68,68,.3)}
.h-step.selected .h-step-dot{box-shadow:0 0 0 4px rgba(109,40,217,.2), 0 4px 14px rgba(109,40,217,.3)}
.h-step.current .h-step-dot{background:var(--yellow);border-color:var(--yellow-d);color:#4c1d95;
transform:scale(1.28);box-shadow:0 0 0 4px rgba(245,181,10,.22),0 4px 16px rgba(245,181,10,.45)}
.h-step.current .h-step-label{color:var(--yellow-d);font-weight:800}
.h-step.current .h-step-sub{color:#b45309;font-weight:600}
.h-step-line{position:absolute;top:16px;left:calc(50% + 16px);right:calc(-50% + 16px);height:2.5px;
background:#e0d7f7;border-radius:2px;z-index:0}
.h-step:last-child .h-step-line{display:none}
.h-step.done .h-step-line{background:linear-gradient(90deg,#6B21A8,#c4b5fd)}
.h-step-label{font-size:11.5px;font-weight:700;color:#4c1d95;line-height:1.35}
.h-step-sub{font-size:10.5px;color:#888;margin-top:2px;line-height:1.3}
.step-detail{background:linear-gradient(135deg,#f5f3ff,#ede9fe);border:1.5px solid rgba(109,40,217,.12);
border-radius:16px;padding:18px 22px;margin-top:16px;transition:all .25s ease;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.num-badge{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
border-radius:50%;background:linear-gradient(135deg,#ede9fe,#ddd6fe);color:#5b21b6;
font-size:12px;font-weight:700;line-height:1}
.bell{position:relative;margin-left:auto;width:44px;height:44px;border-radius:14px;border:1px solid rgba(109,40,217,.10);
background:linear-gradient(160deg,#fbfaff,#f1ecfd);color:var(--purple-d);font-size:19px;cursor:pointer;display:flex;
align-items:center;justify-content:center;transition:transform .18s ease,box-shadow .22s ease,border-color .2s ease;flex-shrink:0;
box-shadow:0 2px 6px rgba(76,29,149,.06)}
.bell:hover{transform:translateY(-2px);border-color:rgba(124,58,237,.28);
box-shadow:0 10px 22px -8px rgba(109,40,217,.45)}
.bell:active{transform:translateY(0)}
.bell.has-alert{animation:bell-swing 3s ease-in-out infinite;transform-origin:50% 6px}
.bell-dot{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
background:linear-gradient(135deg,#fb7185,#e11d48);color:#fff;font-size:11px;font-weight:800;
display:inline-flex;align-items:center;justify-content:center;line-height:1;border:2.5px solid #fff;
box-shadow:0 3px 8px -1px rgba(225,29,72,.55)}
.bell.has-alert .bell-dot{animation:dot-pulse 2s ease-in-out infinite}
@keyframes bell-swing{0%,82%,100%{transform:rotate(0)}86%{transform:rotate(12deg)}90%{transform:rotate(-10deg)}94%{transform:rotate(6deg)}97%{transform:rotate(-3deg)}}
@keyframes dot-pulse{0%,100%{box-shadow:0 3px 8px -1px rgba(225,29,72,.55),0 0 0 0 rgba(225,29,72,.45)}50%{box-shadow:0 3px 8px -1px rgba(225,29,72,.55),0 0 0 6px rgba(225,29,72,0)}}
@media(prefers-reduced-motion:reduce){.bell.has-alert,.bell.has-alert .bell-dot{animation:none}}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.topbar-right .bell{margin-left:0}
.topbar-right .who{margin-left:0}
.btn-logout-top{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(220,38,38,.18);
background:#fff;color:var(--bad);font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer;
padding:9px 16px;border-radius:12px;transition:all .18s ease}
.btn-logout-top:hover{background:#fef2f2;border-color:#f3b4b4;transform:translateY(-1px);box-shadow:0 6px 14px -6px rgba(220,38,38,.4)}
.btn-logout-top .lo-ic{display:flex;align-items:center;flex-shrink:0}
.perm-table{width:100%;border-collapse:collapse;font-size:14px}
.perm-table th{background:var(--purple-l);color:var(--purple-d);font-weight:700;padding:10px 14px;text-align:left;font-size:13px;letter-spacing:.2px}
.perm-table th:first-child{border-radius:10px 0 0 0}
.perm-table th:last-child{border-radius:0 10px 0 0}
.perm-table td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:500;vertical-align:middle}
.perm-table tbody tr:last-child td{border-bottom:none}
.perm-table tbody tr:hover td{background:#f5f0ff}
.stp-row,.faq-row{display:flex;gap:11px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line)}
.stp-row:last-child,.faq-row:last-child{border-bottom:0}
.stp-n{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:var(--purple-l);color:var(--purple-d);
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13.5px;margin-top:5px}
.stp-row input,.faq-row input,.stp-row textarea,.faq-row textarea{margin-bottom:6px}
.pub-hero{position:relative;overflow:hidden;border-radius:0;margin-bottom:0;padding:58px var(--pub-gut) 66px;
background:linear-gradient(135deg,var(--purple-d) 0%,var(--purple) 52%,var(--purple-2) 100%);
color:#fff;background-size:cover;background-position:center;isolation:isolate}
.pub-hero.has-cover{min-height:400px;display:flex;align-items:center;scroll-margin-top:74px}
.phero-inner{position:relative;z-index:2;max-width:720px}
.phero-logo{width:var(--brand-logo,120px);height:var(--brand-logo,120px);object-fit:contain;
border-radius:calc(var(--brand-logo,120px) * .22);background:rgba(255,255,255,.96);
padding:calc(var(--brand-logo,120px) * .08);margin-bottom:22px;display:block;
border:2px solid rgba(255,255,255,.55);
box-shadow:0 10px 34px rgba(0,0,0,.30),0 0 0 6px rgba(255,255,255,.10)}
.phero-logo-fb{display:flex;align-items:center;justify-content:center;font-size:38px;background:rgba(255,255,255,.17);padding:0}
.pub-hero h1{margin:0 0 12px;font-size:38px;font-weight:800;line-height:1.25;letter-spacing:-.6px;
text-shadow:0 2px 6px rgba(0,0,0,.5),0 4px 22px rgba(0,0,0,.42)}
.phero-sub{margin:0 0 26px;font-size:16.5px;line-height:1.8;max-width:620px;
text-shadow:0 1px 5px rgba(0,0,0,.55),0 2px 14px rgba(0,0,0,.4)}
.phero-btns{display:flex;gap:12px;flex-wrap:wrap}
.phero-btn{border:0;cursor:pointer;font-family:inherit;font-size:15px;font-weight:700;padding:13px 28px;
border-radius:12px;transition:transform .18s,box-shadow .18s,background .18s}
.phero-btn.primary{background:#fff;color:var(--purple-d);box-shadow:0 6px 20px rgba(0,0,0,.2)}
.phero-btn.ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.phero-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.26)}
.phero-btn.ghost:hover{background:rgba(255,255,255,.24)}
.phero-scroll{position:absolute;left:0;right:0;bottom:16px;text-align:center;font-size:12.5px;opacity:.7;
cursor:pointer;z-index:2;animation:pheroBob 2.4s ease-in-out infinite}
@keyframes pheroBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.phero-blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.42;z-index:1}
.phero-blob.b1{width:340px;height:340px;background:#a78bfa;top:-110px;right:-60px;animation:pheroFloat 15s ease-in-out infinite}
.phero-blob.b2{width:260px;height:260px;background:#f0abfc;bottom:-100px;left:8%;animation:pheroFloat 19s ease-in-out infinite reverse}
.phero-blob.b3{width:200px;height:200px;background:#60a5fa;top:34%;right:24%;animation:pheroFloat 23s ease-in-out infinite}
@keyframes pheroFloat{0%,100%{transform:translate(0,0)}33%{transform:translate(26px,-22px)}66%{transform:translate(-20px,16px)}}
.pub-sec{max-width:var(--pub-max);margin:0 auto 46px;padding:0 22px;scroll-margin-top:74px}
.pub-sec-head{margin-bottom:18px}
.pub-sec-head h2{margin:0 0 5px;font-size:23px;font-weight:800;color:var(--purple-d);letter-spacing:-.2px}
.pub-sec-head p{margin:0;color:#565d6b;font-size:14px;line-height:1.7}
.pub-sec-head:after{content:"";display:block;width:46px;height:3.5px;border-radius:3px;margin-top:11px;
background:linear-gradient(90deg,var(--purple),var(--purple-2))}
.pub-empty{background:var(--white);border:1px dashed var(--line);border-radius:14px;
padding:40px 20px;text-align:center;color:var(--muted);font-size:14px}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
.pub-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
background:var(--purple);color:#fff;font-size:19px;box-shadow:0 6px 20px rgba(76,29,149,.4);
opacity:0;pointer-events:none;transform:translateY(10px);transition:all .22s;z-index:60}
.pub-top.show{opacity:1;pointer-events:auto;transform:none}
.form-group{margin-bottom:24px}
.form-group-h{font-size:15px;font-weight:800;color:var(--purple-d);margin-bottom:11px;
padding-left:11px;border-left:4px solid var(--purple-2)}
.form-tbl-wrap{border:1px solid var(--line);border-radius:16px;background:var(--white);
overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
box-shadow:0 1px 3px rgba(76,29,149,.06)}
.form-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.form-tbl th{background:linear-gradient(180deg,rgba(109,40,217,.07),rgba(109,40,217,.035));
color:var(--purple-d);text-align:left;font-weight:800;font-size:12.5px;letter-spacing:.4px;
padding:13px 18px;white-space:nowrap;border-bottom:1.5px solid rgba(109,40,217,.12)}
.form-tbl td{padding:15px 18px;border-top:1px solid rgba(109,40,217,.07);vertical-align:middle}
.form-tbl tbody tr:first-child td{border-top:0}
.form-tbl tbody tr{transition:background .16s}
.form-tbl tbody tr:hover td{background:rgba(109,40,217,.035)}
.form-tbl th:last-child,.form-tbl td:last-child{width:1%;white-space:nowrap;text-align:right}
.form-tbl td .form-dl{margin:0 6px 6px 0}
.ft-t{font-weight:700;font-size:14.5px;line-height:1.55;color:var(--ink)}
.ft-d{font-size:12.5px;color:var(--muted);line-height:1.65;margin-top:4px;white-space:pre-wrap}
.ft-none{font-size:13px;color:var(--muted)}
.form-dl{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:9px;
text-decoration:none;background:var(--purple-l);color:var(--purple-d);font-size:13px;font-weight:700;
white-space:nowrap;transition:background .16s,color .16s}
.form-dl:hover{background:var(--purple-2);color:#fff}
.form-dl-ic{font-size:13.5px}
.vid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(324px,1fr));gap:18px}
.vid-card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:13px;
transition:transform .2s,box-shadow .2s}
.vid-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(76,29,149,.12)}
.vid-card .news-video{margin-top:0}
.vid-t{font-weight:700;font-size:14.5px;line-height:1.5;margin-top:11px;color:var(--ink)}
.vid-alt{display:inline-block;margin-top:5px;font-size:12px;color:var(--purple)}
.step-line{position:relative;padding-left:8px}
.step-item{position:relative;display:flex;gap:16px;padding-bottom:22px}
.step-item:not(:last-child):before{content:"";position:absolute;left:19px;top:42px;bottom:0;width:2px;
background:linear-gradient(180deg,var(--purple-2),rgba(139,92,246,.18))}
.step-n{width:40px;height:40px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--purple),var(--purple-2));color:#fff;font-weight:800;font-size:16px;
box-shadow:0 4px 12px rgba(109,40,217,.3);z-index:1}
.step-body{padding-top:4px}
.step-t{font-weight:700;font-size:15.5px;color:var(--ink);margin-bottom:4px}
.step-d{font-size:13.5px;color:var(--muted);line-height:1.75}
.faq-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
@media(max-width:1000px){.faq-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.faq-list{grid-template-columns:1fr;gap:9px}}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .18s}
.faq-item.open{border-color:var(--purple-2)}
.faq-q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;text-align:left;
background:none;border:0;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);
padding:14px 15px;line-height:1.6}
.faq-q:hover{color:var(--purple-d)}
.faq-ic{flex-shrink:0;width:24px;height:24px;margin-top:1px;border-radius:50%;background:var(--purple-l);color:var(--purple-d);
display:flex;align-items:center;justify-content:center;font-weight:800;transition:transform .25s,background .18s}
.faq-item.open .faq-ic{transform:rotate(45deg);background:var(--purple-2);color:#fff}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-in{overflow:hidden;font-size:13.5px;line-height:1.8;color:var(--muted);padding:0 15px}
.faq-item.open .faq-a-in{padding-bottom:15px}
.ct-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px 26px;
display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:18px}
.ct-row{display:flex;gap:13px;align-items:flex-start}
.ct-ic{width:38px;height:38px;flex-shrink:0;border-radius:11px;background:var(--purple-l);
display:flex;align-items:center;justify-content:center;font-size:17px}
.ct-k{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.3px;margin-bottom:2px}
.ct-v{font-size:14.5px;color:var(--ink);line-height:1.65;word-break:break-word}
.ct-v a{color:var(--purple-d);font-weight:600}
.ct-map{grid-column:1/-1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
padding:11px;border-radius:11px;background:var(--purple-l);color:var(--purple-d);
text-decoration:none;font-weight:700;font-size:14px;transition:background .16s,color .16s}
.ct-map:hover{background:var(--purple-2);color:#fff}
.quiz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.quiz-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px 20px;
box-shadow:0 1px 3px rgba(76,29,149,.06);transition:transform .2s,box-shadow .2s}
.quiz-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(76,29,149,.13)}
.quiz-card-t{font-weight:800;font-size:15.5px;color:var(--ink);line-height:1.5}
.quiz-card-d{font-size:13px;color:var(--muted);line-height:1.7;margin-top:5px;white-space:pre-wrap}
.quiz-card-m{font-size:12.5px;color:var(--purple-d);font-weight:700;margin-top:8px}
.quiz-body{max-height:58vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.quiz-brief{background:var(--purple-l);border-left:3px solid var(--purple-2);border-radius:10px;
padding:12px 14px;margin:10px 0;font-size:13.5px;line-height:1.85;color:var(--ink)}
.quiz-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0}
.quiz-facts>div{background:var(--white);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.quiz-facts span{display:block;font-size:11.5px;color:var(--muted);font-weight:700}
.quiz-facts b{font-size:15px;color:var(--purple-d)}
.quiz-fee{background:#fffbeb;border:1px solid #fcd34d;border-radius:11px;padding:11px 14px;
font-size:14.5px;color:#92400e;margin-bottom:10px}
.quiz-fee b{font-size:17px}
.quiz-page{max-width:1400px}
.quiz-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.q-title{font-weight:700;font-size:14.5px;color:var(--ink);line-height:1.5}
.q-sub{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
.q-chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700}
.q-chip-in{background:var(--purple-l);color:var(--purple-d)}
.q-chip-link{background:#e0f2fe;color:#075985}
.q-chip-free{background:#dcfce7;color:#15803d;padding:3px 11px;font-size:12px}
@media(max-width:820px){ .quiz-toolbar .tl-meta{margin-left:0!important;flex-basis:100%} }
.q-chip-fee{background:#fef3c7;color:#92400e}
.qr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:14px}
.qr-stat{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:12px 14px;
box-shadow:0 1px 3px rgba(76,29,149,.05)}
.qr-stat-l{font-size:11.5px;font-weight:700;color:var(--muted)}
.qr-stat-v{font-size:23px;font-weight:800;color:var(--purple-d);line-height:1.3}
.qr-stat-s{font-size:11.5px;color:var(--muted)}
.qr-filter{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;background:var(--white);
border:1px solid var(--line);border-radius:13px;padding:12px 14px;margin-bottom:14px}
.qr-filter label{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:3px}
.qr-filter input,.qr-filter select{margin:0;padding:7px 10px;font-size:13px}
.qr-link{color:var(--purple-d);font-weight:600;text-decoration:none;font-size:13px}
.qr-done{display:inline-block;font-size:11.5px;font-weight:700;color:#15803d;
background:#dcfce7;padding:2px 9px;border-radius:999px}
.modal-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;flex-wrap:wrap}
@media(max-width:560px){
.modal-acts{flex-direction:column-reverse}
.modal-acts .btn{width:100%}
.qr-filter>div{flex-basis:100%}
}
.quiz-q-miss{background:#fff7ed;border-radius:10px;padding-left:10px;padding-right:10px}
.rv-ans{color:var(--purple-d);font-weight:600}
.rv-miss{color:#b45309;font-weight:700}
.quiz-q{padding:12px 0;border-top:1px solid var(--line)}
.quiz-q:first-child{border-top:0}
.quiz-q-t{font-weight:700;font-size:14.5px;line-height:1.6;margin-bottom:8px}
.quiz-choice{display:flex;gap:9px;align-items:flex-start;padding:7px 10px;border-radius:9px;
cursor:pointer;font-size:14px;line-height:1.6;transition:background .15s}
.quiz-choice:hover{background:var(--purple-l)}
.quiz-choice input{width:auto;margin:3px 0 0;flex-shrink:0}
@media(max-width:820px){ .quiz-grid{grid-template-columns:1fr} }
.ct-map-box{margin-top:14px;border-radius:14px;overflow:hidden;border:1px solid var(--line);
background:var(--white);line-height:0}
.ct-map-box iframe{width:100%;height:320px;border:0;display:block}
.vid-d{font-size:13px;color:var(--muted);line-height:1.7;margin-top:5px;white-space:pre-wrap}
.quiz-card,.form-tbl-wrap,.ct-card,.quiz-facts>div{
transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s,border-color .24s}
.quiz-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(76,29,149,.14)}
.pub-sec-head h2{transition:color .2s}
.phero-btn:active,.form-dl:active{transform:translateY(1px)}
.form-dl{transition:background .16s,color .16s,transform .12s}
@media(prefers-reduced-motion:reduce){
.reveal,.news-card.reveal{opacity:1!important;transform:none!important;transition:none!important}
.news-card:hover{transform:none}
.news-card:hover .nc-cover img{transform:none}
.nd-back:hover,.nd-link:hover{transform:none}
.phero-blob,.phero-scroll,.sk-bar{animation:none!important}
.news-card,.quiz-card,.form-tbl-wrap,.ct-card,.quiz-facts>div,
.pub-nav-login,.pub-nav-reg,.form-dl,.phero-btn,
.layout.side-collapsed .sidebar,.layout.side-collapsed .main{transition:none!important}
.news-card:hover,.quiz-card:hover,.pub-nav-login:hover,.pub-nav-reg:hover{transform:none!important}
*{scroll-behavior:auto!important}
}
.pub-wrap{min-height:100vh;min-height:100dvh;background:var(--bg)}
:root{--pub-max:1280px; --pub-gut:max(22px, calc((100% - var(--pub-max)) / 2))}
:root{--pub-btn-h:38px; --pub-btn-r:10px}
.pub-nav-bar{position:sticky;top:0;z-index:60;margin-bottom:30px;border-radius:0;
border-bottom:1px solid rgba(255,255,255,.14);
background:linear-gradient(100deg,var(--purple-d) 0%,var(--purple) 58%,var(--purple-2) 100%);
box-shadow:0 2px 10px rgba(76,29,149,.18);
display:flex;align-items:center;gap:8px;padding-left:var(--pub-gut);padding-right:var(--pub-gut)}
.pub-nav-wrap{display:flex;gap:4px;flex:1;min-width:0;align-items:center;overflow-x:auto;overflow-y:hidden;
padding:8px 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
-webkit-font-smoothing:antialiased}
.pub-nav-wrap::-webkit-scrollbar{display:none}
.pub-nav{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;cursor:pointer;
font-size:14px;font-weight:600;color:rgba(255,255,255,.85);white-space:nowrap;flex-shrink:0;
transition:background .16s,color .16s}
.pub-nav:hover{background:rgba(255,255,255,.14);color:#fff}
.pub-nav.on{background:rgba(255,255,255,.92);color:var(--purple-d);font-weight:700;box-shadow:none}
.pub-nav-ic{font-size:15px}
.pub-nav-reg{flex-shrink:0;height:var(--pub-btn-h);border:1.5px solid rgba(255,255,255,.55);
background:rgba(255,255,255,.12);color:#fff;font-weight:600;padding:0 16px;
border-radius:var(--pub-btn-r);display:inline-flex;align-items:center;justify-content:center;
transition:background .16s,border-color .16s}
.pub-nav-reg:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.8);color:#fff}
.pub-nav-login{flex-shrink:0;height:var(--pub-btn-h);background:#fff;color:var(--purple-d);
font-weight:700;padding:0 18px;border-radius:var(--pub-btn-r);
display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 1px 3px rgba(0,0,0,.12);transition:box-shadow .16s,background .16s}
.pub-nav-login:hover{background:#f6f3ff;color:var(--purple-d);box-shadow:0 3px 10px rgba(0,0,0,.18)}
.pub-nav-login:active{box-shadow:0 1px 3px rgba(0,0,0,.12)}
@media(max-width:820px){ .pub-nav-login,.pub-nav-reg{padding:8px 12px;font-size:12.5px} .pub-nav-bar{gap:5px} }
@media(max-width:1180px){
.pub-nav-wrap .pub-nav-ic{display:none}
.pub-nav-wrap .pub-nav{padding:8px 10px;font-size:13px;gap:0}
.pub-nav-wrap{gap:2px}
.pub-nav-wrap{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
}
@media(max-width:820px){
.pub-nav-wrap .pub-nav{padding:6px 9px;font-size:12px}
.pub-nav-reg,.pub-nav-login{height:32px;padding:0 11px;font-size:12px}
.pub-nav-bar{gap:4px}
}
@media(min-width:1181px){
.pub-nav-wrap .pub-nav-ic{display:none}
.pub-nav-wrap .pub-nav{padding:9px 10px;font-size:13.5px;gap:0}
.pub-nav-wrap{gap:2px}
}
.pub-main{padding:0 0 60px}
.pub-foot{max-width:var(--pub-max);margin:0 auto;padding:20px 22px 34px;color:var(--muted);
font-size:12.5px;line-height:1.7;text-align:center;border-top:1px solid var(--line)}
.news-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.news-filter{border:1.5px solid var(--line);background:var(--white);color:var(--ink);cursor:pointer;
padding:7px 15px;border-radius:999px;font-size:13.5px;font-weight:600;font-family:inherit;transition:all .16s}
.news-filter:hover{border-color:var(--purple-2);color:var(--purple-d)}
.news-filter.on{background:var(--purple);border-color:var(--purple);color:#fff}
.news-filter-n{opacity:.65;font-size:12px;margin-left:2px}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px;align-items:stretch}
.news-hero{margin-bottom:18px}
.news-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:0;
overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
box-shadow:0 1px 3px rgba(76,29,149,.06);
transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s,border-color .24s,opacity .45s}
.news-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(76,29,149,.14);
border-color:rgba(109,40,217,.22)}
.news-card:focus-visible{outline:3px solid var(--purple-2);outline-offset:2px}
.news-card.reveal{opacity:0;transform:translateY(14px)}
.news-card.reveal.in{opacity:1;transform:none}
.nc-cover{position:relative;width:100%;height:190px;overflow:hidden;background:var(--purple-l);flex-shrink:0}
@supports (aspect-ratio: 16 / 9){ .nc-cover{height:auto;aspect-ratio:16 / 9} }
.nc-cover img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .45s cubic-bezier(.22,1,.36,1)}
.news-card:hover .nc-cover img{transform:scale(1.04)}
.nc-cover-none{display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--purple-l) 0%,#e9e3fb 55%,#f3eeff 100%)}
.nc-cover-none span{font-size:44px;opacity:.4}
.nc-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;min-height:0}
.nc-ex{margin:0 0 12px;font-size:13.5px;line-height:1.75;color:var(--muted);
overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}
.nc-more{margin-top:auto;font-size:13px;font-weight:700;color:var(--purple-d);
display:inline-flex;align-items:center;gap:5px;align-self:flex-start;transition:gap .2s}
.news-card:hover .nc-more{gap:9px}
.news-hero .news-card{border-radius:18px;
border-color:rgba(109,40,217,.28);border-left:4px solid var(--purple);
box-shadow:0 4px 18px -6px rgba(76,29,149,.16)}
@media(min-width:760px){
.news-hero .news-card{flex-direction:row;align-items:stretch}
.news-hero .nc-cover{width:46%;height:auto;aspect-ratio:auto;min-height:250px}
.news-hero .nc-body{width:54%;padding:26px 30px;justify-content:center}
}
.news-hero .news-title{font-size:24px;line-height:1.35;margin-bottom:12px}
.news-hero .nc-ex{font-size:14.5px;-webkit-line-clamp:3;line-clamp:3}
.news-hero .news-pin{font-size:12.5px;padding:4px 12px;
background:var(--purple);color:#fff;box-shadow:0 2px 6px rgba(76,29,149,.28)}
.news-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.news-chip{display:inline-block;padding:3px 11px;border-radius:999px;font-size:12px;font-weight:700}
.news-pin{font-size:11.5px;font-weight:700;color:#b45309;background:#fef3c7;padding:3px 9px;border-radius:999px}
.news-date{margin-left:auto;font-size:12.5px;color:var(--muted)}
.news-title{margin:0 0 10px;font-size:19px;font-weight:800;color:var(--ink);line-height:1.45}
.news-body{font-size:14.5px;line-height:1.85;color:var(--ink);white-space:pre-wrap;word-break:break-word}
.news-img{width:100%;max-height:380px;object-fit:cover;border-radius:12px;margin-bottom:12px;display:block}
.news-video{position:relative;width:100%;padding-top:56.25%;margin-top:14px;border-radius:12px;overflow:hidden;background:#000}
.news-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.news-file{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:9px 15px;border-radius:10px;
background:var(--purple-l);color:var(--purple-d);font-size:13.5px;font-weight:600;text-decoration:none;transition:background .16s}
.news-file:hover{background:var(--purple-2);color:#fff}
.rvf-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.rvf-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:9px;
background:var(--purple-l);border:1px solid rgba(109,40,217,.14)}
.rvf-name{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--purple-d);
text-decoration:none;overflow-wrap:anywhere}
.rvf-name:hover{text-decoration:underline}
.rvf-del{flex-shrink:0;width:26px;height:26px;border:0;border-radius:7px;cursor:pointer;
background:transparent;color:#b91c1c;font-family:inherit;font-size:13px;font-weight:700;
line-height:1;transition:background .14s}
.rvf-del:hover{background:rgba(185,28,28,.12)}
.rvf-add{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.rvf-add-t{font-size:12.5px;font-weight:700;color:var(--muted)}
.rvf-add input[type=file]{max-width:230px}
[data-theme="dark"] .rvf-item{background:#241c40;border-color:rgba(167,139,250,.16)}
[data-theme="dark"] .rvf-name{color:#c4b5fd}
[data-theme="dark"] .rvf-del{color:#fca5a5}
[data-theme="dark"] .rvf-del:hover{background:rgba(252,165,165,.14)}
.nd-wrap{max-width:820px;margin:0 auto;padding:26px var(--pub-gut) 60px}
@media(min-width:900px){ .nd-wrap{padding-left:22px;padding-right:22px} }
.nd-load{padding:70px 0;text-align:center;color:var(--muted)}
.nd-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:18px;padding:8px 15px;
border:1.5px solid var(--line);background:var(--white);color:var(--purple-d);
border-radius:999px;font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer;
transition:background .16s,border-color .16s,transform .16s}
.nd-back:hover{background:var(--purple-l);border-color:var(--purple-2);transform:translateX(-2px)}
.nd-head{margin-bottom:18px}
.nd-title{margin:8px 0 0;font-size:31px;line-height:1.35;font-weight:800;color:var(--ink);word-break:break-word}
@media(max-width:640px){ .nd-title{font-size:24px} .nd-wrap{padding-top:18px} }
.nd-cover{border-radius:16px;overflow:hidden;margin-bottom:22px;background:var(--purple-l);
box-shadow:0 6px 22px -10px rgba(76,29,149,.3)}
.nd-cover img{width:100%;display:block;max-height:460px;object-fit:cover}
.nd-body{font-size:16px;line-height:1.95;color:var(--ink);word-break:break-word}
.nd-block{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.nd-block-t{font-size:13px;font-weight:800;color:var(--purple-d);margin-bottom:10px;letter-spacing:.04em}
.nd-links{display:flex;flex-direction:column;gap:8px}
.nd-link{display:flex;align-items:center;gap:10px;padding:12px 15px;border-radius:11px;
border:1.5px solid var(--line);background:var(--white);color:var(--ink);
font-size:14px;font-weight:600;text-decoration:none;transition:border-color .16s,background .16s,transform .16s}
.nd-link:hover{border-color:var(--purple-2);background:var(--purple-l);color:var(--purple-d);transform:translateX(3px)}
.nd-link-ic{flex-shrink:0}
.nd-link-t{min-width:0;overflow-wrap:anywhere}
.nd-foot{margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.nb-p{margin:0 0 15px}
.nb-h1{margin:30px 0 12px;font-size:23px;font-weight:800;color:var(--purple-d);line-height:1.4}
.nb-h2{margin:24px 0 10px;font-size:18.5px;font-weight:800;color:var(--ink);line-height:1.45}
.nb-p:first-child,.nb-h1:first-child,.nb-h2:first-child{margin-top:0}
.nb-list{margin:0 0 15px;padding-left:24px}
.nb-list li{margin-bottom:7px}
.nb-list li::marker{color:var(--purple-2)}
.nb-q{margin:0 0 15px;padding:12px 18px;border-left:3px solid var(--purple-2);
background:var(--purple-l);border-radius:0 10px 10px 0;color:var(--purple-d);font-style:italic}
.nb-hr{border:0;border-top:1px solid var(--line);margin:26px 0}
.nb-c{text-align:center}
.nw-tabs{display:flex;gap:6px}
.nw-tab{padding:8px 15px;border:1.5px solid var(--line);border-bottom:0;background:#f7f5fc;
color:var(--muted);border-radius:10px 10px 0 0;font-family:inherit;font-size:13px;
font-weight:700;cursor:pointer;transition:background .16s,color .16s}
.nw-tab.on{background:var(--white);color:var(--purple-d)}
.nw-tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:8px 10px;
border:1.5px solid var(--line);border-radius:0 10px 0 0;border-bottom:0;background:#faf9fe}
.nw-tool{min-width:32px;height:30px;padding:0 8px;border:1px solid transparent;background:transparent;
color:var(--ink);border-radius:7px;font-family:inherit;font-size:13px;font-weight:700;
cursor:pointer;transition:background .14s,border-color .14s}
.nw-tool:hover{background:var(--purple-l);border-color:var(--purple-2);color:var(--purple-d)}
.nw-tools-hint{margin-left:auto;font-size:11.5px;color:var(--muted)}
textarea.nw-body{min-height:220px;border-radius:0 0 10px 10px;margin-bottom:0;
font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Sarabun",monospace;font-size:14px;line-height:1.8}
.nw-count{text-align:right}
.nw-count-over{color:#dc2626;font-weight:700}
.nw-prev{border:1.5px solid var(--line);border-radius:0 10px 10px 10px;padding:18px 20px;
background:var(--white);min-height:260px;max-height:50vh;overflow-y:auto}
.nw-links{display:flex;flex-direction:column;gap:8px}
.nw-link-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:8px;align-items:center}
.nw-link-row input{margin-bottom:0}
@media(max-width:560px){
.nw-link-row{grid-template-columns:minmax(0,1fr) auto}
.nw-link-row input:first-child{grid-column:1 / -1}
}
.news-card.sk{pointer-events:none}
.sk-bar{height:12px;border-radius:6px;margin-bottom:10px;
background:linear-gradient(90deg,var(--purple-l) 25%,rgba(0,0,0,.045) 37%,var(--purple-l) 63%);
background-size:400% 100%;animation:skPulse 1.3s ease-in-out infinite}
@keyframes skPulse{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(max-width:1024px){
.pub-hero{padding:48px var(--pub-gut) 58px}
.pub-hero h1{font-size:31px}
.phero-logo{width:min(var(--brand-logo,120px),100px);height:min(var(--brand-logo,120px),100px)}
.phero-sub{font-size:15.5px}
.pub-nav{padding:8px 13px;font-size:13.5px}
.ct-map-box iframe{height:280px}
}
@media(max-width:820px){
.ct-map-box iframe{height:240px}
.pub-nav-bar{margin-bottom:24px}
.pub-nav-wrap{gap:4px;padding:6px 0}
.pub-nav{padding:7px 12px;font-size:13px;border-radius:9px}
.pub-nav-ic{font-size:14px}
.pub-sec{padding:0 16px}
.pub-sec,.pub-hero.has-cover{scroll-margin-top:62px}
.pub-hero{padding:38px var(--pub-gut) 48px}
.pub-hero.has-cover{min-height:290px}
.pub-hero h1{font-size:24px}
.phero-logo{width:min(var(--brand-logo,120px),76px);height:min(var(--brand-logo,120px),76px);margin-bottom:16px}
.phero-sub{font-size:14.5px}
.phero-btn{width:100%;text-align:center}
.pub-sec-head h2{font-size:19px}
.vid-grid{grid-template-columns:1fr}
.ct-card{padding:18px;grid-template-columns:1fr}
.pub-top{right:14px;bottom:14px}
.news-card{padding:16px 17px;border-radius:14px}
.news-title{font-size:17px}
.news-date{margin-left:0;width:100%}
}
@media(max-width:560px){
.form-tbl,.form-tbl tbody,.form-tbl tr,.form-tbl td{display:block;width:auto}
.form-tbl thead{display:none}
.form-tbl tr{border-top:1px solid rgba(109,40,217,.07)}
.form-tbl tbody tr:first-child{border-top:0}
.form-tbl tbody tr:nth-child(even) td,.form-tbl tbody tr:hover td{background:transparent}
.form-tbl td{border-top:0;padding:10px 14px 0}
.form-tbl td:last-child{width:auto;min-width:0;padding-bottom:14px;text-align:left;white-space:normal}
.form-tbl td:last-child:before{content:attr(data-th);display:block;font-size:11.5px;
font-weight:700;color:var(--muted);letter-spacing:.3px;margin-bottom:6px}
}
.perm-lvls{display:inline-flex;gap:2px;background:var(--purple-l);padding:3px;border-radius:9px}
.perm-lvl{position:relative;cursor:pointer;margin:0}
.perm-lvl input{position:absolute;opacity:0;width:0;height:0}
.perm-lvl span{display:block;padding:5px 11px;border-radius:7px;font-size:12.5px;font-weight:600;
color:var(--purple-d);white-space:nowrap;transition:background .15s,color .15s}
.perm-lvl.on span{background:var(--purple-2);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.16)}
.perm-lvl:hover span{background:rgba(255,255,255,.65)}
.perm-lvl.on:hover span{background:var(--purple-2)}
.perm-table tr.perm-grp td{background:var(--purple-l);font-weight:700;color:var(--purple-d);
font-size:12.5px;letter-spacing:.3px;padding:7px 14px}
.perm-table tr.perm-act td{font-weight:400;font-size:13px;color:var(--muted);transition:opacity .15s}
.perm-full{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:11px;
border:1.5px solid var(--purple-2);background:var(--purple-l);cursor:pointer;font-size:13.5px;line-height:1.6}
.perm-full input{margin-top:3px;flex-shrink:0;width:17px;height:17px;accent-color:var(--purple-2)}
.switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch-s{position:absolute;inset:0;background:#d1d5db;border-radius:999px;cursor:pointer;transition:.2s}
.switch-s:before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .switch-s{background:var(--ok)}
.switch input:checked + .switch-s:before{transform:translateX(20px)}
.mode-tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:middle}
.mode-tag.link{background:#e0f2fe;color:#0369a1}
.mode-tag.file{background:#ede9fe;color:#6d28d9}
.attach-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.attach-row:last-of-type{border-bottom:0}
.attach-label{font-weight:600;font-size:14px;flex:1;min-width:200px;color:var(--text)}
.sidebar .side-brand .side-logo{width:52px;height:52px;border-radius:13px;background:#fff;object-fit:contain;
padding:5px;flex-shrink:0;box-shadow:0 4px 12px -4px rgba(0,0,0,.35)}
.profile-hero{display:flex;align-items:center;gap:16px;max-width:640px;margin-bottom:18px;padding:18px 22px;
border-radius:var(--radius);color:#fff;background:linear-gradient(135deg,#7c3aed,#6d28d9 55%,#4c1d95);
box-shadow:0 16px 36px -16px rgba(76,29,149,.5)}
.profile-hero-av{width:58px;height:58px;border-radius:16px;flex-shrink:0;display:flex;align-items:center;
justify-content:center;font-size:24px;font-weight:800;background:rgba(255,255,255,.18);
text-transform:uppercase;border:2px solid rgba(255,255,255,.35)}
.profile-hero-info b{display:block;font-size:19px;font-weight:800;line-height:1.2}
.profile-hero-info span{font-size:13px;opacity:.9}
.content .card[style*="max-width"],.content .profile-hero{margin-left:auto;margin-right:auto}
.confirm-overlay{z-index:120}
.confirm-modal{max-width:420px;text-align:center;padding:30px 28px 26px}
.confirm-ic{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:28px;margin:0 auto 14px}
.confirm-ic.primary{background:var(--purple-l);color:var(--purple-d)}
.confirm-ic.danger{background:#fef2f2;color:var(--bad)}
.confirm-ic.ok{background:#dcfce7;color:#15803d}
.modal.confirm-modal.done-modal{max-width:500px}
.done-modal .alert{margin:0 0 20px}
.confirm-title{margin:0 0 8px;font-size:19px;font-weight:800;color:var(--ink);border:0;padding:0}
.confirm-msg{margin:0 0 22px;color:var(--muted);font-size:14.5px;line-height:1.6}
.confirm-actions{display:flex;gap:10px;justify-content:center}
.confirm-actions .btn{min-width:120px}
.hero-card{position:relative;overflow:hidden;border-radius:var(--radius);padding:26px 28px;margin-bottom:22px;color:#fff;
background:linear-gradient(135deg,#7c3aed 0%,#6d28d9 50%,#4c1d95 100%);
box-shadow:0 20px 45px -18px rgba(76,29,149,.5)}
.hero-glow{position:absolute;width:280px;height:280px;border-radius:50%;top:-120px;right:-60px;
background:radial-gradient(circle,rgba(255,255,255,.30),transparent 70%);filter:blur(10px);pointer-events:none}
.hero-body{position:relative;z-index:1;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hero-ic{width:62px;height:62px;border-radius:18px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);
display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0}
.hero-txt{flex:1;min-width:180px}
.hero-label{font-size:14px;font-weight:600;opacity:.9;letter-spacing:.3px}
.hero-n{font-size:42px;font-weight:800;line-height:1.05;letter-spacing:-1px}
.hero-unit{font-size:18px;font-weight:600;opacity:.85}
.hero-sub{font-size:13px;opacity:.85;margin-top:2px}
.hero-btn{flex-shrink:0}
.stat .stat-top{display:flex;justify-content:flex-end;margin-bottom:-6px}
.stat .stat-ic{font-size:22px;opacity:.9;line-height:1}
.stat.is-primary:before{background:var(--grad)}
.stat.is-info:before{background:linear-gradient(180deg,#60a5fa,#2563eb)}
.stat.is-info .n{color:#1d4ed8}
.stat.is-warn:before{background:linear-gradient(180deg,#fbbf24,#d97706)}
.stat.is-warn .n{color:#b45309}
.stat.is-ok:before{background:linear-gradient(180deg,#4ade80,#16a34a)}
.stat.is-ok .n{color:#15803d}
.stat.is-bad:before{background:linear-gradient(180deg,#f87171,#dc2626)}
.stat.is-bad .n{color:#b91c1c}
.stat.is-muted:before{background:linear-gradient(180deg,#cbd5e1,#94a3b8)}
.stat.is-muted .n{color:#475569}
.tbar-list{display:flex;flex-direction:column;gap:18px;margin-top:6px}
.tbar-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:7px;font-size:14px}
.tbar-head b{color:var(--purple-d);white-space:nowrap}
.tbar-pct{color:var(--muted);font-weight:600;font-size:12.5px}
.tbar{height:12px;border-radius:99px;background:#eee8f7;overflow:hidden}
.tbar-fill{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.2,.9,.3,1);min-width:2px}
.tbar-fill.tb-p{background:var(--grad)}
.tbar-fill.tb-y{background:var(--grad-y)}
.tbar-fill.tb-i{background:linear-gradient(90deg,#60a5fa,#2563eb)}
.dash-hdr{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.dash-date{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:3px;letter-spacing:.2px}
.action-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:14px 20px;border-radius:14px;margin-bottom:20px;cursor:pointer;
background:linear-gradient(135deg,#7c3aed,#4c1d95);
box-shadow:0 8px 24px -8px rgba(76,29,149,.45);color:#fff;transition:transform .15s,box-shadow .15s}
.action-banner:hover{transform:translateY(-2px);box-shadow:0 14px 32px -10px rgba(76,29,149,.5)}
.action-banner.success{background:linear-gradient(135deg,#059669,#065f46);box-shadow:0 8px 24px -8px rgba(5,150,105,.4);cursor:default}
.action-banner.success:hover{transform:none}
.banner-left{font-size:14.5px;font-weight:500;display:flex;align-items:center;gap:8px}
.banner-right{font-size:14px;font-weight:700;white-space:nowrap;background:rgba(255,255,255,.18);
padding:6px 14px;border-radius:99px;letter-spacing:.3px}
.dash-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px}
.kpi-card{background:#fff;border-radius:16px;padding:20px 22px;display:flex;align-items:center;gap:16px;
border:1px solid rgba(109,40,217,.07);box-shadow:0 2px 12px -4px rgba(76,29,149,.08);
position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.kpi-card::before{content:"";position:absolute;top:0;right:0;width:80px;height:80px;
background:var(--kb,rgba(107,33,168,.08));border-radius:0 16px 0 60px}
.kpi-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px -8px rgba(76,29,149,.14)}
.kpi-urgent{border-color:rgba(217,119,6,.25);background:linear-gradient(135deg,#fffbeb 0%,#fff 60%)}
.kpi-urgent::before{background:rgba(217,119,6,.1)}
.kpi-ic-wrap{width:48px;height:48px;border-radius:14px;background:var(--kb,rgba(107,33,168,.1));
display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;z-index:1}
.kpi-body{flex:1;z-index:1}
.kpi-n{font-size:32px;font-weight:800;color:var(--kc,#6B21A8);line-height:1;letter-spacing:-.5px}
.kpi-lbl{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:4px}
.kpi-tag{position:absolute;bottom:10px;right:12px;font-size:10.5px;font-weight:700;
color:#92400e;background:#fef3c7;padding:2px 8px;border-radius:99px;letter-spacing:.2px}
.dash-two{display:grid;grid-template-columns:1fr 340px;gap:14px;align-items:start}
@media(max-width:900px){.dash-two{grid-template-columns:1fr}}
.udash-warn{--tone:#d97706;--tone-bg:rgba(217,119,6,.09)}
.udash-info{--tone:#2563eb;--tone-bg:rgba(37,99,235,.08)}
.udash-bad{--tone:#dc2626;--tone-bg:rgba(220,38,38,.08)}
.udash-ok{--tone:#16a34a;--tone-bg:rgba(22,163,74,.08)}
.udash-purple{--tone:var(--purple);--tone-bg:var(--purple-l)}
.udash-muted{--tone:var(--muted);--tone-bg:transparent}
.udash-sec{font-size:14px;font-weight:800;color:var(--purple-d);margin:24px 0 10px;letter-spacing:.1px}
.udash-todo{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:4px 16px 8px;box-shadow:var(--shadow-sm)}
.udash-todo .udash-sec{margin:12px 2px 10px}
.udash-row{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:12px;cursor:pointer;margin-bottom:8px;
border-left:4px solid var(--tone,var(--purple));background:var(--tone-bg,var(--purple-l));transition:transform .12s}
.udash-row:hover{transform:translateX(3px)}
.udash-row-ic{font-size:22px;line-height:1;flex:0 0 auto}
.udash-row-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.udash-row-txt b{font-size:14px;color:var(--ink)}
.udash-row-txt span{font-size:12.5px;color:var(--muted)}
.udash-row-n{font-size:22px;font-weight:800;color:var(--tone,var(--purple-d));flex:0 0 auto;min-width:28px;text-align:right}
.udash-clear{padding:13px 14px;margin-bottom:8px;border-radius:12px;background:rgba(22,163,74,.08);color:#15803d;font-weight:700;font-size:14px}
.udash-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:16px}
.udash-kpi{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:3px;padding:15px 18px;border-radius:16px;
background:var(--white);border:1px solid var(--line);border-top:4px solid var(--tone,var(--purple));box-shadow:var(--shadow-sm);
font-family:inherit;transition:transform .15s}
.udash-kpi:hover{transform:translateY(-2px)}
.udash-kpi:focus-visible,.udash-tile:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.udash-kpi-top{display:flex;align-items:center;justify-content:space-between}
.udash-kpi-ic{font-size:19px}
.udash-kpi-n{font-size:30px;font-weight:800;line-height:1.1;color:var(--tone,var(--purple-d))}
.udash-kpi-lbl{font-size:12.5px;font-weight:600;color:var(--muted)}
.udash-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.udash-tile{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:14px;
background:var(--white);border:1px solid var(--line);font-family:inherit;transition:border-color .15s,transform .15s}
.udash-tile:hover{border-color:var(--purple);transform:translateY(-2px)}
.udash-tile-ic{width:40px;height:40px;border-radius:12px;background:var(--purple-l);display:flex;align-items:center;justify-content:center;
font-size:20px;flex:0 0 auto}
.udash-tile-txt{min-width:0;display:flex;flex-direction:column}
.udash-tile-txt b{font-size:13.5px;color:var(--ink)}
.udash-tile-txt span{font-size:12px;color:var(--muted)}
.udash-tile-primary{background:linear-gradient(135deg,#fbbf24,#f59e0b);border-color:transparent}
.udash-tile-primary b,.udash-tile-primary span{color:#3b2300}
.udash-tile-primary .udash-tile-ic{background:rgba(255,255,255,.4)}
.udash-panel{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:16px}
.udash-panel-hd{display:flex;align-items:center;gap:11px;padding:13px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.udash-panel-ic{font-size:20px;line-height:1}
.udash-panel-t{font-size:14.5px;font-weight:800;color:var(--purple-d)}
.udash-panel-s{font-size:12px;color:var(--muted)}
.udash-panel .table-wrap{margin:0;border:0;border-radius:0}
@media(max-width:600px){
.udash-kpis,.udash-tiles{grid-template-columns:1fr 1fr}
.udash-kpi-n{font-size:24px}
.udash-tile{flex-direction:column;align-items:flex-start;gap:8px}
}
.dash-panel{background:#fff;border-radius:16px;padding:20px 22px;
border:1px solid rgba(109,40,217,.07);box-shadow:0 2px 12px -4px rgba(76,29,149,.06)}
.panel-title{font-size:14px;font-weight:700;color:var(--purple-d);margin-bottom:16px;
display:flex;align-items:center;gap:6px;padding-bottom:12px;border-bottom:1.5px solid #f3f0ff}
.st-group{margin-bottom:16px}
.st-group:last-child{margin-bottom:0}
.st-group-title{font-size:11.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
margin-bottom:10px;opacity:.8}
.st-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.st-chip{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;
background:rgba(0,0,0,.025);border:1px solid rgba(0,0,0,.05);cursor:pointer;
transition:background .15s,transform .1s;user-select:none}
.st-chip:hover{background:color-mix(in srgb,var(--sc) 8%,#fff);transform:translateY(-1px);border-color:color-mix(in srgb,var(--sc) 30%,transparent)}
.st-chip-ic{font-size:15px;flex-shrink:0}
.st-chip-n{font-size:18px;font-weight:800;color:var(--sc);line-height:1;min-width:22px}
.st-chip-lbl{font-size:11.5px;color:var(--muted);font-weight:500;line-height:1.3}
.type-list{display:flex;flex-direction:column;gap:16px}
.type-row{display:flex;align-items:flex-start;gap:12px}
.type-badge{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:800;flex-shrink:0;letter-spacing:.3px}
.type-info{flex:1}
.type-meta{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;gap:8px}
.type-lbl{font-size:12.5px;color:#374151;font-weight:500}
.type-count{font-size:13px;font-weight:700;white-space:nowrap}
.type-bar-bg{height:8px;border-radius:99px;background:#f3f0ff;overflow:hidden;margin-bottom:3px}
.type-bar-fill{height:100%;border-radius:99px;transition:width .7s cubic-bezier(.2,.9,.3,1);min-width:3px}
.type-pct{font-size:11px;color:var(--muted);font-weight:600;text-align:right}
.sm-placeholder{text-align:center;padding:48px 24px;color:var(--muted);font-size:15px;font-weight:500}
.sm-banner{background:#fff;border-radius:16px;padding:20px 22px;margin-bottom:16px;
border:1px solid rgba(109,40,217,.07);box-shadow:0 2px 12px -4px rgba(76,29,149,.06)}
.sm-banner-title{font-size:13px;font-weight:700;color:var(--purple-d);margin-bottom:14px}
.sm-kpi-row{display:flex;gap:10px;flex-wrap:wrap}
.sm-kpi{flex:1;min-width:100px;text-align:center;padding:12px 8px;background:#faf9fe;border-radius:12px}
.sm-kpi-ic{font-size:20px;margin-bottom:4px}
.sm-kpi-n{font-size:28px;font-weight:800;line-height:1;letter-spacing:-.5px}
.sm-kpi-lbl{font-size:11px;color:var(--muted);margin-top:3px;font-weight:600}
.sm-chips{display:flex;gap:8px;flex-wrap:wrap}
.sm-chip{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;
background:rgba(0,0,0,.025);border:1px solid rgba(0,0,0,.05)}
.sm-chip-n{font-size:18px;font-weight:800;color:var(--cc)}
.sm-chip-lbl{font-size:11.5px;color:var(--muted);font-weight:500}
.sm-type-row{display:flex;justify-content:space-between;padding:8px 0;
border-bottom:1px dashed var(--line);font-size:13.5px}
.sm-type-row:last-child{border-bottom:none}
.sm-rate-row{display:flex;gap:24px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid rgba(109,40,217,.08)}
.sm-rate-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.sm-rate-val{font-size:15px;font-weight:800;margin-right:2px}
.sm-pipeline{display:flex;align-items:center;gap:0;margin-bottom:16px;flex-wrap:wrap;gap:4px}
.sm-pipe-step{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid rgba(109,40,217,.1);
border-radius:10px;padding:10px 14px;cursor:pointer;transition:box-shadow .15s}
.sm-pipe-step:hover{box-shadow:0 2px 10px -2px rgba(109,40,217,.18)}
.sm-pipe-arrow{color:#c4b5fd;font-size:16px;margin:0 2px;flex-shrink:0}
.sm-pipe-ic{font-size:18px}
.sm-pipe-n{font-size:20px;font-weight:800;color:var(--sc);line-height:1}
.sm-pipe-lbl{font-size:10.5px;color:var(--muted);margin-top:1px}
.sm-pipe-body{display:flex;flex-direction:column}
.rh-timeline{display:flex;flex-direction:column;gap:0;margin-top:8px}
.rh-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.rh-row:last-child{border-bottom:none}
.rh-ic{font-size:15px;width:20px;flex-shrink:0;margin-top:1px;text-align:center}
.rh-body{flex:1;min-width:0}
.rh-status{font-size:12.5px;font-weight:700;color:var(--sc,var(--purple))}
.rh-meta{font-size:11px;color:var(--muted);margin-top:1px}
.rh-note{font-size:11.5px;color:#92400e;background:#fff7ed;border-left:3px solid #f97316;
padding:4px 9px;border-radius:0 5px 5px 0;margin-top:4px}
.rh-wrap{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-top:10px}
.rh-heading{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.rp-section{margin-top:14px}
.rp-section-title{font-size:14px;font-weight:700;color:var(--purple-d);margin-bottom:12px;
display:flex;align-items:center;gap:6px}
.rp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:700px){.rp-grid{grid-template-columns:1fr}}
.rp-card{background:#fff;border-radius:16px;padding:18px 20px;
border:1px solid rgba(109,40,217,.07);box-shadow:0 2px 12px -4px rgba(76,29,149,.06)}
.rp-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;
padding-bottom:12px;border-bottom:1.5px solid #f3f0ff}
.rp-ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;
justify-content:center;font-size:20px;flex-shrink:0}
.rp-title{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:2px}
.rp-total{font-size:22px;font-weight:800;line-height:1;letter-spacing:-.3px}
.rp-chips{display:flex;gap:8px;flex-wrap:wrap}
.rp-chip{display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:12px;
flex:1;min-width:90px;background:rgba(0,0,0,.025);border:1px solid rgba(0,0,0,.05)}
.rp-chip-ic{font-size:14px;flex-shrink:0}
.rp-chip-n{font-size:20px;font-weight:800;color:var(--rc);line-height:1}
.rp-chip-lbl{font-size:11px;color:var(--muted);font-weight:500;line-height:1.3}
.brand-uploader{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;margin-bottom:6px}
.brand-prev-wrap{flex-shrink:0}
.brand-prev{width:108px;height:108px;border-radius:50%;background:var(--grad);display:flex;align-items:center;
justify-content:center;overflow:hidden;box-shadow:0 12px 30px -10px rgba(76,29,149,.45);padding:12px}
.brand-prev img{max-width:100%;max-height:100%;object-fit:contain}
.brand-prev-empty{color:#fff;font-weight:800;font-size:34px;letter-spacing:1px}
.brand-up-body{flex:1;min-width:230px}
.brand-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;
border:2px dashed #d9d3ec;border-radius:16px;padding:22px 16px;cursor:pointer;background:#fcfbfe;
transition:border-color .2s,background .2s;margin:0;font-weight:600}
.brand-drop:hover{border-color:var(--purple-2);background:var(--purple-l)}
.brand-drop b{color:var(--purple-d);font-size:14.5px}
.brand-drop-ic{font-size:30px;line-height:1}
input,textarea,select{font-size:max(16px,1em)}
.table-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
@media (hover:none) and (pointer:coarse){
.btn,.pg-btn{min-height:44px}
.btn-sm{min-height:40px}
.nav a{padding-top:10px;padding-bottom:10px}
input,select,textarea{font-size:16px}
.table-wrap{overflow-x:auto}
.switch{min-height:44px;display:inline-flex;align-items:center}
}
.detail-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding:10px 0;margin:-10px 0 14px;
background:linear-gradient(var(--bg) 62%, transparent);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
@media(max-width:860px){
.sidebar{left:-290px;width:280px} .sidebar.open{left:0}
.main{margin-left:0}
.topbar{margin:12px 14px 0 14px;border-radius:14px;padding:10px 16px;top:12px}
.topbar .ham{display:block}
.scrim.show{display:block}
.content{padding:16px 14px}
.page-title{font-size:21px}
.card,.card-pad{padding:18px}
.kv{flex-direction:column;gap:3px}.kv .k{width:auto}
.topbar-right{gap:8px}
.btn-logout-top .lo-t{display:none}
.btn-logout-top{padding:9px 11px}
.topbar-right .who span{display:none}
.confirm-actions .btn{min-width:0;flex:1}
.stats{gap:14px}
}
@media(max-width:480px){
.stats{grid-template-columns:1fr}
.page-head{flex-direction:column;align-items:flex-start;gap:10px}
.seg-tabs{width:100%;justify-content:flex-start}
#reqTabs{width:100%;flex-wrap:wrap}
#reqTabs .btn{flex:1;min-width:0;font-size:13px;padding:9px 8px}
.file-item{flex-wrap:wrap}
.attach-row{flex-direction:column;align-items:flex-start}
.btn{min-height:44px}
.table-wrap{border-radius:10px}
}
.theme-btn{width:44px;height:44px;border-radius:14px;border:1px solid rgba(109,40,217,.10);
background:linear-gradient(160deg,#fbfaff,#f1ecfd);color:var(--purple-d);font-size:18px;
cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;
transition:transform .18s ease,box-shadow .22s ease,border-color .2s ease,background .2s ease}
.theme-btn:hover{transform:translateY(-2px);border-color:rgba(124,58,237,.28);
box-shadow:0 10px 22px -8px rgba(109,40,217,.45)}
.theme-btn:active{transform:translateY(0)}
[data-theme="dark"]{
--purple:#a78bfa; --purple-d:#c4b5fd; --purple-l:#2e1f52; --purple-2:#8b5cf6;
--yellow:#f5b50a; --yellow-d:#f5b50a; --yellow-l:#3a2200;
--ink:#ede8ff; --muted:#9d93c0; --line:#3a3060; --bg:#0f0d1c; --white:#1c1633;
--ok:#4ade80; --warn:#fbbf24; --bad:#f87171; --info:#60a5fa;
--shadow-sm:0 1px 2px rgba(0,0,0,.3),0 2px 10px rgba(0,0,0,.2);
--shadow:0 12px 34px -10px rgba(0,0,0,.45);
}
[data-theme="dark"] body{
background:radial-gradient(1200px 600px at 110% -10%,#1e1040 0%,transparent 55%),
radial-gradient(900px 500px at -10% 110%,#160b2e 0%,transparent 50%),var(--bg);
color:var(--ink);
}
[data-theme="dark"] .layout{
background:radial-gradient(circle at 10% 20%,#1a1038 0%,transparent 45%),
radial-gradient(circle at 90% 80%,#130929 0%,transparent 45%),var(--bg);
}
[data-theme="dark"] .card{background:rgba(24,18,46,.96);border-color:rgba(167,139,250,.08)}
[data-theme="dark"] .topbar{background:rgba(22,17,42,.88);border-color:rgba(167,139,250,.12)}
[data-theme="dark"] .topbar .who{background:#1e1640;border-color:rgba(167,139,250,.1)}
[data-theme="dark"] .topbar .who b{color:var(--purple-d)}
[data-theme="dark"] .theme-btn{background:rgba(167,139,250,.14);border-color:rgba(167,139,250,.2);color:var(--yellow)}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
background:#1a1530;border-color:#3a3060;color:var(--ink)}
[data-theme="dark"] input:focus,[data-theme="dark"] select:focus,[data-theme="dark"] textarea:focus{
background:#201a3a;border-color:var(--purple)}
[data-theme="dark"] label{color:#c4b5fd}
[data-theme="dark"] .news-hero .news-card{
background:linear-gradient(135deg,rgba(167,139,250,.10) 0%,rgba(24,18,46,.96) 42%);
border-color:rgba(167,139,250,.30);border-left-color:var(--purple)}
[data-theme="dark"] .pub-nav-bar{
background:linear-gradient(100deg,#3b2d6b 0%,#4a3785 58%,#5a44a3 100%);
box-shadow:0 4px 16px rgba(0,0,0,.45)}
[data-theme="dark"] .table{background:transparent}
[data-theme="dark"] .table th{background:#21193a;color:var(--purple-d);border-bottom-color:rgba(167,139,250,.12)}
[data-theme="dark"] .table td{border-top-color:rgba(167,139,250,.05)}
[data-theme="dark"] .table tbody tr:nth-child(even) td{background:rgba(167,139,250,.04)}
[data-theme="dark"] .table tbody tr:hover td{background:rgba(167,139,250,.08)!important}
[data-theme="dark"] .table-wrap{background:transparent;border-color:rgba(167,139,250,.08)}
[data-theme="dark"] .ccf-warn{color:var(--warn);background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.28)}
[data-theme="dark"] .ccf-tw{box-shadow:none}
[data-theme="dark"] .btn-ghost{background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.2);color:var(--purple-d)}
[data-theme="dark"] .btn-ghost:hover{background:rgba(167,139,250,.18)}
[data-theme="dark"] .btn-logout-top{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.2)}
[data-theme="dark"] .alert.info{background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.2);color:#93c5fd}
[data-theme="dark"] .alert.ok{background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.2);color:#86efac}
[data-theme="dark"] .alert.warn{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.2);color:#fde68a}
[data-theme="dark"] .content-box{background:rgba(30,22,58,.8);border-color:var(--line)}
[data-theme="dark"] .modal-box{background:#1c1633;border-color:rgba(167,139,250,.1)}
[data-theme="dark"] .nc-cover,[data-theme="dark"] .nd-cover{background:#241c40}
[data-theme="dark"] .nc-cover-none{background:linear-gradient(135deg,#241c40 0%,#2d2350 55%,#332863 100%)}
[data-theme="dark"] .nd-back,[data-theme="dark"] .nd-link{background:#1c1633;border-color:rgba(167,139,250,.16)}
[data-theme="dark"] .nd-back:hover,[data-theme="dark"] .nd-link:hover{background:#2a2148;border-color:rgba(167,139,250,.4)}
[data-theme="dark"] .nb-q{background:#241c40;border-left-color:#7c5cd6;color:#c4b5fd}
[data-theme="dark"] .nw-tab{background:#191333;border-color:rgba(167,139,250,.14);color:#9d95b8}
[data-theme="dark"] .nw-tab.on{background:#1c1633;color:#c4b5fd}
[data-theme="dark"] .nw-tools{background:#191333;border-color:rgba(167,139,250,.14)}
[data-theme="dark"] .nw-tool{color:#e6e1f5}
[data-theme="dark"] .nw-tool:hover{background:#2a2148;border-color:rgba(167,139,250,.4);color:#c4b5fd}
[data-theme="dark"] .nw-prev{background:#1c1633;border-color:rgba(167,139,250,.14)}
[data-theme="dark"] .tab-bar{border-color:var(--line)}
[data-theme="dark"] .tab{color:var(--muted)}
[data-theme="dark"] .tab.active{color:var(--purple)}
[data-theme="dark"] .fi-item{background:rgba(24,18,46,.96);border-color:rgba(167,139,250,.1)}
[data-theme="dark"] .num-badge{background:linear-gradient(135deg,#2e1f52,#3b2a6a);color:#c4b5fd}
[data-theme="dark"] select option{background:#1a1530;color:var(--ink)}
.rpt-action-badge{display:inline-block;border:1.5px solid var(--yellow);background:rgba(245,181,10,.10);
color:#92400e;padding:4px 11px;border-radius:8px;font-size:12px;font-weight:700;white-space:nowrap}
.toggle{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;
background:#d1d5db;border-radius:26px;transition:.3s}
.toggle-slider:before{position:absolute;content:"";height:20px;width:20px;
left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;
box-shadow:0 1px 4px rgba(0,0,0,.2)}
.toggle input:checked+.toggle-slider{background:var(--purple)}
.toggle input:checked+.toggle-slider:before{transform:translateX(20px)}
body.dark .toggle-slider{background:#3a3555}
body.dark .toggle input:checked+.toggle-slider{background:var(--purple)}
.sidebar{padding-bottom:max(env(safe-area-inset-bottom,0px),12px)}
@media(max-width:860px){
.topbar{margin-top:max(12px,env(safe-area-inset-top,12px));top:max(12px,env(safe-area-inset-top,12px))}
}
.toast{top:max(20px,calc(env(safe-area-inset-top,0px) + 20px));right:max(20px,env(safe-area-inset-right,20px))}
@media(max-width:540px){
.overlay{padding:0;align-items:flex-end}
.modal{border-radius:24px 24px 0 0;max-height:92vh;padding:24px 20px;
padding-bottom:max(24px,env(safe-area-inset-bottom,24px));
animation:slideUp .3s cubic-bezier(.2,.9,.3,1.2)}
.modal.modal-center{margin:auto;width:calc(100% - 28px);
border-radius:24px;max-height:calc(100% - 32px);
padding:26px 22px;
animation:pop .25s cubic-bezier(.2,.9,.3,1.2)}
.modal.modal-full{border-radius:0;max-height:100%;height:100%;padding:16px 14px;
padding-bottom:max(16px,env(safe-area-inset-bottom,16px));
padding-top:max(16px,env(safe-area-inset-top,16px))}
.modal.modal-full h2{font-size:19px;padding-bottom:10px}
}
@keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:none;opacity:1}}
@media(max-width:480px){
.hero-n{font-size:32px}
.hero-ic{width:50px;height:50px;font-size:24px}
.stat .n{font-size:28px}
}
.topbar .ham{min-width:44px;min-height:44px}
@media(max-width:860px){
.topbar{padding:8px 14px}
.topbar-right{gap:8px}
.topbar-right .bell{min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center}
}
.tbl-mobile-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;border-radius:inherit}
@media(max-width:540px){.tbl-col-secondary{display:none}}
@media(max-width:540px){
.seg-tabs{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;border-radius:14px}
.seg-tabs .btn{flex-shrink:0}
}
.hist-year-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
@media(max-width:480px){
.hist-year-bar{gap:6px}
.hist-year-bar button{min-height:40px!important;padding:6px 14px!important}
}
@media(max-width:540px){
.auth2{
padding:16px;
align-items:center;
padding-top:max(20px,env(safe-area-inset-top,20px));
padding-bottom:max(20px,env(safe-area-inset-bottom,20px))
}
.auth2-card{
border-radius:24px!important;
min-height:auto;
max-width:100%;
border:1px solid rgba(255,255,255,.85);
box-shadow:0 24px 60px -16px rgba(76,29,149,.22),0 4px 16px rgba(76,29,149,.10)
}
.auth2-brand{padding:24px 20px 18px}
.ab-welcome{font-size:15px;margin-bottom:8px}
.ab-logo-img,.ab-logo-txt{width:min(var(--brand-logo,140px),72px)!important;
height:min(var(--brand-logo,140px),72px)!important}
.ab-name{font-size:17px}
.ab-name-en{font-size:11px;margin-top:4px}
.auth2-form{
padding:24px 20px;
padding-bottom:max(28px,env(safe-area-inset-bottom,28px))
}
.af-title{font-size:20px;margin-bottom:10px}
.auth2-form .row{flex-direction:column;gap:0}
.auth2-form .row>*{min-width:0;width:100%}
}
.tbl-row-click{background:var(--white);transition:background .15s}
.tbl-row-click:nth-child(even){background:var(--purple-l)}
.tbl-row-click:hover{background:rgba(109,40,217,.10)}
[data-theme="dark"] .tbl-row-click:hover{background:rgba(167,139,250,.12)}
@media (max-height:500px){
.content{padding:12px 14px 24px}
.topbar{margin:8px 12px 0 12px;padding:7px 12px;top:8px}
.detail-bar{padding:6px 0;margin:-6px 0 10px}
.page-title{font-size:19px}
.page-title:after{margin-top:4px;height:3px}
.page-sub{margin-bottom:12px}
.card,.card-pad{padding:14px 16px;margin-bottom:12px}
.table-wrap{max-height:none}
.modal{max-height:calc(100dvh - 16px);padding:16px 18px}
}
.notif-wrap{position:relative;margin-left:auto}
.notif-wrap .bell{margin-left:0}
.notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:360px;max-width:92vw;
max-height:min(70vh,520px);overflow-y:auto;background:var(--white);border:1.5px solid var(--line);
border-radius:14px;box-shadow:var(--shadow);z-index:60;padding:6px}
.notif-head{padding:10px 12px 8px;font-weight:800;font-size:13.5px;color:var(--purple-d);
border-bottom:1px solid var(--line);margin-bottom:4px;display:flex;gap:8px;align-items:baseline}
.notif-empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:13px}
.notif-item{display:flex;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;
transition:background .15s;align-items:flex-start}
.notif-item:hover{background:var(--purple-l)}
.notif-item.is-new{background:rgba(109,40,217,.07)}
[data-theme="dark"] .notif-item.is-new{background:rgba(167,139,250,.12)}
.notif-ic{font-size:17px;line-height:1.3;flex:0 0 22px;text-align:center}
.notif-body{flex:1;min-width:0}
.notif-title{font-size:13px;font-weight:700;color:var(--ink);line-height:1.45;
overflow-wrap:anywhere}
.notif-ref{font-size:12px;font-weight:700;color:var(--purple);margin-top:2px;overflow-wrap:anywhere}
.notif-sub{font-size:12px;color:var(--muted);margin-top:1px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-at{font-size:11px;color:var(--muted);margin-top:3px}
@media(max-width:520px){ .notif-panel{width:calc(100vw - 28px);right:-8px} }