/* Fear Project look: near-black base, #4d70ef accent, Onest + Bounded (fonts and accent taken from fearproject.ru).
   Colors come from CSS variables, which app.js sets from the user's customization, so nothing here hard-codes a palette. */
@font-face { font-family: Onest; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/onest-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Onest; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/onest-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: Onest; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/onest-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Onest; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/onest-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Bounded; font-style: normal; font-weight: 200 900; font-display: swap; src: url(/fonts/Bounded-Variable.woff2) format("woff2"); }

:root:not([data-theme="light"]) {
  --bg: #050506;
  --panel: rgba(11, 11, 14, .94);
  --panel-solid: #0b0b0e;
  --modal: #0d0d11;
  --raised: #121217;
  --border: #1d1d23;
  --border-2: #2a2a33;
  --text: #f1f2f6;
  --soft: #f1f2f6;
  --muted: #8c8f9d;
  --accent: #4d70ef;
  --accent-2: #7996ff;
  --accent-soft: rgba(77, 112, 239, .16);
  --accent-line: rgba(121, 150, 255, .4);
  --accent-text: #ffffff;
  --danger: #dd4242;
  --danger-text: #ff7979;
  --green: #5ee08a;
  --faint: #5d6070;
  color-scheme: dark;

  /* Flat surfaces only: blur and fixed gradients over panels are what produced blotchy, flickering pixels. */
  & * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  & body, & .login, & .boot-screen { background-color: var(--bg) !important; background-image: none !important; }
  & body { background-image: var(--bg-image) !important; background-size: cover !important; background-position: center !important; background-attachment: scroll !important; color: var(--text); font-family: Onest, ui-sans-serif, system-ui, sans-serif; font-size: 13px; }
  & button, & input, & select, & textarea { font-family: inherit; }
  & a { color: var(--accent-2); }
  & a:hover { color: #a9bcff; }
  & :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
  & ::-webkit-scrollbar-thumb { background: var(--border-2); }
  & input[type="range"] { accent-color: var(--accent); }

  /* Shell: floating header, content fills the rest of the viewport exactly (no overflow, no overlap). */
  & .app { background: transparent; }
  & .topbar {
    height: 56px; flex: 0 0 56px; margin: 10px 12px 0; padding: 0 10px 0 14px; border: 1px solid var(--border) !important; border-radius: 16px;
    background: var(--panel) !important;
  }
  & .layout { flex: 1 1 0; height: auto; min-height: 0; gap: 10px; padding: 10px 12px 12px; }
  & .brand { gap: 10px; font-family: Bounded, Onest, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: #fff; }
  & .brand img { width: 34px; height: 34px; padding: 0; border-radius: 10px; background: transparent; object-fit: contain; flex: 0 0 34px; }
  & .online { gap: 7px; color: var(--muted); font-size: 12px; white-space: nowrap; }
  & .online i { flex: 0 0 8px; width: 8px; height: 8px; box-shadow: none; background: var(--green); }
  & .top-nav { gap: 4px; }
  & .top-tab, & .top-tab:hover, & .top-tab.active { background: transparent !important; }
  & .top-tab { min-height: 34px; padding: 0 12px; color: var(--muted); font-weight: 600; letter-spacing: .05em; border-radius: 10px; }
  & .top-tab:hover, & .top-tab.active { color: #fff; background: var(--raised) !important; }
  & .account-trigger, & .account-trigger:hover, & .account-trigger[aria-expanded="true"] { border-radius: 10px; }
  & .account-trigger:hover, & .account-trigger[aria-expanded="true"] { background: var(--raised) !important; }

  & .layout > .panel, & .panel { background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: 16px; box-shadow: none; }
  & .sidebar, & .chat, & .info { background: var(--panel) !important; min-height: 0; }
  & .panel-title { font-family: Bounded, Onest, sans-serif; font-size: 13px; font-weight: 700; }
  & .chat-head { background: transparent !important; border-color: var(--border); }
  & .messages { background: transparent !important; }
  & .composer { background: transparent !important; border-color: var(--border); }
  & .composer-box { border-color: var(--border-2); background: var(--bg); border-radius: 14px; }
  & .composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  & .info-profile, & .info-section { border-color: var(--border); }
  & .chat-search { background: var(--bg); }

  /* Inputs and buttons. */
  & .sidebar > .input, & .input, & .settings-input, & input[type="text"], & input[type="url"], & input[type="search"], & textarea { border-color: var(--border-2); background: var(--bg); color: var(--text); border-radius: 12px; }
  & .sidebar > .input:focus, & .input:focus, & .settings-input:focus, & textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
  & .primary-btn, & .login-btn { border-radius: 12px; font-weight: 700; }
  & .ghost-btn { border-color: var(--border-2); background: var(--raised); color: var(--muted); border-radius: 12px; }
  & .ghost-btn:hover { border-color: var(--accent-line); color: #fff; }
  & .danger-btn { border-color: rgba(221, 66, 66, .4); background: rgba(221, 66, 66, .1); color: var(--danger-text); border-radius: 12px; }
  & .danger-btn:hover { border-color: rgba(255, 121, 121, .6); background: rgba(221, 66, 66, .18); color: #ffb0b0; }
  & .icon-btn:hover { background: var(--raised); color: #fff; }

  /* Tabs, filters, menus. */
  & .ticket-tabs { border-color: var(--border); background: var(--bg); border-radius: 14px; }
  & .ticket-tabs button { color: var(--muted); border-radius: 10px; }
  & .ticket-tabs button:hover { background: var(--raised); color: #fff; }
  & .ticket-tabs button.on { background: var(--accent); color: #fff; }
  & .ticket-tabs b { color: var(--accent-2); }
  & .ticket-tabs button.on b { color: #fff; }
  & .filters .filter-trigger, & .filter-trigger, & .assignment-trigger { background: var(--raised); border: 1px solid var(--border); color: var(--text); }
  & .filters .filter-trigger:hover, & .filters .filter-trigger[aria-expanded="true"], & .filter-trigger:hover, & .filter-trigger[aria-expanded="true"],
  & .assignment-trigger:hover, & .assignment-trigger[aria-expanded="true"] { background: var(--raised); border-color: var(--accent-line); }
  & .filter-menu, & .filters .filter-menu, & .assignment-menu, & .quick-panel, & .emoji-panel, & .styled-select-menu, & .account-menu {
    background: var(--modal) !important; border: 1px solid var(--border-2) !important; border-radius: 16px; box-shadow: 0 18px 44px rgba(0, 0, 0, .7);
  }
  & .filter-menu button, & .assignment-option { color: #d7d9e4; }
  & .filter-menu button:hover, & .filter-menu button:focus-visible, & .filters .filter-menu button:hover,
  & .assignment-option:hover, & .assignment-option.selected, & .styled-select-option:hover { background: var(--raised); color: #fff; }
  & .filter-menu button.selected, & .filters .filter-menu button.selected { background: var(--accent-soft); color: #fff; }
  & .filter-option-icon { background: var(--raised); color: var(--muted); }
  & .filter-option-all { background: var(--accent-soft); color: var(--accent-2); }
  & .filter-option-free { color: var(--green); }
  & .filter-option-open { color: #ffbd54; }
  & .filter-option-closed { color: var(--muted); }
  & .styled-select-trigger, & .ticket-filters select { background: var(--raised); border-color: var(--border); color: var(--text); border-radius: 12px; }
  & .styled-select-option[aria-selected="true"]::after { color: var(--accent-2); }

  /* Ticket list. */
  & .ticket-item { border: 1px solid transparent; border-radius: 14px; background: transparent; }
  & .ticket-item:hover { background: var(--raised); border-color: transparent; }
  & .ticket-item.active { background: var(--raised); border-color: var(--border-2); box-shadow: inset 3px 0 var(--accent); }
  & .ticket-name { color: #fff; }
  & .ticket-preview { color: var(--muted); }
  & .ticket-time { color: var(--faint); }
  & .ticket-avatar > .ticket-source-icon { box-shadow: 0 0 0 3px var(--panel-solid); }
  & .ticket-item:hover .ticket-avatar > .ticket-source-icon, & .ticket-item.active .ticket-avatar > .ticket-source-icon { box-shadow: 0 0 0 3px var(--raised); }
  & .ticket-avatar > .ticket-source-icon.site { background: #ffb347; color: #1a1205; }
  & .ticket-tags > span, & .current-ticket-tag { background: var(--accent-soft); color: var(--accent-2); }
  & .current-ticket-tags { border-color: var(--border); }
  & .avatar { background: hsl(var(--avatar-hue, 225) 18% 22%); color: #e8eaf2; }

  /* Chat header: the assignee button keeps room around the avatar. */
  & .chat-who .assignment-trigger { padding: 4px 10px 4px 4px; border: 1px solid transparent; background: transparent; }
  & .chat-who .assignment-trigger:hover, & .chat-who .assignment-trigger[aria-expanded="true"] { background: var(--raised); border-color: var(--border); }

  /* Messages (bubble colors come from the customization variables). */
  & .msg.user .msg-bubble, & .msg.user.from-site .msg-bubble { border: 1px solid var(--border); }
  & .msg.user.live-draft .msg-bubble { background: transparent; border: 1px dashed var(--border-2); color: var(--muted); }
  & .msg.user.live-draft .draft-label { color: var(--accent-2); }
  & .history-event { border-color: var(--border); background: var(--raised); color: var(--muted); }
  & .history-event span { color: var(--faint); }
  & .quick-inline-item { background: var(--raised); border-color: var(--border); color: var(--text); border-radius: 12px; }
  & .quick-inline-item:hover { border-color: var(--accent-line); }
  & .note-item { background: var(--raised); border-color: var(--border); }
  & .note-form textarea { background: var(--bg); border-color: var(--border-2); }
  & .note-save { border-color: var(--accent-line); color: var(--accent-2); }
  & .note-save:hover { background: var(--accent-soft); }
  & .fear-profile-link:hover, & .info-profile > .fear-profile-link { color: var(--accent-2); }

  /* Status badges. */
  & .badge.open { background: rgba(94, 224, 138, .12); color: var(--green); }
  & .badge.pending { background: rgba(255, 189, 84, .14); color: #ffbd54; }
  & .badge.escalation { background: rgba(255, 140, 70, .15); color: #ff9d5c; }
  & .badge.closed { background: rgba(140, 143, 157, .14); color: var(--muted); }
  & .badge.overdue { background: rgba(221, 66, 66, .18); color: var(--danger-text); }
  & .status-chip { background: rgba(221, 66, 66, .14); color: var(--danger-text); }
  & .status-chip.ok { background: rgba(94, 224, 138, .12); color: var(--green); }

  /* Full-screen sections sit exactly below the header (10 + 56 + 10) and leave the same side gaps as the workspace. */
  & .admin-view, & .settings-view { inset: 76px 12px 12px; border: 1px solid var(--border); border-radius: 16px; background-color: var(--panel) !important; background-image: none !important; }
  & .settings-view { padding: 0; }
  & .settings-panel { margin: 0; border: 0 !important; border-radius: 16px; background: transparent !important; }
  & .settings-head { border-color: var(--border); }
  & .status-view { padding-top: 76px; background-color: var(--bg) !important; background-image: none !important; }
  & .admin-sidebar, & .settings-nav { border-radius: 16px 0 0 16px; border-color: var(--border); background: transparent !important; }
  & .admin-note { background: var(--bg); border-color: var(--border); }
  & .admin-note strong { color: var(--accent-2); }
  & .admin-main { padding-top: 24px; }
  & .admin-stat, & .admin-card, & .staff-stats-select, & .stats-table, & .admin-list-row, & .ban-row, & .settings-card, & .settings-profile-card,
  & .token-note, & .bind-row, & .personal-row, & .session-row { background: var(--raised) !important; border-color: var(--border); border-radius: 16px; }
  & .admin-nav button, & .settings-nav button { border-radius: 12px; color: var(--muted); }
  & .admin-nav button:hover, & .settings-nav button:hover { background: var(--raised); color: #fff; }
  & .admin-nav button.active, & .settings-nav button.active { background: var(--accent-soft); color: #fff; box-shadow: inset 3px 0 var(--accent); }
  & .chart-empty-icon { border-color: var(--border-2); color: var(--accent-2); }
  & .site-notification { background: var(--modal); border-color: var(--border-2); border-radius: 14px; }

  /* Customization page: real vertical rhythm between sections, so labels never touch the controls above. */
  & .settings-stack { display: flex; flex-direction: column; gap: 28px; }
  & .settings-stack > section { display: flex; flex-direction: column; gap: 12px; }
  & .customization-grid { gap: 28px; }
  & .custom-color-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  & .color-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
  & .color-control > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  & .color-control small { color: var(--muted); }
  & .color-control input[type="color"] { flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border-2); border-radius: 8px; background: transparent; cursor: pointer; }
  & .theme-choice { border-color: var(--border); background: var(--bg); border-radius: 14px; }
  & .theme-choice.selected { border-color: var(--accent); background: var(--accent-soft); }
  & .settings-preview > div { background: var(--bg); border-color: var(--border); }
  & .settings-preview p:nth-of-type(2) { background: var(--message-outgoing-bg, var(--accent-soft)); border-color: var(--message-outgoing-border, var(--accent-line)); }
  & .settings-preview button { background: var(--accent); }

  /* Login and boot. */
  & .login-title, & .settings-page-head h1, & .status-top h1 { font-family: Bounded, Onest, sans-serif; }
  & .login-greeting svg { color: var(--accent); }
  & .login-discord { border-color: var(--border-2); background: var(--raised); border-radius: 16px; }
  & .login-discord:hover { border-color: #5865f2; }
  & .login-description, & .login-note { color: var(--muted); }
  & .login-terms, & .login-developer { color: var(--faint); }
  & .boot-screen { color: #fff; }
  & .boot-screen span { color: var(--muted); }

  @media (max-width: 760px) {
    & .topbar { margin: 6px 6px 0; height: 52px; flex-basis: 52px; padding: 0 8px; border-radius: 14px; }
    & .layout { padding: 6px; gap: 6px; }
    & .admin-view, & .settings-view { inset: 64px 6px 6px; }
    & .admin-sidebar, & .settings-nav { border-radius: 16px 16px 0 0; }
    & .status-view { padding-top: 64px; }
    & .custom-color-grid { grid-template-columns: 1fr; }
  }
}