:root{--navy:#172b4d;--blue:#2468f2;--ink:#172b4d;--muted:#7b899c;--line:#e7ecf3;--bg:#f5f7fb;--teal:#159b88;--red:#d35265;--amber:#b77b16;--shadow:0 12px 42px #172b4d12;font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);font-size:14px}*{box-sizing:border-box}body{margin:0;background:var(--bg)}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:var(--blue);text-decoration:none}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid #80b2ff;outline-offset:3px}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}button{border:0;background:none;color:inherit}h1,h2,h3,p{margin:0}h1{font-size:27px;letter-spacing:-.8px;font-weight:650}h2{font-size:17px;font-weight:650}h3{font-size:15px}small,.muted{color:var(--muted)}.boot{padding:20vh 10vw;text-align:center;color:var(--muted)}.shell{display:flex;min-height:100vh}.sidebar{width:228px;position:fixed;inset:0 auto 0 0;background:var(--navy);color:#b0bed3;display:flex;flex-direction:column;padding:30px 18px 18px;z-index:10}.brand{display:flex;gap:11px;align-items:center;padding:0 12px;color:white;font-size:20px;font-weight:650;letter-spacing:1px}.brand small{display:block;font-size:10px;letter-spacing:2px;color:#94a7c7;margin-top:4px}.brand-mark{display:grid;place-items:center;width:37px;height:37px;border-radius:11px;background:var(--blue);font-family:Arial,sans-serif;font-size:28px;font-weight:bold;color:white;letter-spacing:0}.nav-label{padding:36px 16px 12px;color:#7286a5;font-size:11px;letter-spacing:1.5px}.nav{display:flex;flex-direction:column;gap:7px}.nav button{display:flex;align-items:center;gap:13px;padding:13px 16px;text-align:left;border-radius:9px;font-size:14px}.nav button.active{background:#ffffff12;color:white;box-shadow:inset 3px 0 #61a0ff}.nav button.active svg{color:#72a8ff}.nav button span{flex:1}.nav-count{font:11px Arial;background:#3d516e;padding:3px 7px;border-radius:5px}.sidebar-bottom{margin-top:auto}.scope-note{margin:25px 8px 15px;padding:15px 12px;border:1px solid #ffffff17;border-radius:9px;font-size:12px;line-height:1.8;color:#8fa4c5}.scope-note strong{color:#cbd7e9;display:block;font-weight:500}.profile{display:flex;gap:10px;align-items:center;padding:15px 9px 0;border-top:1px solid #ffffff13}.avatar{width:34px;height:34px;display:grid;place-items:center;background:#e9f0ff;color:var(--blue);font-size:13px;border-radius:10px;font-weight:600;flex-shrink:0}.profile .avatar{background:#334b70;color:#c6daff}.profile-name{flex:1;color:#e3ebf8;font-size:13px}.profile-name small{display:block;font-size:10px;margin-top:3px;color:#8fa4c5}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:7px}.main{margin-left:228px;width:calc(100% - 228px)}.topbar{height:76px;border-bottom:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 36px;gap:20px}.breadcrumb{display:flex;align-items:center;gap:11px;font-size:12px;color:#8593a8}.breadcrumb strong{color:var(--ink);font-weight:500}.topbar-right{display:flex;align-items:center;gap:18px;font-size:12px;color:var(--muted)}.tag{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:5px;background:#f0f4fa;color:#637b9c;font-size:11px;white-space:nowrap;font-weight:500}.tag.blue{background:#eaf0ff;color:#2468f2}.tag.green{background:#e8f7f2;color:#178b71}.tag.amber{background:#fff5df;color:#ac7718}.tag.red{background:#fff0f0;color:#ca5961}.dot{height:6px;width:6px;background:currentColor;border-radius:50%;display:inline-block}.content{max-width:1640px;margin:auto;padding:30px 36px 45px}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:25px}.page-heading p{color:var(--muted);font-size:12px;line-height:1.7;margin-top:9px}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:7px;padding:10px 15px;font-size:12px;border:1px solid #dce3ef;background:#fff;color:#485f7d;white-space:nowrap;min-height:37px}.btn svg{width:16px;height:16px}.btn.primary{background:var(--blue);border-color:var(--blue);color:white;box-shadow:0 3px 7px #2468f220}.btn.danger{color:var(--red);border-color:#edcbd0}.btn.text{border-color:transparent;background:none;padding:7px}.btn.sm{padding:6px 10px;min-height:29px;font-size:11px}.banner{display:flex;align-items:center;gap:13px;padding:15px 19px;border:1px solid #dce7fa;background:#eef4ff;border-radius:9px;margin-bottom:24px}.banner-icon{width:34px;height:34px;border-radius:9px;background:#dce8ff;color:var(--blue);display:grid;place-items:center;flex-shrink:0}.banner p{font-size:12px;color:#6e84a5;margin-top:4px;line-height:1.6}.banner strong{font-size:12px;font-weight:600}.banner .btn{margin-left:auto;background:white}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:23px}.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:19px 21px 17px;position:relative}.stat-top{display:flex;align-items:center;justify-content:space-between;color:#6c7e96;font-size:12px}.stat-icon{display:grid;place-items:center;background:#f0f4ff;color:#6a8ddb;width:31px;height:31px;border-radius:8px}.stat:nth-child(2) .stat-icon{background:#fff5e6;color:#c99b47}.stat:nth-child(3) .stat-icon{background:#f0ebff;color:#9876d1}.stat:nth-child(4) .stat-icon{background:#e8f7f3;color:#35a58e}.stat-value{font-family:"DIN Alternate","Arial",sans-serif;font-size:35px;font-weight:600;margin:10px 0 12px;letter-spacing:-1px;line-height:1.1}.stat-note{font-size:11px;color:#95a1b3}.stat-note b{color:var(--teal);font-weight:500;margin-right:5px}.grid-main{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(270px,1fr);gap:22px;margin-bottom:23px}.panel{background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;gap:12px}.panel-head h2{font-size:14px}.panel-head small{font-size:10px;color:#a1aaba;letter-spacing:.5px}.panel-body{padding:0 22px 23px}.chart-empty{height:155px;position:relative;display:grid;place-items:center;background:repeating-linear-gradient(to bottom,transparent,transparent 37px,#f0f3f8 38px);color:#a7b2c1;font-size:12px}.bar-chart{height:155px;display:flex;align-items:flex-end;justify-content:space-around;gap:13px;border-bottom:1px solid var(--line);padding:14px 12px 0}.bar-unit{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px;max-width:35px}.bar-unit span{font-family:Arial;font-size:10px;color:#7990b0}.bar-unit i{display:block;background:#84a9ff;border-radius:4px 4px 0 0;width:100%;min-height:2px}.bar-unit:last-child i{background:var(--blue)}.chart-labels{display:flex;justify-content:space-around;margin:13px 0 0;font-size:10px;color:#92a0b3}.chart-labels span{flex:1;text-align:center}.funnel{display:flex;gap:8px;align-items:stretch;padding:3px 0 13px}.funnel-step{flex:1;border-top:3px solid #bed0f9;background:#f7f9fe;padding:16px 9px;border-radius:2px 2px 6px 6px}.funnel-step:last-child{border-color:var(--teal);background:#f0f9f6}.funnel-step span{display:block;color:#8594aa;font-size:10px;margin-bottom:14px}.funnel-step b{font:600 23px Arial;color:#425f8c}.funnel-footer{color:#98a5b6;font-size:10px;line-height:1.8;padding-top:10px}.table-wrap{overflow-x:auto;overscroll-behavior-x:contain}table{width:100%;border-collapse:collapse;white-space:nowrap;text-align:left}th{background:#f9fafc;font-size:11px;color:#8795a9;font-weight:500;padding:13px 18px;border-top:1px solid #eef1f6;border-bottom:1px solid #eef1f6}td{padding:16px 18px;font-size:12px;border-bottom:1px solid #eef1f6;color:#61738e}tbody tr:last-child td{border-bottom:0}.name-cell{display:flex;align-items:center;gap:10px}.name-cell strong{color:var(--ink);font-weight:550;display:block}.name-cell small{display:block;font-size:10px;margin-top:5px;color:#9ba7b8}.source-name{display:flex;gap:6px;align-items:center}.source-name svg{width:13px;height:13px;color:#899ab2}.empty{text-align:center;padding:45px 20px 43px;color:var(--muted)}.empty>svg{width:33px;height:33px;stroke-width:1.2;margin:0 auto 11px;color:#9fb5d6}.empty strong{display:block;color:#586d8b;font-size:13px;font-weight:500;margin-bottom:8px}.empty p{font-size:12px;line-height:1.8}.empty .actions{justify-content:center;margin-top:17px}.table-bottom{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.filters{display:flex;gap:11px;align-items:center;flex-wrap:wrap;padding:0 22px 18px}.search{position:relative;min-width:200px;flex:1;max-width:320px}.search svg{position:absolute;top:10px;left:11px;width:16px;height:16px;color:#92a1b5}.search input{padding-left:35px;width:100%}.field,input,select,textarea{border:1px solid #dfe5ee;border-radius:6px;background:white;padding:10px 11px;color:var(--ink);outline:none;max-width:100%;font-size:12px}input:focus,select:focus,textarea:focus{border-color:#77a3f5;box-shadow:0 0 0 3px #2468f20a}input::placeholder,textarea::placeholder{color:#a5b0c0}textarea{resize:vertical;min-height:92px;line-height:1.8}.filters select{min-width:112px}.filter-tabs{display:flex;gap:24px;margin:0 22px 20px;border-bottom:1px solid var(--line)}.filter-tabs button{padding:16px 0 13px;color:#8c9ab0;font-size:12px;position:relative}.filter-tabs button.active{color:var(--blue);font-weight:600}.filter-tabs button.active:after{content:"";position:absolute;bottom:-1px;height:2px;left:0;right:0;background:var(--blue)}input[type=checkbox]{accent-color:var(--blue);width:14px;height:14px;cursor:pointer}.selected-bar{padding:10px 22px;background:#edf3ff;display:flex;align-items:center;gap:12px;color:var(--blue);font-size:12px}.footer-note{font-size:10px;color:#a5afbe;text-align:center;margin-top:25px;letter-spacing:.5px}.overlay-backdrop{position:fixed;inset:0;background:#172b4d60;z-index:40;display:flex;align-items:center;justify-content:center;padding:25px;backdrop-filter:blur(2px)}.modal{background:white;border-radius:13px;width:540px;max-width:100%;box-shadow:0 20px 90px #12244033;max-height:90vh;overflow-y:auto}.modal.wide{width:860px}.modal-head{padding:22px 26px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.modal-head p{font-size:11px;color:var(--muted);margin-top:7px;line-height:1.7}.form-body{padding:24px 26px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.form-item{display:flex;flex-direction:column;gap:8px}.form-item label{font-size:12px;color:#637792}.form-item input,.form-item select,.form-item textarea{width:100%}.form-item.full{grid-column:1/-1}.form-item small{font-size:10px;line-height:1.7}.form-actions{display:flex;justify-content:flex-end;gap:10px;padding:18px 26px;border-top:1px solid var(--line);background:#fcfdff}.error{padding:11px 13px;background:#fff0f0;color:#bd4552;font-size:12px;border-radius:6px;line-height:1.7;margin-bottom:17px}.error:empty{display:none}.drawer-backdrop{justify-content:flex-end;padding:0}.drawer{width:580px;height:100%;max-width:100%;overflow-y:auto;background:#f8faff;box-shadow:-10px 0 50px #1224401a}.drawer-head{padding:25px;background:white;border-bottom:1px solid var(--line)}.drawer-title{display:flex;gap:13px;align-items:center;margin-bottom:18px}.drawer-title h2{font-size:22px}.drawer-title .avatar{width:45px;height:45px;font-size:19px}.drawer-title .icon-btn{margin-left:auto}.drawer-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--muted)}.drawer-content{padding:22px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px}.detail-grid dt{font-size:10px;color:#94a1b3;margin-bottom:7px}.detail-grid dd{margin:0;font-size:12px;word-break:break-word;white-space:pre-wrap}.detail-grid .full{grid-column:1/-1}.timeline{padding:0 20px 20px}.timeline-item{border-left:1px solid #dce5f4;padding:0 0 22px 19px;position:relative}.timeline-item:before{content:"";position:absolute;left:-4px;top:4px;width:7px;height:7px;border-radius:50%;background:#8caefa;box-shadow:0 0 0 3px white}.timeline-item:last-child{padding-bottom:0;border-color:transparent}.timeline-title{display:flex;justify-content:space-between;font-size:11px;color:#7085a4;gap:10px}.timeline-title span{color:#a1acbc;font-size:10px}.timeline-item p{font-size:12px;line-height:1.9;white-space:pre-wrap;word-break:break-word;margin-top:7px}.timeline-item small{font-size:10px;display:block;margin-top:6px}.integration-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:22px}.integration-card{padding:25px}.integration-brand{display:flex;align-items:center;gap:13px;margin-bottom:20px}.douyin-logo{background:#101828;color:white;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;font:600 30px Georgia;text-shadow:2px 1px #e54e70,-1px -1px #3cbbca}.integration-brand h2{font-size:16px}.integration-brand p{font-size:11px;color:var(--muted);margin-top:6px}.integration-copy{font-size:12px;color:#7b8ba2;line-height:1.95}.steps{margin:24px 0;padding:0;list-style:none;counter-reset:step}.steps li{padding-left:33px;position:relative;margin-bottom:22px;counter-increment:step}.steps li:before{content:counter(step);position:absolute;left:0;width:20px;height:20px;background:#edf3ff;color:var(--blue);border-radius:50%;text-align:center;line-height:20px;font:11px/20px Arial}.steps strong{font-size:12px;font-weight:500}.steps p{font-size:11px;line-height:1.9;color:var(--muted);margin-top:5px}.code-box{font:11px/1.8 Menlo,Consolas,monospace;padding:13px;background:#f3f6fb;color:#5c7294;border:1px solid var(--line);border-radius:7px;overflow:auto;word-break:break-all;white-space:pre-wrap;margin:10px 0 18px}.divider{height:1px;background:var(--line);margin:23px 0}.hint{padding:13px 15px;border:1px solid #e3e9f4;background:#f8faff;border-radius:7px;font-size:11px;color:#7c8fae;line-height:1.9}.checkline{display:flex;align-items:center;gap:9px;margin:16px 0;font-size:12px}.file-drop{border:1px dashed #bbcae1;border-radius:9px;padding:30px;text-align:center;background:#fafcff;margin-bottom:20px}.file-drop input{display:block;border:0;margin:15px auto 0;font-size:11px}.file-drop p{color:var(--muted);font-size:11px;margin-top:9px}.auth{display:grid;grid-template-columns:1.12fr 1fr;min-height:100vh;background:white}.auth-story{position:relative;background:var(--navy);padding:55px 10%;display:flex;flex-direction:column;overflow:hidden;color:white}.auth-story .brand{padding:0;position:relative;z-index:1}.auth-copy{margin:auto 0;position:relative;z-index:1;padding:65px 0 40px}.eyebrow{font:10px Arial;letter-spacing:3px;color:#7baaff;margin-bottom:23px}.auth-copy h1{font-size:40px;line-height:1.5;letter-spacing:1px;font-weight:550}.auth-copy>p{font-size:13px;line-height:2;color:#97accb;margin-top:18px;max-width:340px}.auth-orbit{position:absolute;width:620px;height:620px;border:1px solid #ffffff08;border-radius:50%;left:80px;top:220px;box-shadow:0 0 0 80px #ffffff02,0 0 0 160px #ffffff02}.flow-visual{margin-top:47px;display:flex;align-items:center;gap:10px}.flow-node{display:flex;align-items:center;gap:8px;font-size:10px;color:#c2d2eb;background:#ffffff07;border:1px solid #ffffff15;padding:13px;border-radius:9px}.flow-node svg{width:15px;height:15px;color:#82b3ff}.flow-arrow{color:#5d789f;font-size:15px}.auth-foot{font-size:10px;color:#607a9e;letter-spacing:1px;position:relative;z-index:1}.auth-form-wrap{display:flex;align-items:center;justify-content:center;padding:60px 30px}.auth-form{width:330px;max-width:100%}.auth-form h2{font-size:27px;letter-spacing:-.5px}.auth-form>p{font-size:12px;color:var(--muted);line-height:1.8;margin:14px 0 32px}.auth-form .form-item{margin-bottom:21px}.auth-form input{padding:13px 14px;font-size:14px;min-height:46px}.auth-form .btn{width:100%;margin-top:8px;padding:13px;font-size:14px}.auth-footnote{border-top:1px solid var(--line);margin-top:30px;padding-top:21px;font-size:11px;color:#9da9ba;line-height:1.9}.auth-form .error{margin-top:16px}#toast{position:fixed;bottom:27px;left:50%;transform:translate(-50%,20px);background:#172b4d;color:white;padding:13px 22px;max-width:90vw;border-radius:9px;font-size:12px;box-shadow:var(--shadow);z-index:80;opacity:0;transition:opacity .18s,transform .18s;pointer-events:none;line-height:1.7}#toast.visible{opacity:1;transform:translate(-50%,0)}.mobile-menu{display:none}.progress{height:6px;background:#eef2f9;border-radius:5px;overflow:hidden}.progress i{display:block;height:100%;background:#7da2f3;border-radius:5px}.overdue{color:var(--red)}.loading{opacity:.55;pointer-events:none}
@media(min-width:1600px){.content{padding-top:38px}.stat{padding:23px}.panel-head{padding-top:23px;padding-bottom:23px}.chart-empty,.bar-chart{height:180px}.funnel{padding-top:15px}.funnel-step{padding-top:20px;padding-bottom:24px}}
@media(max-width:1150px){.sidebar{width:196px;padding-left:13px;padding-right:13px}.main{margin-left:196px;width:calc(100% - 196px)}.content{padding:25px}.topbar{padding:0 25px}.stat{padding:16px}.stats{gap:12px}.grid-main{grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);gap:16px}.integration-grid{grid-template-columns:1fr}.auth-copy h1{font-size:31px}.flow-visual{gap:6px}.flow-node{padding:10px 7px;font-size:9px}}
@media(max-width:900px){.sidebar{width:76px;padding:25px 10px 14px}.sidebar .brand{padding:0;justify-content:center}.sidebar .brand>div:last-child,.nav-label,.nav button span,.nav-count,.scope-note,.profile-name,.profile .icon-btn{display:none}.nav{margin-top:37px}.nav button{padding:14px;justify-content:center}.profile{padding:15px 8px 0}.main{margin-left:76px;width:calc(100% - 76px)}.stats{grid-template-columns:repeat(2,1fr)}.grid-main{grid-template-columns:1fr 1fr}.funnel{gap:5px}.funnel-step{padding:14px 6px}.topbar-right .date{display:none}.auth-story{padding:40px 9%}.flow-visual{flex-direction:column;align-items:flex-start;gap:8px}.flow-arrow{transform:rotate(90deg);margin-left:25px}.flow-node{padding:10px 18px}.auth-copy{padding:45px 0}.auth-copy h1{font-size:28px}.auth{grid-template-columns:.9fr 1fr}}
@media(max-width:640px){h1{font-size:23px}.sidebar{width:58px;padding:21px 5px}.brand-mark{width:32px;height:32px;border-radius:9px;font-size:24px}.nav button{padding:14px 10px}.nav button svg{width:18px;height:18px}.profile{padding:13px 7px 0}.profile .avatar{width:30px;height:30px}.main{margin-left:58px;width:calc(100% - 58px)}.topbar{height:60px;padding:0 16px}.breadcrumb{font-size:10px}.topbar-right{gap:3px}.topbar-right>.tag{display:none}.content{padding:21px 14px}.page-heading{align-items:flex-start;flex-direction:column;gap:14px;margin-bottom:20px}.page-heading p{font-size:11px;margin-top:7px}.btn{font-size:11px;padding:9px 11px}.banner{padding:12px;flex-wrap:wrap;gap:8px}.banner-icon{width:29px;height:29px}.banner>div:nth-child(2){flex:1;min-width:150px}.banner p{font-size:10px}.banner .btn{margin-left:37px}.stats{gap:9px;margin-bottom:15px}.stat{padding:13px 12px}.stat-top{font-size:10px}.stat-icon{width:24px;height:24px}.stat-icon svg{width:15px;height:15px}.stat-value{font-size:29px;margin:10px 0}.stat-note{font-size:9px;line-height:1.7}.grid-main{grid-template-columns:1fr;gap:15px;margin-bottom:15px}.panel-head{padding:17px 15px}.panel-head h2{font-size:13px}.panel-body{padding:0 15px 17px}.filters{padding:0 15px 15px;gap:8px}.filters .search{min-width:100%;max-width:none}.filters select{min-width:0;flex:1}.filter-tabs{gap:20px;margin:0 15px 17px}.filter-tabs button{font-size:11px}.table-bottom{padding:12px;font-size:10px;gap:10px}.table-bottom .actions{gap:1px}.overlay-backdrop{padding:14px}.drawer-backdrop{padding:0}.modal-head{padding:19px}.form-body{padding:20px}.form-grid{gap:15px;grid-template-columns:1fr}.form-item.full{grid-column:auto}.form-actions{padding:15px 19px}.drawer-content{padding:14px}.drawer-head{padding:21px 19px}.drawer-title h2{font-size:20px}.detail-grid{padding:17px;gap:17px}.integration-card{padding:19px}.auth{display:block}.auth-story{padding:22px 25px;height:195px}.auth-story .brand{font-size:17px}.auth-copy{padding:23px 0 0;margin:0}.auth-copy .eyebrow,.auth-copy>p,.flow-visual,.auth-foot{display:none}.auth-copy h1{font-size:23px;line-height:1.6}.auth-form-wrap{padding:35px 28px 50px}.auth-form h2{font-size:24px}.auth-form>p{margin:11px 0 25px}.auth-form .form-item{margin-bottom:17px}.hint{font-size:10px}.selected-bar{padding:10px 13px;gap:8px;flex-wrap:wrap}}

