:root{
    --paper:#EEEBE2; --panel:#F8F6F0; --panel-raised:#FFFFFF;
    --ink:#1E2A24; --ink-soft:#5B665F; --ink-faint:#8A9088;
    --gold:#8C6A2E; --gold-strong:#6E5322; --gold-tint:#E6D9B8;
    --shu:#A93A2E; --shu-tint:#F1DAD5;
    --good:#3E6B4F; --good-tint:#DCE8DE;
    --line:#DAD4C4; --line-soft:#E5E0D2;
    --shadow: 0 1px 2px rgba(30,42,36,0.06), 0 8px 24px -12px rgba(30,42,36,0.18);
    --font-display:"Zen Old Mincho","Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
    --font-body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --paper:#12181A; --panel:#1A2123; --panel-raised:#20282A;
      --ink:#EAE6DC; --ink-soft:#A3ADA4; --ink-faint:#6E766F;
      --gold:#CBA45C; --gold-strong:#E4C077; --gold-tint:#3A331F;
      --shu:#D9776A; --shu-tint:#3A2521; --good:#7FB894; --good-tint:#1F2E24;
      --line:#2C3436; --line-soft:#232B2D;
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.55);
      color-scheme: dark;
    }
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;}
  h1,h2,h3{font-family:var(--font-display);font-weight:500;margin:0;color:var(--ink);}
  .num{font-variant-numeric:tabular-nums;}
  button{font:inherit;}
  button:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

  .app{display:flex;min-height:100vh;}
  .sidebar{width:224px;flex:none;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;padding:26px 18px;position:sticky;top:0;height:100vh;}
  @media (prefers-color-scheme:dark){.sidebar{background:#0C1011;}}
  .brand{display:flex;align-items:center;gap:12px;margin-bottom:34px;}
  .brand-mark{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--gold-strong);display:flex;align-items:center;justify-content:center;flex:none;}
  .brand-mark svg{width:15px;height:15px;}
  .brand-text .company{font-size:10.5px;letter-spacing:0.14em;color:rgba(238,235,226,0.55);}
  .brand-text .product{font-family:var(--font-display);font-size:18px;color:#F1EEE3;}
  .nav{display:flex;flex-direction:column;gap:2px;}
  .nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:13px;color:rgba(238,235,226,0.68);cursor:pointer;border:1px solid transparent;}
  .nav-item.active{background:rgba(203,164,92,0.14);border-color:rgba(203,164,92,0.35);color:#F1EEE3;}
  .nav-item:hover:not(.active){background:rgba(238,235,226,0.06);}
  .nav-item .dot{width:6px;height:6px;border-radius:50%;background:var(--shu);flex:none;display:none;}
  .nav-item .dot.show{display:block;}
  .sidebar-foot{margin-top:auto;padding-top:16px;border-top:1px solid rgba(238,235,226,0.14);font-size:11px;color:rgba(238,235,226,0.45);}

  .main{flex:1;min-width:0;padding:32px 40px 60px;max-width:1180px;}
  .topbar{margin-bottom:24px;}
  .topbar h1{font-size:24px;}
  .topbar .sub{font-size:12px;color:var(--ink-faint);margin-top:4px;}

  .empty-state{padding:56px 20px;text-align:center;color:var(--ink-faint);font-size:13.5px;background:var(--panel);border:1px dashed var(--line);border-radius:12px;}
  .loading{padding:40px;text-align:center;color:var(--ink-faint);font-size:13px;}

  .pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 9px;border-radius:20px;letter-spacing:0.02em;white-space:nowrap;}
  .pill-pending{background:var(--line-soft);color:var(--ink-soft);}
  .pill-approved{background:var(--good-tint);color:var(--good);font-weight:600;}
  .pill-rejected{background:var(--shu-tint);color:var(--shu);}
  .pill-warn{background:var(--shu-tint);color:var(--shu);}
  .pill-idle{background:var(--line-soft);color:var(--ink-faint);}
  .pill-working{background:var(--gold-tint);color:var(--gold-strong);font-weight:600;}
  .pill-blocked{background:var(--shu-tint);color:var(--shu);font-weight:600;}

  .queue-list{display:flex;flex-direction:column;gap:14px;}
  .queue-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;padding:20px 22px;box-shadow:var(--shadow);}
  .queue-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;}
  .queue-title{font-size:16.5px;font-family:var(--font-display);}
  .queue-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--ink-faint);}
  .queue-meta b{color:var(--ink-soft);font-weight:600;}
  .queue-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
  .queue-actions{display:flex;gap:10px;margin-top:16px;}
  .btn{font-size:12.5px;padding:8px 16px;border-radius:8px;border:1px solid var(--line);background:var(--panel-raised);color:var(--ink);cursor:pointer;}
  .btn:disabled{opacity:0.5;cursor:not-allowed;}
  .btn-approve{background:var(--ink);color:var(--paper);border-color:var(--ink);}
  @media (prefers-color-scheme:dark){.btn-approve{background:var(--gold);color:#181310;border-color:var(--gold);}}
  .btn-reject{color:var(--shu);border-color:var(--shu-tint);}

  section.block-title{display:flex;align-items:center;gap:10px;margin:26px 0 12px;}
  section.block-title:first-child{margin-top:0;}
  section.block-title h2{font-size:13px;letter-spacing:0.08em;color:var(--ink-soft);font-family:var(--font-body);font-weight:600;}
  section.block-title .rule{flex:1;height:1px;background:var(--line);}

  .staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
  .staff-card{background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;}
  .staff-top{display:flex;align-items:center;gap:12px;}
  .avatar{width:38px;height:38px;border-radius:50%;background:var(--gold-tint);border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:15px;color:var(--ink);flex:none;}
  .staff-name{font-size:14.5px;}
  .staff-role{font-size:11px;color:var(--ink-faint);}
  .staff-detail{font-size:12px;color:var(--ink-soft);border-top:1px solid var(--line-soft);padding-top:8px;}
  .staff-detail .row{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px;}
  .staff-detail .row .k{color:var(--ink-faint);}

  .split{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start;}
  .list-panel{background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;}
  .list-panel .group-label{font-size:11px;color:var(--ink-faint);letter-spacing:0.04em;padding:12px 16px 6px;}
  .list-panel .item{padding:10px 16px;font-size:12.5px;cursor:pointer;border-left:2px solid transparent;color:var(--ink-soft);}
  .list-panel .item:hover{background:var(--panel-raised);}
  .list-panel .item.active{border-left-color:var(--gold);background:var(--panel-raised);color:var(--ink);font-weight:600;}
  .content-panel{background:var(--panel);border:1px solid var(--line-soft);border-radius:12px;box-shadow:var(--shadow);padding:24px 26px;min-height:300px;}
  .content-panel pre{white-space:pre-wrap;word-break:break-word;font-family:var(--font-body);font-size:13px;line-height:1.8;margin:0;color:var(--ink-soft);}
  .content-panel .file-title{font-size:15px;font-family:var(--font-display);margin-bottom:14px;color:var(--ink);}

  @media (max-width:820px){
    .split{grid-template-columns:1fr;}
  }
  @media (max-width:760px){
    .app{flex-direction:column;}
    .sidebar{width:100%;height:auto;position:relative;flex-direction:row;align-items:center;padding:14px 16px;gap:16px;}
    .brand{margin-bottom:0;}
    .nav{flex-direction:row;overflow-x:auto;}
    .sidebar-foot{display:none;}
    .main{padding:20px 16px 40px;}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none !important;}}