/* GAIJIN Control: shared visual language with Staff. No layout/data interception. */
html[data-control-design="staff"] {
  color-scheme:light;
  --gc-bg:#f5f5fa;--gc-surface:#fff;--gc-soft:#f4f5fa;--gc-ink:#242533;
  --gc-muted:#696c80;--gc-line:#e5e6ef;--gc-blue:#087af2;--gc-purple:#7855ce;
  --gc-blue-soft:#eaf2ff;--gc-purple-soft:#f1ebfc;--gc-green:#187c6c;
  --gc-green-soft:#eaf7f2;--gc-red:#c13e54;--gc-red-soft:#fff0f3;
  --gc-shadow:0 5px 24px #353f6d06;--gc-gradient:linear-gradient(120deg,#edf6ff,#f1efff 65%,#faeffa);
  --gc-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Arial,sans-serif;
}
html[data-control-design="staff"][data-theme="dark"] {
  color-scheme:dark;--gc-bg:#11141f;--gc-surface:#1a1f2e;--gc-soft:#22283b;
  --gc-ink:#f0f2fa;--gc-muted:#b0b8cf;--gc-line:#32394e;--gc-blue:#83b5ff;
  --gc-purple:#c2a2ff;--gc-blue-soft:#253652;--gc-purple-soft:#322b48;
  --gc-green:#7adbc2;--gc-green-soft:#203b36;--gc-red:#ffa0b1;--gc-red-soft:#442c3a;
  --gc-shadow:0 6px 28px #00000012;--gc-gradient:linear-gradient(125deg,#202f48,#2b2845 65%,#36283e);
}
html[data-control-design="staff"] {
  --v4-bg:var(--gc-bg);--v4-surface:var(--gc-surface);--v4-surface-2:var(--gc-soft);
  --v4-line:var(--gc-line);--v4-text:var(--gc-ink);--v4-muted:var(--gc-muted);
  --v4-primary:var(--gc-blue);--v4-primary-soft:var(--gc-blue-soft);--v4-shadow:var(--gc-shadow);
  --v4-good:var(--gc-green);--v4-good-soft:var(--gc-green-soft);--v4-bad:var(--gc-red);--v4-bad-soft:var(--gc-red-soft);
  --v2-bg:var(--gc-bg);--v2-surface:var(--gc-surface);--v2-border:var(--gc-line);
  --v2-text:var(--gc-ink);--v2-muted:var(--gc-muted);--v2-brand:var(--gc-blue);--v2-brand-soft:var(--gc-blue-soft);
  --bg-base:var(--gc-bg);--text-main:var(--gc-ink);--text-secondary:var(--gc-muted);--text-muted:var(--gc-muted);
  --glass:var(--gc-surface);--glass-strong:var(--gc-surface);--glass-ultra:var(--gc-surface);--glass-border:var(--gc-line);
  --accent-blue:var(--gc-blue);--accent-purple:var(--gc-purple);--accent-green:var(--gc-green);--accent-red:var(--gc-red);
  --shadow-glass:var(--gc-shadow);--shadow-lg:0 20px 60px #17244816;--r-lg:26px;
}
html[data-control-design] body {
  color:var(--gc-ink)!important;background:radial-gradient(ellipse at 0 0,color-mix(in srgb,var(--gc-blue-soft) 90%,transparent),transparent 48%),radial-gradient(ellipse at 100% 38%,var(--gc-purple-soft),transparent 45%),var(--gc-bg)!important;
  background-attachment:fixed!important;font-family:var(--gc-font)!important;letter-spacing:-.015em!important;-webkit-font-smoothing:antialiased;
}
html[data-control-design] :is(h1,h2,h3,h4,.section-title,.dv2-section-title){font-family:var(--gc-font)!important;font-weight:680!important;letter-spacing:-.035em!important;color:var(--gc-ink)!important;text-wrap:balance}
html[data-control-design] :is(h1,.page-title){font-size:clamp(28px,3.2vw,42px);line-height:1.16}
html[data-control-design] :is(h2,.dv2-section-title){font-size:21px;line-height:1.3}
html[data-control-design] :is(button,input,select,textarea,.btn){font-family:var(--gc-font)!important}
html[data-control-design] :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid color-mix(in srgb,var(--gc-blue) 65%,transparent)!important;outline-offset:3px}
html[data-control-design] [hidden]{display:none!important}
html[data-control-design] :is(.app-shell,main,.card,.staff-card,.sv2-card){min-width:0}

