:root {
  --bg: #292c2f;
  --sidebar: #1e2022;
  --card: #1e2022;
  --card2: #2b2e31;
  --input: #2b2e31;
  --gold: #c8b273;
  --gold-dim: rgba(200,178,115,.12);
  --border: rgba(200,178,115,.12);
  --border-hover: rgba(200,178,115,.28);
  --text-primary: #f0f0f0;
  --text-secondary: #b8bcc0;
  --text-muted: #7c858d;
  --success: #3dbe6c;
  --danger: #e74c3c;
  --font: "Inter", "Segoe UI", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { min-height: 100vh; background: var(--bg); color: var(--text-primary); font: 13px/1.45 var(--font); letter-spacing: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 240px; background: var(--sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.sidebar-logo { height: 76px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--border); }
.logo-icon, .user-avatar, .ticker-icon { display: grid; place-items: center; background: var(--gold); color: #1e2022; font-weight: 800; }
.logo-icon { width: 40px; height: 40px; border-radius: 10px; position: relative; overflow: hidden; border: 1px solid rgba(200,178,115,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 20px rgba(200,178,115,.12); }
.logo-icon::before { content: ""; position: absolute; inset: 7px; border-left: 2px solid rgba(30,32,34,.55); border-bottom: 2px solid rgba(30,32,34,.55); }
.logo-icon::after { content: ""; position: absolute; left: 14px; right: 9px; bottom: 15px; height: 2px; background: #1e2022; transform: rotate(-28deg); transform-origin: left center; }
.logo-icon span { position: relative; z-index: 1; margin-top: -18px; margin-left: 16px; font-size: 9px; letter-spacing: 0; }
.logo-text { font-size: 14px; font-weight: 750; line-height: 1.15; }
.logo-sub, .user-role, .topbar-sub, .muted, .panel-sub, .stat-label { color: var(--text-muted); }
.logo-sub, .user-role { font-size: 11px; }
.sidebar-user { display: flex; align-items: center; gap: 13px; padding: 18px 18px; border-bottom: 1px solid var(--border); }
.user-avatar { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; border: 1px solid var(--gold); overflow: hidden; text-decoration: none; box-shadow: 0 0 22px rgba(200,178,115,.16); font-size: 17px; }
.user-avatar img, .profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-avatar span, .profile-avatar-preview span, .avatar-choice span { position: relative; z-index: 1; }
.avatar-mark-alpha { background: radial-gradient(circle at 28% 24%, rgba(216,255,255,.20), transparent 32%), linear-gradient(135deg, #c8b273, #63542b); color: #1e2022; }
.avatar-mark-balance { background: linear-gradient(135deg, #d8d2ba, #45514b); color: #1e2022; }
.avatar-mark-growth { background: linear-gradient(135deg, #7fb8aa, #1e2022); color: #f0f0f0; }
.avatar-mark-capital { background: linear-gradient(135deg, #c8b273, #2b2e31); color: #f0f0f0; }
.avatar-mark-premium { background: linear-gradient(135deg, #eadca6, #7a6c3c); color: #1e2022; }
.avatar-portfolio, .avatar-capital, .avatar-chart, .avatar-bond, .avatar-briefcase { background: linear-gradient(135deg, #c8b273, #63542b); color: #1e2022; }
.avatar-custom { background: var(--card2); color: var(--gold); }
.user-name { font-size: 13px; font-weight: 600; }
.sidebar-nav { padding: 14px 0; overflow-y: auto; }
.nav-section { padding: 14px 20px 7px; color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.nav-item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 20px; color: var(--text-secondary); border-left: 2px solid transparent; }
.nav-item:hover, .nav-item.active { background: var(--gold-dim); color: var(--text-primary); border-left-color: var(--gold); }
.nav-icon { width: 18px; color: var(--gold); text-align: center; font-family: var(--mono); }
.nav-item-badge-wrap .nav-badge { margin-left: auto; }
.nav-badge { background: #e74c3c; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; min-width: 20px; text-align: center; }
.admin-client-select-form { display:flex; align-items:center; }
.limit-switcher { display:flex; gap:4px; align-items:center; }
.limit-btn { padding:3px 10px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:12px; font-weight:600; cursor:pointer; text-decoration:none; transition:background .15s,color .15s,border-color .15s; }
.limit-btn:hover { background:var(--gold-dim); color:var(--text-primary); border-color:var(--border-hover); }
.limit-btn.active { background:var(--gold-dim); color:var(--gold); border-color:rgba(200,178,115,.4); }
.activity-feed { display:flex; flex-direction:column; max-height:420px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(200,178,115,.25) transparent; }
.activity-feed::-webkit-scrollbar { width:4px; }
.activity-feed::-webkit-scrollbar-track { background:transparent; }
.activity-feed::-webkit-scrollbar-thumb { background:rgba(200,178,115,.3); border-radius:4px; }
.activity-item { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.05); flex-shrink:0; }
.activity-item:last-child { border-bottom:none; }
.activity-icon { font-size:16px; width:26px; text-align:center; flex-shrink:0; margin-top:1px; }
.activity-body { flex:1; min-width:0; }
.activity-text { font-size:13px; color:var(--text-primary); line-height:1.4; }
.activity-time { font-size:11px; color:var(--text-muted); margin-top:2px; }
.activity-empty { color:var(--text-muted); text-align:center; padding:24px 0; font-size:13px; }
.sidebar-footer { margin-top: auto; height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 20px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px rgba(61,190,108,.55); }
.main { margin-left: 240px; min-height: 100vh; }
.topbar { height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 24px; background: var(--sidebar); border-bottom: 1px solid var(--border); }
.topbar-title { font-weight: 650; }
.topbar-spacer { flex: 1; }
.topbar-btn, .topbar-icon-btn, .topbar-logout, .tab-btn, .ghost { border: 1px solid var(--border-hover); background: var(--gold-dim); color: var(--gold); border-radius: 6px; cursor: pointer; }
.topbar-btn { padding: 7px 13px; font-weight: 650; }
.topbar-icon-btn { width: 34px; height: 34px; display: grid; place-items: center; }
.topbar-logout { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border-color: rgba(231,76,60,.42); background: linear-gradient(135deg, rgba(231,76,60,.24), rgba(192,57,43,.12)); color: #ffd6d1; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 8px 18px rgba(0,0,0,.16); }
.topbar-logout:hover { border-color: rgba(231,76,60,.72); color: #fff; background: linear-gradient(135deg, rgba(231,76,60,.88), rgba(192,57,43,.68)); }
.content { padding: 22px 24px 34px; }
.page-header { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-title { font-size: 22px; font-weight: 700; }
.page-date { color: var(--text-muted); font-size: 12px; }
.market-ribbon { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; min-height: 42px; margin-bottom: 16px; padding: 0 10px; background: var(--card); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,.18); }
.rate-inline { display: flex; align-items: center; gap: 14px; padding-right: 14px; border-right: 1px solid var(--border); white-space: nowrap; }
.rate-inline-item { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.rate-inline-item span { color: var(--text-secondary); }
.rate-inline-item strong { color: var(--gold); font: 700 13px var(--mono); }
.quote-tape { position: relative; min-height: 42px; display: flex; align-items: center; overflow: hidden; }
.quote-tape::before, .quote-tape::after { content: ""; position: absolute; top: 0; bottom: 0; width: 36px; z-index: 2; pointer-events: none; }
.quote-tape::before { left: 0; background: linear-gradient(90deg, var(--card), rgba(30,32,34,0)); }
.quote-tape::after { right: 0; background: linear-gradient(270deg, var(--card), rgba(30,32,34,0)); }
.quote-tape-track { display: flex; align-items: center; gap: 18px; min-width: max-content; padding: 0 12px; animation: quoteTape 32s linear infinite; }
.quote-tape:hover .quote-tape-track { animation-play-state: paused; }
.quote-tape-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 13px; }
.quote-code { color: var(--text-secondary); font-weight: 650; }
.quote-tape-item strong { color: var(--text-primary); font: 700 13px var(--mono); }
.quote-arrow { font-size: 14px; line-height: 1; }
.quote-up .quote-arrow { color: var(--success); }
.quote-down .quote-arrow { color: var(--danger); }
.quote-change { padding: 2px 5px; border-radius: 5px; font: 700 12px var(--mono); }
.quote-up .quote-change { color: var(--success); background: rgba(61,190,108,.14); }
.quote-down .quote-change { color: var(--danger); background: rgba(231,76,60,.14); }
@keyframes quoteTape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.stat-card, .panel { background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.stat-card { padding: 16px; }
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.stat-value { margin-top: 7px; font-size: 22px; font-weight: 700; font-family: var(--mono); }
.stat-change { margin-top: 5px; font-size: 12px; }
.stat-card-detail { background: linear-gradient(135deg, rgba(200,178,115,.12), rgba(61,190,108,.035)), var(--card); }
.stat-breakdown { display: grid; gap: 10px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--border); }
.stat-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-secondary); }
.stat-row span { display: inline-flex; align-items: center; gap: 9px; }
.stat-row strong { color: var(--text-primary); font-family: var(--mono); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-gold { background: var(--gold); }
.dot-sky { background: #8fdcdd; }
.dot-green { background: var(--success); }
.up, .up-txt, .bid { color: var(--success); }
.dn, .dn-txt, .ask { color: var(--danger); }
.neutral { color: var(--text-muted); }
.grid-3-1 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.trade-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 16px; }
.panel-header { min-height: 50px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.panel-title { font-weight: 650; }
.panel-body { padding: 14px 16px 16px; }
.ptable { width: 100%; border-collapse: collapse; }
.ptable th { padding: 0 12px 10px 0; text-align: left; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.ptable td { padding: 10px 12px 10px 0; border-bottom: 1px solid rgba(200,178,115,.06); vertical-align: middle; white-space: nowrap; }
.otable { table-layout: fixed; }
.otable-action { text-align: right; }
.ptable tr:last-child td { border-bottom: 0; }
.ptable tr.pnl-row-up td { background: rgba(61,190,108,.055); }
.ptable tr.pnl-row-down td { background: rgba(231,76,60,.055); }
.ptable tr.pnl-row-up td:first-child, .ptable tr.pnl-row-down td:first-child { padding-left: 8px; border-left: 2px solid transparent; }
.ptable tr.pnl-row-up td:first-child { border-left-color: var(--success); }
.ptable tr.pnl-row-down td:first-child { border-left-color: var(--danger); }
.r { text-align: right !important; }
.ticker-cell { display: flex; align-items: center; gap: 10px; font-weight: 600; font-family: var(--mono); }
.ticker-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--card2); color: var(--gold); border: 1px solid var(--border); font-size: 10px; }
.ticker-name { color: var(--text-muted); font-family: var(--font); font-size: 11px; font-weight: 400; }
.order-item, .balance-row, .news-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(200,178,115,.06); }
.order-item:last-child, .balance-row:last-child, .news-item:last-child { border-bottom: 0; }
.order-side { min-width: 42px; text-align: center; font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 4px; }
.order-side.buy { background: rgba(61,190,108,.15); color: var(--success); }
.order-side.sell { background: rgba(231,76,60,.15); color: var(--danger); }
.quick-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
.action-tile { min-height: 58px; display: grid; align-content: center; gap: 3px; padding: 12px 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--card2); color: var(--text-primary); cursor: pointer; transition: border-color .15s ease, transform .15s ease, background .15s ease; }
.action-tile:hover { border-color: var(--border-hover); background: rgba(200,178,115,.08); transform: translateY(-1px); }
.action-tile strong { font-size: 13px; }
.action-tile span { color: var(--text-muted); font-size: 11px; }
.action-tile.action-green { border-color: rgba(61,190,108,.28); background: linear-gradient(135deg, rgba(61,190,108,.18), rgba(61,190,108,.06)); }
.action-tile.action-gold { border-color: rgba(200,178,115,.34); background: linear-gradient(135deg, rgba(200,178,115,.18), rgba(200,178,115,.05)); }
.order-ticker, .order-price, .balance-val { font-family: var(--mono); font-weight: 600; }
.doc-download-link { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--gold); transition: color .15s, border-color .15s; }
.doc-download-link:hover { color: var(--gold); border-color: var(--gold); }
.order-qty, .balance-label { color: var(--text-secondary); }
.order-price, .balance-val { margin-left: auto; }
.order-status, .badge { font-size: 10px; padding: 3px 8px; border-radius: 10px; font-weight: 650; white-space: nowrap; }
.status-pend, .badge { background: var(--gold-dim); color: var(--gold); }
.status-active  { background: rgba(200,178,115,.18); color: var(--gold);    border: 1px solid rgba(200,178,115,.3); }
.status-filled  { background: rgba(61,190,108,.15);  color: var(--success); border: 1px solid rgba(61,190,108,.25); }
.status-partial { background: rgba(61,190,108,.09);  color: var(--success); border: 1px solid rgba(61,190,108,.18); }
.status-canceled, .status-canc { background: rgba(160,160,160,.12); color: var(--text-muted); border: 1px solid rgba(160,160,160,.2); }
.status-exec    { background: rgba(61,190,108,.15);  color: var(--success); }
.status-rejected { background: rgba(231,76,60,.15); color: var(--danger); border: 1px solid rgba(231,76,60,.25); }
.btn-cancel-order { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 5px; border: 1px solid rgba(231,76,60,.4); background: rgba(231,76,60,.1); color: var(--danger); cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; }
.btn-cancel-order:hover    { background: rgba(231,76,60,.22); border-color: rgba(231,76,60,.65); }
.btn-cancel-order:disabled { opacity: .45; cursor: not-allowed; }
.cancel-notice { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; font-size: 13px; border: 1px solid; }
.cancel-notice.ok  { background: rgba(61,190,108,.08);  border-color: rgba(61,190,108,.3);  color: var(--success); }
.cancel-notice.err { background: rgba(231,76,60,.08);   border-color: rgba(231,76,60,.3);   color: var(--danger); }
.mono { font-family: var(--mono); }
.tab-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.tab-btn, .ghost { padding: 8px 12px; color: var(--text-secondary); background: transparent; }
.tab-btn.active, .ghost:hover { color: var(--gold); background: var(--gold-dim); }
.form, .order-form { display: flex; flex-direction: column; gap: 11px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.form-group, label { display: grid; gap: 6px; color: var(--text-muted); font-size: 11px; }
.form-input, .form-select, input, select, textarea { width: 100%; min-height: 38px; background: var(--input); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; color: var(--text-primary); outline: 0; }
textarea { resize: vertical; }
.form-input:focus, .form-select:focus, input:focus, select:focus, textarea:focus { border-color: var(--gold); }
.btn-buy, .btn-sell, .primary, .danger { min-height: 40px; border: 0; border-radius: 6px; cursor: pointer; font-weight: 800; color: #fff; }
.btn-buy, .primary { background: linear-gradient(135deg, rgba(61,190,108,.95), rgba(61,190,108,.70)); border: 1px solid rgba(61,190,108,.4); }
.btn-sell, .danger { background: linear-gradient(135deg, rgba(231,76,60,.95), rgba(231,76,60,.70)); border: 1px solid rgba(231,76,60,.35); }
button:disabled { opacity: .55; cursor: wait; }
.summary-box { background: var(--card2); border-radius: 6px; padding: 10px 12px; display: grid; gap: 5px; }
.summary-line { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.summary-total-card { background: var(--card2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; }
.summary-total-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; color: var(--gold); border-top: 1px solid var(--border); margin-top: 2px; padding-top: 6px; }
.book-side { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.books { display: grid; gap: 12px; }
.book-card { background: var(--card2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.book-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.book-label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.book-head, .book-level { display: grid; grid-template-columns: 1fr 80px 80px; gap: 8px; align-items: center; }
.book-head { color: var(--text-muted); font-size: 11px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.book-level { font-family: var(--mono); font-size: 12px; padding: 3px 0; }
.spark { display: block; background: var(--card2); border-radius: 8px; }
.quote-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.quote-grid > div { background: var(--card2); border-radius: 6px; padding: 10px 12px; }
.quote-grid strong { display: block; margin-top: 4px; font: 600 14px var(--mono); }
.flash-stack { display: grid; gap: 10px; margin-bottom: 16px; }
.flash { border-radius: 8px; padding: 10px 12px; background: var(--gold-dim); color: var(--text-primary); }
.flash.error { background: rgba(231,76,60,.18); }
.flash.success { background: rgba(61,190,108,.18); }
.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-panel { width: min(560px, 100%); background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 28px; box-shadow: 0 22px 60px rgba(0,0,0,.28); }
.login-logo { height: auto; padding: 0 0 22px; border-bottom: 0; gap: 16px; }
.login-logo .logo-text { font-size: 24px; font-weight: 850; letter-spacing: 0; }
.login-logo-icon { width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(135deg, #c8b273, #f0d891 46%, #7c6a38); box-shadow: inset 0 0 0 1px rgba(255,255,255,.20), 0 14px 30px rgba(0,0,0,.24), 0 0 26px rgba(200,178,115,.18); }
.login-logo-icon::before { inset: 10px; border-left-width: 3px; border-bottom-width: 3px; }
.login-logo-icon::after { left: 19px; right: 11px; bottom: 20px; height: 3px; }
.login-logo-icon span { margin-top: -24px; margin-left: 22px; font-size: 10px; font-weight: 900; }
.login-tabs, .login-methods { display: grid; gap: 8px; margin-bottom: 16px; }
.login-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.login-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.login-tab, .login-method { min-height: 38px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--card2); color: var(--text-secondary); cursor: pointer; font-weight: 700; }
.login-tab:hover, .login-method:hover, .login-tab.active, .login-method.active { border-color: var(--border-hover); background: var(--gold-dim); color: var(--gold); }
.login-pane, .login-method-pane { display: none; }
.login-pane.active, .login-method-pane.active { display: grid; }
.login-pane.active { gap: 0; }
.login-method-pane.active { gap: 11px; }
.login-stub { color: var(--text-muted); font-size: 12px; }
.login-cert-box { display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--card2); }
.login-cert-box strong, .login-cert-box span { display: block; }
.login-cert-box span { color: var(--text-muted); font-size: 12px; margin-top: 3px; }
.login-cert-icon { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; border-radius: 8px; border: 1px solid var(--border-hover); color: var(--gold); background: var(--gold-dim); font-weight: 800; font-size: 12px; }
.hint { color: var(--text-muted); font-size: 12px; margin-top: 14px; }
.login-forgot { text-align: right; margin: -4px 0 8px; font-size: 13px; }
.login-forgot a { color: var(--text-muted); text-decoration: none; }
.login-forgot a:hover { color: var(--gold); }
.login-divider { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--text-muted); font-size: 12px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.btn-gosuslugi { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid #0065B3; border-radius: 6px; background: transparent; color: #4fa3e0; font-weight: 700; font-size: 14px; text-decoration: none; letter-spacing: .03em; transition: background .15s, color .15s; cursor: pointer; }
.btn-gosuslugi:hover { background: rgba(0,101,179,.12); color: #6dbfff; }
.login-register { text-align: center; font-size: 13px; color: var(--text-muted); margin-top: 16px; }
.login-register a { color: var(--gold); text-decoration: none; font-weight: 600; }
.login-register a:hover { text-decoration: underline; }
.toolbar { display: grid; grid-template-columns: 120px 1fr 110px auto; gap: 10px; margin-bottom: 16px; }
.trades-export-form { margin-left: auto; display: grid; grid-template-columns: 150px 150px auto; gap: 8px; align-items: center; }
.trades-export-form .primary { min-height: 38px; padding: 0 14px; white-space: nowrap; }
.date-input { color-scheme: dark; }
.date-input::-webkit-calendar-picker-indicator { filter: invert(78%) sepia(23%) saturate(606%) hue-rotate(5deg) brightness(94%); cursor: pointer; opacity: .9; }
.account-sections { display: grid; gap: 14px; }
.account-section { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--card2); }
.account-section-title { color: var(--gold); font-weight: 800; margin-bottom: 2px; }
.modal-backdrop { position: fixed; inset: 0; z-index: 9990; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.68); backdrop-filter: blur(4px); }
.modal-card { width: min(460px, 100%); padding: 22px; border: 1px solid var(--border-hover); border-radius: 12px; background: var(--card); box-shadow: 0 24px 70px rgba(0,0,0,.45); }
.modal-title { color: var(--gold); font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.modal-text { color: var(--text-secondary); line-height: 1.5; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.modal-actions .primary, .modal-actions .ghost { min-height: 38px; padding: 0 14px; }
.inline-edit { display: grid; grid-template-columns: 1fr 110px 130px auto; gap: 8px; align-items: center; min-width: 620px; }
.status-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.status-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); background: var(--card2); font-size: 12px; }
.status-chip.status-ok { color: var(--success); border-color: rgba(61,190,108,.35); background: rgba(61,190,108,.10); }
.chart-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.chart-container { height: 320px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--card2); }
.bk-metrics { display: grid; grid-template-columns: 1fr 80px 1fr; gap: 8px; margin-bottom: 12px; }
.bk-metric { background: var(--card2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.bk-metric-center { text-align: center; }
.bk-metric-right { text-align: right; }
.bk-metric-label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 6px; }
.bk-metric-val { font: 700 18px var(--mono); }
.bk-bid { color: rgb(61,190,108); }
.bk-ask { color: rgb(231,76,60); }
.bk-vol-wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin-bottom: 6px; }
.bk-vol-side { display: flex; flex-direction: column; gap: 1px; }
.bk-vol-side strong { font: 600 13px var(--mono); color: rgb(61,190,108); }
.bk-vol-side-r { align-items: flex-end; }
.bk-vol-side-r strong { color: rgb(231,76,60); }
.bk-vol-pct { font-size: 11px; color: var(--text-muted); }
.bk-vol-label { font-size: 10px; color: var(--text-muted); }
.bk-vol-center { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); text-align: center; white-space: nowrap; }
.bk-vol-track { height: 4px; background: rgba(61,190,108,.2); border-radius: 2px; margin-bottom: 12px; }
.bk-vol-fill { height: 100%; background: rgb(61,190,108); border-radius: 2px; transition: width .5s; }
.bk-ladder { border: 1px solid var(--border); border-radius: 8px; background: var(--card2); overflow: hidden; display: flex; flex-direction: column; }
#book-ladder-body { overflow-y: auto; max-height: 320px; }
.bk-head { display: grid; grid-template-columns: 1fr 90px 1fr; padding: 8px 10px; color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); }
.bk-head-c { text-align: center; }
.bk-head-r { text-align: right; }
.bk-row { display: grid; grid-template-columns: 1fr 90px 1fr; align-items: center; min-height: 30px; padding: 2px 8px; border-bottom: 1px solid rgba(200,178,115,.05); font-family: var(--mono); font-size: 12px; }
.bk-row:last-child { border-bottom: 0; }
.bk-cell-bid { position: relative; display: flex; align-items: center; justify-content: flex-end; min-height: 22px; border-radius: 4px; overflow: hidden; color: rgb(61,190,108); }
.bk-cell-ask { position: relative; display: flex; align-items: center; min-height: 22px; border-radius: 4px; overflow: hidden; color: rgb(231,76,60); }
.bk-cell-price { text-align: center; font-weight: 700; color: var(--text-primary); }
.bk-row[data-book-price], .bk-cell-val[data-book-price] { cursor: pointer; }
.bk-row[data-book-price]:hover .bk-cell-price { color: var(--gold); }
.price-from-book { border-color: var(--gold) !important; box-shadow: 0 0 0 2px rgba(200,178,115,.16); }
.bk-bar { position: absolute; top: 0; bottom: 0; opacity: .18; border-radius: 4px; }
.bk-bar-bid { right: 0; background: rgb(61,190,108); }
.bk-bar-ask { left: 0; background: rgb(231,76,60); }
.bk-cell-val { position: relative; z-index: 1; padding: 0 5px; }
.bk-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 0 2px; font-size: 11px; color: var(--text-muted); }
.bk-footer-val { font-family: var(--mono); font-weight: 600; color: var(--gold); }
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.info-grid > div { background: var(--card2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.info-grid span { display: block; color: var(--text-muted); font-size: 10px; }
.info-grid strong { display: block; margin-top: 4px; font-size: 12px; overflow-wrap: anywhere; }
.submit-status { min-height: 18px; font-size: 12px; }
.order-status-card { margin-top: 12px; border-radius: 8px; border: 1px solid var(--border); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.order-status-pending { border-color: rgba(200,178,115,.3); background: rgba(200,178,115,.06); }
.order-status-ok { border-color: rgba(61,190,108,.35); background: rgba(61,190,108,.07); }
.order-status-error { border-color: rgba(231,76,60,.35); background: rgba(231,76,60,.07); }
.order-status-header { display: flex; align-items: center; gap: 8px; }
.order-status-icon { font-size: 16px; line-height: 1; }
.order-status-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.order-status-ok .order-status-title { color: var(--success); }
.order-status-error .order-status-title { color: var(--danger); }
.order-status-body { display: flex; flex-direction: column; gap: 4px; }
.order-status-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.order-status-row span { color: var(--text-muted); }
.order-status-row strong { color: var(--text-primary); font-weight: 500; }
.instr-search { position: relative; }
.instr-input { cursor: text; padding-right: 34px; }
.instr-clear { position: absolute !important; top: 50% !important; right: 8px !important; width: 24px !important; height: 24px !important; min-height: 24px !important; padding: 0 !important; transform: translateY(-50%) !important; border: 1px solid transparent; border-radius: 50%; background: rgba(200,178,115,.10); color: var(--text-muted); line-height: 20px; font-size: 18px; cursor: pointer; display: none; z-index: 205; }
.instr-clear.visible { display: grid !important; place-items: center; }
.instr-clear:hover { color: var(--text-primary); border-color: var(--border-hover); background: rgba(200,178,115,.18); }
.instr-dropdown { display: none; position: absolute; top: calc(100% + 3px); left: 0; right: 0; background: var(--card); border: 1px solid var(--border-hover); border-radius: 6px; max-height: 280px; overflow-y: auto; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.instr-dropdown.open { display: block; }
.instr-opt { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid rgba(200,178,115,.06); }
.instr-opt:last-child { border-bottom: 0; }
.instr-opt:hover, .instr-opt.active { background: var(--gold-dim); }
.instr-opt-code { font-weight: 700; font-family: var(--mono); font-size: 13px; color: var(--text-primary); }
.instr-opt-name { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.avatar-form { display: grid; gap: 14px; }
.avatar-profile-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: 16px; }
.profile-avatar-preview { width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold); overflow: hidden; color: #1e2022; font-weight: 800; font-size: 24px; box-shadow: 0 0 26px rgba(200,178,115,.16); }
.profile-name-main { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.avatar-picker { display: grid; grid-template-columns: repeat(5, 56px); gap: 10px; }
.avatar-choice { width: 56px; height: 56px; display: grid; place-items: center; padding: 0; border: 2px solid var(--border); border-radius: 50%; cursor: pointer; background: var(--card2); overflow: hidden; transition: border-color .15s; }
.avatar-choice:hover { border-color: var(--border-hover); }
.avatar-choice input { display: none; }
.avatar-choice img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar-choice span { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; color: inherit; font-weight: 800; font-size: 17px; }
.avatar-choice:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(200,178,115,.30); }
.avatar-save-row { display: flex; gap: 8px; margin-top: 8px; }
.avatar-upload-row { display: flex; gap: 8px; flex-wrap: wrap; }
.avatar-upload-btn { position: relative; overflow: hidden; display: inline-grid; place-items: center; }
.avatar-upload-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.avatar-crop { display: grid; gap: 10px; max-width: 280px; }
.avatar-crop canvas { width: 132px; height: 132px; border-radius: 50%; border: 1px solid var(--border); background: var(--card2); }
.avatar-crop .error { color: var(--danger); }
.pos-actions { white-space: nowrap; text-align: right; }
.pos-action-btn { padding: 3px 9px; font-size: 11px; font-weight: 600; border-radius: 4px; cursor: pointer; border: 1px solid var(--border-hover); background: transparent; color: var(--text-secondary); text-decoration: none; display: inline-block; line-height: 1.6; transition: color .13s, border-color .13s, background .13s; }
.pos-action-btn + .pos-action-btn { margin-left: 4px; }
.pos-action-btn:hover { color: var(--gold); border-color: var(--gold); background: var(--gold-dim); }
.pos-action-close { color: var(--danger); border-color: rgba(231,76,60,.35); }
.pos-action-close:hover { color: var(--danger); background: rgba(231,76,60,.08); border-color: var(--danger); }
.pos-action-buy { color: var(--success); border-color: rgba(61,190,108,.35); }
.pos-action-buy:hover { color: var(--success); background: rgba(61,190,108,.08); border-color: var(--success); }
@keyframes preset-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(200,178,115,.5)} 50%{box-shadow:0 0 0 6px rgba(200,178,115,0)} }
.preset-highlight { animation: preset-pulse .8s ease 2; }
.tariff-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--card2); margin-bottom: 12px; }
.tariff-label { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.tariff-title { color: var(--gold); font-size: 22px; font-weight: 800; margin: 2px 0 4px; }
.tariff-list { display: grid; gap: 8px; }
.tariff-option { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(200,178,115,.04); }
.tariff-option strong { display: block; margin-bottom: 3px; }
.tariff-option span { color: var(--text-muted); font-size: 12px; }
.tariff-option.active { border-color: var(--gold); background: var(--gold-dim); }
.tariff-current-only { align-items: flex-start; }
.profile-detail-list { display: grid; gap: 8px; margin-top: 12px; }
.mini-btn { min-height: 28px; padding: 4px 8px; margin-left: 8px; font-size: 11px; vertical-align: middle; }
.action-button { font: inherit; text-align: left; }
.instruction-grid, .test-grid { display: grid; gap: 12px; }
.instruction-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.instruction-card, .test-card { border: 1px solid var(--border); border-radius: 8px; background: var(--card2); padding: 12px; }
.instruction-card { display: grid; align-content: start; gap: 8px; }
.instruction-title { color: var(--gold); font-weight: 800; margin-bottom: 2px; }
.compact-tabs { margin: 10px 0 14px; }
.test-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.test-card:hover { border-color: var(--border-hover); }
.test-card:hover::after { content: attr(data-tooltip); position: absolute; left: 14px; right: 14px; bottom: calc(100% + 8px); z-index: 20; padding: 10px 12px; border: 1px solid var(--border-hover); border-radius: 8px; background: #1e2022; color: var(--text-primary); font-size: 12px; line-height: 1.45; box-shadow: 0 14px 32px rgba(0,0,0,.42); }
.test-card strong { display: block; margin-bottom: 4px; }
.test-code { color: var(--gold); font: 700 11px var(--mono); margin-bottom: 4px; }
.test-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: rgba(200,178,115,.2); border-radius: 4px; }
@media (max-width: 1100px) {
  .sidebar { position: static; width: auto; }
  .main { margin-left: 0; }
  .stats-grid, .dashboard-market, .grid-3-1, .grid-2, .trade-grid, .toolbar, .book-stats, .info-grid, .trades-export-form { grid-template-columns: 1fr; }
  .rate-strip { grid-template-columns: 1fr; }
  .rate-strip-title { min-height: 32px; border-right: 0; border-bottom: 1px solid var(--border); }
  .avatar-picker { grid-template-columns: repeat(5, 56px); }
  .tariff-card { align-items: flex-start; flex-direction: column; }
  .instruction-grid, .test-card { grid-template-columns: 1fr; }
  .test-actions { justify-content: flex-start; }
}

/* ===== Messenger (admin chat) ===== */
.messenger-layout { display: grid; grid-template-columns: 300px 1fr; height: calc(100vh - 160px); min-height: 500px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); }
.messenger-sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--sidebar); }
.messenger-search-wrap { padding: 12px; border-bottom: 1px solid var(--border); }
.messenger-search { width: 100%; background: var(--input); border: 1px solid var(--border); border-radius: 6px; padding: 7px 12px; color: var(--text-primary); font-size: 13px; outline: none; box-sizing: border-box; }
.messenger-search:focus { border-color: var(--gold); }
.messenger-filters { display: flex; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.msg-filter { background: transparent; border: 1px solid var(--border); border-radius: 12px; color: var(--text-muted); font-size: 11px; padding: 3px 10px; cursor: pointer; transition: all .15s; white-space: nowrap; }
.msg-filter.active { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); }
.msg-filter-cnt { font-weight: 700; }
.messenger-list { flex: 1; overflow-y: auto; }
.msg-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; }
.msg-item:hover { background: var(--gold-dim); }
.msg-item.active { background: rgba(200,178,115,.12); border-left: 3px solid var(--gold); }
.msg-item-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--gold-dim); border: 1px solid rgba(200,178,115,.3); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--gold); flex-shrink: 0; font-size: 15px; }
.msg-item-body { flex: 1; min-width: 0; }
.msg-item-head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.msg-item-name { font-weight: 600; font-size: 13px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-item-date { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.msg-item-topic { font-size: 12px; color: var(--text-secondary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-item-preview { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-badge-new { background: rgba(231,76,60,.2); color: #e74c3c; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; flex-shrink: 0; }
.messenger-chat { display: flex; flex-direction: column; background: var(--card); }
.messenger-chat-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.messenger-chat-name { font-weight: 700; font-size: 15px; }
.messenger-chat-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.messenger-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.msg-bubble { max-width: 75%; padding: 12px 16px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
.msg-bubble-client { align-self: flex-start; background: var(--card2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg-bubble-admin { align-self: flex-end; background: rgba(200,178,115,.12); border: 1px solid rgba(200,178,115,.2); border-bottom-right-radius: 4px; }
.msg-bubble-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.msg-status-chip { margin-left: auto; font-size: 11px; padding: 3px 10px; border-radius: 12px; font-weight: 600; background: rgba(200,178,115,.15); color: var(--gold); border: 1px solid rgba(200,178,115,.25); }
.msg-status-chip[data-status="new"] { background: rgba(231,76,60,.12); color: #e74c3c; border-color: rgba(231,76,60,.25); }
.msg-status-chip[data-status="open"] { background: rgba(61,190,108,.12); color: var(--success); border-color: rgba(61,190,108,.25); }
.msg-status-chip[data-status="closed"] { background: var(--card2); color: var(--text-muted); border-color: var(--border); }
.messenger-input-wrap { border-top: 1px solid var(--border); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.messenger-textarea { background: var(--input); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); padding: 10px 14px; font-size: 13px; resize: none; outline: none; font-family: inherit; }
.messenger-textarea:focus { border-color: var(--gold); }
.messenger-input-actions { display: flex; gap: 10px; align-items: center; }
.messenger-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); }
.messenger-empty-icon { font-size: 40px; margin-bottom: 8px; }

/* ── Client chat layout ──────────────────────────────────────────────── */
.chat-client-layout { display: flex; flex-direction: column; gap: 16px; max-width: 860px; margin: 0 auto; }
.chat-messages-panel { display: flex; flex-direction: column; }
.chat-msg-scroll { flex: 1; overflow-y: auto; max-height: 60vh; min-height: 240px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; color: var(--text-muted); }
.chat-empty-icon { font-size: 36px; }
.chat-input-wrap { border-top: 1px solid var(--border); padding: 14px 16px; display: flex; gap: 10px; align-items: flex-end; }
.chat-textarea { flex: 1; background: var(--input); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); padding: 10px 14px; font-size: 13px; resize: none; outline: none; font-family: inherit; }
.chat-textarea:focus { border-color: var(--gold); }
.chat-send-btn { min-height: 40px; padding: 0 20px; font-size: 13px; }
/* ── Chat bubbles (shared client + admin) ────────────────────────────── */
.chat-bubble { max-width: 75%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
.chat-bubble-client { align-self: flex-end; background: var(--gold-dim); border: 1px solid rgba(200,178,115,.25); border-bottom-right-radius: 4px; }
.chat-bubble-manager { align-self: flex-start; background: var(--card2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-bubble-meta { font-size: 10px; color: var(--text-muted); margin-bottom: 4px; }
.chat-bubble-body { word-break: break-word; white-space: pre-wrap; }
/* ── Admin/manager messenger messages area ───────────────────────────── */
.messenger-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; }

.chat-read-hint { font-size: 10px; color: var(--success); text-align: right; margin-top: 3px; }
.chat-unread-hint { color: var(--text-muted); }

.msg-item-avatar img, .chat-avatar-mini img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.chat-attach-btn { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 8px; display: grid; place-items: center; color: var(--gold); background: var(--card2); font-weight: 800; cursor: pointer; flex: 0 0 40px; position: relative; overflow: hidden; }
.chat-attach-btn:hover { border-color: var(--border-hover); background: var(--gold-dim); }
.chat-attach-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chat-file-chip { max-width: 180px; min-height: 32px; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-secondary); background: var(--card2); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-chip[style*="display: none"] { display: none !important; }
.chat-file-chip button { margin-left: 6px; border: 0; background: transparent; color: var(--danger); cursor: pointer; font-weight: 800; }
.chat-message-row { display: flex; align-items: flex-end; gap: 8px; max-width: 86%; }
.chat-message-peer { align-self: flex-start; }
.chat-message-own { align-self: flex-end; flex-direction: row-reverse; }
.chat-avatar-mini { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; border: 1px solid rgba(200,178,115,.28); display: grid; place-items: center; overflow: hidden; color: var(--gold); font-size: 10px; font-weight: 800; background: var(--gold-dim); }
.chat-message-row .chat-bubble { max-width: 100%; }
.chat-attachment { margin-top: 8px; display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid rgba(200,178,115,.18); border-radius: 8px; background: rgba(30,32,34,.28); color: var(--text-primary); max-width: 260px; }
.chat-attachment:hover { border-color: var(--border-hover); background: rgba(200,178,115,.10); }
.chat-attachment-icon { min-width: 32px; height: 22px; border-radius: 5px; display: grid; place-items: center; background: rgba(200,178,115,.18); color: var(--gold); font-size: 10px; font-weight: 800; }

/* ===== Arbitrary instructions ===== */
.instr-status-new      { background: rgba(200,178,115,.15); color: var(--gold); }
.instr-status-read     { background: rgba(52,152,219,.15);  color: #3498db; }
.instr-status-progress { background: rgba(39,174,96,.15);   color: #27ae60; }
.instr-status-done     { background: rgba(39,174,96,.15);   color: #27ae60; }
.instr-status-rejected { background: rgba(231,76,60,.15);   color: #e74c3c; }