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

:root{
  --charcoal: #1C2128;
  --charcoal-2: #262C35;
  --paper: #F5F3EE;
  --ink: #14181D;
  --amber: #F2A900;
  --amber-dim: #C98C00;
  --red: #C4432B;
  --green: #3F7556;
  --line: rgba(245,243,238,0.12);
  --line-dark: rgba(20,24,29,0.12);
  --font-display: 'Space Grotesk', 'Archivo', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--charcoal);
  color:var(--paper);
  font-family:var(--font-body);
  min-height:100vh;
}
.app{max-width:920px;margin:0 auto;padding:28px 20px 60px;}

header.top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:24px;flex-wrap:wrap;gap:14px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{
  width:38px;height:38px;border-radius:8px;background:var(--amber);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:600;color:var(--ink);font-size:13px;
  flex-shrink:0;
}
.brand h1{font-family:var(--font-display);font-size:18px;margin:0;font-weight:600;letter-spacing:-0.01em;}
.brand p{margin:1px 0 0;font-size:12px;color:rgba(245,243,238,0.55);font-family:var(--font-mono);}

.header-right{display:flex;align-items:center;gap:10px;}
nav.tabs{display:flex;gap:4px;background:var(--charcoal-2);border-radius:10px;padding:4px;border:1px solid var(--line);}
nav.tabs button{
  border:none;background:transparent;color:rgba(245,243,238,0.6);
  font-family:var(--font-display);font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:7px;cursor:pointer;transition:all .15s;
}
nav.tabs button.active{background:var(--amber);color:var(--ink);}
nav.tabs button:not(.active):hover{color:var(--paper);}

.logout-btn{
  background:transparent;border:1px solid var(--line);color:rgba(245,243,238,0.6);
  font-family:var(--font-mono);font-size:11px;padding:6px 12px;border-radius:7px;cursor:pointer;
}
.logout-btn:hover{color:var(--paper);border-color:rgba(245,243,238,0.4);}

