:root {
    --primary: #1d6fe8;
    --bg: #f5f7fb;
    --card: #ffffff;
    --text: #1b2b3a;
    --muted: #6b7280;
    --border: #e5e7eb;
}
* { box-sizing: border-box; }
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; margin:0; background:var(--bg); color:var(--text); }
a { color: var(--primary); text-decoration: none; }
.layout { display:flex; min-height:100vh; }
.sidebar { width:240px; background:#0f172a; color:#fff; padding:24px 16px; position:sticky; top:0; height:100vh; }
.sidebar .brand { font-size:20px; font-weight:700; margin-bottom:24px; }
.nav-link { display:block; padding:10px 12px; border-radius:10px; color:#e2e8f0; margin-bottom:6px; }
.nav-link:hover { background:rgba(255,255,255,0.08); }
.user-box { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.avatar-circle { width:40px; height:40px; border-radius:50%; background:var(--primary); display:grid; place-items:center; color:#fff; font-weight:700; }
.main { flex:1; display:flex; flex-direction:column; }
.topbar { height:64px; background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.topbar-right { display:flex; align-items:center; gap:10px; }
.lang-toggle { padding:6px 8px; border-radius:8px; border:1px solid var(--border); }
.content { padding:24px; }
.card { background:var(--card); border-radius:16px; padding:20px; box-shadow:0 10px 30px rgba(15,23,42,0.08); margin-bottom:16px; }
.card-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.grid { display:grid; gap:16px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.gradient { background: linear-gradient(135deg, #1d6fe8, #60a5fa); color:#fff; }
.stats { display:flex; gap:16px; }
.stats div { flex:1; }
.pill { display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(29,111,232,0.1); color:#1d6fe8; font-weight:600; }
.table { width:100%; }
.table-row { display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); align-items:center; padding:10px 0; border-bottom:1px solid var(--border); }
.table-row.head { font-weight:700; color:var(--muted); border-bottom:2px solid var(--border); }
.primary-btn { background:var(--primary); color:#fff; border:none; border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer; box-shadow:0 10px 20px rgba(29,111,232,0.25); transition:transform .15s ease; }
.primary-btn:hover { transform: translateY(-1px); }
.ghost-btn { background:transparent; border:1px solid var(--border); border-radius:12px; padding:8px 12px; cursor:pointer; }
.small { font-size:14px; }
.muted { color:var(--muted); }
.inline-form { display:flex; gap:8px; align-items:center; }
.input, input, select, textarea { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#fff; }
.alert { padding:10px 12px; border-radius:10px; margin-bottom:10px; }
.alert.success { background:#ecfdf3; color:#166534; }
.alert.error { background:#fef2f2; color:#991b1b; }
.auth-page { display:grid; place-items:center; min-height:100vh; background:linear-gradient(135deg,#1d6fe8,#60a5fa); }
.auth-card { width:360px; max-width:90vw; background:#fff; padding:28px; border-radius:16px; box-shadow:0 20px 40px rgba(0,0,0,0.2); }
.auth-card h1 { margin-top:0; }
.card.cube-card { position:relative; overflow:hidden; }
.cube-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.cube { background:linear-gradient(145deg,#eef2ff,#dbeafe); border-radius:14px; padding:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.8); }
.quote { font-size:18px; font-weight:600; }
.task-list { display:flex; flex-direction:column; gap:10px; }
.task-item { padding:12px; border:1px solid var(--border); border-radius:12px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.chat-thread { border:1px solid var(--border); border-radius:12px; padding:12px; max-height:320px; overflow:auto; display:flex; flex-direction:column; gap:8px; background:#f8fafc; }
.chat-bubble { padding:10px; border-radius:12px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
.chat-bubble.admin { border-left:3px solid var(--primary); }
.chat-bubble.client { border-left:3px solid #10b981; }
.chat-form { margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.cube-card::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 20%, rgba(255,255,255,0.4), transparent 35%); pointer-events:none; }
#menuToggle { display:none; }
.footer { padding:16px 24px; color:var(--muted); }
@media (max-width: 900px) {
    .sidebar { position:fixed; left:-260px; transition:left .2s ease; z-index:20; }
    .sidebar.open { left:0; }
    #menuToggle { display:inline-flex; }
}

.status-pill {
    border: none;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
}

.status-pill.active {
    background: #e8f1ff;
    color: #2563eb;
}

.status-pill.inactive {
    background: #fdecea;
    color: #dc2626;
}
.pill.active { background: #e8f1ff; color: #2563eb; }
.pill.inactive { background: #fdecea; color: #dc2626; }

.grid.four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

@media (max-width: 1100px) {
  .grid.four { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .grid.four { grid-template-columns: 1fr; }
}
.pill.pending { background:#fff3cd; color:#856404; }
.pill.open { background:#e7f1ff; color:#0d6efd; }
.pill.closed { background:#e6f4ea; color:#198754; }