:root{--ink:#171a1a;--surface:#1d2121;--surface-2:#262b2b;--paper:#f4f5f3;--muted:#98a19c;--line:#ffffff1c;--accent:#e14a34;--ok:#3fa66b;--ok-bg:#1c3327;--warn:#d9922e;--warn-bg:#3a2c13;--danger:#e2665a;--danger-bg:#3a201c;font-family:'Manrope',Arial,sans-serif;color:var(--paper);background:var(--ink)}
*{box-sizing:border-box}
body{margin:0;min-height:100svh}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin:0}
a{color:inherit}
#app{min-height:100svh;display:flex;flex-direction:column}

/* Top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--line);gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;letter-spacing:-0.02em}
.brand span{color:var(--accent)}
.who{display:flex;align-items:center;gap:14px;font-size:0.85rem;color:var(--muted)}
.who button{background:transparent;border:1px solid #ffffff35;border-radius:5px;padding:8px 14px;font-size:0.8rem;color:var(--paper)}
.who button:hover{border-color:var(--accent);color:var(--accent)}

/* Login */
.login-wrap{flex:1;display:grid;place-items:center;padding:24px}
.login-card{width:min(380px,100%);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:32px}
.login-card h1{font-size:1.4rem;margin-bottom:6px}
.login-card p.sub{color:var(--muted);font-size:0.85rem;margin-bottom:24px}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-size:0.8rem;color:var(--muted)}
.field input,.field textarea,.field select{background:#ffffff0a;border:1px solid #ffffff30;border-radius:6px;padding:11px 12px;font-size:0.95rem;color:var(--paper)}
.field select option{background:var(--surface-2);color:var(--paper)}
.field textarea{resize:vertical;min-height:90px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:6px;padding:11px 18px;font-size:0.9rem;font-weight:700;background:var(--accent);color:#fff;width:100%}
.btn:hover{background:#f06a52}
.btn.secondary{background:transparent;border:1px solid #ffffff35;width:auto}
.btn.secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn:disabled{opacity:0.55;cursor:default}
.error-msg{color:var(--danger);font-size:0.85rem;margin-top:4px;min-height:1.2em}

/* Layout */
main.workspace{flex:1;display:flex;flex-direction:column;max-width:1080px;margin:0 auto;width:100%;padding:24px;gap:22px}
.tabs{display:flex;gap:8px;border-bottom:1px solid var(--line)}
.tabs button{background:transparent;border:0;padding:12px 4px;margin-right:22px;color:var(--muted);font-size:0.9rem;border-bottom:2px solid transparent}
.tabs button.active{color:var(--paper);border-bottom-color:var(--accent)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.panel-head h2{font-size:1.2rem}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{background:transparent;border:1px solid #ffffff30;border-radius:20px;padding:7px 13px;font-size:0.78rem;color:var(--muted)}
.filters button.active{border-color:var(--accent);color:var(--accent);background:#e14a3418}

/* Ticket list */
.ticket-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ticket-row{background:var(--surface);padding:14px 16px;display:grid;grid-template-columns:auto 1fr auto auto;gap:16px;align-items:center;text-align:left;border:0;width:100%}
.ticket-row:hover{background:var(--surface-2)}
.ticket-row .title{font-size:0.95rem}
.ticket-row .meta{font-size:0.78rem;color:var(--muted);margin-top:3px}
.pill{display:inline-flex;align-items:center;font-size:0.72rem;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap}
.pill.status-new{background:var(--warn-bg);color:var(--warn)}
.pill.status-in_progress{background:#1c2c3a;color:#5aa3e2}
.pill.status-done{background:var(--ok-bg);color:var(--ok)}
.pill.status-cancelled{background:var(--surface-2);color:var(--muted)}
.pill.priority-critical{background:var(--danger-bg);color:var(--danger)}
.pill.priority-high{background:var(--warn-bg);color:var(--warn)}
.pill.priority-normal{background:var(--surface-2);color:var(--muted)}
.empty{padding:40px;text-align:center;color:var(--muted);font-size:0.9rem}

/* Stats */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.stat-tile{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px}
.stat-tile strong{display:block;font-size:2rem;font-weight:400;letter-spacing:-0.03em}
.stat-tile span{font-size:0.8rem;color:var(--muted)}
.stat-section{margin-top:6px}
.stat-section h3{font-size:0.85rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted);margin-bottom:12px}
.bar-row{display:grid;grid-template-columns:140px 1fr auto;align-items:center;gap:12px;font-size:0.85rem;margin-bottom:8px}
.bar-track{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;background:var(--accent)}

/* Modal / detail */
.overlay{position:fixed;inset:0;background:#000000aa;display:grid;place-items:center;padding:20px;z-index:10}
.detail-card{width:min(560px,100%);max-height:88vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px}
.detail-card .close{position:absolute}
.detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.detail-head h2{font-size:1.15rem;line-height:1.4}
.icon-btn{background:transparent;border:0;color:var(--muted);font-size:1.4rem;line-height:1}
.icon-btn:hover{color:var(--paper)}
.detail-meta{color:var(--muted);font-size:0.8rem;margin-bottom:18px}
.detail-desc{font-size:0.9rem;line-height:1.6;color:#d7dad7;margin-bottom:20px;white-space:pre-wrap}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.comments{border-top:1px solid var(--line);padding-top:16px;margin-top:6px;display:flex;flex-direction:column;gap:12px}
.comment{background:var(--surface-2);border-radius:8px;padding:10px 12px;font-size:0.85rem}
.comment .who{color:var(--muted);font-size:0.72rem;margin-bottom:4px;display:block}
.comment-form{display:flex;gap:8px;margin-top:12px}
.comment-form textarea{flex:1;min-height:44px;background:#ffffff0a;border:1px solid #ffffff30;border-radius:6px;padding:11px 12px;font-size:0.9rem;color:inherit}
.comment-form button{width:auto;padding:0 16px}

.fab-row{display:flex;justify-content:flex-end}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--surface-2);border:1px solid var(--line);padding:10px 18px;border-radius:8px;font-size:0.85rem;z-index:20}

@media(max-width:640px){
  .ticket-row{grid-template-columns:1fr;gap:8px}
  .detail-grid{grid-template-columns:1fr}
}