/* QSign web-ele / Vue Vben Admin + Element Plus visual contract. */
:root{
  --qsign-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --qsign-element-font:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  --qsign-font-size-base:14px;
  --qsign-component-size:32px;
  --qsign-radius:8px;
  --qsign-bg:hsl(222.34 10.43% 12.27%);
  --qsign-bg-deep:hsl(220 13.06% 9%);
  --qsign-popover:hsl(0 0% 14.2%);
  --qsign-foreground:hsl(0 0% 95%);
  --qsign-muted:hsl(240 5% 64.9%);
  --qsign-border:hsl(240 3.7% 22%);
  --qsign-accent:hsl(216 5% 19%);
  --qsign-primary:hsl(212 100% 45%);
  --qsign-primary-hover:hsl(212 100% 51%);
  --qsign-primary-active:hsl(212 100% 39%);
  --qsign-success:hsl(144 57% 58%);
  --qsign-warning:hsl(42 84% 61%);
  --qsign-danger:hsl(348 100% 61%);
  font-family:var(--qsign-font-family);
  font-size:16px;
  line-height:1.15;
  color-scheme:dark;
  color:var(--qsign-foreground);
  background:var(--qsign-bg-deep);
  --primary:var(--qsign-primary);
  --border:var(--qsign-border);
  --muted:var(--qsign-muted);
  --sidebar:var(--qsign-bg);
}
body{min-width:320px;background:var(--qsign-bg-deep);color:var(--qsign-foreground);font-family:var(--qsign-font-family);font-size:var(--qsign-font-size-base);line-height:1.5}
button,input,textarea,select{font-family:var(--qsign-element-font);font-size:var(--qsign-font-size-base)}
button{font-weight:500}

