/* ============================================================
   Таймер переговорок — фирменный стиль Брусники.
   Шрифт Formular, акцент #ff001f, светлая тема.
   ============================================================ */
@font-face{font-family:"Formular";src:url("/static/fonts/formular-light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Formular";src:url("/static/fonts/formular-regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Formular";src:url("/static/fonts/formular-medium.ttf") format("truetype");font-weight:600;font-display:swap}

:root{
  --accent:#ff001f;
  --bg:#f5f5f5;
  --panel:#ffffff;
  --soft:#f1f1f1;
  --text:#1e1e1e;
  --muted:#6a6a6a;
  --line:#e6e6e6;
  --line2:#dadada;
  --green:#1f9d57;
  --amber:#e08600;
  --r:16px; --r-sm:10px;
  --shadow:0 6px 24px -10px rgba(0,0,0,.18);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:"Formular","Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);font-weight:400}
button{font-family:inherit;cursor:pointer;border:none}
input,select{font-family:inherit}
::selection{background:var(--accent);color:#fff}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px}
.login{width:min(390px,100%);background:var(--panel);border-radius:var(--r);
  padding:40px 34px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.login::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent)}
.brand{margin-bottom:30px}
.brand small{display:block;color:var(--accent);font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:600;margin-bottom:4px}
.brand h1{font-size:23px;font-weight:600;margin:0;letter-spacing:-.3px}
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:7px;font-weight:400}
.field input{width:100%;padding:13px 14px;background:var(--bg);border:1px solid var(--line2);
  border-radius:var(--r-sm);color:var(--text);font-size:15px;outline:none;transition:.15s}
.field input:focus{border-color:var(--accent);background:#fff}
.btn-primary{width:100%;padding:14px;margin-top:10px;background:var(--accent);color:#fff;
  border-radius:var(--r-sm);font-weight:600;font-size:15px;transition:.15s}
.btn-primary:hover{filter:brightness(1.07)}
.btn-primary:active{transform:translateY(1px)}
.err{color:var(--accent);font-size:13.5px;margin-top:13px;min-height:18px}

/* ---------- SHELL ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;
  padding:14px 22px;background:#fff;border-bottom:1px solid var(--line)}
.topbar .logo{font-size:18px;font-weight:600;letter-spacing:-.3px}
.topbar .logo b{color:var(--accent)}
.topbar .conn{font-size:12.5px;color:var(--muted)}
.topbar .conn.ok{color:var(--green)}
.topbar .conn::before{content:"●  ";opacity:.7}
.spacer{flex:1}
.tabs{display:flex;gap:2px;background:var(--soft);border-radius:11px;padding:4px}
.tab{padding:8px 16px;border-radius:8px;background:transparent;color:var(--muted);font-weight:400;font-size:14px;transition:.15s}
.tab.active{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.who{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--muted)}
.who b{color:var(--text);font-weight:600}
.role-pill{font-size:10.5px;letter-spacing:.5px;text-transform:uppercase;font-weight:600;
  padding:3px 9px;border-radius:20px;background:rgba(255,0,31,.1);color:var(--accent)}
.logout{background:transparent;border:1px solid var(--line2);color:var(--muted);
  padding:8px 13px;border-radius:9px;font-weight:400;font-size:14px}
.logout:hover{color:var(--accent);border-color:var(--accent)}

.page{max-width:1120px;margin:0 auto;padding:26px 22px 64px}

/* ---------- ROOMS GRID ---------- */
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.room{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;position:relative;transition:.2s;box-shadow:0 2px 8px -4px rgba(0,0,0,.08)}
.room.running{border-color:rgba(255,0,31,.3);box-shadow:0 8px 26px -12px rgba(255,0,31,.3)}
.room.off{opacity:.62}
.room-head{display:flex;align-items:center;gap:9px;margin-bottom:2px}
.room-head .dot{width:8px;height:8px;border-radius:50%;background:#c4c4c4;flex:none}
.room-head .dot.on{background:var(--green)}
.room-head h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-head .st{margin-left:auto;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:#a0a0a0;font-weight:600;flex:none}
.room.running .st{color:var(--accent)}
.host{font-size:12px;color:#a8a8a8;margin:1px 0 0 17px;font-family:"Formular";letter-spacing:.2px}
.clock{font-size:56px;font-weight:600;letter-spacing:-1px;line-height:1;margin:14px 0 10px;color:var(--text)}
.room.warn .clock{color:var(--amber)}
.room.crit .clock{color:var(--accent)}
.room.off .clock{color:#c0c0c0}
.bar{height:5px;background:var(--soft);border-radius:4px;overflow:hidden;margin-bottom:16px}
.bar>i{display:block;height:100%;background:var(--accent);transition:width .9s linear}

.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:9px}
.presets button{padding:11px 0;background:#fff;border:1px solid var(--line2);
  border-radius:9px;color:var(--text);font-weight:600;font-size:15px;transition:.12s}
.presets button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.custom{display:flex;gap:7px;margin-bottom:11px}
.custom input{flex:1;min-width:0;padding:11px 12px;background:var(--bg);border:1px solid var(--line2);
  border-radius:9px;color:var(--text);font-size:15px;outline:none}
.custom input:focus{border-color:var(--accent);background:#fff}
.custom button{padding:0 17px;background:var(--accent);color:#fff;border-radius:9px;font-weight:600;white-space:nowrap}
.ctl{display:flex;gap:7px}
.ctl button{flex:1;padding:10px 0;border-radius:9px;font-weight:400;font-size:13.5px;
  background:#fff;border:1px solid var(--line2);color:var(--text);transition:.12s}
.ctl button:hover:not(:disabled){border-color:#bdbdbd}
.ctl .stop{color:var(--accent)}
.ctl .stop:hover{background:rgba(255,0,31,.07);border-color:var(--accent)}
button:disabled{opacity:.4;cursor:not-allowed}

.room-tools{display:flex;gap:6px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.room-tools button{background:transparent;border:none;color:var(--muted);font-size:12.5px;padding:4px 8px;border-radius:7px}
.room-tools button:hover{color:var(--text);background:var(--soft)}
.room-tools .del:hover{color:var(--accent)}
.rename-row{display:flex;gap:6px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.rename-row input{flex:1;padding:8px 10px;border:1px solid var(--line2);border-radius:8px;font-size:14px;outline:none}
.rename-row input:focus{border-color:var(--accent)}
.rename-row button{padding:0 13px;border-radius:8px;font-weight:600;font-size:13px;background:var(--accent);color:#fff}
.rename-row .cancel{background:var(--soft);color:var(--muted)}

.empty{grid-column:1/-1;text-align:center;padding:70px 0;color:#a8a8a8}
.empty b{color:var(--muted);display:block;font-size:16px;margin-bottom:6px;font-weight:600}

/* ---------- TABLES ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 2px 8px -4px rgba(0,0,0,.08)}
.card-head{padding:17px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.card-head h2{margin:0;font-size:17px;font-weight:600}
.card-head .count{margin-left:auto;font-size:13px;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;padding:12px 18px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;
  color:#9a9a9a;font-weight:600;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}
td{padding:13px 18px;border-bottom:1px solid var(--line);color:var(--text)}
tr:last-child td{border-bottom:none}
tr:hover td{background:#fafafa}
.tag{display:inline-block;padding:3px 10px;border-radius:7px;font-size:11.5px;font-weight:600;letter-spacing:.3px}
.tag.start{background:rgba(31,157,87,.13);color:var(--green)}
.tag.add{background:rgba(224,134,0,.14);color:var(--amber)}
.tag.stop{background:rgba(255,0,31,.11);color:var(--accent)}
.tag.pause,.tag.resume{background:var(--soft);color:var(--muted)}
.muted{color:var(--muted)}

.add-user{display:grid;grid-template-columns:1fr 1fr 1fr auto auto;gap:8px;padding:17px 22px;border-bottom:1px solid var(--line);align-items:center}
.add-user input,.add-user select{padding:10px 12px;background:var(--bg);border:1px solid var(--line2);border-radius:8px;font-size:14px;outline:none}
.add-user input:focus{border-color:var(--accent);background:#fff}
.add-user button{padding:10px 19px;background:var(--accent);color:#fff;border-radius:8px;font-weight:600}
.mini{padding:6px 12px;border-radius:8px;font-weight:400;font-size:13px;border:1px solid var(--line2);background:#fff;color:var(--muted)}
.mini:hover{color:var(--text);border-color:#bdbdbd}
.mini.danger:hover{color:var(--accent);border-color:var(--accent)}
.off-row td{opacity:.5}

/* ---------- ROOM LIST (аккордеон) ---------- */
.room-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.room-row{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 2px 8px -5px rgba(0,0,0,.1);transition:.15s}
.room-row.open{box-shadow:0 10px 30px -14px rgba(0,0,0,.25)}
.room-row.running.open,.room-row.running{border-color:rgba(255,0,31,.28)}
.room-row.off{opacity:.7}
.row-head{width:100%;display:flex;align-items:center;gap:12px;padding:16px 18px;background:transparent;
  text-align:left;font-family:inherit;color:var(--text)}
.row-head:hover{background:#fafafa}
.row-head .dot{width:9px;height:9px;border-radius:50%;background:#c4c4c4;flex:none}
.row-head .dot.on{background:var(--green)}
.r-name{font-size:16px;font-weight:600;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.r-host{font-size:12.5px;color:#a8a8a8;flex:none}
.r-clock{margin-left:auto;font-size:18px;font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.r-st{font-size:11px;letter-spacing:.6px;text-transform:uppercase;font-weight:600;flex:none;
  padding:3px 9px;border-radius:20px;background:var(--soft);color:#9a9a9a}
.r-st.running,.r-st.warn,.r-st.crit{background:rgba(255,0,31,.1);color:var(--accent)}
.r-st.ready{background:rgba(31,157,87,.12);color:var(--green)}
.r-clock:empty{margin-left:auto}
.r-clock:empty+.r-st{margin-left:0}
.chev{color:#bbb;font-size:13px;flex:none;width:14px;text-align:center}
.row-body{padding:0 18px}
.room-row.open .row-body{padding:4px 18px 20px}

.row-body .clock{font-size:64px;font-weight:600;letter-spacing:-1.5px;line-height:1;margin:10px 0 12px;color:var(--text)}
.row-body .clock.go{color:var(--green)} .row-body .clock.warn{color:var(--amber)} .row-body .clock.crit{color:var(--accent)}
.offline-note{font-size:13px;color:var(--muted);background:var(--soft);padding:9px 12px;border-radius:9px;margin-bottom:12px}

/* ---------- AUDIT filters ---------- */
.filters{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:6px 13px;border-radius:20px;border:1px solid var(--line2);background:#fff;color:var(--muted);
  font-size:13px;font-weight:400;transition:.12s}
.chip:hover{border-color:#bbb;color:var(--text)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.cat{font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;letter-spacing:.3px}
.cat-timer{background:rgba(31,157,87,.13);color:var(--green)}
.cat-auth{background:rgba(91,110,255,.13);color:#4a5bdb}
.cat-room{background:rgba(224,134,0,.14);color:var(--amber)}
.cat-user{background:rgba(255,0,31,.1);color:var(--accent)}

@media(max-width:680px){
  .tabs{order:3;width:100%;justify-content:center}
  .topbar{flex-wrap:wrap;padding:12px 16px}
  .add-user{grid-template-columns:1fr 1fr}
  .row-body .clock{font-size:52px}
  .r-host{display:none}
}