/* Navigation: a quiet desktop bar and the same floating dock as Staff on phones. */
html[data-control-design] .app-launcher{border-radius:24px!important;border-color:color-mix(in srgb,var(--gc-line) 75%,transparent)!important;background:color-mix(in srgb,var(--gc-surface) 92%,transparent)!important;box-shadow:0 8px 34px #26334e0b!important;padding:8px 12px!important}
html[data-control-design] :is(.app-launcher a,.app-launcher button){font-size:12px!important;font-weight:600!important;border-radius:15px!important;min-height:44px!important}
html[data-control-design] :is(.title-logo,.app-brand-logo){box-shadow:0 5px 15px #6558e728!important;border-radius:13px!important}
html[data-control-design] .app-brand-copy strong{font-size:13px;letter-spacing:.05em}
html[data-control-design] .app-brand-copy small{font-size:9px;letter-spacing:.16em;color:var(--gc-muted)}
html[data-control-design] .title-bar{background:transparent!important;box-shadow:none!important;border:0!important;padding:8px 0 18px!important;border-radius:0!important;border-bottom:1px solid var(--gc-line)!important}
html[data-control-design] .title-text-main{font-family:var(--gc-font)!important;font-weight:700!important;font-size:16px!important}
html[data-control-design] .title-text-sub{font-size:11px!important}
html[data-control-design] .title-btn{background:var(--gc-surface)!important;border:1px solid var(--gc-line)!important;border-radius:14px!important;color:var(--gc-muted)!important}
html[data-control-design] :is(.v2-more-sheet,.workspace-dialog,.modal-content,.staff-dialog){color:var(--gc-ink)!important;background:var(--gc-surface)!important;border:1px solid var(--gc-line)!important;border-radius:28px!important;box-shadow:0 30px 90px #15203528!important}
html[data-control-design] .v2-more-grid a{border-radius:18px!important;border:1px solid var(--gc-line)!important;background:var(--gc-soft)!important;color:var(--gc-ink)!important;padding:16px!important}
html[data-control-design] .v2-more-grid a i{color:var(--gc-blue)!important;background:var(--gc-blue-soft)!important;border-radius:13px!important}
html[data-control-design] .ux-menu-group:nth-child(2) .v2-more-grid a i{color:var(--gc-purple)!important;background:var(--gc-purple-soft)!important}
html[data-control-design] .ux-menu-group:nth-child(3) .v2-more-grid a i{color:var(--gc-green)!important;background:var(--gc-green-soft)!important}

/* Shared components cover reports, staff, payroll, settings and administration. */
html[data-control-design] :is(.card,.glass-card,.dv2-primary,.dv2-side,.dv2-panel,.dv2-location,.dv3-points-section,.sv2-card,.sv2-hero,.staff-card,.staff-hero,.staff-live-card,.staff-collapsible,.workspace-attention,.workspace-tools){
  color:var(--gc-ink)!important;background:var(--gc-surface)!important;border:1px solid var(--gc-line)!important;border-radius:26px!important;box-shadow:var(--gc-shadow)!important;backdrop-filter:none!important;
}
html[data-control-design] :is(.card-header,.card-footer){background:transparent!important;border-color:var(--gc-line)!important}
html[data-control-design] :is(.page-sub,.text-muted,.dv2-section-sub,.form-text,.workspace-note){color:var(--gc-muted)!important;line-height:1.5}
html[data-control-design] .page-header{margin-bottom:24px}
html[data-control-design] :is(.workspace-tools,.workspace-attention){padding:18px 20px!important}
html[data-control-design] .workspace-row{gap:12px}
html[data-control-design] .workspace-row label{font-size:12px;font-weight:550;gap:7px}
html[data-control-design] .workspace-actions{gap:8px;margin-top:14px}
html[data-control-design] .workspace-actions a{border-radius:11px;font-weight:550;padding:9px 12px;background:var(--gc-blue-soft);color:var(--gc-blue)}
html[data-control-design] :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]),select,textarea,.form-control,.form-select){color:var(--gc-ink)!important;background:var(--gc-soft)!important;border:1px solid var(--gc-line)!important;border-radius:13px!important;font-size:14px;line-height:1.4;box-shadow:none!important}
html[data-control-design] :is(.workspace-row input,.workspace-row select,.form-control,.form-select){min-height:44px}
html[data-control-design] :is(.btn,.workspace-tools button,.staff-action-primary,.staff-action-secondary){border-radius:13px!important;font-weight:600!important;letter-spacing:0;min-height:40px}
html[data-control-design] :is(.btn-primary,.btn-main,#workspaceApply,.staff-action-primary,.plans-save-btn){background:linear-gradient(110deg,#087af2,#6260e8)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 5px 16px #426aea20!important}
html[data-control-design] :is(.btn-secondary,.btn-light,.btn-outline-secondary,#workspaceSearchOpen){background:var(--gc-soft)!important;color:var(--gc-ink)!important;border:1px solid var(--gc-line)!important}
html[data-control-design] :is(.btn-danger,.btn-outline-danger){color:var(--gc-red)!important;background:var(--gc-red-soft)!important;border-color:color-mix(in srgb,var(--gc-red) 25%,var(--gc-line))!important}
html[data-control-design] :is(.nav-tabs,.nav-pills,.login-tabs,.work-tabs){border:0!important;background:var(--gc-soft)!important;padding:5px;border-radius:16px!important;gap:4px}
html[data-control-design] :is(.nav-link,.login-tab){border:0!important;border-radius:12px!important;color:var(--gc-muted)!important;font-weight:600}
html[data-control-design] :is(.nav-link.active,.login-tab.active){background:var(--gc-surface)!important;color:var(--gc-blue)!important;box-shadow:0 2px 8px #18243e0b!important}
html[data-control-design] :is(.table,table){--bs-table-bg:transparent;--bs-table-color:var(--gc-ink);--bs-table-border-color:var(--gc-line);--bs-table-hover-bg:var(--gc-soft);font-variant-numeric:tabular-nums}
html[data-control-design] :is(.table,table) th{color:var(--gc-muted);font-size:11px;font-weight:650;letter-spacing:.025em;background:var(--gc-soft)}
html[data-control-design] :is(.table,table) td{border-color:var(--gc-line);font-size:13px}
html[data-control-design] .table-responsive{border-radius:16px;border:1px solid var(--gc-line);scrollbar-width:thin;overscroll-behavior-x:contain}
html[data-control-design] .table-responsive table{margin-bottom:0}
html[data-control-design] :is(.badge,.staff-pill){font-weight:600;border-radius:9px;line-height:1.4}
html[data-control-design] :is(.alert,.notice){border-radius:16px;box-shadow:none}
html[data-control-design] .alert-info{color:var(--gc-blue);background:var(--gc-blue-soft);border-color:var(--gc-line)}
html[data-control-design] .alert-danger{color:var(--gc-red);background:var(--gc-red-soft);border-color:var(--gc-line)}

/* Dashboard: clear hierarchy, expressive accents without colouring all data. */
html[data-control-design] .dv2-primary{background:var(--gc-gradient)!important;padding:30px!important;position:relative;overflow:hidden}
html[data-control-design] .dv2-primary::after{width:220px!important;height:220px!important;border-radius:50%!important;background:#b7c9ff!important;opacity:.12!important;pointer-events:none}
html[data-control-design] .dv2-revenue{font-family:var(--gc-font)!important;font-weight:650!important;letter-spacing:-.055em!important;font-size:clamp(40px,4.5vw,64px)!important;font-variant-numeric:tabular-nums}
html[data-control-design] .dv2-revenue-label{font-size:14px;color:var(--gc-muted)}
html[data-control-design] .dv2-side{padding:10px!important}
html[data-control-design] .dv2-side-row{padding:17px!important;border-radius:18px;border:0!important;margin:3px 0;background:var(--gc-blue-soft)}
html[data-control-design] .dv2-side-row:nth-child(2){background:var(--gc-green-soft)}
html[data-control-design] .dv2-side-row:nth-child(3){background:var(--gc-purple-soft)}
html[data-control-design] .dv2-side-icon{background:var(--gc-surface)!important;color:var(--gc-blue)!important;border-radius:12px}
html[data-control-design] .dv2-side-row:nth-child(2) .dv2-side-icon{color:var(--gc-green)!important}
html[data-control-design] .dv2-side-row:nth-child(3) .dv2-side-icon{color:var(--gc-purple)!important}
html[data-control-design] .dv2-side-value{font-weight:650;font-variant-numeric:tabular-nums}
html[data-control-design] :is(.dv2-track,.dv3-mini-track){background:color-mix(in srgb,var(--gc-line) 75%,transparent)!important;border-radius:8px;overflow:hidden}
html[data-control-design] .dv2-fill{background:linear-gradient(90deg,#1987f6,#9870ec)!important;border-radius:8px}
html[data-control-design] .dv2-alert{border-radius:17px!important;background:var(--gc-soft)!important;border-color:var(--gc-line)!important;padding:15px!important}
html[data-control-design] .dv2-panel{padding:24px!important}
html[data-control-design] .dv3-range-item{border-radius:17px!important;padding:18px!important}
html[data-control-design] .dv3-range-item.base{background:var(--gc-purple-soft)!important;border-color:color-mix(in srgb,var(--gc-purple) 20%,var(--gc-line))!important}
html[data-control-design] .dv3-range-item.base strong{color:var(--gc-purple)}
html[data-control-design] .dv3-location{border-radius:20px!important;background:var(--gc-soft)!important;border-color:var(--gc-line)!important;box-shadow:none!important}
html[data-control-design] .dv3-point{border-radius:15px!important;background:var(--gc-surface)!important;border:1px solid var(--gc-line)!important;box-shadow:none!important}
html[data-control-design] .dv3-point-logo{border-radius:12px!important;background:#fff!important}
html[data-control-design] :is(.sv2-hero,.staff-hero){background:var(--gc-gradient)!important}
html[data-control-design] .sv2-card{padding:24px!important}
html[data-control-design] .sv2-card:nth-child(3n+2){border-top:3px solid color-mix(in srgb,var(--gc-purple) 35%,var(--gc-line))!important}
html[data-control-design] .sv2-card:nth-child(3n){border-top:3px solid color-mix(in srgb,var(--gc-green) 35%,var(--gc-line))!important}

/* Standalone sign-in, PIN, recovery, registration and errors. */
html[data-control-auth] body{min-height:100dvh!important;height:auto!important;overflow-y:auto!important;padding:24px 16px!important}
html[data-control-auth] :is(.login-card,.lock-wrap,.register-card,.error-card,body>main,.forgot-card){background:var(--gc-surface)!important;color:var(--gc-ink)!important;border:1px solid var(--gc-line)!important;border-radius:30px!important;box-shadow:0 20px 70px #25316d0c!important;max-width:min(460px,100%)!important;padding:clamp(22px,5vw,34px)!important}
html[data-control-auth] :is(.login-wrap,.lock-wrap){margin:auto!important}
html[data-control-auth] :is(.logo-box,.lock-logo){background:transparent!important;box-shadow:none!important}
html[data-control-auth] :is(.subtitle,.lock-hint,.lock-user,.faceid-hint,.footer,p,small,label){color:var(--gc-muted)!important}
html[data-control-auth] :is(.pin-key,.desktop-pin-field button){background:var(--gc-soft)!important;border-color:var(--gc-line)!important;color:var(--gc-ink)!important;border-radius:20px!important;box-shadow:none!important}
html[data-control-auth] .pin-key:active{background:var(--gc-blue-soft)!important}
html[data-control-auth] .pin-dot{border-color:var(--gc-line)!important;background:var(--gc-soft)}
html[data-control-auth] .pin-dot.filled{background:var(--gc-blue)!important;border-color:var(--gc-blue)!important}
html[data-control-auth] :is(.btn-main,button[type=submit]){min-height:48px;border-radius:15px!important;font-weight:650}
html[data-control-auth] a{color:var(--gc-blue)!important}
html[data-control-auth] .auth-password-toggle{border:0!important;background:transparent!important;border-radius:10px!important;color:var(--gc-muted)!important}
html[data-control-design] :is(.ux-graphs-hero,.staff-hero){border-radius:26px!important;background:var(--gc-gradient)!important;border:1px solid var(--gc-line)!important;padding:26px!important;color:var(--gc-ink)!important}
html[data-control-design] .ux-graph-summary{background:var(--gc-surface)!important;border:1px solid var(--gc-line)!important;border-radius:18px!important;color:var(--gc-ink)!important}
html[data-control-design] :is(.ux-chart-shell,.staff-edit,.staff-result-card,.staff-risk-card,.staff-qr-card){background:var(--gc-surface)!important;border-color:var(--gc-line)!important;border-radius:18px!important;color:var(--gc-ink)!important}
html[data-control-design] :is(.staff-muted,.staff-kicker,.ux-graph-kicker,.stat-label,.stat-sub){color:var(--gc-muted)!important}
html[data-control-design] :is(.period-tabs,.staff-directory-tools){background:var(--gc-soft)!important;border-color:var(--gc-line)!important;border-radius:16px!important}
html[data-control-design] :is(.period-tab,.chip,.ux-chart-mode){border-radius:11px!important;color:var(--gc-muted)!important;border-color:var(--gc-line)!important}
html[data-control-design] :is(.period-tab.active,.chip.active,.ux-chart-mode.is-active){color:var(--gc-purple)!important;background:var(--gc-purple-soft)!important;border-color:transparent!important}
html[data-control-design] :is(.plans-save-bar,.staff-pagination){background:var(--gc-surface)!important;border-color:var(--gc-line)!important;border-radius:18px!important}

/* Motion is decorative: no delay before controls become available. */
html[data-control-design] :is(.btn,.btn-main,.app-launcher a,.v2-mobile-nav a,.v2-mobile-nav button,.workspace-actions a){transition:transform .16s ease,background-color .18s ease,box-shadow .18s ease}
html[data-control-design] :is(.btn,.btn-main,.v2-mobile-nav a,.v2-mobile-nav button):active{transform:scale(.97)}
html[data-control-design] .gc-arrive{animation:gc-arrive .5s cubic-bezier(.2,.7,.25,1) both;animation-delay:var(--gc-delay,0ms)}
@keyframes gc-arrive{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(hover:hover){html[data-control-design] :is(.dv3-point,.workspace-actions a,.v2-more-grid a):hover{border-color:color-mix(in srgb,var(--gc-blue) 35%,var(--gc-line))!important;box-shadow:0 6px 18px #4367c80c!important}}
@media(min-width:769px){html[data-control-design] .app-shell{padding-top:100px!important}html[data-control-design] .app-launcher a[href="/graphs"].active{background:var(--gc-purple-soft)!important;color:var(--gc-purple)!important}html[data-control-design] .app-launcher a[href="/staff"].active{background:var(--gc-green-soft)!important;color:var(--gc-green)!important}}
@media(max-width:768px){
  html[data-control-design] .app-shell{padding: max(14px,env(safe-area-inset-top)) 16px 28px!important}
  html[data-control-design] .title-bar{position:relative!important;top:auto!important;margin-bottom:20px!important;padding-bottom:18px!important;backdrop-filter:none!important}
  html[data-control-design] :is(.card,.glass-card,.dv2-primary,.dv2-panel,.sv2-card,.staff-card,.workspace-tools,.workspace-attention){border-radius:23px!important}
  html[data-control-design] :is(.dv2-primary,.dv2-panel,.sv2-card){padding:22px!important}
  html[data-control-design] .dv2-revenue{font-size:clamp(34px,10vw,46px)!important}
  html[data-control-design] .dv2-side{grid-template-columns:1fr!important;gap:3px!important}
  html[data-control-design] .dv2-side-row{display:grid!important;grid-template-columns:36px minmax(0,1fr)!important;align-items:center!important;gap:10px!important;padding:14px!important}
  html[data-control-design] .dv2-side-label{font-size:10px!important}
  html[data-control-design] .dv2-side-value{font-size:21px!important}
  html[data-control-design] .workspace-row label{flex:1 1 130px;min-width:0}
  html[data-control-design] .workspace-row :is(input,select){width:100%;min-width:0!important;max-width:100%;font-size:16px!important}
  html[data-control-design] #workspaceSearchOpen{margin-left:0;flex:1}
  html[data-control-design] .workspace-actions{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
  html[data-control-design] .workspace-actions a{flex:0 0 auto;white-space:nowrap}
  html[data-control-design] .v2-mobile-nav{left:14px!important;right:14px!important;bottom:max(12px,env(safe-area-inset-bottom))!important;border-radius:25px!important;padding:7px!important;background:color-mix(in srgb,var(--gc-surface) 94%,transparent)!important;border-color:var(--gc-line)!important;box-shadow:0 8px 40px #1d1d1f14!important}
  html[data-control-design] .v2-mobile-nav :is(a,button){border-radius:18px!important;font-weight:550!important;font-size:10px!important;min-height:49px}
  html[data-control-design] .v2-mobile-nav a[href="/graphs"].active{background:var(--gc-purple-soft)!important;color:var(--gc-purple)!important}
  html[data-control-design] .v2-mobile-nav a[href="/plans"].active{background:var(--gc-green-soft)!important;color:var(--gc-green)!important}
  html[data-control-design] .v2-more-sheet{border-radius:28px 28px 0 0!important;padding-bottom:calc(22px + env(safe-area-inset-bottom))!important}
  html[data-control-design] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){font-size:16px!important}
  html[data-control-design] table :is(input,select){font-size:14px!important}
}
@media(max-width:380px){html[data-control-design] .app-shell{padding-left:12px!important;padding-right:12px!important}html[data-control-design] .dv3-range{grid-template-columns:1fr!important}html[data-control-design] .dv2-side-row{grid-template-columns:32px minmax(0,1fr)!important}html[data-control-design] .dv2-side-value{font-size:19px!important}}
@media(prefers-reduced-motion:reduce){html[data-control-design] .gc-arrive{animation:none!important}html[data-control-design] :is(.btn,.btn-main,.app-launcher a,.v2-mobile-nav a,.v2-mobile-nav button){transition:none!important;transform:none!important}}
@media print{html[data-control-design] body{background:#fff!important;color:#000!important}.gc-arrive{animation:none!important;opacity:1!important;transform:none!important}}

/* Full month names must fit the native iOS month control. */
html[data-control-design] .workspace-row label:nth-child(2){min-width:210px;max-width:none!important}
html[data-control-design] #workspaceMonth{width:100%;min-width:0!important;box-sizing:border-box}
html[data-control-design] #workspaceMonth::-webkit-date-and-time-value{text-align:left;min-width:0}
@media(max-width:600px){
  html[data-control-design] .workspace-row{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:12px}
  html[data-control-design] .workspace-row label{grid-column:1/-1;min-width:0!important;max-width:none!important;width:100%}
  html[data-control-design] .workspace-row label:first-child{min-width:0!important}
  html[data-control-design] #workspaceSearchOpen{min-width:0;gap:5px;padding:8px;font-size:12px}
  html[data-control-design] #workspaceApply{min-width:0;width:100%}
}