:root {
  --pc-ink: #0f172a;
  --pc-blue: #2563eb;
  --pc-cyan: #22d3ee;
  --pc-amber: #f59e0b;
  --pc-soft: #eff6ff;
}

.topbar {
  min-height:68px;
  height:auto;
  display:grid;
  grid-template-columns:minmax(300px,max-content) minmax(0,1fr);
  align-items:center;
  gap:clamp(14px,1.8vw,34px);
  padding:8px clamp(18px,2.2vw,42px);
  border-bottom:1px solid rgba(148,163,184,.16);
  background:linear-gradient(105deg,#0b1327 0%,#0f172a 58%,#111d35 100%);
  box-shadow:0 8px 26px rgba(2,8,23,.18);
}
.brand-cluster { display:flex; align-items:center; gap:10px; min-width:0; }
.brand-cluster .brand {
  min-width:0;
  overflow:hidden;
  color:#f8fafc;
  font-size:clamp(14px,1vw,17px);
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.topbar .primary-nav {
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:clamp(3px,.45vw,9px);
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 1px 5px;
  overscroll-behavior-inline:contain;
  scrollbar-color:rgba(148,163,184,.55) transparent;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.topbar .primary-nav::-webkit-scrollbar { height:5px; }
.topbar .primary-nav::-webkit-scrollbar-track { background:transparent; }
.topbar .primary-nav::-webkit-scrollbar-thumb { border-radius:999px; background:rgba(148,163,184,.5); }
.topbar .primary-nav a {
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:7px clamp(6px,.5vw,10px);
  border:1px solid transparent;
  border-radius:10px;
  color:#dbe5f3;
  font-size:clamp(12px,.72vw,14px);
  font-weight:700;
  line-height:1;
  opacity:.9;
  white-space:nowrap;
  word-break:keep-all;
}
.topbar .primary-nav a:hover {
  border-color:rgba(147,197,253,.18);
  background:rgba(59,130,246,.12);
  color:#fff;
  opacity:1;
}
.topbar .primary-nav a:focus-visible {
  outline:3px solid #67e8f9;
  outline-offset:1px;
  background:rgba(37,99,235,.24);
  color:#fff;
}
.brand-kb-trigger { width:34px; height:34px; display:grid; place-items:center; padding:0; border:0; border-radius:11px; background:rgba(255,255,255,.09); cursor:pointer; }
.brand-kb-trigger img { width:27px; height:27px; object-fit:contain; }
.brand-kb-trigger:focus-visible { outline:3px solid var(--pc-cyan); outline-offset:2px; }
.phase-version { display:inline-flex; align-items:center; padding:4px 8px; border:1px solid rgba(147,197,253,.26); border-radius:999px; color:#bfdbfe; font-size:10px; font-weight:800; letter-spacing:.04em; }

.login-page.phase-c-login { min-height:calc(100vh - 56px); padding:32px 0; }
.login-experience { width:min(1060px,96vw); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); gap:24px; align-items:stretch; }
.login-robot-panel { position:relative; min-height:600px; overflow:hidden; border:1px solid rgba(147,197,253,.35); border-radius:34px; padding:34px; color:#e2e8f0; background:radial-gradient(circle at 55% 18%,rgba(34,211,238,.2),transparent 32%),linear-gradient(145deg,#0b1730,#111d3c 58%,#1e3a5f); box-shadow:0 30px 90px rgba(15,23,42,.22); }
.login-robot-panel::after { content:""; position:absolute; inset:auto -20% -38% -20%; height:58%; border-radius:50%; background:radial-gradient(ellipse,rgba(37,99,235,.44),transparent 68%); pointer-events:none; }
.login-robot-copy { position:relative; z-index:3; max-width:470px; }
.login-robot-copy .eyebrow { display:inline-flex; padding:6px 9px; border:1px solid rgba(125,211,252,.35); border-radius:999px; color:#a5f3fc; font-size:11px; font-weight:850; letter-spacing:.12em; }
.login-robot-copy h2 { margin:16px 0 8px; color:#fff; font-size:clamp(30px,4vw,48px); line-height:1.06; }
.login-robot-copy p { margin:0; color:#b9c9dd; line-height:1.7; }
.login-robot-stage { position:absolute; z-index:2; inset:145px 0 108px; display:grid; place-items:center; }
.login-robot-stage canvas { width:100%!important; height:100%!important; display:block; }
.login-robot-fallback { position:relative; width:210px; height:250px; filter:drop-shadow(0 28px 24px rgba(2,8,23,.45)); animation:pcBotFloat 3s ease-in-out infinite; }
.pc-bot-antenna { position:absolute; left:101px; top:5px; width:8px; height:39px; border-radius:10px; background:#93e8f4; }
.pc-bot-antenna::after { content:""; position:absolute; left:-7px; top:-8px; width:22px; height:22px; border-radius:50%; background:#fbbf24; box-shadow:0 0 22px #f59e0b; }
.pc-bot-head { position:absolute; left:30px; top:40px; width:150px; height:112px; border:5px solid #9beafb; border-radius:46px 46px 38px 38px; background:linear-gradient(145deg,#dffbff 0 18%,#4cc9ee 19% 34%,#2563eb 35% 100%); box-shadow:inset 0 5px 4px rgba(255,255,255,.5),0 20px 32px rgba(2,8,23,.35); }
.pc-bot-face { position:absolute; inset:29px 18px 22px; border-radius:25px; background:#081426; box-shadow:inset 0 4px 18px rgba(34,211,238,.24); }
.pc-bot-eye { position:absolute; top:27px; width:21px; height:25px; border-radius:55%; background:#91f4ff; box-shadow:0 0 16px #22d3ee; transition:transform .16s ease; }
.pc-bot-eye.left { left:25px; }.pc-bot-eye.right { right:25px; }
.pc-bot-mouth { position:absolute; left:44px; top:61px; width:24px; height:10px; border-bottom:4px solid #7dd3fc; border-radius:0 0 30px 30px; }
.pc-bot-body { position:absolute; left:47px; top:155px; width:116px; height:83px; border:4px solid #93c5fd; border-radius:31px 31px 48px 48px; background:linear-gradient(145deg,#3b82f6,#162b61); box-shadow:0 20px 32px rgba(2,8,23,.36); }
.pc-bot-core { position:absolute; left:38px; top:21px; width:34px; height:34px; border:7px solid #fde68a; border-radius:50%; background:#f59e0b; box-shadow:0 0 24px rgba(245,158,11,.75); }
.pc-bot-ear { position:absolute; top:74px; width:30px; height:54px; border:4px solid #7dd3fc; border-radius:13px; background:#1e40af; }
.pc-bot-ear.left { left:5px; }.pc-bot-ear.right { right:5px; }
.login-role-actions { position:absolute; z-index:4; left:30px; right:30px; bottom:27px; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.login-role-actions button { min-height:62px; padding:9px; border:1px solid rgba(147,197,253,.32); border-radius:17px; background:rgba(15,23,42,.55); color:#e2e8f0; cursor:pointer; backdrop-filter:blur(8px); }
.login-role-actions button b,.login-role-actions button span { display:block; }
.login-role-actions button span { margin-top:4px; color:#9fb2ca; font-size:10px; }
.login-role-actions button:hover,.login-role-actions button:focus-visible,.login-role-actions button.is-active { border-color:#67e8f9; background:rgba(37,99,235,.48); outline:none; transform:translateY(-2px); }
.login-card.phase-c-card { align-self:stretch; width:auto; display:flex; flex-direction:column; justify-content:center; }
.login-security-note { display:flex; gap:9px; align-items:flex-start; margin-top:22px; padding:12px; border:1px solid #dbeafe; border-radius:14px; background:#f8fbff; color:#526279; font-size:11px; line-height:1.5; }
.login-security-note b { color:#1d4ed8; }
.pc-login-status { min-height:20px; margin:12px 0 0; color:#93c5fd; font-size:12px; font-weight:700; }

.pc-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.pc-page-head h1 { margin:4px 0 5px; }
.pc-eyebrow { color:#2563eb; font-size:11px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.pc-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:16px; }
.pc-card { grid-column:span 4; padding:20px; border:1px solid #dbe3ef; border-radius:22px; background:#fff; box-shadow:0 12px 34px rgba(15,23,42,.055); }
.pc-card.wide { grid-column:span 8; }.pc-card.full { grid-column:1/-1; }
.pc-card h2,.pc-card h3 { margin:0 0 10px; }
.pc-stat { font-size:34px; font-weight:900; color:#0f172a; }
.pc-muted { color:#64748b; }
.pc-status { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border-radius:999px; background:#e2e8f0; color:#334155; font-size:11px; font-weight:850; }
.pc-status.ok { background:#dcfce7; color:#166534; }.pc-status.warn { background:#fef3c7; color:#92400e; }.pc-status.bad { background:#fee2e2; color:#991b1b; }
.pc-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:12px 0; }
.pc-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.pc-form-grid .full { grid-column:1/-1; }
.pc-lock-screen { width:min(560px,94vw); margin:8vh auto; padding:30px; border:1px solid #dbe3ef; border-radius:28px; background:#fff; box-shadow:0 24px 80px rgba(15,23,42,.13); }
.pc-lock-screen h1 { margin:8px 0; }
.pc-signature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; }
.pc-signature-grid div { min-height:64px; border-top:1px solid #94a3b8; padding-top:7px; color:#64748b; font-size:11px; }

.wf-filter-bar,.wf-person-head,.wf-table-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.wf-filter-bar label:first-child { flex:1 1 280px; }
.wf-filter-bar input[type="text"],.wf-filter-bar input:not([type]) { width:100%; }
.wf-check { display:flex!important; align-items:center; gap:7px; }
.wf-check input { width:auto!important; }
.wf-people-list { display:grid; gap:16px; margin-top:16px; }
.wf-person-card { margin:0; }
.wf-person-head { justify-content:space-between; padding-bottom:15px; border-bottom:1px solid #e2e8f0; }
.wf-person-head h2 { display:inline; margin-left:8px; }
.wf-skill-summary { display:grid; gap:3px; min-width:220px; padding:10px 13px; border-radius:14px; background:#eff6ff; color:#1e3a8a; }
.wf-skill-summary span { color:#475569; font-size:12px; }
.wf-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:16px; }
.wf-inline-form { display:grid; align-content:start; gap:10px; padding:14px; border:1px solid #dbe3ef; border-radius:16px; background:#f8fafc; }
.wf-inline-form h3 { margin:0; font-size:15px; }
.wf-inline-form label { display:grid; gap:5px; color:#475569; font-size:12px; font-weight:700; }
.wf-time-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.wf-help,.wf-form-status,.wf-id { display:block; margin:0; color:#64748b; font-size:11px; line-height:1.5; }
.wf-form-status { min-height:17px; color:#166534; font-weight:800; }
.wf-form-status.is-error { color:#b91c1c; }
.wf-danger-zone { border-color:#fecaca; background:#fff7f7; }
.wf-approval summary { color:#1d4ed8; font-weight:800; cursor:pointer; }
.wf-approval form { display:grid; gap:8px; min-width:260px; padding:10px 0; }
.wf-approval label { display:grid; gap:3px; }
.wf-fieldset { min-width:0; padding:14px; border:1px solid #dbe3ef; border-radius:16px; }
.wf-fieldset legend { padding:0 7px; color:#334155; font-weight:850; }
.wf-distribution-grid { display:grid; grid-template-columns:repeat(6,minmax(80px,1fr)); gap:8px; }
.wf-distribution-grid label { position:relative; }
.wf-distribution-grid label span { position:absolute; right:9px; bottom:10px; color:#94a3b8; }
.wf-distribution-grid input { padding-right:25px; }
.wf-distribution-total { margin:9px 0 0; color:#166534; }
.wf-fieldset.is-invalid { border-color:#ef4444; background:#fef2f2; }
.wf-fieldset.is-invalid .wf-distribution-total { color:#b91c1c; }
.wf-lock-note { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1px solid #bfdbfe; border-radius:15px; background:#eff6ff; color:#334155; }
.wf-lock-note b { color:#1d4ed8; white-space:nowrap; }
.wf-edit-table input:not([type="checkbox"]) { min-width:112px; width:100%; }
.wf-edit-table td:first-child input { min-width:180px; }
.wf-edit-table td:nth-child(2) input { min-width:160px; }
.wf-table-actions { gap:6px; }
.wf-table-actions .btn { padding:7px 9px; font-size:11px; }

@keyframes pcBotFloat { 0%,100%{transform:translateY(4px)} 50%{transform:translateY(-8px)} }
@media (prefers-reduced-motion:reduce) { .login-robot-fallback { animation:none; } }
@media (max-width:1560px) {
  .topbar {
    grid-template-columns:minmax(0,1fr);
    align-items:stretch;
    gap:5px;
    padding-block:9px 6px;
  }
  .topbar .primary-nav {
    justify-content:flex-start;
    border-top:1px solid rgba(148,163,184,.12);
  }
}
@media (max-width:860px) {
  .topbar {
    display:grid;
    min-height:0;
    padding:9px 12px 5px;
  }
  .brand-cluster { width:100%; }
  .brand-cluster .brand { font-size:13px; }
  .topbar .primary-nav {
    width:100%;
    flex-wrap:nowrap;
    gap:3px;
    padding-bottom:6px;
  }
  .topbar .primary-nav a { min-height:36px; padding:7px 9px; font-size:12px; }
  .login-experience { grid-template-columns:1fr; }
  .login-robot-panel { min-height:470px; }
  .login-robot-stage { inset:125px 0 85px; transform:scale(.78); }
  .login-role-actions { left:18px; right:18px; bottom:18px; }
  .phase-version { display:none; }
  .pc-card,.pc-card.wide { grid-column:1/-1; }
  .pc-form-grid,.pc-signature-grid { grid-template-columns:1fr; }
  .wf-action-grid { grid-template-columns:1fr; }
  .wf-distribution-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}