/* ===== Reset & Variables ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--p:#0d9488;--pd:#0f766e;--pl:#14b8a6;--pb:#f0fdfa;--a:#3b82f6;--w:#f59e0b;--d:#ef4444;--s:#22c55e;--g50:#f9fafb;--g100:#f3f4f6;--g200:#e5e7eb;--g300:#d1d5db;--g400:#6b7280;--g500:#6b7280;--g600:#4b5563;--g700:#374151;--g800:#1f2937;--sb:#0f172a;--sh:#1e293b;--r:12px;--rs:8px;--sd:0 1px 3px rgba(0,0,0,.1);--sdm:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);--sdl:0 10px 15px rgba(0,0,0,.1),0 4px 6px rgba(0,0,0,.05)}
body{font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:var(--g100);color:var(--g800);line-height:1.6;overflow-x:hidden;font-size:14px}
button{cursor:pointer;font-family:inherit;border:none;outline:none}
input,textarea,select{font-family:inherit;outline:none}
ul{list-style:none}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--g300);border-radius:3px}

/* ===== Login ===== */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f766e,#0d9488 40%,#14b8a6 70%,#2dd4bf);z-index:1000;transition:opacity .5s,visibility .5s}
#login.hide{opacity:0;visibility:hidden;pointer-events:none}
.login-box{display:flex;width:880px;max-width:92%;min-height:500px;background:#fff;border-radius:20px;box-shadow:0 25px 60px rgba(0,0,0,.3);overflow:hidden}
.login-l{flex:1;background:linear-gradient(160deg,#0f766e,#14b8a6);color:#fff;padding:44px 36px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login-l::before{content:'';position:absolute;top:-40%;right:-30%;width:360px;height:360px;background:rgba(255,255,255,.08);border-radius:50%}
.login-l::after{content:'';position:absolute;bottom:-30%;left:-20%;width:280px;height:280px;background:rgba(255,255,255,.06);border-radius:50%}
.login-logo{display:flex;align-items:center;gap:10px;position:relative;z-index:1}
.login-logo .ic{width:42px;height:42px;background:rgba(255,255,255,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px}
.login-logo h1{font-size:18px;font-weight:700}
.login-tag{position:relative;z-index:1}
.login-tag h2{font-size:26px;font-weight:700;margin-bottom:10px;line-height:1.4}
.login-tag p{font-size:13px;opacity:.85;line-height:1.8}
.login-feats{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px}
.login-feat{display:flex;align-items:center;gap:8px;font-size:12px;opacity:.9}
.login-feat .dt{width:6px;height:6px;background:#5eead4;border-radius:50%}
.login-r{flex:1;padding:44px 36px;display:flex;flex-direction:column;justify-content:center}
.login-r h3{font-size:20px;font-weight:700;margin-bottom:6px}
.login-r .sub{font-size:13px;color:var(--g500);margin-bottom:28px}
.fg{margin-bottom:18px}
.fg label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--g700)}
.fg input{width:100%;padding:11px 14px;border:2px solid var(--g200);border-radius:var(--rs);font-size:14px;transition:border-color .2s}
.fg input:focus{border-color:var(--p)}
.login-err{color:var(--d);font-size:13px;padding:10px 14px;background:#fef2f2;border-radius:var(--rs);display:none;align-items:center;gap:8px;margin-bottom:16px}
.login-err.show{display:flex}
.login-err::before{content:'\26A0';font-size:16px}
.btn-login{width:100%;padding:13px;background:linear-gradient(135deg,var(--p),var(--pl));color:#fff;border-radius:var(--rs);font-size:15px;font-weight:600;transition:transform .15s,box-shadow .2s}
.btn-login:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(13,148,136,.4)}
.demo-cred{margin-top:20px;padding:14px;background:var(--pb);border:1px dashed var(--pl);border-radius:var(--rs)}
.demo-cred .lbl{font-size:12px;font-weight:600;color:var(--pd);margin-bottom:6px}
.demo-cred .cr{display:flex;gap:16px;font-size:13px;color:var(--g600)}
.demo-cred .cr b{color:var(--pd);cursor:pointer}
.pw-wrap{position:relative}
.pw-wrap input{width:100%;padding-right:40px}
.pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:14px;opacity:.45}
.pw-eye:hover{opacity:.9}

/* ===== App Layout ===== */
#app{display:none;min-height:100vh}
#app.show{display:block}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:230px;background:var(--sb);color:#fff;display:flex;flex-direction:column;z-index:100}
.sb-hd{padding:18px 20px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-hd .ic{width:34px;height:34px;background:linear-gradient(135deg,var(--p),var(--pl));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px}
.sb-hd h1{font-size:14px;font-weight:700;line-height:1.3}
.sb-hd h1 span{display:block;font-size:10px;font-weight:400;opacity:.6}
.sb-nav{flex:1;padding:10px 0;overflow-y:auto}
.nav-t{padding:14px 20px 4px;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.3);font-weight:600}
.nav-i{display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:13px;color:rgba(255,255,255,.6);cursor:pointer;transition:all .15s;border-left:3px solid transparent}
.nav-i:hover{background:var(--sh);color:#fff}
.nav-i.active{background:var(--sh);color:#fff;border-left-color:var(--pl)}
.nav-i .ni{width:18px;text-align:center;font-size:15px}
.sb-ft{padding:14px 20px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px}
.sb-ft .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--pl));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.sb-ft .inf{flex:1;min-width:0}
.sb-ft .inf .nm{font-size:12px;font-weight:600}
.sb-ft .inf .rl{font-size:10px;opacity:.5}
.sb-ft .lo{color:rgba(255,255,255,.4);cursor:pointer;font-size:16px}
.sb-ft .lo:hover{color:var(--d)}
.main{margin-left:230px;min-height:100vh;display:flex;flex-direction:column}
.topbar{height:56px;background:#fff;border-bottom:1px solid var(--g200);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:50}
.topbar .pt{font-size:17px;font-weight:700}
.topbar .bc{font-size:11px;color:var(--g400)}
.topbar-r{display:flex;align-items:center;gap:12px}
.topbar-r .ib{width:34px;height:34px;border-radius:50%;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--g500);cursor:pointer;position:relative}
.topbar-r .ib:hover{background:var(--g200)}
.topbar-r .ib .bd{position:absolute;top:3px;right:3px;width:7px;height:7px;background:var(--d);border-radius:50%;border:2px solid #fff}
.content{flex:1;padding:24px;overflow-y:auto}
.page{display:none;animation:fi .3s ease}
.page.active{display:block}
@keyframes fi{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ===== Components ===== */
.card{background:#fff;border-radius:var(--r);box-shadow:var(--sd);overflow:hidden}
.card-h{padding:18px 22px;border-bottom:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between}
.card-h h3{font-size:15px;font-weight:700}
.card-h .sub{font-size:11px;color:var(--g400);margin-top:2px}
.card-b{padding:22px}
.btn{padding:9px 18px;border-radius:var(--rs);font-size:13px;font-weight:600;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.btn-p{background:var(--p);color:#fff}.btn-p:hover{background:var(--pd)}.btn-p:disabled{background:var(--g300);cursor:not-allowed}
.btn-o{background:transparent;border:1.5px solid var(--g300);color:var(--g600)}.btn-o:hover{border-color:var(--p);color:var(--p)}
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600}
.b-s{background:#dcfce7;color:#16a34a}.b-w{background:#fef3c7;color:#d97706}.b-d{background:#fee2e2;color:#dc2626}.b-i{background:#dbeafe;color:#2563eb}.b-g{background:var(--g100);color:var(--g500)}
.tag{display:inline-block;padding:2px 7px;border-radius:4px;font-size:11px;font-weight:500}
.t-g{background:#dcfce7;color:#16a34a}.t-y{background:#fef3c7;color:#d97706}.t-r{background:#fee2e2;color:#dc2626}.t-b{background:#dbeafe;color:#2563eb}.t-gr{background:var(--g100);color:var(--g500)}

/* ===== Dashboard ===== */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.stat-c{background:#fff;border-radius:var(--r);padding:20px;box-shadow:var(--sd);position:relative;overflow:hidden}
.stat-c::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.stat-c.g::before{background:var(--p)}.stat-c.b::before{background:var(--a)}.stat-c.a::before{background:var(--w)}.stat-c.p::before{background:#8b5cf6}
.stat-c .si{position:absolute;top:16px;right:16px;font-size:18px;opacity:.15}
.stat-c .sl{font-size:12px;color:var(--g500);margin-bottom:6px}
.stat-c .sv{font-size:26px;font-weight:700}
.stat-c .st{font-size:11px;margin-top:6px}
.stat-c .st.up{color:var(--s)}.stat-c .st.dn{color:var(--d)}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.chart-c{background:#fff;border-radius:var(--r);box-shadow:var(--sd);overflow:hidden}
.chart-c .ch-h{padding:16px 20px;border-bottom:1px solid var(--g100)}
.chart-c .ch-h h3{font-size:14px;font-weight:700}
.chart-c .ch-b{padding:20px}
.pb{width:100%;height:7px;background:var(--g100);border-radius:4px;overflow:hidden}
.pb .fl{height:100%;border-radius:4px;transition:width .8s ease}
.pb .fl.gn{background:linear-gradient(90deg,var(--p),var(--pl))}
.pb .fl.bl{background:linear-gradient(90deg,var(--a),#60a5fa)}
.pb .fl.am{background:linear-gradient(90deg,var(--w),#fbbf24)}
.pb .fl.rd{background:linear-gradient(90deg,var(--d),#f87171)}

/* ===== F1 Upload ===== */
.upload-z{border:2px dashed var(--g300);border-radius:var(--r);padding:40px 20px;text-align:center;transition:all .2s;cursor:pointer;background:var(--g50)}
.upload-z:hover{border-color:var(--p);background:var(--pb)}
.upload-z .ui{font-size:42px;margin-bottom:12px}
.upload-z h4{font-size:15px;font-weight:600;margin-bottom:6px}
.upload-z p{font-size:12px;color:var(--g400)}
.upload-z.done{border-color:var(--p);border-style:solid;background:var(--pb);padding:20px}
.upload-z.done .ui{display:none}
.uf{display:flex;align-items:center;gap:14px;text-align:left}
.uf .fi{width:44px;height:44px;background:var(--d);color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}
.uf .fn{flex:1}.uf .fn .n{font-size:13px;font-weight:600}.uf .fn .m{font-size:11px;color:var(--g400)}
.uf .fx{color:var(--g400);cursor:pointer;font-size:16px}.uf .fx:hover{color:var(--d)}
.ind-sel{display:flex;gap:14px;margin-top:20px}
.ind-c{flex:1;border:2px solid var(--g200);border-radius:var(--r);padding:20px;cursor:pointer;transition:all .2s;text-align:center}
.ind-c:hover{border-color:var(--pl)}
.ind-c.sel{border-color:var(--p);background:var(--pb)}
.ind-c .ii{font-size:32px;margin-bottom:8px}
.ind-c .in{font-size:14px;font-weight:600;margin-bottom:2px}
.ind-c .id{font-size:11px;color:var(--g400)}

/* ===== AI Processing ===== */
.ai-proc{text-align:center;padding:30px 0}
.ai-proc .ai-ic{width:70px;height:70px;margin:0 auto 20px;position:relative}
.ai-proc .ai-ic .ring{position:absolute;inset:0;border:4px solid var(--g200);border-top-color:var(--p);border-radius:50%;animation:spin 1s linear infinite}
.ai-proc .ai-ic .inn{position:absolute;inset:10px;background:var(--pb);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px}
@keyframes spin{to{transform:rotate(360deg)}}
.ai-proc h4{font-size:15px;font-weight:600;margin-bottom:6px}
.ai-steps{max-width:360px;margin:20px auto 0;text-align:left}
.ai-st{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:12px;color:var(--g400);transition:color .3s}
.ai-st.done{color:var(--s)}.ai-st.active{color:var(--p);font-weight:600}
.ai-st .si{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0}
.ai-st.done .si::after{content:'\2713'}
.ai-st.active .si{animation:pulse 1.5s ease infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(13,148,136,.3)}50%{box-shadow:0 0 0 6px rgba(13,148,136,0)}}

/* ===== Gap Report ===== */
.gap-r{display:flex;flex-direction:column;gap:16px}
.gap-sum{background:linear-gradient(135deg,var(--pb),#fff);border:1px solid var(--g100);border-radius:var(--r);padding:20px}
.gap-sum h3{font-size:16px;font-weight:700;margin-bottom:10px}
.gap-sum .st{font-size:13px;color:var(--g600);line-height:1.8}
.gap-dim{background:#fff;border:1px solid var(--g100);border-radius:var(--r);overflow:hidden}
.gap-dim .dh{padding:14px 18px;background:var(--g50);display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.gap-dim .dh h4{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.gap-dim .dh .da{transition:transform .2s;color:var(--g400)}
.gap-dim.exp .dh .da{transform:rotate(180deg)}
.gap-dim .db{display:none;padding:0 18px 16px}
.gap-dim.exp .db{display:block}
.gap-it{padding:14px 0;border-bottom:1px solid var(--g100)}
.gap-it:last-child{border-bottom:none}
.gap-it .ih{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.gap-it .inm{font-size:13px;font-weight:600}
.gap-it .ibd{font-size:13px;color:var(--g600);line-height:1.7}
.gap-it .isg{margin-top:6px;padding:8px 12px;background:var(--pb);border-radius:var(--rs);font-size:12px;color:var(--pd)}
.gap-it .irf{margin-top:6px;font-size:11px;color:var(--g400);display:flex;align-items:center;gap:4px}
.gap-it .irf a{color:var(--a);cursor:pointer;text-decoration:underline}

/* ===== Compliance Overview ===== */
.co{background:#fff;border:1px solid var(--g100);border-radius:var(--r);padding:20px}
.co h3{font-size:15px;font-weight:700;margin-bottom:16px}
.co-sc{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.sc-c{width:110px;height:110px;position:relative;flex-shrink:0}
.sc-c svg{transform:rotate(-90deg)}
.sc-c .st{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sc-c .st .n{font-size:28px;font-weight:700;color:var(--p)}
.sc-c .st .l{font-size:10px;color:var(--g400)}
.co-d{flex:1}
.co-bi{margin-bottom:10px}
.co-bi .bl{display:flex;justify-content:space-between;font-size:12px;margin-bottom:3px}
.co-bi .bl .bn{color:var(--g600);font-weight:500}
.co-bi .bl .bv{font-weight:600}

/* ===== F2 Draft ===== */
.dl{display:grid;grid-template-columns:300px 1fr;gap:16px}
.dl-cfg{background:#fff;border-radius:var(--r);box-shadow:var(--sd);padding:20px;height:fit-content}
.dl-cfg .cg{margin-bottom:16px}
.dl-cfg .cg label{display:block;font-size:12px;font-weight:600;margin-bottom:6px;color:var(--g700)}
.so{display:flex;flex-wrap:wrap;gap:6px}
.so .o{padding:7px 12px;border:1.5px solid var(--g200);border-radius:var(--rs);font-size:12px;cursor:pointer;transition:all .15s}
.so .o:hover{border-color:var(--pl)}
.so .o.sel{border-color:var(--p);background:var(--pb);color:var(--pd);font-weight:600}
.co2{display:flex;flex-direction:column;gap:5px}
.co2 .o{padding:9px 12px;border:1.5px solid var(--g200);border-radius:var(--rs);font-size:12px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px}
.co2 .o:hover{border-color:var(--pl)}
.co2 .o.sel{border-color:var(--p);background:var(--pb)}
.co2 .o .ci{font-size:14px}
.mi{width:100%;min-height:100px;padding:10px;border:1.5px solid var(--g200);border-radius:var(--rs);font-size:12px;resize:vertical}
.mi:focus{border-color:var(--p)}
.dl-out{background:#fff;border-radius:var(--r);box-shadow:var(--sd);overflow:hidden}
.dl-out .oh{padding:14px 20px;border-bottom:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between}
.dl-out .oh h3{font-size:14px;font-weight:700}
.dl-out .ob{padding:20px;min-height:360px}
.dc{font-size:13px;line-height:1.8;color:var(--g700)}
.dc h4{font-size:15px;font-weight:700;margin:14px 0 6px}
.dc h4:first-child{margin-top:0}
.dc p{margin-bottom:10px}
.dc .ref{font-size:11px;color:var(--g400);margin-top:6px;padding-left:10px;border-left:2px solid var(--g200)}
.dl-ph{text-align:center;padding:50px 20px;color:var(--g400)}
.dl-ph .ic{font-size:42px;margin-bottom:12px;opacity:.3}
.dl-ph p{font-size:13px}

/* ===== F3 Audit ===== */
.rs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.ro{padding:10px 14px;border:1.5px solid var(--g200);border-radius:var(--rs);cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:8px}
.ro:hover{border-color:var(--pl)}
.ro.sel{border-color:var(--p);background:var(--pb)}
.ro .ri{font-size:18px}
.ro .rn{font-size:12px;font-weight:600}
.ro .rm{font-size:10px;color:var(--g400)}
.ar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.as{background:#fff;border-radius:var(--r);box-shadow:var(--sd);padding:16px;text-align:center}
.as .n{font-size:28px;font-weight:700;margin-bottom:2px}
.as .l{font-size:11px;color:var(--g500)}
.as.d .n{color:var(--d)}.as.w .n{color:var(--w)}.as.s .n{color:var(--s)}.as.i .n{color:var(--a)}
.rl{display:flex;flex-direction:column;gap:10px}
.ri2{background:#fff;border-radius:var(--r);box-shadow:var(--sd);overflow:hidden;border-left:4px solid var(--g300)}
.ri2.h{border-left-color:var(--d)}
.ri2.m{border-left-color:var(--w)}
.ri2.l{border-left-color:var(--a)}
.ri2 .rh{padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
.ri2 .rh .rt{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.ri2 .rb{padding:0 18px 14px;font-size:12px;color:var(--g600);line-height:1.7}
.ri2 .rb .rd2{padding:8px 12px;background:var(--g50);border-radius:var(--rs);margin-top:6px}
.ri2 .rb .rs2{margin-top:6px;color:var(--pd)}

/* ===== F4 Q&A ===== */
.qa-l{display:grid;grid-template-columns:1fr 280px;gap:16px;height:calc(100vh - 148px)}
.cp{background:#fff;border-radius:var(--r);box-shadow:var(--sd);display:flex;flex-direction:column;overflow:hidden}
.cp-h{padding:14px 20px;border-bottom:1px solid var(--g100);display:flex;align-items:center;gap:10px}
.cp-h .ci{width:32px;height:32px;background:linear-gradient(135deg,var(--p),var(--pl));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff}
.cp-h h3{font-size:14px;font-weight:700}
.cp-h .cs{font-size:11px;color:var(--s);display:flex;align-items:center;gap:3px}
.cp-h .cs::before{content:'';width:5px;height:5px;background:var(--s);border-radius:50%}
.cm{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.msg{display:flex;gap:10px;max-width:78%}
.msg.u{align-self:flex-end;flex-direction:row-reverse}
.msg .ma{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}
.msg.ai .ma{background:linear-gradient(135deg,var(--p),var(--pl));color:#fff}
.msg.u .ma{background:var(--g200);color:var(--g600)}
.msg .mc{padding:10px 14px;border-radius:10px;font-size:13px;line-height:1.7}
.msg.ai .mc{background:var(--g50);color:var(--g800);border-top-left-radius:4px}
.msg.u .mc{background:var(--p);color:#fff;border-top-right-radius:4px}
.msg .mc .mr{margin-top:8px;padding-top:8px;border-top:1px solid var(--g200);font-size:11px;color:var(--g400)}
.msg .mc .mr a{color:var(--a);cursor:pointer}
.typing{display:flex;gap:4px;padding:10px 14px}
.typing span{width:7px;height:7px;background:var(--g300);border-radius:50%;animation:tp 1.4s infinite}
.typing span:nth-child(2){animation-delay:.2s}
.typing span:nth-child(3){animation-delay:.4s}
@keyframes tp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ci2{padding:14px 20px;border-top:1px solid var(--g100);display:flex;gap:10px}
.ci2 input{flex:1;padding:10px 14px;border:1.5px solid var(--g200);border-radius:var(--rs);font-size:13px}
.ci2 input:focus{border-color:var(--p)}
.ci2 .btn{padding:10px 16px}
.qa-s{background:#fff;border-radius:var(--r);box-shadow:var(--sd);padding:16px;overflow-y:auto}
.qa-s h4{font-size:13px;font-weight:700;margin-bottom:12px;color:var(--g700)}
.qa-si{padding:10px;border:1px solid var(--g100);border-radius:var(--rs);margin-bottom:6px;cursor:pointer;transition:all .15s;font-size:12px;color:var(--g600);line-height:1.5}
.qa-si:hover{border-color:var(--pl);background:var(--pb)}
.qa-si .qt{font-size:10px;color:var(--g400);margin-top:3px}
.qa-h2{margin-top:16px}
.qa-h2 h4{font-size:13px;font-weight:700;margin-bottom:10px}
.qa-hi{padding:8px 10px;background:var(--g50);border-radius:var(--rs);margin-bottom:6px;font-size:11px;color:var(--g600);cursor:pointer}
.qa-hi:hover{background:var(--g100)}
.qa-hi .hq{font-weight:600;color:var(--g700);margin-bottom:2px}

/* ===== F5 Docs ===== */
.dt{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.dl2{display:flex;flex-direction:column;gap:10px}
.di{background:#fff;border-radius:var(--r);box-shadow:var(--sd);padding:14px 18px;display:flex;align-items:center;gap:14px}
.di:hover{box-shadow:var(--sdm)}
.di .di2{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0}
.di .di2.pdf{background:var(--d)}.di .di2.doc{background:var(--a)}.di .di2.proc{background:var(--w)}
.di .dn{flex:1}.di .dn .n{font-size:13px;font-weight:600}.di .dn .m{font-size:11px;color:var(--g400)}
.di .ds{display:flex;align-items:center;gap:8px}
.mini-pb{width:80px;height:5px;background:var(--g100);border-radius:3px;overflow:hidden}
.mini-pb .fl{height:100%;background:var(--p);transition:width .5s}

/* ===== Tour Overlay ===== */
.tour-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:1500;align-items:center;justify-content:center}
.tour-overlay.show{display:flex}
.tour-card{background:#fff;border-radius:16px;width:400px;max-width:90%;padding:28px;box-shadow:0 25px 60px rgba(0,0,0,.35);animation:fi .3s ease}
.tour-step{display:inline-block;padding:3px 12px;background:var(--pb);color:var(--pd);border-radius:20px;font-size:12px;font-weight:700;margin-bottom:12px}
.tour-card h3{font-size:18px;font-weight:700;margin-bottom:10px}
.tour-card p{font-size:13px;color:var(--g600);line-height:1.8;margin-bottom:20px}
.tour-actions{display:flex;align-items:center;justify-content:space-between}
.tour-skip{font-size:12px;color:var(--g400);cursor:pointer}
.tour-skip:hover{color:var(--g600)}

/* ===== Toast ===== */
#toast{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 20px;border-radius:var(--rs);font-size:13px;color:#fff;box-shadow:var(--sdl);animation:slideIn .3s ease;display:flex;align-items:center;gap:8px;max-width:360px}
.toast.success{background:var(--s)}.toast.error{background:var(--d)}.toast.info{background:var(--a)}
.toast .tx{cursor:pointer;opacity:.75;margin-left:4px;font-size:12px;flex-shrink:0}
.toast .tx:hover{opacity:1}
.toast.out{animation:slideOut .25s ease forwards}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideOut{to{transform:translateX(100%);opacity:0}}

/* ===== Prototype Banner ===== */
.proto-banner{background:var(--pb);border-bottom:1px solid var(--g200);padding:6px 24px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--pd);font-weight:500}
.proto-banner .dot{width:6px;height:6px;background:var(--p);border-radius:50%}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ===== Hamburger Menu ===== */
.hamburger{display:none;width:36px;height:36px;border-radius:8px;background:var(--g100);align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:var(--g600)}
.sidebar.open{transform:translateX(0)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99}
.sidebar-overlay.show{display:block}

/* ===== Evidence Drawer (Modal) ===== */
.drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;align-items:center;justify-content:center}
.drawer-overlay.show{display:flex}
.drawer{background:#fff;border-radius:16px;width:680px;max-width:92%;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.3)}
.drawer-h{padding:18px 24px;border-bottom:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between}
.drawer-h h3{font-size:16px;font-weight:700}
.drawer-h .close{width:32px;height:32px;border-radius:8px;background:var(--g100);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:var(--g500)}
.drawer-h .close:hover{background:var(--g200)}
.drawer-b{padding:24px;overflow-y:auto;flex:1}
.ev-section{margin-bottom:20px}
.ev-section .ev-label{font-size:12px;font-weight:600;color:var(--g500);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.ev-section .ev-content{padding:14px 16px;border-radius:var(--rs);font-size:13px;line-height:1.7}
.ev-section.rule .ev-content{background:#eff6ff;color:#1e40af;border:1px solid #dbeafe}
.ev-section.original .ev-content{background:var(--g50);color:var(--g700);border:1px solid var(--g200)}
.ev-section.peer .ev-content{background:#f0fdf4;color:#166534;border:1px solid #dcfce7}
.ev-section.confidence .ev-content{background:#fefce8;color:#854d0e;border:1px solid #fef9c3;display:flex;align-items:center;gap:12px}
.conf-bar{width:100px;height:6px;background:var(--g200);border-radius:3px;overflow:hidden}
.conf-bar .fl{height:100%;background:var(--w);border-radius:3px}

/* ===== F1 Top3 + Rule Applicability ===== */
.rule-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.rule-inputs .ri{padding:12px;border:1.5px solid var(--g200);border-radius:var(--rs);font-size:12px}
.rule-inputs .ri label{display:block;font-weight:600;color:var(--g700);margin-bottom:4px;font-size:11px}
.rule-inputs .ri select{width:100%;border:none;font-size:12px;font-weight:600;color:var(--p);background:transparent;cursor:pointer}
.top3-grid{display:grid;gap:12px;margin-bottom:16px}
.top3-card{background:#fff;border:1px solid var(--g100);border-radius:var(--r);overflow:hidden;border-left:4px solid var(--d)}
.top3-card.p2{border-left-color:var(--w)}
.top3-card.p3{border-left-color:var(--a)}
.top3-card .t3-h{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;background:var(--g50)}
.top3-card .t3-h .t3-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.top3-card .t3-b{padding:14px 18px}
.top3-card .t3-meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.top3-card .t3-field{font-size:11px;color:var(--g500)}
.top3-card .t3-field b{color:var(--g700)}
.expand-all-btn{font-size:13px;color:var(--p);cursor:pointer;font-weight:600;display:inline-flex;align-items:center;gap:4px}

/* ===== F3 Three-Column Comparison ===== */
.audit-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border:1px solid var(--g200);border-radius:var(--r);overflow:hidden}
.audit-col{padding:14px 16px;font-size:12px;line-height:1.7}
.audit-col+.audit-col{border-left:1px solid var(--g200)}
.audit-col .ac-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--g100)}
.audit-col.original .ac-h{color:var(--g500)}
.audit-col.rule .ac-h{color:var(--d)}
.audit-col.suggestion .ac-h{color:var(--p)}
.audit-col.original{background:var(--g50)}
.audit-col.rule{background:#fef2f2}
.audit-col.suggestion{background:var(--pb)}

/* ===== F5 Sample KB ===== */
.kb-meta{display:flex;gap:6px;flex-wrap:wrap}
.kb-tag{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--g100);color:var(--g500)}
.kb-tag.src{background:#dbeafe;color:#2563eb}
.kb-tag.lic{background:#dcfce7;color:#16a34a}
.kb-filters{display:flex;gap:6px;flex-wrap:wrap}
.kb-chip{padding:4px 10px;border:1.5px solid var(--g200);border-radius:20px;font-size:11px;color:var(--g600);cursor:pointer;transition:all .15s}
.kb-chip:hover{border-color:var(--pl)}
.kb-chip.sel{border-color:var(--p);background:var(--pb);color:var(--pd);font-weight:600}
.di[role="button"]{cursor:pointer}

/* ===== Chapter2: Dashboard links / anchors / chat meta ===== */
.stat-c[role="button"]{cursor:pointer;transition:transform .15s,box-shadow .15s}
.stat-c[role="button"]:hover{transform:translateY(-2px);box-shadow:var(--sdm)}
.dash-row{cursor:pointer}
.dash-row:hover{background:var(--g50)}
.peer-it{padding:10px 0;border-bottom:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.peer-it:last-of-type{border-bottom:none}
.peer-it .pn{font-size:13px;font-weight:600}
.peer-it .pm{font-size:11px;color:var(--g500)}
.anchor-nav{display:flex;gap:14px;font-size:12px}
.anchor-nav a{color:var(--p);cursor:pointer;font-weight:600}
.anchor-nav a:hover{text-decoration:underline}
.msg .mt{font-size:10px;color:var(--g400);margin-top:6px;text-align:right}
.msg.u .mt{color:rgba(255,255,255,.75)}

/* ===== Skeleton ===== */
.skel{padding:4px 0}
.skl{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--g100) 25%,var(--g200) 50%,var(--g100) 75%);background-size:200% 100%;animation:skm 1.2s infinite;margin-bottom:12px}
.skl.w40{width:40%}.skl.w60{width:60%}.skl.w80{width:80%}
@keyframes skm{from{background-position:200% 0}to{background-position:-200% 0}}
.sk-spin{width:14px;height:14px;border:2px solid var(--g200);border-top-color:var(--p);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}

/* ===== Focus States (Accessibility) ===== */
.nav-i:focus,.hamburger:focus,.upload-z:focus,.ind-c:focus,.qa-si:focus,.qa-hi:focus,.so .o:focus,.co2 .o:focus,.close:focus,.expand-all-btn:focus,.gap-dim .dh:focus,.ib:focus,.lo:focus,.fx:focus,.irf a:focus,.mr a:focus,[role="button"]:focus{outline:2px solid var(--p);outline-offset:-2px}

/* ===== Responsive ===== */
@media(max-width:1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}.dash-grid{grid-template-columns:1fr}.dl{grid-template-columns:1fr}.qa-l{grid-template-columns:1fr;height:auto}.cp{min-height:60vh;max-height:80vh}.ar{grid-template-columns:repeat(2,1fr)}.rule-inputs{grid-template-columns:1fr}.audit-cols{grid-template-columns:1fr}.audit-col+.audit-col{border-left:none;border-top:1px solid var(--g200)}}
@media(max-width:768px){.hamburger{display:flex}.sidebar{transform:translateX(-100%);transition:transform .3s}.sidebar.open{transform:translateX(0)}.main{margin-left:0}.login-box{flex-direction:column}.login-l{display:none}.stats-grid{grid-template-columns:1fr}.dash-grid{grid-template-columns:1fr}.ar{grid-template-columns:1fr}.content{padding:16px}.topbar{padding:0 16px}.upload-z{padding:24px 14px}}

/* ===== Large screen (路演投影) ===== */
@media(min-width:1600px){
  body{font-size:15px}
  .content{max-width:1400px;width:100%;margin:0 auto}
}