/* FCMv — FIBERME Call Manager Visual. Theme follows the FCM7100 web GUI. */
:root {
  --frame: #1b3a5f;
  --frame-2: #21456f;
  --frame-3: #254a75;
  --frame-text: #b9cbe0;
  --frame-text-strong: #ffffff;
  --frame-hover: #ffffff14;
  --frame-line: #ffffff1a;
  --brand: #5387be;
  --brand-dk: #3f6f9f;
  --brand-tint: #eef3f9;
  --brand-ring: #5387be33;
  --orange: #e8622a;
  --bg: #f1f4f9;
  --card: #ffffff;
  --card-2: #f7f9fc;
  --line: #e3e9f1;
  --line-2: #d4dce7;
  --text: #1f2a37;
  --text-2: #5b6878;
  --text-3: #8592a3;
  --ok: #1f9254;
  --ok-tint: #e5f4ec;
  --warn: #c27c12;
  --warn-tint: #fbf1df;
  --bad: #c8393f;
  --bad-tint: #fbe8e9;
  --info: #2a8fb5;
  --info-tint: #e2f2f8;
  --violet: #7a5cc2;
  --violet-tint: #efeafa;
  --shadow-sm: 0 1px 2px #1b3a5f12, 0 1px 3px #1b3a5f0d;
  --shadow: 0 4px 18px #1b3a5f14, 0 1px 3px #1b3a5f0f;
  --shadow-lg: 0 18px 50px #0f24402e;
  --radius: 14px;
  --radius-sm: 9px;
  --hero: linear-gradient(135deg, #1e4370 0%, #1b3a5f 55%, #16304f 100%);
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans Arabic", Tahoma, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --frame: #0f2036;
  --frame-2: #132840;
  --frame-3: #18304d;
  --bg: #0b1726;
  --card: #12233a;
  --card-2: #172b45;
  --line: #22385a;
  --line-2: #2c4569;
  --text: #e6edf6;
  --text-2: #a9b8cb;
  --text-3: #7b8ca3;
  --brand-tint: #1b3352;
  --ok-tint: #12352a;
  --warn-tint: #3a2c12;
  --bad-tint: #3a1a1f;
  --info-tint: #123246;
  --violet-tint: #2a2348;
  --shadow: 0 4px 18px #00000040;
  --shadow-sm: 0 1px 3px #00000040;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); font-size: 14px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--brand-ring); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
svg.i.sm { width: 15px; height: 15px; }
svg.i.lg { width: 22px; height: 22px; }

/* ------------------------------------------------------------ app frame */
.app { display: grid; grid-template-columns: 260px 1fr; grid-template-rows: 58px 1fr; min-height: 100vh; background: linear-gradient(90deg, var(--frame) 260px, transparent 260px); }
.top { grid-column: 1 / -1; background: var(--frame); color: var(--frame-text-strong); display: flex; align-items: center; gap: 14px; padding: 0 18px 0 20px; position: sticky; top: 0; z-index: 30; box-shadow: 0 1px 0 var(--frame-line); }
.top .logo { height: 38px; display: block; }
.top .menu-btn { display: none; }
.top .spacer { flex: 1; }
.chip-top { border: 1px solid #ffffff2e; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .3px; color: #dbe6f3; display: inline-flex; align-items: center; gap: 7px; background: #ffffff0d; }
.chip-top.trial { border-color: #f0b54a80; color: #ffd27a; border-style: dashed; }
.chip-top.bad { border-color: #ff8a8f80; color: #ffb3b6; }
.chip-top .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.icon-btn { width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; color: inherit; display: inline-grid; place-items: center; cursor: pointer; transition: background .2s; }
.icon-btn:hover { background: var(--frame-hover); }
.user-menu { position: relative; }
.user-menu .pop { position: absolute; right: 0; top: 44px; background: var(--card); color: var(--text); border-radius: 12px; box-shadow: var(--shadow-lg); min-width: 240px; padding: 8px; border: 1px solid var(--line); animation: pop .18s var(--ease); }
.user-menu .pop .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-menu .pop .who b { display: block; }
.user-menu .pop button { width: 100%; text-align: left; display: flex; gap: 10px; align-items: center; padding: 9px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; }
.user-menu .pop button:hover { background: var(--brand-tint); }

.side { background: var(--frame); color: var(--frame-text); padding: 14px 10px 30px; overflow-y: auto; position: sticky; top: 58px; height: calc(100vh - 58px); }
.side .group { margin-bottom: 4px; }
.side .group > button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 0; border-radius: 11px; background: transparent; color: var(--frame-text-strong); font-weight: 500; font-size: 14.5px; cursor: pointer; transition: background .2s; }
.side .group > button:hover { background: var(--frame-hover); }
.side .group.open > button { background: #ffffff12; }
.side .group > button .chev { margin-left: auto; transition: transform .25s var(--ease); opacity: .55; }
.side .group.open > button .chev { transform: rotate(90deg); }
.side .items { overflow: hidden; max-height: 0; transition: max-height .35s var(--ease); }
.side .group.open .items { max-height: 640px; }
.side .items a { display: flex; align-items: center; gap: 11px; padding: 9px 14px 9px 22px; margin: 3px 4px 3px 12px; border-radius: 10px; color: var(--frame-text); font-size: 14px; transition: background .2s, color .2s, transform .2s; }
.side .items a:hover { background: var(--frame-hover); color: #fff; text-decoration: none; transform: translateX(2px); }
.side .items a.active { background: var(--brand); color: #fff; box-shadow: 0 6px 18px #5387be59; font-weight: 600; }
.side .single { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 11px; color: var(--frame-text-strong); font-size: 14.5px; font-weight: 500; margin-bottom: 4px; }
.side .single:hover { background: var(--frame-hover); text-decoration: none; }
.side .single.active { background: var(--brand); box-shadow: 0 6px 18px #5387be59; }
.side .ver { color: #ffffff59; font-size: 11.5px; padding: 16px 16px 0; }

.main { min-width: 0; display: flex; flex-direction: column; }
.content { padding: 24px 26px 34px; flex: 1; animation: fadeUp .35s var(--ease); }
.foot { text-align: center; color: var(--text-3); font-size: 12px; padding: 16px; border-top: 1px solid var(--line); }
.banner { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; display: flex; gap: 12px; align-items: center; font-weight: 500; animation: fadeUp .3s var(--ease); }
.banner.warn { background: var(--warn-tint); color: #8a560b; border: 1px solid #e8c37f; }
.banner.bad { background: var(--bad-tint); color: #962a2f; border: 1px solid #eba5a8; }
.banner.info { background: var(--info-tint); color: #1d6683; border: 1px solid #9fd0e2; }
:root[data-theme="dark"] .banner.warn { color: #f3c67a; } :root[data-theme="dark"] .banner.bad { color: #ffb3b6; } :root[data-theme="dark"] .banner.info { color: #8fd3ee; }
.banner .grow { flex: 1; }

.crumbs { color: var(--text-2); font-size: 14px; display: flex; gap: 9px; align-items: center; margin-bottom: 14px; }
.crumbs b { color: var(--text); font-weight: 600; }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 25px; margin: 0; letter-spacing: -.3px; }
.page-head p { margin: 4px 0 0; color: var(--text-2); }
.page-head .grow { flex: 1; }

/* ------------------------------------------------------------ cards */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); animation: fadeUp .4s var(--ease) both; }
.content > .card + .card { margin-top: 18px; }
.static :is(.card, .hero, .caller, .agent, .stagger > *, tbody tr, .dual .it, .node) { animation: none !important; }
.card-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.card-h h2, .card-h h3 { margin: 0; font-size: 16.5px; font-weight: 650; }
.card-h .grow { flex: 1; }
.card-b { padding: 18px 20px; }
.card-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); }
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stagger > * { animation: fadeUp .45s var(--ease) both; }
.stagger > *:nth-child(2) { animation-delay: .05s; } .stagger > *:nth-child(3) { animation-delay: .1s; } .stagger > *:nth-child(4) { animation-delay: .15s; }
.stagger > *:nth-child(5) { animation-delay: .2s; } .stagger > *:nth-child(6) { animation-delay: .25s; }
.lift { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* hero (dark navy cards like the FCM7100 dashboard) */
.hero { background: var(--hero); color: #fff; border-radius: 18px; box-shadow: 0 14px 40px #1b3a5f40; overflow: hidden; position: relative; animation: fadeUp .45s var(--ease) both; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#ffffff10 1px, transparent 1px); background-size: 16px 16px; pointer-events: none; mask-image: linear-gradient(90deg, #000, transparent 70%); }
.hero-row { display: grid; position: relative; }
.hero-cell { padding: 20px 22px; border-right: 1px solid #ffffff14; border-top: 1px solid #ffffff14; }
.hero-cell:last-child { border-right: 0; }
.hero-row:first-child .hero-cell { border-top: 0; }
.hero .lbl { color: #b9cbe0; font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.hero .big { font-size: 42px; font-weight: 700; letter-spacing: -1px; line-height: 1.1; margin-top: 6px; }
.hero .big small { font-size: 15px; font-weight: 500; color: #b9cbe0; letter-spacing: 0; margin-left: 4px; }
.hero .sub { color: #b9cbe0; font-size: 12.5px; margin-top: 4px; }
.hero .bar { height: 3px; border-radius: 3px; background: #ffffff1f; margin-top: 14px; overflow: hidden; }
.hero .bar i { display: block; height: 100%; background: linear-gradient(90deg, #8fb9e6, #fff); border-radius: 3px; transition: width 1s var(--ease); }
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 #3ddc8499; animation: pulse 1.8s infinite; display: inline-block; }
.pulse-dot.off { background: #ff8a8f; box-shadow: none; animation: none; }

/* lines grid (call lines / extension squares) */
.squares { display: flex; flex-wrap: wrap; gap: 5px; }
.squares i { width: 20px; height: 15px; border-radius: 4px; background: #ffffff14; border: 1px solid #ffffff1a; transition: background .4s, transform .3s; }
.squares i.on { background: #6fa3dd; border-color: #8fb9e6; box-shadow: 0 0 10px #6fa3dd66; }
.squares i.ring { background: #f0b54a; border-color: #f7cf80; animation: blink 1s infinite; }
.squares.light i { background: var(--line); border-color: var(--line-2); }
.squares.light i.on { background: var(--brand); border-color: var(--brand); box-shadow: none; }
.squares.light i.busy { background: var(--warn); border-color: var(--warn); }
.squares.light i.ring { background: #f0b54a; }

/* ------------------------------------------------------------ stats */
.stat { padding: 18px 20px; }
.stat .k { color: var(--text-2); font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.stat .v { font-size: 30px; font-weight: 700; margin-top: 6px; letter-spacing: -.5px; }
.stat .v small { font-size: 14px; color: var(--text-2); font-weight: 500; margin-left: 4px; }
.meter { height: 8px; background: var(--line); border-radius: 8px; overflow: hidden; margin-top: 12px; }
.meter i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--brand), #7fb0e3); transition: width 1s var(--ease); width: 0; }
.meter.ok i { background: linear-gradient(90deg, #1f9254, #43c27c); }
.meter.warn i { background: linear-gradient(90deg, #c27c12, #f0b54a); }
.meter.bad i { background: linear-gradient(90deg, #c8393f, #ef6d72); }
.kv { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--line); gap: 12px; }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--text-2); }
.kv b { font-weight: 600; text-align: right; word-break: break-all; }
.top-accent { border-top: 3px solid var(--brand); }
.top-accent.ok { border-top-color: var(--ok); } .top-accent.warn { border-top-color: var(--warn); } .top-accent.bad { border-top-color: var(--bad); } .top-accent.violet { border-top-color: var(--violet); } .top-accent.info { border-top-color: var(--info); }

/* ------------------------------------------------------------ badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--brand-tint); color: var(--brand-dk); border: 1px solid #5387be40; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.plain::before { display: none; }
.badge.ok { background: var(--ok-tint); color: var(--ok); border-color: #1f925440; }
.badge.warn { background: var(--warn-tint); color: var(--warn); border-color: #c27c1240; }
.badge.bad { background: var(--bad-tint); color: var(--bad); border-color: #c8393f40; }
.badge.grey { background: var(--card-2); color: var(--text-2); border-color: var(--line-2); }
.badge.violet { background: var(--violet-tint); color: var(--violet); border-color: #7a5cc240; }
.badge.info { background: var(--info-tint); color: var(--info); border-color: #2a8fb540; }
.badge.ringing::before { animation: blink 1s infinite; }

/* ------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); font-weight: 600; cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s; white-space: nowrap; text-decoration: none !important; }
.btn:hover { border-color: var(--brand); color: var(--brand); box-shadow: 0 4px 12px #1b3a5f14; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 16px #5387be40; }
.btn.primary:hover { background: var(--brand-dk); color: #fff; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger.soft { background: var(--bad-tint); color: var(--bad); border-color: #c8393f40; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.sm { height: 31px; padding: 0 11px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn .spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.act { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; display: inline-grid; place-items: center; cursor: pointer; color: var(--brand); transition: background .2s, transform .15s; }
.act:hover { background: var(--brand-tint); transform: scale(1.08); }
.act.del { color: var(--bad); } .act.del:hover { background: var(--bad-tint); }
.act.ok { color: var(--ok); } .act.ok:hover { background: var(--ok-tint); }
.seg { display: inline-flex; background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; cursor: pointer; font-weight: 600; color: var(--text-2); transition: all .2s; }
.seg button.on { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); }
.seg.brand button.on { background: var(--brand); color: #fff; }

/* ------------------------------------------------------------ tables */
.toolbar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.toolbar .grow { flex: 1; }
.search { position: relative; }
.search input { height: 38px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card-2); padding: 0 14px 0 36px; width: 260px; outline: none; transition: border-color .2s, box-shadow .2s, width .3s; }
.search input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); background: var(--card); width: 300px; }
.search svg { position: absolute; left: 12px; top: 10px; color: var(--text-3); }
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 12.5px; font-weight: 650; color: var(--text-2); padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none; background: var(--card); position: sticky; top: 0; }
.tbl th.sort { cursor: pointer; }
.tbl th.sort:hover { color: var(--brand); }
.tbl th .arr { opacity: .4; margin-left: 4px; font-size: 10px; }
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tbody tr { transition: background .15s; animation: rowIn .35s var(--ease) both; }
.tbl tbody tr:hover { background: var(--card-2); box-shadow: inset 3px 0 0 var(--brand); }
.tbl tbody tr.sel { background: var(--brand-tint); }
.tbl td.actions { text-align: right; white-space: nowrap; }
.tbl .strong { font-weight: 650; }
.tbl input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--brand); }
.pager { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 12px 18px; color: var(--text-2); font-size: 13px; }
.pager select { height: 32px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--card); padding: 0 8px; }
.empty { text-align: center; padding: 50px 20px; color: var(--text-2); }
.empty .ill { width: 74px; height: 74px; border-radius: 22px; background: var(--brand-tint); display: grid; place-items: center; margin: 0 auto 14px; color: var(--brand); animation: float 3s ease-in-out infinite; }
.empty .ill svg { width: 34px; height: 34px; }
.empty h3 { color: var(--text); margin: 0 0 6px; }
.drag { cursor: grab; color: var(--text-3); }
tr.dragging { opacity: .4; }
tr.drop-before td { box-shadow: inset 0 3px 0 var(--brand); }

/* ------------------------------------------------------------ forms */
.form { padding: 6px 22px 22px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); padding: 0 18px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 14px 14px 12px; font-weight: 600; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; display: inline-flex; gap: 8px; align-items: center; transition: color .2s, border-color .2s; white-space: nowrap; }
.tabs button.on { color: var(--brand); border-bottom-color: var(--brand); }
.tabs button .err-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); }
.section-t { display: flex; align-items: center; gap: 14px; font-weight: 650; font-size: 15px; margin: 22px 0 14px; }
.section-t::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 22px; }
.fields.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fields.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f.span2 { grid-column: span 2; } .f.span3 { grid-column: span 3; } .f.full { grid-column: 1 / -1; }
.f > label { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.f > label .req { color: var(--bad); }
.f .hint { font-size: 12px; color: var(--text-3); }
.f .err { font-size: 12.5px; color: var(--bad); font-weight: 500; animation: shake .35s; }
.inp, .f select, .f textarea { height: 40px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card-2); padding: 0 12px; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; width: 100%; }
.f textarea { height: auto; min-height: 110px; padding: 10px 12px; resize: vertical; font-family: var(--mono); font-size: 13px; line-height: 1.5; }
.inp:focus, .f select:focus, .f textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); background: var(--card); }
.f.has-err .inp, .f.has-err select, .f.has-err textarea { border-color: var(--bad); background: var(--bad-tint); }
.inp[readonly] { color: var(--text-2); background: var(--bg); }
.inp-group { display: flex; gap: 6px; }
.inp-group .inp { flex: 1; min-width: 0; }
.inp-group .btn { height: 40px; padding: 0 11px; }
.toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-weight: 500; margin-top: 8px; }
.toggle input { display: none; }
.toggle .tr { width: 40px; height: 22px; border-radius: 999px; background: var(--line-2); position: relative; transition: background .25s; flex: none; }
.toggle .tr::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform .25s var(--ease); }
.toggle input:checked + .tr { background: var(--brand); }
.toggle input:checked + .tr::after { transform: translateX(18px); }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 22px; border-top: 1px solid var(--line); background: var(--card-2); border-radius: 0 0 var(--radius) var(--radius); position: sticky; bottom: 0; z-index: 2; }
.form-actions .grow { flex: 1; }
.radio-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-cards label { border: 1px solid var(--line-2); border-radius: 11px; padding: 10px 14px; cursor: pointer; display: flex; gap: 8px; align-items: center; transition: all .2s; font-weight: 600; background: var(--card-2); }
.radio-cards input { accent-color: var(--brand); }
.radio-cards label.on { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-dk); box-shadow: 0 0 0 3px var(--brand-ring); }
.provider-note { background: var(--info-tint); color: var(--text); border-radius: 10px; padding: 10px 12px; font-size: 13px; display: flex; gap: 10px; }
.provider-note svg { color: var(--info); margin-top: 1px; }

/* dual list (outbound route trunks, queue agents) */
.dual { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.dual .box { border: 1px solid var(--line-2); border-radius: 12px; background: var(--card-2); min-height: 220px; display: flex; flex-direction: column; overflow: hidden; }
.dual .box h4 { margin: 0; padding: 10px 14px; font-size: 13px; color: var(--text-2); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; background: var(--card); }
.dual .list { padding: 6px; overflow-y: auto; max-height: 320px; flex: 1; }
.dual .it { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; cursor: pointer; transition: background .15s, transform .2s; animation: fadeUp .25s var(--ease) both; user-select: none; }
.dual .it:hover { background: var(--card); }
.dual .it.sel { background: var(--brand); color: #fff; }
.dual .it .n { width: 22px; height: 22px; border-radius: 7px; background: var(--brand-tint); color: var(--brand-dk); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; flex: none; }
.dual .it.sel .n { background: #ffffff33; color: #fff; }
.dual .mid { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.dual .mid .btn { width: 42px; padding: 0; }

/* chips input (ring group members) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card-2); min-height: 40px; align-items: center; }
.chips .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-tint); color: var(--brand-dk); border-radius: 8px; padding: 4px 6px 4px 10px; font-weight: 600; font-size: 13px; animation: pop .2s var(--ease); }
.chips .chip.ext { background: var(--ok-tint); color: var(--ok); }
.chips .chip button { border: 0; background: none; cursor: pointer; color: inherit; opacity: .6; padding: 0 2px; }
.chips input { border: 0; background: transparent; outline: none; flex: 1; min-width: 140px; height: 28px; }

/* IVR keys */
.keypad { display: grid; gap: 10px; }
.keyrow { display: grid; grid-template-columns: 54px 1fr 40px; gap: 10px; align-items: center; animation: fadeUp .25s var(--ease) both; }
.keycap { width: 54px; height: 44px; border-radius: 12px; background: linear-gradient(180deg, var(--card), var(--card-2)); border: 1px solid var(--line-2); box-shadow: 0 3px 0 var(--line-2); display: grid; place-items: center; font-weight: 800; font-size: 18px; color: var(--brand-dk); }
.keycap select { border: 0; background: transparent; font-weight: 800; font-size: 18px; color: var(--brand-dk); width: 100%; text-align: center; height: 100%; appearance: none; cursor: pointer; text-align-last: center; }

/* time rules */
.rule { border: 1px solid var(--line-2); border-radius: 12px; padding: 12px; display: grid; grid-template-columns: 130px 1fr auto auto 40px; gap: 12px; align-items: center; background: var(--card-2); animation: fadeUp .25s var(--ease) both; }
.days { display: flex; gap: 4px; flex-wrap: wrap; }
.days label { width: 40px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); display: grid; place-items: center; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text-2); background: var(--card); transition: all .2s; }
.days label.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.days input { display: none; }
.perm-grid { display: grid; grid-template-columns: 1fr auto; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.perm-grid > div { padding: 9px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
.perm-grid > div:nth-last-child(-n+2) { border-bottom: 0; }

/* ------------------------------------------------------------ modals, toasts */
.overlay { position: fixed; inset: 0; background: #0b1726a6; backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 80; animation: fade .2s; padding: 20px; }
.modal { background: var(--card); border-radius: 18px; box-shadow: var(--shadow-lg); width: min(560px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; animation: pop .25s var(--ease); border: 1px solid var(--line); }
.modal.wide { width: min(860px, 100%); }
.modal-h { padding: 18px 22px 8px; display: flex; gap: 12px; align-items: center; }
.modal-h h3 { margin: 0; font-size: 18px; }
.modal-b { padding: 8px 22px 18px; overflow-y: auto; }
.modal-f { padding: 14px 22px; display: flex; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--line); }
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 90; }
.toast { background: var(--frame); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: center; min-width: 260px; max-width: 420px; animation: slideIn .3s var(--ease); }
.toast.ok svg { color: #6fe0a4; } .toast.bad { background: #8f2328; } .toast.warn svg { color: #ffd27a; }
.toast.out { animation: slideOut .3s var(--ease) forwards; }
.secret { font-family: var(--mono); background: var(--card-2); border: 1px dashed var(--line-2); border-radius: 10px; padding: 10px 12px; word-break: break-all; display: flex; gap: 10px; align-items: center; justify-content: space-between; }

/* ------------------------------------------------------------ auth pages */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--bg); }
.auth-art { background: var(--hero); position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px; }
.auth-art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(#ffffff12 1px, transparent 1px); background-size: 18px 18px; }
.auth-art .logo { width: 300px; position: relative; }
.auth-art h2 { font-size: 34px; line-height: 1.2; margin: 0 0 12px; position: relative; max-width: 480px; letter-spacing: -.5px; }
.auth-art p { color: #b9cbe0; max-width: 460px; position: relative; font-size: 15px; line-height: 1.6; }
.waves { position: relative; height: 140px; display: flex; align-items: center; gap: 5px; }
.waves i { width: 6px; border-radius: 6px; background: linear-gradient(180deg, #8fb9e6, #5387be); animation: wave 1.4s ease-in-out infinite; opacity: .85; }
.auth-form { display: grid; place-items: center; padding: 30px; }
.auth-card { width: min(420px, 100%); animation: fadeUp .5s var(--ease); }
.auth-card h1 { font-size: 26px; margin: 0 0 6px; }
.auth-card .f { margin-bottom: 14px; }
.auth-card .btn { width: 100%; height: 44px; }
.copy { color: var(--text-3); font-size: 12px; margin-top: 30px; text-align: center; }
.strength { height: 5px; border-radius: 5px; background: var(--line); overflow: hidden; }
.strength i { display: block; height: 100%; transition: width .3s, background .3s; }

/* ------------------------------------------------------------ queue live */
.ring { width: 110px; height: 110px; position: relative; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 9; }
.ring .bg { stroke: #ffffff1f; }
.ring .fg { stroke: #43c27c; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }
.ring.light .bg { stroke: var(--line); }
.ring .txt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring .txt b { font-size: 24px; }
.ring .txt span { font-size: 11px; color: #b9cbe0; }
.ring.light .txt span { color: var(--text-2); }
.qcard { padding: 16px 18px; border-left: 4px solid var(--ok); }
.qcard.warn { border-left-color: var(--warn); } .qcard.bad { border-left-color: var(--bad); box-shadow: 0 0 0 2px #c8393f40, var(--shadow); }
.qcard .row { display: flex; justify-content: space-between; align-items: flex-end; }
.qcard .num { font-size: 34px; font-weight: 750; }
.caller { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card-2); border-radius: 12px; animation: fadeUp .3s var(--ease) both; }
.caller + .caller { margin-top: 8px; }
.caller .pos { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; border: 2px solid var(--line-2); flex: none; }
.caller .pos.first { background: var(--brand); color: #fff; border-color: #a9c6e6; }
.caller .wait { margin-left: auto; text-align: right; font-weight: 700; font-size: 17px; }
.caller .wait .bar { width: 60px; height: 3px; background: var(--line); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.caller .wait .bar i { display: block; height: 100%; background: var(--warn); }
.agent { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); animation: fadeUp .3s var(--ease) both; transition: border-color .3s; }
.agent .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--brand-tint); color: var(--brand-dk); position: relative; flex: none; }
.agent .av::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--card); background: var(--text-3); }
.agent.idle .av::after { background: var(--ok); } .agent.busy .av::after { background: var(--brand); } .agent.ringing .av::after { background: #f0b54a; animation: blink 1s infinite; } .agent.paused .av::after { background: var(--violet); }
.agent.busy { border-color: #5387be66; }
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 16px; }
.eq i { width: 3px; background: var(--brand); border-radius: 2px; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .2s; } .eq i:nth-child(3) { animation-delay: .4s; } .eq i:nth-child(4) { animation-delay: .1s; }
.stackbar { display: flex; height: 10px; border-radius: 10px; overflow: hidden; background: #ffffff1f; }
.stackbar i { height: 100%; transition: width .8s var(--ease); }

/* ------------------------------------------------------------ charts */
.chart { width: 100%; height: 240px; }
.chart text { fill: var(--text-3); font-size: 11px; }
.chart .gl { stroke: var(--line); stroke-dasharray: 3 4; }
.chart rect.b { transition: opacity .2s; animation: grow .7s var(--ease) both; transform-origin: bottom; transform-box: fill-box; }
.chart rect.b:hover { opacity: .8; }
.heat { display: grid; gap: 4px; font-size: 11px; }
.heat .c { height: 28px; border-radius: 6px; background: var(--card-2); display: grid; place-items: center; font-weight: 700; color: #fff; transition: transform .2s; }
.heat .c:hover { transform: scale(1.12); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }

/* ------------------------------------------------------------ call flow designer */
.flow-wrap { position: relative; height: calc(100vh - 210px); min-height: 520px; overflow: hidden; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); background-image: radial-gradient(var(--line-2) 1px, transparent 1px); background-size: 22px 22px; cursor: grab; }
.flow-wrap.panning { cursor: grabbing; }
.flow-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.flow-canvas svg.edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.edge { fill: none; stroke: #9db4cf; stroke-width: 2; }
.edge.flowing { stroke: var(--brand); stroke-dasharray: 6 6; animation: dash 1s linear infinite; }
.edge-label { font-size: 11px; font-weight: 600; fill: var(--text-2); paint-order: stroke; stroke: var(--card); stroke-width: 4px; }
.node { position: absolute; width: 230px; background: var(--card); border-radius: 14px; box-shadow: var(--shadow); border: 1px solid var(--line); user-select: none; cursor: move; transition: box-shadow .2s, border-color .2s; animation: pop .35s var(--ease) both; }
.node:hover { box-shadow: var(--shadow-lg); border-color: var(--brand); }
.node.dim { opacity: .65; }
.node .nh { display: flex; gap: 10px; padding: 11px 12px; align-items: center; border-bottom: 1px solid var(--line); }
.node .nh .ni { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
.node .nh b { display: block; font-size: 13.5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node .nh small { color: var(--text-2); font-size: 11.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node .ports { padding: 6px 0; }
.node .port { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 4px 12px; font-size: 12px; color: var(--text-2); position: relative; }
.node .port .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid var(--brand); position: absolute; right: -7px; cursor: pointer; transition: transform .2s; }
.node .port .dot:hover { transform: scale(1.35); background: var(--brand); }
.node .port button.edit-port { border: 0; background: none; cursor: pointer; color: var(--brand); padding: 2px; border-radius: 6px; }
.node .port button.edit-port:hover { background: var(--brand-tint); }
.node .in-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid #9db4cf; position: absolute; left: -7px; top: 22px; }
.flow-tools { position: absolute; right: 14px; top: 14px; display: flex; gap: 8px; z-index: 5; }
.flow-legend { position: absolute; left: 14px; bottom: 14px; z-index: 5; background: var(--card); border-radius: 12px; padding: 8px 12px; box-shadow: var(--shadow); display: flex; gap: 12px; font-size: 12px; color: var(--text-2); flex-wrap: wrap; max-width: 70%; }
.flow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.flow-legend i { width: 10px; height: 10px; border-radius: 3px; }

/* audio player */
.player { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--frame); color: #fff; border-radius: 14px; position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 70; box-shadow: var(--shadow-lg); width: min(560px, calc(100% - 40px)); animation: slideUp .3s var(--ease); }
.player audio { flex: 1; height: 36px; }
.player .t { font-size: 12.5px; color: #b9cbe0; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player .icon-btn { color: #fff; }

.skeleton { background: linear-gradient(90deg, var(--line) 25%, var(--card-2) 50%, var(--line) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 10px; }
.loader { display: grid; place-items: center; padding: 60px; }
.loader i { width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }
pre.log { background: #0d1b2c; color: #c9d6e6; border-radius: 0 0 var(--radius) var(--radius); padding: 14px 18px; margin: 0; max-height: 62vh; overflow: auto; font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-all; }
pre.log .hl { background: #f0b54a40; color: #fff; }
pre.log .e { color: #ff9ea2; } pre.log .w { color: #ffd27a; }
code.inline { background: var(--card-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; font-family: var(--mono); font-size: 12.5px; }

/* ------------------------------------------------------------ animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.95) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes rowIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(30px); } }
@keyframes slideOut { to { opacity: 0; transform: translateX(30px); } }
@keyframes slideUp { from { opacity: 0; transform: translate(-50%, 20px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 #3ddc8499; } 70% { box-shadow: 0 0 0 9px #3ddc8400; } 100% { box-shadow: 0 0 0 0 #3ddc8400; } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes float { 50% { transform: translateY(-6px); } }
@keyframes wave { 0%, 100% { height: 18%; } 50% { height: 100%; } }
@keyframes eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
@keyframes dash { to { stroke-dashoffset: -24; } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1200px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; background: none; }
  .side { position: fixed; left: 0; top: 58px; width: 270px; z-index: 40; transform: translateX(-100%); transition: transform .3s var(--ease); box-shadow: var(--shadow-lg); }
  .app.menu-open .side { transform: none; }
  .top .menu-btn { display: inline-grid; }
  .g2, .g3 { grid-template-columns: 1fr; }
  .fields, .fields.c2, .fields.c3 { grid-template-columns: 1fr; }
  .f.span2, .f.span3 { grid-column: auto; }
  .content { padding: 18px 14px 30px; }
  .auth { grid-template-columns: 1fr; } .auth-art { display: none; }
  .dual { grid-template-columns: 1fr; } .dual .mid { flex-direction: row; justify-content: center; }
  .rule { grid-template-columns: 1fr; }
  .search input, .search input:focus { width: 100%; }
  .chip-top.hide-sm { display: none; }
  .content .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .hero-row { grid-template-columns: 1fr 1fr !important; }
  .hero-cell { border-right: 0; }
  .heat { overflow-x: auto; }
  .page-head .seg { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
}
@media (max-width: 520px) { .hero-row { grid-template-columns: 1fr !important; } }
@media (max-width: 600px) { .g4 { grid-template-columns: 1fr; } .hero .big { font-size: 34px; } }