/* Vben application shell. */
.sidebar{width:224px;background:var(--qsign-bg);border-right:1px solid var(--qsign-border)}
.workspace{margin-left:224px;background:var(--qsign-bg-deep)}
.logo{height:50px;padding:0 12px;border-color:var(--qsign-border)}
.logo img{width:32px;height:32px;border-radius:var(--qsign-radius)}
.logo b{font-size:16px;font-weight:600}
.workspace header{height:50px;padding:0 16px;background:var(--qsign-bg);border-color:var(--qsign-border)}
.tabbar{height:38px;top:50px;padding-left:8px;background:var(--qsign-bg);border-color:var(--qsign-border)}
.active-tab{height:34px;min-width:120px;padding:0 14px;border-radius:var(--qsign-radius) var(--qsign-radius) 0 0;background:var(--qsign-accent);font-size:13px}
.sidebar nav{padding:8px}
.section-button,.nav-item{height:40px;border-radius:var(--qsign-radius);font-size:14px;transition:background-color .15s,color .15s}
.section-button{padding:0 12px}
.nav-item{padding:0 12px 0 36px}
.section-button:hover,.nav-item:hover{background:var(--qsign-accent)}
.nav-item.active{background:var(--qsign-accent);font-weight:600}
.sidebar-foot{padding:12px 16px;background:var(--qsign-bg);border-color:var(--qsign-border);font-size:12px}
.breadcrumb{font-size:14px}
.header-actions{gap:4px}
.header-actions .icon-btn{width:32px;height:32px;padding:0;font-size:16px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--qsign-radius);background:transparent;color:var(--qsign-foreground);font-size:16px;line-height:1;transition:background-color .15s,color .15s;cursor:pointer}
.icon-btn:hover{background:var(--qsign-accent);color:#fff}
.icon-btn:active{background:hsl(216 5% 24%)}
.icon-btn:focus-visible{outline:2px solid var(--qsign-primary);outline-offset:1px}
.avatar{width:32px;height:32px;margin-left:4px;font-size:12px}
.content{padding:0}
.page-head{height:auto;min-height:64px;margin:0;padding:16px 24px;border-color:var(--qsign-border)}
.page-head h1{margin:0;font-size:18px;font-weight:600;line-height:28px}
.page-head p{display:none}
.content>.metrics,.content>.card{margin-left:16px;margin-right:16px}

/* Element Plus cards, typography, and data surfaces. */
.card{border:1px solid var(--qsign-border);border-radius:var(--qsign-radius);background:var(--qsign-bg);box-shadow:none}
.panel{padding:20px}
.panel h3{font-size:16px;font-weight:600}
.metrics{gap:16px}
.metric{min-height:130px;padding:20px}
.metric span{font-size:14px;color:var(--qsign-muted)}
.metric b{font-size:30px;line-height:1.2}
.badge{padding:4px 9px;font-size:12px}
.notice{border-radius:var(--qsign-radius);font-size:14px}

/* Element Plus controls: 32px default component size, 8px radius, 14px type. */
.primary,.ghost,.danger{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:var(--qsign-component-size);height:var(--qsign-component-size);
  padding:8px 15px;border:1px solid transparent;border-radius:var(--qsign-radius);
  font-size:var(--qsign-font-size-base);font-weight:500;line-height:1;white-space:nowrap;
  cursor:pointer;transition:all .1s;user-select:none
}
.primary{background:var(--qsign-primary);border-color:var(--qsign-primary);color:#fff}
.primary:hover{background:var(--qsign-primary-hover);border-color:var(--qsign-primary-hover)}
.primary:active{background:var(--qsign-primary-active);border-color:var(--qsign-primary-active)}
.ghost{background:var(--qsign-accent);border-color:var(--qsign-border);color:var(--qsign-foreground)}
.ghost:hover{border-color:var(--qsign-primary);color:hsl(212 100% 70%)}
.ghost:active{background:hsl(216 5% 24%)}
.danger{background:hsl(348 35% 20%);border-color:hsl(348 45% 30%);color:hsl(348 100% 78%)}
.danger:hover{background:var(--qsign-danger);border-color:var(--qsign-danger);color:#fff}
.danger:active{filter:brightness(.88)}
.primary:focus-visible,.ghost:focus-visible,.danger:focus-visible{outline:2px solid var(--qsign-primary);outline-offset:1px}
.primary:disabled,.ghost:disabled,.danger:disabled,button:disabled{opacity:.5;cursor:not-allowed}
.wide{width:100%;height:40px;padding:12px 19px}
.license-card-generate-form .primary{height:var(--qsign-component-size)}
.text-button{height:auto;padding:2px;border-radius:4px;font-size:14px;color:hsl(212 100% 70%);transition:color .1s}
.text-button:hover{color:hsl(212 100% 80%)}

.login-card input,.field input,.field select,.menu-search input,.toolbar input,.plugin-config-grid input,.plugin-config-grid select,.page-qq-select select,.page-context-select select,.license-card-generate-form input,.license-card-list select{
  height:var(--qsign-component-size);min-height:var(--qsign-component-size);padding:1px 11px;
  border:1px solid var(--qsign-border);border-radius:var(--qsign-radius);outline:0;
  background:hsl(222 10% 10%);color:var(--qsign-foreground);
  box-shadow:0 0 0 1px transparent inset;transition:box-shadow .2s,border-color .2s
}
.field textarea{
  padding:5px 11px;border:1px solid var(--qsign-border);border-radius:var(--qsign-radius);outline:0;
  background:hsl(222 10% 10%);color:var(--qsign-foreground);line-height:1.5;
  box-shadow:0 0 0 1px transparent inset;transition:box-shadow .2s,border-color .2s
}
.login-card input:hover,.field input:hover,.field textarea:hover,.field select:hover,.menu-search input:hover,.toolbar input:hover,.plugin-config-grid input:hover,.plugin-config-grid select:hover,.page-qq-select select:hover,.page-context-select select:hover{border-color:hsl(240 4% 38%)}
.login-card input:focus,.field input:focus,.field textarea:focus,.field select:focus,.menu-search input:focus,.toolbar input:focus,.plugin-config-grid input:focus,.plugin-config-grid select:focus,.page-qq-select select:focus,.page-context-select select:focus{
  border-color:var(--qsign-primary);box-shadow:0 0 0 1px var(--qsign-primary) inset
}
.field{gap:8px;margin-bottom:18px;font-size:14px;font-weight:500}
.field textarea{min-height:96px}
.plugin-config-grid label>span{height:var(--qsign-component-size);border-radius:var(--qsign-radius) 0 0 var(--qsign-radius);font-size:14px}
.plugin-config-grid input,.plugin-config-grid select{border-radius:0 var(--qsign-radius) var(--qsign-radius) 0}
.page-qq-select,.page-context-select{font-size:14px}
.page-qq-select select,.page-context-select select{height:var(--qsign-component-size)}

.toolbar{min-height:var(--qsign-component-size);gap:12px;margin-bottom:14px}
.toolbar input{max-width:288px}
.table-wrap{border:1px solid var(--qsign-border);border-radius:var(--qsign-radius);overflow:auto}
table{background:var(--qsign-bg);font-size:14px}
th,td{height:40px;padding:8px 12px;border-color:var(--qsign-border);font-size:14px;line-height:23px}
th{background:var(--qsign-bg);color:var(--qsign-muted);font-weight:600}
tbody tr{transition:background-color .15s}
tbody tr:hover td{background:var(--qsign-accent)}
.row-actions{align-items:center;gap:8px;white-space:nowrap}
.row-actions .primary,.row-actions .ghost,.row-actions .danger{height:auto;min-height:0;padding:2px;border-color:transparent;background:transparent}
.row-actions .primary,.row-actions .ghost{color:hsl(212 100% 70%)}
.row-actions .primary:hover,.row-actions .ghost:hover{color:hsl(212 100% 80%);background:transparent;border-color:transparent}
.row-actions .danger{color:hsl(348 100% 72%)}
.row-actions .danger:hover{color:hsl(348 100% 82%);background:transparent;border-color:transparent}
.empty{padding:40px 12px;color:var(--qsign-muted)}
.feature-command-only{grid-column:1/-1;width:100%;text-align:center}
.select-cell{width:42px;min-width:42px;padding-left:12px;padding-right:12px}
.table-checkbox{width:14px;height:14px;border-radius:3px}
.table-checkbox:before{width:7px;height:4px}

/* Element Plus switches and aligned form rows. */
.switch,.join-content-toggle .switch,.card-management-switches .switch-row>.switch{
  flex:0 0 40px;width:40px;min-width:40px;max-width:40px;height:20px;min-height:20px;
  padding:0;border:0;border-radius:10px;background:hsl(220 4% 38%);box-shadow:none;transition:background-color .3s
}
.switch:after,.join-content-toggle .switch:after,.card-management-switches .switch-row>.switch:after{width:16px;height:16px;left:2px;top:2px;transition:transform .3s}
.switch:checked:after,.join-content-toggle .switch:checked:after,.card-management-switches .switch-row>.switch:checked:after{transform:translateX(20px)}
.switch:checked,.join-content-toggle .switch:checked,.card-management-switches .switch-row>.switch:checked{background:var(--qsign-primary)}
.switch-row{min-height:48px;padding:8px 12px;border-radius:var(--qsign-radius);font-size:14px}
.form-grid>.switch-row{height:48px;min-height:48px}
.join-content-toggle{flex-basis:40px}
.card-management-switches .switch-row>span{white-space:nowrap}

/* Review fields share one control baseline: label (21px) + 8px gap + 32px control. */
.review-form-grid{align-items:start}
.review-form-grid>.field,.review-form-grid>.switch-row{min-width:0}
.review-form-grid>.switch-row{
  height:var(--qsign-component-size);min-height:var(--qsign-component-size);
  margin-top:29px;margin-bottom:18px;padding:0 11px
}
.review-form-grid>.review-captcha-content{margin-top:0}
.review-form-grid>.review-captcha-content .join-switch-content-head{min-height:21px}
@media(max-width:760px){.review-form-grid>.switch-row{margin-top:0;height:48px;min-height:48px}}

/* 报时系统首行的开关与报时模式输入框共用同一控件基线。 */
.hourly-form-grid{align-items:start}
.hourly-form-grid>.switch-row{
  height:var(--qsign-component-size);min-height:var(--qsign-component-size);
  margin-top:29px;margin-bottom:18px;padding:0 11px
}
@media(max-width:760px){.hourly-form-grid>.switch-row{margin-top:0;height:48px;min-height:48px}}

/* Dropdowns use the same short scale/fade interaction as Element Plus. */
.batch-menu{padding:5px;border-color:var(--qsign-border);border-radius:var(--qsign-radius);background:var(--qsign-popover);transform-origin:center top;animation:qsign-dropdown-in .2s ease-out}
.batch-menu button{height:34px;padding:5px 12px;border-radius:6px;font-size:14px;transition:background-color .15s,color .15s}
.batch-menu button:hover{background:var(--qsign-accent)}
@keyframes qsign-dropdown-in{from{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}

/* Element Plus dialog and message box motion. */
.modal,.message-box-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:15vh 20px 20px;background:rgb(0 0 0/.5);opacity:0;transition:opacity .3s}
.modal.visible,.message-box-overlay.visible{opacity:1}
.modal-card,.message-box{border:1px solid var(--qsign-border);border-radius:var(--qsign-radius);background:var(--qsign-popover);box-shadow:0 12px 32px rgb(0 0 0/.35);transform:translateY(-20px);transition:transform .3s;overflow:auto}
.modal.visible .modal-card,.message-box-overlay.visible .message-box{transform:translateY(0)}
.modal-card{width:min(760px,100%);max-height:calc(100vh - 18vh)}
.modal-head,.message-box-head{display:flex;align-items:center;padding:16px;border-bottom:1px solid var(--qsign-border)}
.modal-head h3,.message-box-head h3{margin:0;font-size:18px;font-weight:500;line-height:24px}
.modal-head button,.message-box-head button{margin-left:auto}
.modal-card form{padding:16px}
.modal-actions,.message-box-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}
.message-box{width:min(420px,100%);padding:0}
.message-box-body{display:flex;align-items:flex-start;gap:12px;padding:20px 16px 10px;font-size:14px}
.message-box-body p{margin:0;padding-top:1px;line-height:1.6;white-space:pre-wrap}
.message-box-icon{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:var(--qsign-warning);color:#3a2a00;font-size:13px;font-weight:700}
.message-box-actions{padding:10px 16px 16px}
.modal.menu-editor .modal-card{width:min(1180px,calc(100vw - 40px))}

/* Element Plus Message: top-center, semantic color, slide/fade. */
.toast{
  position:fixed;z-index:70;left:50%;right:auto;top:20px;bottom:auto;
  display:flex;align-items:center;gap:8px;min-width:unset;width:max-content;max-width:calc(100vw - 32px);
  padding:11px 15px;border:1px solid var(--qsign-border);border-radius:var(--qsign-radius);
  background:var(--qsign-popover);color:var(--qsign-foreground);box-shadow:0 4px 12px rgb(0 0 0/.28);
  font-size:14px;font-weight:400;line-height:1.4;opacity:0;transform:translate(-50%,-100%);
  transition:opacity .3s,transform .4s,top .4s
}
.toast:before{content:"i";display:grid;place-items:center;flex:0 0 16px;width:16px;height:16px;border-radius:50%;background:hsl(212 70% 32%);color:hsl(212 100% 82%);font-size:11px;font-weight:700}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.success{left:50%;right:auto;top:20px;bottom:auto;min-width:unset;text-align:left;transform:translate(-50%,-100%);background:hsl(144 28% 15%);border-color:hsl(144 35% 27%);color:hsl(144 65% 73%);box-shadow:0 4px 12px rgb(0 0 0/.28);font-weight:400}
.toast.success:before{content:"✓";background:hsl(144 45% 28%);color:hsl(144 75% 78%)}
.toast.success.show{transform:translate(-50%,0)}
.toast.error{background:hsl(348 28% 16%);border-color:hsl(348 40% 30%);color:hsl(348 100% 78%)}
.toast.error:before{content:"×";background:hsl(348 45% 30%);color:hsl(348 100% 84%)}

@media(max-width:760px){
  .sidebar{width:224px}.workspace{margin-left:0}.tabbar{top:50px}.page-head{padding:16px}
  .content>.metrics,.content>.card{margin-left:12px;margin-right:12px}
  .modal,.message-box-overlay{padding:8vh 12px 12px}
  .modal-card{max-height:88vh}
}
.inactive-notification textarea{min-height:105px;line-height:1.65}.inactive-global-notice{margin:16px 16px 0}.inactive-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px}.inactive-action-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:end;gap:15px 18px;padding:18px}.inactive-action-card header{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}.inactive-action-card h3{margin:0 0 7px;font-size:15px;color:#f1f5f9}.inactive-action-card code{color:#77b4ff;font-size:12px}.inactive-action-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.inactive-action-fields label{display:grid;gap:7px;font-size:13px;color:#aeb6c3}.inactive-action-fields input{width:100%;height:40px;border:1px solid #3a3d44;border-radius:8px;background:#15171b;color:#f1f5f9;padding:0 12px;outline:none}.inactive-action-fields input:focus{border-color:#60a5fa;box-shadow:0 0 0 3px #1d4ed833}.inactive-action-card>button{height:40px;min-width:92px;white-space:nowrap}.inactive-action-card>button:disabled{cursor:not-allowed;opacity:.5}.inactive-action-copy{margin:0;color:#8b95a7;font-size:13px;line-height:1.7}.inactive-results{margin-left:16px!important;margin-right:16px!important}.inactive-result-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}.inactive-result-head h3{margin:0}.inactive-result-head span{color:#8b95a7;font-size:13px}.inactive-results .table-wrap table{min-width:760px}.inactive-results .empty{padding:30px}#confirm-message{white-space:pre-line}@media(max-width:960px){.inactive-action-grid{grid-template-columns:1fr}}@media(max-width:760px){.inactive-action-grid{margin:12px}.inactive-action-card{grid-template-columns:1fr}.inactive-action-card header{grid-column:1}.inactive-action-card>button{width:100%}.inactive-action-fields{grid-template-columns:1fr}.inactive-results{margin-left:12px!important;margin-right:12px!important}.inactive-result-head{align-items:flex-start;flex-direction:column;gap:6px}}

/* 2026 visual refresh: clearer Chinese typography and a calmer management shell. */
:root{
  --qsign-font-family:"Microsoft YaHei UI","PingFang SC","Noto Sans CJK SC","Noto Sans SC","Segoe UI",system-ui,-apple-system,sans-serif;
  --qsign-element-font:var(--qsign-font-family);
  --qsign-bg:hsl(222 15% 12%);
  --qsign-bg-deep:hsl(222 19% 8.5%);
  --qsign-popover:hsl(222 13% 15%);
  --qsign-border:hsl(220 10% 23%);
  --qsign-accent:hsl(217 14% 19%);
  --qsign-muted:hsl(218 10% 64%);
  --qsign-primary:hsl(213 93% 55%);
  --surface-soft:hsl(222 15% 14%);
  --surface-raised:hsl(222 14% 16%);
  --text-strong:hsl(214 32% 96%);
  --blue-soft:hsl(213 92% 62%);
  font-size:16px;
  line-height:1.5
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{letter-spacing:.01em;background:var(--qsign-bg-deep)}
body,button,input,textarea,select{font-family:var(--qsign-font-family)}
button,input,textarea,select{letter-spacing:0}
code{font-family:"Cascadia Code","SFMono-Regular",Consolas,"Liberation Mono",monospace}
::selection{background:hsl(213 90% 48%/.45);color:#fff}
*{scrollbar-width:thin;scrollbar-color:hsl(220 8% 34%) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:999px;background-clip:padding-box;background:hsl(220 8% 34%)}

/* Login */
.login-shell{grid-template-columns:minmax(500px,1.08fr) minmax(460px,.92fr);min-height:100vh;background:var(--qsign-bg-deep)}
.login-brand{position:relative;isolation:isolate;align-items:flex-start;justify-content:center;padding:clamp(48px,7vw,112px);overflow:hidden;background:
  radial-gradient(circle at 82% 78%,hsl(194 92% 55%/.36),transparent 31%),
  radial-gradient(circle at 18% 10%,hsl(230 88% 65%/.22),transparent 34%),
  linear-gradient(145deg,hsl(225 66% 17%),hsl(220 75% 27%) 52%,hsl(207 91% 42%));
  color:#fff
}
.login-brand:after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(hsl(0 0% 100%/.035) 1px,transparent 1px),linear-gradient(90deg,hsl(0 0% 100%/.035) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom right,#000,transparent 74%)}
.login-orb{position:absolute;z-index:-1;border:1px solid hsl(0 0% 100%/.14);border-radius:50%;box-shadow:0 0 0 56px hsl(0 0% 100%/.025),0 0 0 112px hsl(0 0% 100%/.018)}
.login-orb-one{width:340px;height:340px;right:-80px;bottom:-62px}
.login-orb-two{width:170px;height:170px;left:-80px;top:14%}
.login-brand-content{position:relative;z-index:1;width:min(600px,100%)}
.brand-signature{display:flex;align-items:center;gap:12px;margin-bottom:clamp(54px,9vh,104px);font-size:11px;font-weight:700;letter-spacing:.18em;color:hsl(210 40% 91%/.82)}
.brand-signature img{width:42px;height:42px;border-radius:12px;box-shadow:0 12px 32px hsl(225 80% 8%/.32)}
.brand-kicker{margin-bottom:18px;font-size:14px;font-weight:600;letter-spacing:.16em;color:hsl(198 100% 87%)}
.login-brand h1{margin:0;font-size:clamp(38px,4vw,58px);font-weight:750;line-height:1.19;letter-spacing:-.035em;text-wrap:balance}
.login-brand p{max-width:510px;margin:25px 0 0;color:hsl(214 45% 92%/.78);font-size:16px;line-height:1.85}
.brand-grid{display:flex;gap:10px;margin-top:36px}
.brand-grid span{padding:8px 13px;border:1px solid hsl(0 0% 100%/.16);border-radius:999px;background:hsl(0 0% 100%/.08);backdrop-filter:blur(8px);font-size:12px;color:hsl(210 40% 96%)}
.brand-foot{position:absolute;left:clamp(48px,7vw,112px);bottom:34px;color:hsl(210 35% 90%/.58);font-size:12px;letter-spacing:.06em}
.login-panel{position:relative;padding:48px;background:radial-gradient(circle at 82% 8%,hsl(213 75% 42%/.08),transparent 30%),var(--qsign-bg-deep)}
.login-panel:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,hsl(213 90% 65%/.35),transparent)}
.login-card{width:min(420px,100%);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.login-eyebrow{margin-bottom:11px;color:var(--blue-soft);font-size:11px;font-weight:700;letter-spacing:.16em}
.login-card h2{margin:0;color:var(--text-strong);font-size:32px;font-weight:720;line-height:1.3;letter-spacing:-.025em}
.login-card>.login-subtitle{margin:8px 0 34px;color:var(--qsign-muted);font-size:14px}
.login-card .login-field{display:flex;flex-direction:column;gap:9px;margin:0 0 20px;color:hsl(216 22% 88%);font-size:13px;font-weight:600}
.login-card .login-field input{width:100%;height:46px;padding:0 13px;border:1px solid hsl(220 10% 27%);border-radius:10px;background:hsl(222 19% 10.5%);color:var(--text-strong);font-size:14px;box-shadow:0 1px 0 hsl(0 0% 100%/.025) inset;transition:border-color .18s,box-shadow .18s,background .18s}
.login-card .login-field input:hover{border-color:hsl(218 10% 38%);background:hsl(222 17% 11.5%)}
.login-card .login-field input:focus{border-color:var(--qsign-primary);box-shadow:0 0 0 3px hsl(213 93% 55%/.14);background:hsl(222 17% 11.5%)}
.login-card .login-field input::placeholder{color:hsl(218 8% 45%)}
.password-control{position:relative}
.password-control input{padding-right:62px!important}
.password-control button{position:absolute;right:7px;top:7px;height:32px;padding:0 9px;border:0;border-radius:7px;background:transparent;color:hsl(214 12% 66%);font-size:12px;cursor:pointer;transition:background .15s,color .15s}
.password-control button:hover{background:var(--qsign-accent);color:#fff}
.password-control button:focus-visible{outline:2px solid var(--qsign-primary);outline-offset:1px}
.token-hint{display:flex;align-items:flex-start;gap:9px;margin:-3px 0 24px;color:hsl(216 9% 59%);font-size:12px;line-height:1.6}
.token-hint>span{display:grid;place-items:center;flex:0 0 18px;width:18px;height:18px;margin-top:1px;border-radius:50%;background:hsl(213 70% 22%);color:hsl(211 100% 78%);font-size:11px;font-weight:700}
.token-hint p{margin:0}.token-hint code{color:hsl(213 80% 75%);font-size:11px}
.login-submit{height:46px;border-radius:10px;font-weight:650;box-shadow:0 10px 28px hsl(213 90% 42%/.2)}
.login-submit span{margin-left:5px;font-size:17px;transition:transform .15s}.login-submit:hover span{transform:translateX(3px)}
.login-card .error{min-height:20px;margin-top:12px;font-size:12px;text-align:center}
.login-security{padding-top:22px;border-top:1px solid hsl(220 10% 20%);color:hsl(218 8% 48%);font-size:11px;text-align:center}
.mobile-logo{display:none}

/* Application shell */
.sidebar{width:240px;border-right-color:hsl(220 10% 21%);background:linear-gradient(180deg,hsl(222 16% 13%),hsl(222 17% 11.5%));box-shadow:8px 0 28px hsl(222 30% 5%/.12)}
.workspace{margin-left:240px;background:var(--qsign-bg-deep)}
.logo{height:58px;padding:0 16px;gap:11px;border-color:hsl(220 10% 21%);background:hsl(222 16% 13%/.78)}
.logo img{width:34px;height:34px;border-radius:10px;box-shadow:0 5px 18px hsl(213 80% 30%/.18)}
.logo-copy{display:flex;min-width:0;flex-direction:column;gap:1px}.logo-copy b{font-size:14px;font-weight:650;letter-spacing:.01em}.logo-copy small{color:hsl(218 9% 54%);font-size:10px;letter-spacing:.08em}
.nav-search{position:relative;display:flex;align-items:center;gap:7px;margin:10px 9px 3px;padding:0 9px;height:36px;border:1px solid hsl(220 10% 23%);border-radius:9px;background:hsl(222 18% 10.5%);color:hsl(218 8% 48%);transition:border-color .16s,box-shadow .16s}.nav-search:focus-within{border-color:hsl(213 65% 45%);box-shadow:0 0 0 3px hsl(213 90% 50%/.1)}.nav-search input{min-width:0;flex:1;height:32px;padding:0;border:0!important;outline:0;background:transparent!important;color:hsl(214 22% 90%);font-size:12px}.nav-search input::placeholder{color:hsl(218 8% 47%)}.nav-search button{display:none;width:21px;height:21px;padding:0;border:0;border-radius:5px;background:transparent;color:hsl(216 9% 60%);cursor:pointer}.nav-search button.visible{display:block}.nav-search button:hover{background:hsl(217 14% 21%);color:#fff}.sidebar nav{padding:7px 9px 16px;scrollbar-width:thin}.nav-empty{padding:25px 10px;color:hsl(216 8% 48%);font-size:12px;text-align:center}
.nav-section{margin-bottom:4px}
.section-button{height:40px;padding:0 11px;color:hsl(216 16% 86%);font-size:13px;font-weight:600}
.section-button svg{color:hsl(216 12% 64%)}
.section-button .chevron{color:hsl(218 8% 49%);font-size:12px}
.section-children{gap:2px;padding:1px 0 5px}
.nav-item{position:relative;height:38px;padding:0 11px 0 36px;color:hsl(216 11% 70%);font-size:13px}
.nav-item:before{content:"";position:absolute;left:0;top:9px;width:3px;height:20px;border-radius:0 4px 4px 0;background:transparent}
.nav-item:hover{background:hsl(217 14% 18%);color:hsl(214 30% 94%)}
.nav-item.active{background:linear-gradient(90deg,hsl(213 72% 30%/.42),hsl(213 45% 24%/.2));color:hsl(211 100% 86%);font-weight:600}
.nav-item.active:before{background:var(--qsign-primary);box-shadow:0 0 14px hsl(213 93% 55%/.5)}
.nav-icon{color:hsl(216 10% 61%)}.nav-item.active .nav-icon{color:hsl(211 100% 72%)}
.sidebar-foot{min-height:48px;padding:11px 16px;background:hsl(222 18% 10.5%);border-color:hsl(220 10% 20%);color:hsl(216 9% 61%);font-size:11px}
.status-dot{width:7px;height:7px;background:hsl(151 69% 50%);box-shadow:0 0 0 4px hsl(151 69% 50%/.1)}
.workspace header{height:54px;padding:0 18px;background:hsl(222 15% 12%/.94);border-color:var(--qsign-border);backdrop-filter:blur(14px)}
.breadcrumb{gap:8px;color:hsl(216 9% 61%);font-size:12px}.breadcrumb b{color:hsl(214 22% 89%);font-weight:600}.breadcrumb-home{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:hsl(217 14% 18%);color:hsl(213 85% 72%)}
.header-actions .icon-btn{color:hsl(216 10% 67%)}
.avatar{width:32px;height:32px;margin-left:7px;border:1px solid hsl(213 70% 50%/.35);background:linear-gradient(145deg,hsl(213 88% 55%),hsl(226 70% 52%));color:#fff;font-weight:700;box-shadow:0 5px 16px hsl(213 85% 40%/.2)}
.tabbar{height:40px;top:54px;padding-left:11px;background:hsl(222 15% 12%);border-color:var(--qsign-border)}
.active-tab{height:35px;min-width:132px;padding:0 15px;border:1px solid var(--qsign-border);border-bottom-color:var(--qsign-bg-deep);background:var(--qsign-bg-deep);color:hsl(214 22% 90%);font-size:12px}
.active-tab span{color:var(--blue-soft)}
.page-head{min-height:82px;padding:18px 23px;align-items:center;background:linear-gradient(180deg,hsl(222 18% 10%/.45),transparent);border-color:var(--qsign-border)}
.page-head h1{font-size:20px;font-weight:680;line-height:1.4;letter-spacing:-.015em;color:var(--text-strong)}
.page-head p{display:block;margin:4px 0 0;color:hsl(216 8% 54%);font-size:12px;line-height:1.5}
.content>.metrics,.content>.card{margin-left:18px;margin-right:18px}
.metrics{padding-top:18px;gap:14px}
.card{border-color:hsl(220 10% 22%);background:linear-gradient(180deg,hsl(222 15% 14%),hsl(222 16% 12.8%));box-shadow:0 10px 28px hsl(222 35% 5%/.08)}
.panel{margin-top:18px!important;margin-bottom:18px;padding:19px}
.panel h3{font-size:15px;font-weight:650;color:hsl(214 24% 92%)}
.metric{min-height:126px;padding:18px}.metric span{color:hsl(216 9% 58%);font-size:12px}.metric b{margin-top:12px;color:var(--text-strong);font-size:29px;font-weight:680;letter-spacing:-.025em}.metric:after{width:30px;height:3px;border-radius:999px;margin-top:16px;background:var(--qsign-primary)}
.notice{border-color:hsl(213 55% 30%);background:hsl(213 45% 18%);color:hsl(211 70% 79%);line-height:1.7}
.service-guide{margin:18px 18px 0;padding:21px}.service-guide-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.service-guide-head small{color:var(--blue-soft);font-size:10px;font-weight:800;letter-spacing:.15em}.service-guide-head h2{margin:4px 0;color:var(--text-strong);font-size:18px}.service-guide-head p{margin:0;color:var(--qsign-muted);font-size:12px;line-height:1.7}.connection-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}.connection-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;padding:15px;border:1px solid var(--qsign-border);border-radius:10px;background:rgb(255 255 255/.015)}.connection-step>span{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:hsl(220 10% 24%);color:hsl(216 10% 70%);font-size:12px;font-weight:700}.connection-step b{color:hsl(216 18% 88%);font-size:13px}.connection-step p{margin:4px 0 0;color:hsl(216 8% 53%);font-size:11px;line-height:1.55}.connection-step.active{border-color:hsl(213 55% 34%);background:hsl(213 50% 17%/.38)}.connection-step.active>span{background:hsl(213 78% 50%);color:#fff}.connection-step.done>span{background:hsl(151 55% 32%);color:hsl(151 75% 82%)}.service-guide-note{display:flex;gap:10px;margin-top:12px;padding:11px 13px;border-radius:8px;background:hsl(213 40% 17%/.34);color:hsl(216 9% 61%);font-size:11px;line-height:1.65}.service-guide-note b{flex:0 0 auto;color:hsl(212 75% 76%)}
.toolbar{gap:10px}.toolbar input{height:36px;max-width:320px;background:hsl(222 18% 10.5%)}
.table-wrap{border-color:hsl(220 10% 22%);background:hsl(222 15% 13%)}
table{background:transparent}
th,td{height:42px;padding:9px 12px;font-size:13px;border-color:hsl(220 10% 20.5%)}
th{position:sticky;top:0;z-index:1;background:hsl(222 15% 15.5%);color:hsl(216 9% 64%);font-size:12px;font-weight:600;letter-spacing:.015em}
tbody tr:nth-child(even) td{background:hsl(222 14% 13.4%/.55)}
tbody tr:hover td{background:hsl(217 16% 18.5%)}
.empty{color:hsl(216 7% 49%);font-size:13px}
.field{color:hsl(216 15% 82%);font-size:13px;font-weight:550}
.field input,.field textarea,.field select,.menu-search input,.toolbar input{background:hsl(222 18% 10.5%)}
.switch-row{border-color:hsl(220 10% 22%);background:hsl(222 15% 13%);color:hsl(216 14% 82%)}
.modal-card,.message-box{background:hsl(222 14% 14.5%);box-shadow:0 26px 80px hsl(222 45% 3%/.48)}
.modal-head,.message-box-head{background:hsl(222 14% 16%)}

@media(max-width:1100px){
  .login-shell{grid-template-columns:minmax(420px,.95fr) minmax(430px,1.05fr)}
  .login-brand{padding:54px}.brand-foot{left:54px}.login-brand h1{font-size:42px}
}
@media(max-width:880px){
  .login-shell{display:grid;grid-template-columns:1fr}.login-brand{display:none}.login-panel{min-height:100vh;padding:32px 22px}
  .login-card{width:min(440px,100%);padding:30px;border:1px solid var(--qsign-border);border-radius:16px;background:hsl(222 15% 12.5%);box-shadow:0 24px 80px hsl(222 45% 3%/.25)}
  .mobile-logo{display:block;width:48px;height:48px;margin:0 0 26px;border-radius:13px}
}
@media(max-width:760px){
  .sidebar{width:240px}.workspace{margin-left:0}.workspace header{height:52px;padding:0 12px}.tabbar{top:52px}
  .breadcrumb{gap:6px}.breadcrumb-home{display:none}.header-actions{gap:1px}.avatar{display:none}
  .page-head{min-height:76px;padding:15px}.page-head h1{font-size:18px}.page-head p{max-width:75vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .content>.metrics,.content>.card{margin-left:12px;margin-right:12px}.metrics{padding-top:12px;gap:12px}.panel{margin-top:12px!important;margin-bottom:12px}.service-guide{margin:12px 12px 0;padding:16px}.service-guide-head{align-items:flex-start;flex-direction:column}.connection-steps{grid-template-columns:1fr}.service-guide-note{flex-direction:column}
}
@media(max-width:480px){
  .login-panel{padding:18px}.login-card{padding:26px 21px}.login-card h2{font-size:27px}.login-card>.login-subtitle{margin-bottom:28px}
  .token-hint{margin-bottom:20px}.login-security{padding-top:18px}
}

/* Online updater */
.update-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:16px;margin:18px}
.update-summary,.update-settings,.update-notes{padding:22px}
.update-status-line{display:flex;align-items:center;gap:14px;margin-bottom:22px}.update-status-line small,.update-notes small{color:var(--qsign-muted);font-size:10px;font-weight:700;letter-spacing:.14em}.update-status-line h2,.update-settings h2,.update-notes h2{margin:3px 0 0;color:var(--text-strong);font-size:18px;font-weight:650}.update-status-dot{width:12px;height:12px;border-radius:50%}.update-status-dot.current{background:#36c98f;box-shadow:0 0 0 6px rgb(54 201 143/.1)}.update-status-dot.available{background:#3b82f6;box-shadow:0 0 0 6px rgb(59 130 246/.12),0 0 18px rgb(59 130 246/.38)}
.update-version-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.update-version-grid>div{padding:14px;border:1px solid var(--qsign-border);border-radius:9px;background:rgb(255 255 255/.018)}.update-version-grid span{display:block;margin-bottom:7px;color:var(--qsign-muted);font-size:11px}.update-version-grid b{color:#e8edf5;font-size:14px;font-weight:600;word-break:break-word}.update-error{margin-top:14px;padding:11px 13px;border:1px solid rgb(248 113 113/.25);border-radius:8px;background:rgb(127 29 29/.22);color:#fca5a5;font-size:12px;line-height:1.6}.update-actions{display:flex;align-items:center;gap:14px;margin-top:20px}.update-actions a{color:#77b4ff;font-size:12px;text-decoration:none}.update-actions a:hover{text-decoration:underline}.update-safety{margin:16px 0 0;color:var(--qsign-muted);font-size:11px;line-height:1.65}.update-safety code,.update-tip code{color:#83b9ff}
.update-settings h2{margin:0 0 18px}.update-settings .switch-row{margin-bottom:10px}.update-settings .field{margin:14px 0}.update-settings form>.primary{margin-top:4px}.update-tip{display:flex;flex-direction:column;gap:5px;margin-top:20px;padding:13px;border-radius:8px;background:rgb(59 130 246/.08);color:var(--qsign-muted);font-size:11px;line-height:1.65}.update-tip b{color:#9cc7ff;font-size:12px}
.update-notes{margin:0 18px 18px}.update-notes header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.update-notes h2{font-size:16px}.update-notes pre{max-height:360px;margin:0;padding:16px;border:1px solid var(--qsign-border);border-radius:8px;overflow:auto;background:rgb(0 0 0/.14);color:#cdd5df;font-family:var(--qsign-font-family);font-size:12px;line-height:1.8;white-space:pre-wrap;word-break:break-word}
@media(max-width:980px){.update-layout{grid-template-columns:1fr}}
@media(max-width:760px){.update-layout{margin:12px}.update-summary,.update-settings,.update-notes{padding:16px}.update-notes{margin:0 12px 12px}.update-version-grid{grid-template-columns:1fr}.update-actions{align-items:flex-start;flex-direction:column}}
.task-error-cell{max-width:360px!important;white-space:normal!important;overflow-wrap:anywhere;color:var(--qsign-muted)}