.auth-switch{margin-top:22px;text-align:center;font-size:12px;color:#8b9ab0}.auth-switch a{font-weight:600;margin-left:5px}.register-form .form-item{margin-bottom:15px}.register-form>p{margin-bottom:24px}.register-form .auth-footnote{margin-top:23px}.form-item input[readonly]{background:#f5f7fb;color:#7b899c;cursor:default}

/* ── Yunke · three gradient themes ────────────────────────────── */
/* Theme colors apply instantly. Pink is the default before preferences load. */
:root, html[data-theme="pink"] {
  --theme-h: 327;
  --accent: #b42c70;
  --accent-deep: #96245e;
  --accent-gradient: linear-gradient(125deg, #bb2f72, #9146a8);
  --accent-gradient-hover: linear-gradient(125deg, #aa2666, #823b99);
  --nav-base: #382033;
  --nav-gradient: linear-gradient(155deg, #652545 0%, #422139 53%, #2b1b2c 100%);
  --nav-glow: #ffb0d41c;
  --nav-accent: #ffc3e0;
}
html[data-theme="blue"] {
  --theme-h: 220;
  --accent: #265fc9;
  --accent-deep: #234b9e;
  --accent-gradient: linear-gradient(125deg, #2467d2, #6550ba);
  --accent-gradient-hover: linear-gradient(125deg, #2059bd, #5842a7);
  --nav-base: #182a46;
  --nav-gradient: linear-gradient(155deg, #224a7c 0%, #1b2d50 53%, #182137 100%);
  --nav-glow: #9ec8ff1c;
  --nav-accent: #bddbff;
}
html[data-theme="green"] {
  --theme-h: 155;
  --accent: #087b57;
  --accent-deep: #096346;
  --accent-gradient: linear-gradient(125deg, #087b57, #246c73);
  --accent-gradient-hover: linear-gradient(125deg, #086d4e, #1d5e67);
  --nav-base: #101f1b;
  --nav-gradient: linear-gradient(155deg, #214b38 0%, #122920 53%, #0d1915 100%);
  --nav-glow: #a4edc81c;
  --nav-accent: #a4edc8;
}

:root {
  --navy: var(--nav-base);
  --blue: var(--accent);
  --ink: hsl(var(--theme-h) 32.4% 13.3%);
  --muted: hsl(var(--theme-h) 10.3% 39.8%);
  --line: hsl(var(--theme-h) 17.4% 91.0%);
  --bg: hsl(var(--theme-h) 20.0% 96.1%);
  --teal: var(--accent);
  --red: #aa3e54;
  --amber: #88662e;
  --mint: hsl(var(--theme-h) 67.0% 78.6%);
  --shadow: 0 4px 16px hsl(var(--theme-h) 24% 18% / .045);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
body {
  background: radial-gradient(ellipse at 90% 0, hsl(var(--theme-h) 29.4% 93.3%) 0, transparent 40%), var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); }
button:focus-visible, a:focus-visible { outline-color: hsl(var(--theme-h) 45.2% 59.2%); }
h1 { letter-spacing: -.7px; font-weight: 650; }
h2 { letter-spacing: -.2px; }
.sidebar {
  background: radial-gradient(ellipse at 0 0, hsl(var(--theme-h) 39.4% 21.4%) 0, transparent 42%),
              linear-gradient(165deg, hsl(var(--theme-h) 39.0% 11.6%) 0, hsl(var(--theme-h) 31.9% 9.2%) 58%, hsl(var(--theme-h) 31.6% 7.5%) 100%);
  color: hsl(var(--theme-h) 12.6% 67.3%);
  border-right: 1px solid hsl(var(--theme-h) 23.1% 25.5% / 0.231);
  box-shadow: 9px 0 36px hsl(var(--theme-h) 47.5% 12.0% / 0.031);
}
.sidebar:after {
  content: "";
  position: absolute;
  top: 23%;
  right: 0;
  width: 1px;
  height: 36%;
  background: linear-gradient(transparent, hsl(var(--theme-h) 67.0% 78.6% / 0.169), transparent);
  pointer-events: none;
}
.brand { letter-spacing: .7px; font-weight: 650; }
.brand-mark {
  color: hsl(var(--theme-h) 100.0% 95.7%);
  background: linear-gradient(140deg, hsl(var(--theme-h) 75.3% 38.0%), hsl(var(--theme-h) 87.1% 24.3%));
  border: 1px solid hsl(var(--theme-h) 77.8% 82.4% / 0.169);
  box-shadow: 0 5px 18px #00000020, inset 0 1px hsl(var(--theme-h) 100.0% 96.5% / 0.161);
  border-radius: 12px;
}
.brand small { color: hsl(var(--theme-h) 17.4% 69.6%); font-size: 10px; letter-spacing: 2.8px; }
.nav-label { color: hsl(var(--theme-h) 17.6% 63.3%); letter-spacing: 1.4px; font-size: 10px; padding-top: 39px; padding-bottom: 16px; }
.nav { position: relative; isolation: isolate; gap: 9px; }
.nav-indicator {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 46px;
  border: 1px solid hsl(var(--theme-h) 62.3% 79.2% / 0.141);
  border-radius: 12px;
  background: linear-gradient(110deg, hsl(var(--theme-h) 71.4% 87.6% / 0.098), hsl(var(--theme-h) 67.9% 78.0% / 0.051));
  box-shadow: inset 0 1px hsl(var(--theme-h) 100.0% 94.5% / 0.043), 0 6px 18px #0000000a;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: transform 110ms var(--ease-out), opacity 80ms var(--ease-out);
}
.nav-indicator:before {
  content: "";
  position: absolute;
  left: -1px;
  top: 13px;
  width: 3px;
  height: 19px;
  border-radius: 4px;
  background: hsl(var(--theme-h) 67.0% 78.6%);
  box-shadow: 0 0 13px hsl(var(--theme-h) 67.0% 78.6% / 0.212);
}
.nav-indicator.no-motion { transition: none; }
.nav button {
  min-height: 46px;
  padding-top: 13px;
  padding-bottom: 13px;
  border-radius: 12px;
  color: hsl(var(--theme-h) 12.1% 69.2%);
  position: relative;
  z-index: 1;
  transition: color 100ms ease, background-color 100ms ease;
}
.nav button.active { background: transparent; color: hsl(var(--theme-h) 58.1% 91.6%); box-shadow: none; font-weight: 550; }
.nav button.active svg { color: hsl(var(--theme-h) 67.0% 78.6%); }
.nav-count {
  font-family: "DIN Alternate", Arial, sans-serif;
  font-weight: 500;
  border-radius: 6px;
  color: hsl(var(--theme-h) 15.4% 74.5%);
  background: hsl(var(--theme-h) 37.3% 80.0% / 0.086);
  padding: 3px 7px;
}
.nav button.active .nav-count { color: hsl(var(--theme-h) 59.4% 87.5%); background: hsl(var(--theme-h) 59.1% 82.7% / 0.102); }
.scope-note {
  border: 1px solid hsl(var(--theme-h) 30.6% 71.8% / 0.102);
  border-radius: 12px;
  background: linear-gradient(145deg, hsl(var(--theme-h) 67.0% 78.6% / 0.027), hsl(var(--theme-h) 67.0% 78.6% / 0.008));
  color: hsl(var(--theme-h) 16.8% 68.4%);
  padding: 14px 13px;
  line-height: 1.9;
}
.scope-note > svg { color: hsl(var(--theme-h) 22.3% 63.1%); width: 17px; height: 17px; margin-bottom: 4px; }
.scope-note strong { color: hsl(var(--theme-h) 23.1% 77.1%); font-size: 11px; }
.profile { border-top-color: hsl(var(--theme-h) 38.7% 78.2% / 0.086); padding-top: 19px; }
.profile .avatar { background: hsl(var(--theme-h) 64.0% 82.5% / 0.09); color: hsl(var(--theme-h) 59.4% 87.5%); border: 1px solid hsl(var(--theme-h) 58.4% 84.9% / 0.067); }
.profile-name { color: hsl(var(--theme-h) 27.9% 88.0%); }
.profile-name small { color: hsl(var(--theme-h) 16.8% 66.1%); }
.topbar {
  background: #ffffffd9;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: hsl(var(--theme-h) 18.6% 88.4% / 0.6);
}
.breadcrumb { color: var(--muted); }
.breadcrumb > span { color: hsl(var(--theme-h) 11.3% 79.2%); }
.breadcrumb strong { color: hsl(var(--theme-h) 18.2% 26.9%); font-weight: 550; }
.topbar-right { color: var(--muted); gap: 15px; }
.topbar-right > .tag { border: 1px solid hsl(var(--theme-h) 27.3% 89.2%); background: hsl(var(--theme-h) 33.3% 95.9%); color: hsl(var(--theme-h) 32.2% 34.7%); padding: 7px 10px; border-radius: 8px; }
.topbar-right > .tag svg { width: 13px; height: 13px; }
.icon-btn {
  border-radius: 9px;
  transition: background-color 100ms ease, color 100ms ease, transform 100ms var(--ease-out);
}
.content { padding-top: 34px; }
.page-heading { margin-bottom: 27px; }
.page-heading p { color: var(--muted); font-size: 12px; margin-top: 10px; }
.page-kicker { display: block; color: var(--muted); font-size: 10px; letter-spacing: 2px; margin-bottom: 10px; }
.btn {
  min-height: 39px;
  padding: 10px 15px;
  border: 1px solid hsl(var(--theme-h) 17.5% 87.6%);
  border-radius: 10px;
  color: hsl(var(--theme-h) 17.9% 33.9%);
  background: #fff;
  box-shadow: 0 2px 3px hsl(var(--theme-h) 28.6% 19.2% / 0.012);
  transition: transform 100ms var(--ease-out), background-color 100ms ease, border-color 100ms ease, box-shadow 100ms ease, color 100ms ease;
}
.btn.primary {
  color: #fff;
  border-color: hsl(var(--theme-h) 87.8% 25.7%);
  background: linear-gradient(145deg, hsl(var(--theme-h) 88.1% 26.5%), hsl(var(--theme-h) 87.8% 25.7%));
  box-shadow: 0 4px 10px hsl(var(--theme-h) 87.8% 25.7% / 0.118), inset 0 1px #ffffff1c;
}
.btn.primary > svg { opacity: .85; }
.btn.text { box-shadow: none; }
.btn.danger { background: #fff; border-color: #e9cdd2; color: #b94f61; }
.btn.sm { border-radius: 7px; }
.btn:active, .icon-btn:active { transform: scale(.97); }
.btn:disabled, .icon-btn:disabled { transform: none; }
.banner {
  border: 1px solid hsl(var(--theme-h) 27.9% 88.0%);
  background: radial-gradient(ellipse at 80% 50%, hsl(var(--theme-h) 37.3% 90.0% / 0.549) 0, transparent 65%), linear-gradient(115deg, hsl(var(--theme-h) 33.3% 95.9%), hsl(var(--theme-h) 35.5% 93.9%));
  border-radius: 14px;
  padding: 17px 20px;
  position: relative;
  overflow: hidden;
}
.banner:after {
  content: "";
  position: absolute;
  right: 155px;
  top: -35px;
  width: 135px;
  height: 135px;
  border: 1px solid hsl(var(--theme-h) 32.5% 66.9% / 0.149);
  border-radius: 50%;
  box-shadow: 0 0 0 22px hsl(var(--theme-h) 32.5% 66.9% / 0.031), 0 0 0 44px hsl(var(--theme-h) 32.5% 66.9% / 0.02);
  pointer-events: none;
}
.banner-icon { border-radius: 10px; background: hsl(var(--theme-h) 37.0% 89.4%); color: hsl(var(--theme-h) 32.8% 44.9%); border: 1px solid hsl(var(--theme-h) 30.8% 84.7%); }
.banner strong { color: hsl(var(--theme-h) 27.9% 28.8%); }
.banner p { color: var(--muted); font-size: 11px; }
.banner .btn { border-color: hsl(var(--theme-h) 22.7% 85.3%); position: relative; z-index: 1; background: #ffffffb8; }
.stats { gap: 18px; }
.stat {
  border-color: hsl(var(--theme-h) 17.6% 90.0%);
  border-radius: 16px;
  padding: 21px 22px 19px;
  box-shadow: var(--shadow);
  background: linear-gradient(145deg, #fff, hsl(var(--theme-h) 33.3% 98.8%));
  transition: border-color 100ms ease, box-shadow 100ms ease;
}
.stat-top { color: var(--muted); }
.stat-icon { background: hsl(var(--theme-h) 33.3% 94.7%); color: hsl(var(--theme-h) 28.1% 45.3%); border: 1px solid hsl(var(--theme-h) 24.4% 91.2%); border-radius: 10px; width: 33px; height: 33px; }
.stat:nth-child(2) .stat-icon { background: #fdf6e9; color: #b29156; border-color: #f4e8ce; }
.stat:nth-child(3) .stat-icon { background: #f0f2f8; color: #858eaf; border-color: #e7eaf2; }
.stat:nth-child(4) .stat-icon { background: hsl(var(--theme-h) 48.4% 93.9%); color: hsl(var(--theme-h) 38.6% 44.7%); border-color: hsl(var(--theme-h) 40.7% 89.4%); }
.stat-value { color: hsl(var(--theme-h) 31.9% 17.8%); font-size: 37px; letter-spacing: -.8px; font-variant-numeric: tabular-nums; margin-top: 13px; }
.stat-note { color: var(--muted); font-size: 11px; }
.panel { border-radius: 16px; border-color: hsl(var(--theme-h) 17.6% 90.0%); box-shadow: 0 5px 22px hsl(var(--theme-h) 42.2% 16.3% / 0.02); background: #ffffffed; }
.panel-head { padding-top: 21px; padding-bottom: 21px; }
.panel-head h2 { color: hsl(var(--theme-h) 18.8% 27.1%); font-size: 14px; }
.panel-head small { color: var(--muted); font-size: 11px; letter-spacing: .7px; }
.chart-empty { color: var(--muted); background: repeating-linear-gradient(to bottom, transparent, transparent 37px, hsl(var(--theme-h) 20.0% 94.1%) 38px); }
.bar-chart { border-color: hsl(var(--theme-h) 20.0% 92.2%); }
.bar-unit span { color: var(--muted); font-size: 11px; }
.bar-unit i { background: hsl(var(--theme-h) 29.1% 72.4%); border-radius: 5px 5px 0 0; }
.bar-unit:last-child i { background: hsl(var(--theme-h) 44.7% 39.0%); }
.chart-labels { color: var(--muted); font-size: 11px; }
.funnel { gap: 8px; }
.funnel-step { background: hsl(var(--theme-h) 23.8% 95.9%); border-color: hsl(var(--theme-h) 23.4% 79.0%); border-radius: 3px 3px 9px 9px; }
.funnel-step span { color: var(--muted); font-size: 11px; }
.funnel-step b { color: hsl(var(--theme-h) 21.2% 37.8%); font-variant-numeric: tabular-nums; }
.funnel-step:last-child { background: hsl(var(--theme-h) 44.0% 95.1%); border-color: hsl(var(--theme-h) 33.9% 45.7%); }
.funnel-footer { color: var(--muted); font-size: 11px; }
.tag { color: hsl(var(--theme-h) 13.2% 37.1%); background: hsl(var(--theme-h) 23.1% 94.9%); border-radius: 6px; }
.tag.blue { background: hsl(var(--theme-h) 31.3% 93.7%); color: hsl(var(--theme-h) 34.8% 35.5%); }
.tag.green { background: hsl(var(--theme-h) 42.9% 93.1%); color: hsl(var(--theme-h) 40.2% 32.2%); }
.tag.amber { background: #fbf3e2; color: #88662e; }
.tag.red { background: #fceef0; color: #a54e60; }
th { background: hsl(var(--theme-h) 27.3% 97.8%); color: var(--muted); border-color: hsl(var(--theme-h) 18.7% 93.7%); padding-top: 14px; padding-bottom: 14px; }
td { color: hsl(var(--theme-h) 17.9% 33.9%); border-color: hsl(var(--theme-h) 16.1% 93.9%); }
.name-cell .avatar { border-radius: 10px; background: hsl(var(--theme-h) 33.3% 94.7%); color: hsl(var(--theme-h) 21.1% 35.3%); border: 1px solid hsl(var(--theme-h) 26.1% 91.0%); }
.name-cell strong { color: hsl(var(--theme-h) 21.7% 27.1%); }
.name-cell small { color: var(--muted); font-size: 11px; }
.source-name svg { color: hsl(var(--theme-h) 10.3% 49.4%); }
.table-bottom { border-color: hsl(var(--theme-h) 18.9% 92.7%); color: var(--muted); }
.empty { padding-top: 43px; padding-bottom: 43px; }
.empty > svg { color: hsl(var(--theme-h) 10.3% 49.4%); padding: 7px; width: 50px; height: 50px; border-radius: 14px; border: 1px solid hsl(var(--theme-h) 20.0% 92.2%); background: hsl(var(--theme-h) 23.1% 97.5%); margin-bottom: 16px; }
.empty strong { color: var(--muted); }
.empty p { color: var(--muted); }
.empty .actions { margin-top: 22px; }
.filter-tabs { border-color: hsl(var(--theme-h) 19.0% 91.8%); gap: 27px; }
.filter-tabs button { color: var(--muted); }
.filter-tabs button.active { color: hsl(var(--theme-h) 49.4% 31.8%); }
.filter-tabs button.active:after { background: hsl(var(--theme-h) 46.1% 40.0%); height: 3px; border-radius: 2px 2px 0 0; }
.filters { padding-top: 1px; }
.search svg { color: hsl(var(--theme-h) 10.3% 49.4%); }
.field, input, select, textarea { border-color: hsl(var(--theme-h) 18.5% 89.4%); border-radius: 9px; color: hsl(var(--theme-h) 31.7% 23.5%); background: #fff; transition: border-color 100ms ease, box-shadow 100ms ease; }
input:focus, select:focus, textarea:focus { border-color: hsl(var(--theme-h) 27.6% 61.0%); box-shadow: 0 0 0 3px hsl(var(--theme-h) 87.8% 25.7% / 0.043); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type=checkbox] { accent-color: hsl(var(--theme-h) 87.8% 25.7%); }
.selected-bar { background: hsl(var(--theme-h) 35.5% 93.9%); color: hsl(var(--theme-h) 41.9% 33.7%); }
.form-item label { color: var(--muted); }
.form-actions { background: hsl(var(--theme-h) 33.3% 98.8%); border-color: hsl(var(--theme-h) 17.1% 92.0%); }
.form-item input[readonly] { background: hsl(var(--theme-h) 22.2% 96.5%); color: var(--muted); }
.hint { border-color: hsl(var(--theme-h) 21.6% 90.0%); background: hsl(var(--theme-h) 29.4% 96.7%); color: var(--muted); border-radius: 10px; }
.footer-note { color: var(--muted); }
.overlay-backdrop { background: hsl(var(--theme-h) 39.6% 10.4% / 0.4); backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal { border-radius: 20px; box-shadow: 0 14px 45px hsl(var(--theme-h) 52.9% 10.0% / 0.2); border: 1px solid #ffffffb3; }
.modal-head { border-color: hsl(var(--theme-h) 17.1% 92.0%); }
.modal-head h2 { color: hsl(var(--theme-h) 23.2% 27.1%); }
.modal-head p { color: var(--muted); }
.drawer { background: hsl(var(--theme-h) 26.3% 96.3%); box-shadow: -6px 0 25px hsl(var(--theme-h) 46.7% 11.8% / 0.094); }
.drawer-head { border-color: hsl(var(--theme-h) 21.6% 90.0%); }
.drawer-title .avatar { background: hsl(var(--theme-h) 37.1% 93.1%); color: hsl(var(--theme-h) 21.1% 35.3%); border: 1px solid hsl(var(--theme-h) 28.8% 88.4%); }
.drawer-content .panel { border-radius: 14px; }
.detail-grid dt { color: var(--muted); }
.detail-grid dd { color: hsl(var(--theme-h) 17.6% 36.7%); }
.timeline-item { border-color: hsl(var(--theme-h) 22.8% 88.8%); }
.timeline-item:before { background: hsl(var(--theme-h) 28.8% 59.8%); box-shadow: 0 0 0 3px white; }
.timeline-title { color: var(--muted); }
.timeline-title span { color: var(--muted); }
.integration-brand h2 { color: hsl(var(--theme-h) 25.7% 27.5%); }
.integration-brand p, .integration-copy, .steps p { color: var(--muted); }
.steps li:before { background: hsl(var(--theme-h) 33.3% 93.5%); color: hsl(var(--theme-h) 25.0% 34.5%); }
.code-box { color: var(--muted); background: hsl(var(--theme-h) 21.7% 95.5%); border-color: hsl(var(--theme-h) 22.4% 90.4%); border-radius: 9px; }
.file-drop { border-color: hsl(var(--theme-h) 22.1% 81.4%); background: hsl(var(--theme-h) 28.6% 97.3%); border-radius: 13px; }
.progress { background: hsl(var(--theme-h) 25.7% 93.1%); }
.progress i { background: hsl(var(--theme-h) 29.0% 64.1%); }
#toast { background: hsl(var(--theme-h) 50.0% 16.5%); color: hsl(var(--theme-h) 100.0% 97.1%); border: 1px solid hsl(var(--theme-h) 24.9% 37.1% / 0.478); border-radius: 12px; box-shadow: 0 10px 30px hsl(var(--theme-h) 46.7% 11.8% / 0.141); transition: opacity 100ms var(--ease-out), transform 100ms var(--ease-out); }

/* A single dark canvas joins the story with the floating account card. */
.auth {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: 1.15fr 1fr;
  background: radial-gradient(ellipse at 78% 10%, hsl(var(--theme-h) 50.5% 19.8%) 0, hsl(var(--theme-h) 43.5% 9.0% / 0) 45%),
              radial-gradient(ellipse at 0 90%, hsl(var(--theme-h) 34.6% 21.0%) 0, hsl(var(--theme-h) 43.5% 9.0% / 0) 50%), hsl(var(--theme-h) 35.0% 7.8%);
}
.auth:after {
  content: "";
  position: absolute;
  width: 56vw;
  height: 56vw;
  min-width: 600px;
  min-height: 600px;
  top: -23vw;
  right: -14vw;
  border: 1px solid hsl(var(--theme-h) 51.2% 83.9% / 0.039);
  border-radius: 50%;
  box-shadow: 0 0 0 70px hsl(var(--theme-h) 51.2% 83.9% / 0.016), 0 0 0 140px hsl(var(--theme-h) 51.2% 83.9% / 0.012);
  pointer-events: none;
  z-index: -1;
}
.auth-story { background: transparent; padding: 49px 10% 40px; overflow: visible; }
.auth-story .brand { align-items: center; }
.auth-story .brand-mark { background: linear-gradient(145deg, hsl(var(--theme-h) 60.3% 72.4%), hsl(var(--theme-h) 43.5% 50.0%)); color: hsl(var(--theme-h) 55.6% 15.9%); border-color: hsl(var(--theme-h) 100.0% 91.8% / 0.2); box-shadow: 0 6px 24px hsl(var(--theme-h) 54.8% 6.1% / 0.333), inset 0 1px #fff6; }
.auth-story .brand small { color: hsl(var(--theme-h) 23.7% 70.2%); }
.auth-copy { padding-top: 70px; padding-bottom: 65px; }
.auth-copy h1 { font-size: clamp(35px, 3.4vw, 55px); line-height: 1.5; color: hsl(var(--theme-h) 39.1% 95.5%); letter-spacing: .6px; font-weight: 550; }
.auth-copy > p { color: hsl(var(--theme-h) 25.4% 75.3%); line-height: 2.1; font-size: 13px; margin-top: 24px; }
.eyebrow { color: hsl(var(--theme-h) 35.6% 59.8%); letter-spacing: 3px; font-size: 9px; margin-bottom: 24px; }
.auth-orbit {
  top: 23%;
  left: 2%;
  width: 39vw;
  height: 39vw;
  max-width: 610px;
  max-height: 610px;
  border-color: hsl(var(--theme-h) 40.3% 75.7% / 0.039);
  background: radial-gradient(circle at 30% 30%, hsl(var(--theme-h) 100.0% 91.2% / 0.043), hsl(var(--theme-h) 58.3% 77.5% / 0.008) 45%, transparent 68%);
  box-shadow: inset 0 1px 1px hsl(var(--theme-h) 100.0% 91.6% / 0.071), 0 0 0 45px hsl(var(--theme-h) 51.2% 83.9% / 0.012), 0 0 0 95px hsl(var(--theme-h) 51.2% 83.9% / 0.008);
  transform: rotate(-28deg) perspective(900px) rotateY(20deg);
}
.flow-visual { gap: 11px; margin-top: 42px; }
.flow-node { color: hsl(var(--theme-h) 22.2% 75.3%); background: linear-gradient(145deg, hsl(var(--theme-h) 59.6% 82.5% / 0.043), hsl(var(--theme-h) 59.6% 82.5% / 0.016)); border-color: hsl(var(--theme-h) 59.6% 82.5% / 0.078); border-radius: 11px; padding: 13px 15px; font-size: 10px; box-shadow: inset 0 1px hsl(var(--theme-h) 100.0% 94.9% / 0.031); }
.flow-node svg { color: hsl(var(--theme-h) 35.9% 63.9%); }
.flow-arrow { color: hsl(var(--theme-h) 25.1% 63.3%); }
.auth-foot { color: hsl(var(--theme-h) 20.7% 67.8%); font-size: 10px; }
.auth-form-wrap { background: transparent; padding: 60px 40px 60px 15px; position: relative; z-index: 1; }
.auth-form {
  width: 382px;
  padding: 36px 31px 29px;
  border: 1px solid #ffffffc9;
  border-radius: 27px;
  background: linear-gradient(155deg, #ffffff, hsl(var(--theme-h) 40.0% 98.0%));
  box-shadow: 0 20px 55px #00000033, inset 0 1px #fff;
}
.auth-form h2 { color: hsl(var(--theme-h) 31.9% 17.8%); font-size: 25px; letter-spacing: -.6px; }
.auth-form > p { color: var(--muted); font-size: 12px; line-height: 1.9; margin-top: 12px; margin-bottom: 27px; }
.auth-form label { color: var(--muted); font-size: 12px; }
.auth-form input { background: hsl(var(--theme-h) 33.3% 98.2%); border-color: hsl(var(--theme-h) 17.0% 89.6%); border-radius: 10px; padding: 13px 14px; font-size: 13px; min-height: 45px; }
.auth-form input:focus { background: #fff; border-color: hsl(var(--theme-h) 28.3% 63.3%); box-shadow: 0 0 0 3px hsl(var(--theme-h) 87.8% 25.7% / 0.039); }
.auth-form .form-item { margin-bottom: 20px; }
.auth-form .btn { min-height: 45px; padding: 12px; border-radius: 11px; margin-top: 5px; font-size: 13px; }
.auth-form .btn.primary { background: linear-gradient(145deg, hsl(var(--theme-h) 51.8% 16.3%), hsl(var(--theme-h) 55.9% 11.6%)); border-color: hsl(var(--theme-h) 48.1% 15.9%); box-shadow: 0 5px 12px hsl(var(--theme-h) 50.0% 15.7% / 0.086); }
.auth-switch { color: var(--muted); font-size: 11px; margin-top: 23px; }
.auth-switch a { color: hsl(var(--theme-h) 40.2% 32.2%); font-weight: 550; }
.auth-footnote { border-color: hsl(var(--theme-h) 17.1% 92.0%); margin-top: 26px; padding-top: 20px; font-size: 11px; color: var(--muted); line-height: 1.9; }
.auth-footnote svg { width: 16px; height: 16px; vertical-align: -4px; color: hsl(var(--theme-h) 12.2% 43.3%); margin-right: 3px; }
.register-form { padding-top: 31px; padding-bottom: 25px; }
.register-form .form-item { margin-bottom: 15px; }
.register-form > p { margin-bottom: 22px; }
.register-form .auth-footnote { margin-top: 21px; padding-top: 17px; }

@media (hover: hover) and (pointer: fine) {
  .nav button:hover { background: hsl(var(--theme-h) 59.6% 82.5% / 0.027); color: hsl(var(--theme-h) 36.2% 86.5%); }
  .nav button.active:hover { background: hsl(var(--theme-h) 59.6% 82.5% / 0.016); }
  .icon-btn:hover { color: hsl(var(--theme-h) 44.6% 32.5%); background: hsl(var(--theme-h) 28.1% 87.5% / 0.251); }
  .sidebar .icon-btn:hover { color: hsl(var(--theme-h) 38.2% 86.7%); background: hsl(var(--theme-h) 59.6% 82.5% / 0.071); }
  .btn:hover { background: hsl(var(--theme-h) 27.3% 97.8%); border-color: hsl(var(--theme-h) 24.2% 74.1%); color: hsl(var(--theme-h) 43.2% 30.4%); box-shadow: 0 3px 10px hsl(var(--theme-h) 49.4% 16.3% / 0.031); }
  .btn.primary:hover { background: linear-gradient(145deg, hsl(var(--theme-h) 88.1% 26.5%), hsl(var(--theme-h) 87.3% 24.7%)); border-color: hsl(var(--theme-h) 87.8% 25.7%); color: white; box-shadow: 0 6px 16px hsl(var(--theme-h) 87.8% 25.7% / 0.149); }
  .auth-form .btn.primary:hover { background: linear-gradient(145deg, hsl(var(--theme-h) 47.3% 21.6%), hsl(var(--theme-h) 57.9% 14.9%)); border-color: hsl(var(--theme-h) 38.9% 21.2%); }
  .btn.text:hover { background: hsl(var(--theme-h) 28.6% 94.5%); border-color: transparent; box-shadow: none; }
  .btn.danger:hover { color: #a34558; background: #fff6f7; border-color: #ddbbc4; }
  .stat:hover { border-color: hsl(var(--theme-h) 22.7% 82.7%); box-shadow: 0 12px 32px hsl(var(--theme-h) 42.2% 16.3% / 0.067), 0 2px 6px hsl(var(--theme-h) 42.2% 16.3% / 0.02); }
  tbody tr:hover { background: hsl(var(--theme-h) 33.3% 97.6%); }
  .auth-switch a:hover { color: hsl(var(--theme-h) 51.7% 28.4%); text-decoration: underline; text-underline-offset: 4px; }
}
@media (min-width: 1600px) {
  .content { padding-top: 39px; }
  .stat { padding: 24px 25px 22px; }
  .auth-story { padding-left: 12%; padding-right: 7%; }
  .auth-form-wrap { padding-right: 10%; }
  .auth-form { width: 410px; padding: 40px 35px 32px; }
}
@media (max-width: 1150px) {
  .content { padding: 27px 25px 38px; }
  .nav button { padding-left: 15px; padding-right: 15px; }
  .stats { gap: 12px; }
  .stat { padding: 18px 17px 17px; }
  .stat-value { font-size: 34px; }
  .auth { grid-template-columns: 1fr 1fr; }
  .auth-story { padding-left: 9%; padding-right: 7%; }
  .auth-copy h1 { font-size: 33px; }
  .auth-form-wrap { padding: 45px 28px 45px 0; }
  .auth-form { width: 360px; padding: 31px 27px 26px; }
  .flow-visual { gap: 7px; }
  .flow-node { padding: 10px; }
}
@media (max-width: 900px) {
  .nav { margin-top: 37px; }
  .nav button { padding: 14px; }
  .nav-indicator { border-radius: 11px; height: 48px; }
  .nav-indicator:before { top: 14px; }
  .content { padding: 26px 23px 35px; }
  .stat { padding: 18px; }
  .auth { grid-template-columns: .82fr 1fr; }
  .auth-story { padding-left: 9%; padding-right: 5%; }
  .auth-copy h1 { font-size: 29px; }
  .auth-copy > p { font-size: 11px; }
  .auth-form { width: 340px; padding: 29px 25px 24px; border-radius: 23px; }
  .auth-form-wrap { padding-right: 25px; }
  .flow-visual { flex-direction: column; gap: 7px; align-items: flex-start; }
  .flow-node { padding: 11px 17px; }
  .flow-arrow { margin-left: 25px; }
}
@media (max-width: 640px) {
  .nav button { padding: 14px 10px; min-height: 46px; }
  .nav-indicator { border-radius: 10px; height: 46px; }
  .nav-indicator:before { top: 13px; }
  .brand-mark { border-radius: 10px; }
  .topbar { padding: 0 15px; background: #fffffff0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .topbar-right { gap: 3px; }
  .content { padding: 24px 14px 30px; }
  .page-heading { gap: 14px; margin-bottom: 20px; }
  .page-heading p { font-size: 11px; line-height: 1.9; }
  .page-kicker { font-size: 9px; margin-bottom: 7px; }
  .btn { min-height: 37px; padding: 9px 11px; font-size: 11px; border-radius: 9px; }
  .banner { padding: 13px 12px; border-radius: 12px; }
  .banner:after { right: -20px; width: 100px; height: 100px; top: -20px; }
  .banner-icon { width: 29px; height: 29px; border-radius: 8px; }
  .banner strong { font-size: 11px; }
  .banner p { font-size: 10px; }
  .stats { gap: 9px; }
  .stat { padding: 15px 12px; border-radius: 13px; }
  .stat-top { font-size: 10px; }
  .stat-icon { width: 25px; height: 25px; border-radius: 8px; }
  .stat-value { font-size: 29px; margin-top: 12px; margin-bottom: 11px; }
  .stat-note { font-size: 11px; line-height: 1.8; }
  .panel { border-radius: 13px; }
  .panel-head { padding: 18px 15px; }
  .panel-head small { font-size: 11px; letter-spacing: .3px; }
  .panel-head h2 { font-size: 12px; }
  .empty { padding: 31px 15px 32px; }
  .empty p { font-size: 11px; }
  .empty strong { font-size: 12px; }
  .empty > svg { width: 43px; height: 43px; border-radius: 12px; }
  .modal { border-radius: 17px; max-height: 93vh; }
  .modal-head { padding: 20px 18px 17px; }
  .modal-head h2 { font-size: 16px; }
  .form-body { padding: 20px 18px; }
  .overlay-backdrop { padding: 12px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .drawer-backdrop { padding: 0; }
  .drawer-content { padding: 14px; }
  .auth { display: block; background: radial-gradient(ellipse at 95% 0, hsl(var(--theme-h) 42.6% 22.5%) 0, transparent 42%), hsl(var(--theme-h) 38.8% 9.6%); min-height: 100vh; }
  .auth:after { display: none; }
  .auth-story { padding: 24px 25px 0; min-height: 181px; height: auto; }
  .auth-copy { padding: 25px 0 28px; }
  .auth-copy h1 { font-size: 24px; line-height: 1.5; }
  .auth-orbit { width: 250px; height: 250px; top: -65px; left: 25%; box-shadow: 0 0 0 30px hsl(var(--theme-h) 51.2% 83.9% / 0.012); opacity: .65; }
  .auth-form-wrap { padding: 0 15px 25px; }
  .auth-form { width: 100%; max-width: 390px; padding: 28px 24px 23px; border-radius: 23px; box-shadow: 0 20px 55px hsl(var(--theme-h) 51.7% 5.7% / 0.267); }
  .auth-form h2 { font-size: 23px; }
  .auth-form > p { font-size: 12px; margin-top: 10px; margin-bottom: 23px; }
  .auth-form .form-item { margin-bottom: 18px; }
  .auth-form input { min-height: 44px; font-size: 16px; }
  .auth-form .btn { min-height: 44px; border-radius: 10px; }
  .auth-footnote { margin-top: 23px; padding-top: 17px; font-size: 11px; }
  .register-form { padding-top: 25px; }
  .register-form .form-item { margin-bottom: 14px; gap: 7px; }
  .register-form > p { margin-bottom: 20px; }
  .register-form input { min-height: 42px; }
  .register-form .auth-switch { margin-top: 18px; }
  .register-form .auth-footnote { margin-top: 18px; padding-top: 15px; }
}
.topbar[data-loading="true"] .breadcrumb strong { color: var(--muted); }
html[data-input="keyboard"] .nav-indicator,
html[data-input="keyboard"] .btn,
html[data-input="keyboard"] .icon-btn,
html[data-input="keyboard"] #toast { transition: none; }
html[data-input="keyboard"] .btn:active,
html[data-input="keyboard"] .icon-btn:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; }
  .nav-indicator { transition: opacity 120ms ease; }
  .btn, .icon-btn { transition: background-color 120ms ease, color 120ms ease; }
  .btn:active, .icon-btn:active { transform: none; }
  #toast { transform: translate(-50%,0); transition: opacity 120ms ease; }
}

/* Shared theme surfaces and compact, immediate controls. */
.sidebar { background: radial-gradient(ellipse at 0 0, var(--nav-glow), transparent 52%), var(--nav-gradient); box-shadow: none; }
.nav-indicator:before { background: var(--nav-accent); box-shadow: none; }
.nav button.active svg { color: var(--nav-accent); }
.brand-mark, .auth-story .brand-mark { background: var(--accent-gradient); color: #fff; }
.btn.primary, .auth-form .btn.primary { background: var(--accent-gradient); border-color: var(--accent); box-shadow: 0 3px 8px hsl(var(--theme-h) 42% 30% / .12); }
.topbar { background: #fff; }
.stat { background: #fff; transition: border-color 100ms ease; }
.panel { background: #fff; }
.tag.blue { background: #eaf0ff; color: #3154a4; }
.tag.green { background: #e6f5ec; color: #31734e; }
.stat:nth-child(4) .stat-icon { background: #e8f7ee; color: #31734e; border-color: #d9efdf; }
.auth { background: radial-gradient(ellipse at 82% 8%, var(--nav-glow), transparent 55%), var(--nav-gradient); }
.auth-form .btn.primary { color: #fff; }
.theme-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--accent-deep);
  background: hsl(var(--theme-h) 45% 97%);
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.4;
  transition: background-color 80ms ease, border-color 80ms ease;
}
.theme-trigger svg { width: 16px; height: 16px; }
.auth-theme { position: absolute; top: 24px; right: 24px; z-index: 3; }
.auth-theme .theme-trigger { color: #fff; background: #ffffff12; border-color: #ffffff30; }
.theme-options { display: grid; gap: 12px; }
.theme-option {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  transition: border-color 80ms ease, background-color 80ms ease;
}
.theme-option > span:nth-child(2) { flex: 1; }
.theme-option strong { display: block; font-size: 14px; font-weight: 600; }
.theme-option small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.theme-option > svg { color: var(--accent); opacity: 0; width: 20px; height: 20px; }
.theme-option[aria-pressed="true"] { border-color: var(--accent); background: hsl(var(--theme-h) 45% 97%); box-shadow: inset 0 0 0 1px var(--accent); }
.theme-option[aria-pressed="true"] > svg { opacity: 1; }
.theme-swatch { display: block; flex: 0 0 51px; width: 51px; height: 44px; border-radius: 10px; border: 1px solid #00000008; }
[data-theme-choice="pink"] .theme-swatch { background: linear-gradient(125deg, #f6b4d1, #b33c8f); }
[data-theme-choice="blue"] .theme-swatch { background: linear-gradient(125deg, #83bdff, #6353c2); }
[data-theme-choice="green"] .theme-swatch { background: linear-gradient(125deg, #94dcaf, #13796b); }
.view-loading .empty { min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
html[data-input="keyboard"] .theme-trigger, html[data-input="keyboard"] .theme-option { transition: none; }
@media (hover: hover) and (pointer: fine) {
  .btn.primary:hover, .auth-form .btn.primary:hover { background: var(--accent-gradient-hover); border-color: var(--accent-deep); color: #fff; box-shadow: 0 3px 8px hsl(var(--theme-h) 42% 30% / .12); }
  .stat:hover { box-shadow: var(--shadow); }
  .theme-trigger:hover { border-color: var(--accent); background: hsl(var(--theme-h) 45% 95%); }
  .auth-theme .theme-trigger:hover { color: #fff; background: #ffffff20; border-color: #ffffff66; }
  .theme-option:hover { border-color: var(--accent); background: hsl(var(--theme-h) 45% 98%); }
}
@media (max-width: 640px) {
  .topbar { gap: 10px; padding-right: 10px; padding-left: 13px; }
  .breadcrumb { min-width: 0; gap: 5px; }
  .breadcrumb > span { display: none; }
  .topbar-right { gap: 2px; }
  .theme-trigger { min-height: 34px; padding: 7px 9px; gap: 5px; font-size: 11px; }
  .theme-trigger svg { width: 15px; height: 15px; }
  .auth-theme { top: 24px; right: 20px; }
  .auth-theme .theme-trigger { padding: 7px 10px; }
  .theme-option { padding: 13px; gap: 12px; }
  .theme-swatch { flex-basis: 46px; width: 46px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-trigger, .theme-option { transition: none; }
}

/* Only the five sidebar navigation buttons keep a 60ms selection response. */
*, *::before, *::after {
 animation: none !important;
 transition: none !important;
 scroll-behavior: auto !important;
}
html .nav button { transition: background-color 60ms linear, color 60ms linear !important; }
html .nav .nav-indicator { transition: transform 60ms ease-out !important; }
html .nav .nav-indicator.no-motion,
html[data-input="keyboard"] .nav .nav-indicator,
html[data-input="keyboard"] .nav button { transition: none !important; }
button:active { transform: none !important; }
#toast { transform: translate(-50%,0); }
@media (prefers-reduced-motion: reduce) {
 html .nav .nav-indicator, html .nav button { transition: none !important; }
}

/* Keep the current page visible while validating a session-only snapshot. */
.topbar[data-loading="true"] .breadcrumb::after { content: "更新中"; margin-left: 8px; color: var(--muted); font-size: 10px; white-space: nowrap; }
@media (max-width:640px) { .topbar[data-loading="true"] .breadcrumb::after { display: none; } }

/* Empty-state actions share the normal compact button geometry. */
.empty .actions { gap: 10px; align-items: center; }
.empty .actions > .btn { height: 38px; min-height: 38px; padding: 8px 14px; line-height: 20px; }
.empty .actions > .btn svg { width: 16px; height: 16px; margin: 0; padding: 0; color: inherit; }