@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --ink:#1E262B; --ink-soft:#3A464C; --panel:#FFFFFF; --paper:#F4F1E8; --line:#DCD6C7;
  --amber:#E19A2E; --amber-dark:#8A5A0F; --teal:#2E7C6B; --teal-dark:#1B4D42; --rust:#C24A2C; --rust-dark:#7A2B18;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);}
.display{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}

.layout{display:flex;min-height:100vh;}
.sidebar{width:220px;flex-shrink:0;background:var(--ink);color:#EFEDE4;padding:20px 14px;display:flex;flex-direction:column;}
.sidebar .brand-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;color:#8C948E;}
.sidebar .brand-title{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;margin-bottom:26px;}
.nav-item{display:block;padding:10px 14px;border-radius:3px;font-size:13px;font-weight:500;color:#C9CFCB;text-decoration:none;margin-bottom:3px;}
.nav-item:hover{background:rgba(255,255,255,.06);}
.nav-item.active{background:var(--amber);color:#3A2400;}
.sidebar-footer{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;margin-top:auto;}
.sidebar-footer .name{font-size:12px;font-weight:600;}
.sidebar-footer .role{font-size:11px;color:#8C948E;margin-bottom:10px;}
.main{flex:1;padding:28px 34px;max-width:1100px;}

.btn{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;padding:9px 16px;border-radius:3px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none;display:inline-block;}
.btn:hover{background:var(--ink-soft);}
.btn.ghost{background:transparent;color:var(--ink);}
.btn.ghost:hover{background:rgba(0,0,0,.05);}
.btn.amber{background:var(--amber);border-color:var(--amber-dark);color:#3A2400;}
.btn.amber:hover{background:#cf8b28;}
.btn.rust{background:transparent;border-color:var(--rust);color:var(--rust-dark);}
.btn.small{font-size:12px;padding:6px 12px;}
.btn[disabled]{opacity:.4;cursor:not-allowed;}

input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=datetime-local],select,textarea{
  font-family:'Inter',sans-serif;font-size:13px;padding:8px 10px;border:1.5px solid var(--line);border-radius:3px;background:var(--panel);color:var(--ink);width:100%;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);}
label.field-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);display:block;margin-bottom:5px;}

.card{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:16px 18px;}
.card-link{display:block;text-decoration:none;color:inherit;transition:border-color .15s ease,transform .1s ease;cursor:pointer;}
.card-link:hover{border-color:var(--ink);}
.card-link:active{transform:scale(.98);}
.grid{display:grid;gap:12px;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);}

.metric-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);margin-bottom:8px;}
.metric-value{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:700;}
.metric-value.amber{color:var(--amber-dark);}
.metric-value.rust{color:var(--rust-dark);}
.metric-value.teal{color:var(--teal-dark);}

.ticket{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--line);border-radius:4px;padding:16px 18px;margin-bottom:10px;position:relative;}
.ticket.st-published{border-left-color:var(--amber);}
.ticket.st-assigned,.ticket.st-in_progress{border-left-color:#8B7BC7;}
.ticket.st-paused{border-left-color:var(--rust);}
.ticket.st-closed{border-left-color:var(--teal);}
.ticket.st-overdue{border-left-color:var(--rust);}
.ticket-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px;}
.ticket-code{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);margin-bottom:3px;}
.ticket-title{font-weight:600;font-size:15px;}
.ticket-desc{font-size:13px;color:var(--ink-soft);margin-bottom:10px;line-height:1.5;}
.ticket-meta{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:12px;color:var(--ink-soft);}
.ticket-meta b{color:var(--ink);}
.ticket-actions{border-top:1px solid var(--line);padding-top:10px;margin-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}

.tag{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;padding:3px 8px;border-radius:2px;display:inline-block;letter-spacing:.02em;white-space:nowrap;}
.tag.published{background:#FBEBD3;color:var(--amber-dark);}
.tag.assigned,.tag.in_progress{background:#E9E5F7;color:#4B3B94;}
.tag.paused{background:#F6DCD3;color:var(--rust-dark);}
.tag.closed{background:#DCEEE9;color:var(--teal-dark);}
.tag.cancelled{background:#EDEAE0;color:var(--ink-soft);}
.tag.overdue{background:#F6DCD3;color:var(--rust-dark);}
.tag.neutral{background:#EDEAE0;color:var(--ink-soft);}

.section-title{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.section-title h1{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;margin:0;}
.section-title p{font-size:13px;color:var(--ink-soft);margin:2px 0 0;}

.filters{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.filters a{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;padding:6px 12px;border-radius:3px;border:1.5px solid var(--ink);text-decoration:none;color:var(--ink);}
.filters a.active{background:var(--ink);color:var(--paper);}

.alert{padding:10px 14px;border-radius:3px;font-size:13px;margin-bottom:16px;}
.alert.success{background:#DCEEE9;color:var(--teal-dark);}
.alert.error{background:#F6DCD3;color:var(--rust-dark);}

.empty{font-size:13px;color:var(--ink-soft);}
table.simple{width:100%;border-collapse:collapse;font-size:13px;}
table.simple th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding:8px 10px;border-bottom:1.5px solid var(--line);}
table.simple td{padding:10px;border-bottom:1px solid var(--line);}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 16px;}.login-box{max-width:420px;width:100%;}
.login-header{text-align:center;margin-bottom:24px;}
.user-pick{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;margin-bottom:10px;cursor:pointer;text-decoration:none;}
.user-pick .name{font-weight:600;font-size:14px;color:var(--ink);}
.user-pick .role{font-size:12px;color:var(--ink-soft);}

.mobile-topbar{display:none;}
.sidebar-backdrop{display:none;}

@media (max-width: 780px){
  .layout{flex-direction:column;}

  .mobile-topbar{
    display:flex;align-items:center;gap:14px;
    background:var(--ink);color:#EFEDE4;
    padding:13px 16px;position:fixed;top:0;left:0;right:0;z-index:110;
  }
  .mobile-topbar .hamburger{
    background:none;border:none;color:#EFEDE4;cursor:pointer;padding:2px;
    display:flex;align-items:center;justify-content:center;
  }
  .mobile-topbar .hamburger svg{display:block;}
  .mobile-topbar .brand-title{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;}

  .sidebar{
    position:fixed;top:0;left:0;bottom:0;width:250px;max-width:82vw;
    transform:translateX(-100%);transition:transform .25s ease;
    z-index:130;overflow-y:auto;
  }
  .sidebar.open{transform:translateX(0);}

  .sidebar-backdrop{
    display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(15,15,15,.45);
    opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:120;
  }
  .sidebar-backdrop.open{opacity:1;pointer-events:auto;}

  .main{padding:16px;padding-top:76px;max-width:100%;}
  .grid-4,.grid-5,.grid-3{grid-template-columns:repeat(2,1fr);}
}

@media (max-width: 420px){
  .grid-4,.grid-5,.grid-3,.grid-2{grid-template-columns:1fr;}
}

.pwa-install-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:150;
  background:var(--ink);color:#EFEDE4;border-radius:6px;
  padding:12px 14px;display:flex;align-items:center;gap:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:420px;margin:0 auto;
}
.pwa-install-icon{width:34px;height:34px;border-radius:6px;flex-shrink:0;object-fit:cover;}
.pwa-install-text{flex:1;font-size:13px;line-height:1.35;}
.pwa-install-btn{flex-shrink:0;}
.pwa-install-close{
  background:none;border:none;color:#9aa0a6;font-size:20px;line-height:1;
  cursor:pointer;padding:2px 4px;flex-shrink:0;
}