.tag{
  position:relative;
  background:var(--paper);color:var(--ink);
  border-radius:10px;
  padding:16px 18px 16px 22px;
  margin-bottom:12px;
  display:flex;align-items:flex-start;gap:14px;
  border-left:5px solid var(--amber);
}
.tag.status-open{border-left-color:var(--red);}
.tag.status-progress{border-left-color:var(--amber);}
.tag.status-resolved{border-left-color:var(--green);opacity:0.7;}
.tag-id{font-family:var(--font-mono);font-size:11px;color:rgba(20,24,29,0.45);white-space:nowrap;padding-top:2px;}
.tag-body{flex:1;min-width:0;}
.tag-title{font-family:var(--font-display);font-weight:600;font-size:15px;margin:0 0 3px;}
.tag-meta{font-size:12px;color:rgba(20,24,29,0.55);margin:0 0 6px;font-family:var(--font-mono);}
.tag-desc{font-size:13.5px;line-height:1.45;margin:0;color:rgba(20,24,29,0.85);}
.tag-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-end;flex-shrink:0;}
.pill{
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  padding:4px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
.pill.open{background:rgba(196,67,43,0.12);color:var(--red);}
.pill.progress{background:rgba(242,169,0,0.15);color:var(--amber-dim);}
.pill.resolved{background:rgba(63,117,86,0.13);color:var(--green);}
select.status-select{
  font-family:var(--font-mono);font-size:11px;border:1px solid var(--line-dark);
  border-radius:6px;padding:4px 6px;background:white;color:var(--ink);cursor:pointer;
}

.filterbar{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.filterbar button{
  font-family:var(--font-mono);font-size:11.5px;border:1px solid var(--line);
  background:transparent;color:rgba(245,243,238,0.65);padding:6px 12px;border-radius:20px;cursor:pointer;
}
.filterbar button.active{background:var(--paper);color:var(--ink);border-color:var(--paper);}

.empty{
  text-align:center;padding:50px 20px;color:rgba(245,243,238,0.4);
  font-family:var(--font-mono);font-size:13px;border:1px dashed var(--line);border-radius:12px;
}

.charger-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:18px;}
.charger-card{
  background:var(--paper);color:var(--ink);border-radius:12px;padding:16px;
  display:flex;flex-direction:column;gap:10px;
}
.charger-card .qr-wrap{background:white;border-radius:8px;padding:10px;display:flex;justify-content:center;}
.charger-card .qr-wrap img{width:130px;height:130px;display:block;}
.charger-card h3{font-family:var(--font-display);font-size:14px;margin:0;font-weight:600;}
.charger-card .loc{font-size:12px;color:rgba(20,24,29,0.55);margin:0;}
.charger-card .cid{font-family:var(--font-mono);font-size:10.5px;color:rgba(20,24,29,0.4);}
.charger-card .card-actions{display:flex;gap:6px;margin-top:auto;}
.btn-mini{
  flex:1;font-family:var(--font-mono);font-size:11px;font-weight:600;
  border:1px solid var(--line-dark);background:transparent;color:var(--ink);
  padding:6px 8px;border-radius:7px;cursor:pointer;text-align:center;text-decoration:none;display:block;
}
.btn-mini:hover{background:var(--ink);color:var(--paper);}
.btn-mini.danger:hover{background:var(--red);color:white;border-color:var(--red);}

.add-form{
  background:var(--charcoal-2);border:1px solid var(--line);border-radius:12px;
  padding:16px;margin-bottom:6px;display:flex;gap:10px;flex-wrap:wrap;
}
.add-form input{
  flex:1;min-width:160px;background:var(--charcoal);border:1px solid var(--line);
  color:var(--paper);padding:9px 12px;border-radius:8px;font-family:var(--font-body);font-size:13px;
}
.add-form input::placeholder{color:rgba(245,243,238,0.35);}
.btn-amber{
  background:var(--amber);color:var(--ink);border:none;font-family:var(--font-display);
  font-weight:600;font-size:13px;padding:9px 18px;border-radius:8px;cursor:pointer;
}
.btn-amber:hover{background:var(--amber-dim);}
.btn-amber:disabled{opacity:0.6;cursor:default;}

.report-screen, .gate-screen{
  max-width:440px;margin:60px auto;background:var(--paper);color:var(--ink);
  border-radius:16px;padding:30px 26px;text-align:left;
}
.report-screen .eyebrow, .gate-screen .eyebrow{
  font-family:var(--font-mono);font-size:11px;color:rgba(20,24,29,0.5);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;
}
.report-screen h2, .gate-screen h2{font-family:var(--font-display);font-size:22px;margin:0 0 4px;}
.report-screen .sub, .gate-screen .sub{font-size:13px;color:rgba(20,24,29,0.6);margin:0 0 22px;}
.report-screen textarea{
  width:100%;min-height:100px;border:1px solid var(--line-dark);border-radius:10px;
  padding:12px;font-family:var(--font-body);font-size:14px;resize:vertical;color:var(--ink);
}
.gate-screen input{
  width:100%;border:1px solid var(--line-dark);border-radius:10px;
  padding:11px 13px;font-family:var(--font-body);font-size:14px;color:var(--ink);margin-bottom:10px;
}
.report-screen .btn-amber, .gate-screen .btn-amber{width:100%;margin-top:14px;padding:13px;font-size:14px;}
.gate-error{font-size:12.5px;color:var(--red);margin:-2px 0 10px;font-family:var(--font-mono);}

.report-confirm{text-align:center;}
.report-confirm .check{
  width:54px;height:54px;border-radius:50%;background:var(--green);color:white;
  display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 16px;
}
.ticket-number{font-family:var(--font-mono);font-size:13px;color:rgba(20,24,29,0.5);}

.loading-note{text-align:center;padding:30px;font-family:var(--font-mono);font-size:12px;color:rgba(245,243,238,0.4);}
.section-title{font-family:var(--font-display);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:rgba(245,243,238,0.45);margin:22px 0 10px;}