*{box-sizing:border-box}:root{--bg:#f3f6fb;--surface:#ffffff;--surface-soft:#f8fbff;--border:#dbe4f0;--text:#162033;--muted:#657188;--primary:#2457f5;--primary-dark:#1a43bf;--success:#0f9d6c;--danger:#d54646;--warning:#de8c18;--shadow:0 12px 32px rgba(17,35,74,.08);--radius:18px}
html,body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
#app{min-height:100vh;display:grid;grid-template-columns:270px 1fr}.hidden{display:none!important}button,input,select{font:inherit}
.sidebar{background:linear-gradient(180deg,#183fbd 0%,#1f58e0 100%);color:#fff;padding:22px 18px;display:flex;flex-direction:column;gap:18px}
.brand{display:flex;align-items:center;gap:14px;padding-bottom:8px}.brand h1{margin:0;font-size:1.18rem;line-height:1.1}.brand p{margin:4px 0 0;color:rgba(255,255,255,.84);font-size:.92rem}
.brand-badge{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-weight:700;border:1px solid rgba(255,255,255,.18)}
.nav{display:flex;flex-direction:column;gap:18px}.nav-group{display:flex;flex-direction:column;gap:6px}.nav-group-title{font-size:.72rem;font-weight:700;letter-spacing:.08em;opacity:.72;padding:0 12px 4px}
.nav-link{text-align:left;border:none;background:transparent;color:rgba(255,255,255,.94);padding:12px 14px;border-radius:12px;cursor:pointer;font-weight:600}.nav-link:hover{background:rgba(255,255,255,.12)}.nav-link.active{background:rgba(255,255,255,.18);color:#fff}
.sidebar-footer{margin-top:auto;padding:14px;border-radius:16px;background:rgba(255,255,255,.10)}#sessionInfo{font-size:.92rem;line-height:1.5;margin-bottom:10px;color:rgba(255,255,255,.95)}
.main{padding:28px}.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px;flex-wrap:wrap}.page-header h2{margin:0 0 8px;font-size:1.75rem}.page-header p{margin:0;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:20px}.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.card-head h3{margin:0}
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(760px,100%);background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);padding:28px}
.grid{display:grid;gap:14px}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}.grid.four{grid-template-columns:repeat(4,1fr)}.grid.five{grid-template-columns:repeat(5,1fr)}.span-2{grid-column:span 2}.span-4{grid-column:span 4}
.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:.92rem;font-weight:700}.field input,.field select,.inline-form input{min-height:46px;border:1px solid var(--border);border-radius:12px;background:#fff;padding:11px 13px}.field input:focus,.field select:focus,.inline-form input:focus{outline:2px solid rgba(36,87,245,.14);border-color:var(--primary)}
.inline-form{display:grid;grid-template-columns:1fr 140px;gap:12px;margin-bottom:18px}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.actions.wrap{flex-wrap:wrap}
.btn{appearance:none;border:none;background:var(--primary);color:#fff;font-weight:700;border-radius:12px;padding:12px 16px;cursor:pointer;min-height:46px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.btn:hover{background:var(--primary-dark)}.btn.secondary{background:#64748b}.btn.secondary:hover{background:#4e5b6f}.btn.success{background:var(--success)}.btn.success:hover{background:#0c865c}.btn.danger{background:var(--danger)}.btn.danger:hover{background:#bd3838}.btn.warning{background:var(--warning)}.btn.warning:hover{background:#c57810}.btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22)}.btn.ghost.full{width:100%}
.notice{display:none;margin-top:14px;border-radius:12px;padding:12px 14px;font-weight:700}.notice.show{display:block}.notice.success{background:#dff6ec;color:#0b6a49}.notice.error{background:#fde7e7;color:#a02525}.helper,.muted{color:var(--muted);line-height:1.6}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.stat-card span{display:block;color:var(--muted);font-size:.92rem;margin-bottom:8px}.stat-card strong{font-size:1.7rem}
.stack{display:flex;flex-direction:column;gap:12px}.stack-item{border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--surface-soft)}.stack-item strong{display:block;margin-bottom:6px}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:16px}.data-table{width:100%;border-collapse:collapse;min-width:1000px}.data-table th,.data-table td{padding:12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:middle}.data-table th{background:#f8fbff;font-size:.92rem}
.tag{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:.85rem;font-weight:700}.tag.ok{background:#e2f6ed;color:#0c7b54}.tag.low{background:#fff2d8;color:#a86d08}.tag.out{background:#fde6e6;color:#b73434}
.summary-panel{margin-top:18px;border:1px dashed var(--border);border-radius:16px;background:var(--surface-soft);padding:16px}.summary-line{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}.summary-line strong{font-size:1.1rem}
.small-actions{display:flex;gap:8px;flex-wrap:wrap}.small-btn{border:none;border-radius:10px;padding:8px 10px;cursor:pointer;font-weight:700}.small-btn.edit{background:#2457f5;color:#fff}.small-btn.remove{background:#d54646;color:#fff}.small-btn.plus{background:#64748b;color:#fff}
.pending-meta{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:8px}.pending-chip{background:#eef3ff;border:1px solid #d9e4ff;border-radius:12px;padding:10px 12px}.pending-chip span{display:block;color:var(--muted);font-size:.8rem;margin-bottom:4px}.pending-chip strong{font-size:.92rem}
@media (max-width:1150px){#app{grid-template-columns:1fr}.grid.two,.grid.three,.grid.four,.grid.five,.stats-grid,.inline-form,.pending-meta{grid-template-columns:1fr}.span-2,.span-4{grid-column:auto}.main{padding:18px}.data-table{min-width:760px}}