/* Compact ARTOPTION administration. Presentation only. */
body:has(#app:not(.hidden)){--bg:#171514;--panel:#24201d;--line:#453a31;--muted:#b0a296;--text:#f1e8e0;--accent:#ff983f;--blue:#e7b47f;--green:#5bd19a;--red:#f18785;background:#171514;color:#f1e8e0;font-size:13px}
#app{grid-template-columns:188px minmax(0,1fr);background:radial-gradient(ellipse at 100% 0,#8b4b2010,transparent 55%),#171514}
#app>aside{background:linear-gradient(155deg,#2c241e,#1d1916 65%);border-right:1px solid #51402f;height:100dvh;overflow:auto;scrollbar-width:thin;scrollbar-color:#66503a #211a14}
#app .brand{height:64px;padding:0 16px;gap:10px;border-color:#51402f;flex-shrink:0}
#app .brand span{width:31px;height:31px;border-radius:9px;background:linear-gradient(135deg,#ffb668,#ef7e2a);box-shadow:0 3px 9px #0003;color:#271a0d}
#app .brand b{font-size:13px;letter-spacing:.08em}#app .brand small{font-size:8px;letter-spacing:.13em;color:#b69d86}
#app>aside nav{padding:12px 9px;gap:4px}
#app>aside nav>button,#app .finance-nav-trigger{min-height:38px;padding:9px 12px;border-radius:8px;color:#bfae9f;font-size:12px}
#app>aside nav button:hover{background:#ffffff06;color:#f6eadd}
#app>aside nav button.active{background:linear-gradient(100deg,#92502140,#5f3d2420);color:#ffdbb9;box-shadow:inset 3px 0 #ff9c47,inset 0 1px #ffa96008}
#app .finance-subnav{padding-left:7px;border-color:#775135}#app .finance-subnav button{font-size:10px;color:#bda78e;padding:8px 5px;line-height:1.4}
#app .finance-subnav button.active{color:#ffce9b}
#app .aside-bottom{padding:12px 10px;border-color:#51402f;gap:2px}#app .aside-bottom a,#app .aside-bottom button{font-size:11px;padding:8px;color:#baa28b}
#app>main{min-width:0;padding:0 18px 24px}
#app>main>header{min-height:64px;height:auto;margin-bottom:14px;padding:12px 0;gap:16px;border-color:#45392e;background:transparent}
#app>main>header h1{font-size:22px;line-height:1.1;letter-spacing:-.025em;margin:0 0 5px;color:#fff3e8}
#app>main>header p{font-size:11px;color:#b2a08f}
#app .header-actions{gap:10px}#app .header-actions span{font-size:10px}#app .header-actions button{font-size:11px;padding:7px 12px;min-height:32px;background:#382c23;border:1px solid #674931;color:#f3cba3;border-radius:7px}
#app .panel{background:linear-gradient(145deg,#28221e,#211d19);border:1px solid #4f3e30;border-radius:12px;box-shadow:0 8px 25px #0002,inset 0 1px #ffffff04;min-width:0}
#app .panel-head{min-height:44px;padding:10px 12px;gap:8px 12px;flex-wrap:wrap;border-color:#4c3b2e}
#app .panel-head h2{font-size:13px;line-height:1.35}
#app .panel-controls{gap:7px;flex-wrap:wrap;align-items:center;min-width:0}
#app .panel-controls>button,#app .panel-head>button{background:#392c22;border:1px solid #654a32;color:#e9c7a5;border-radius:6px;padding:6px 9px;font-size:11px;min-height:30px}
#app input,#app select,#app textarea{background:#191613;border:1px solid #5a4330;border-radius:6px;color:#f2e4d6;max-width:100%;min-width:0;font-size:12px;padding:7px 9px;accent-color:#ff9b48;color-scheme:dark}
#app input::placeholder,#app textarea::placeholder{color:#a39080}
#app input:focus,#app select:focus,#app textarea:focus{outline:2px solid #f3ad6a;outline-offset:1px;border-color:#f3ad6a}
#app button:focus-visible,#app a:focus-visible,body:has(#app:not(.hidden)) dialog button:focus-visible{outline:2px solid #ffc085;outline-offset:2px}
#app button:disabled{opacity:.45;cursor:not-allowed}
#app label{color:#c7b19b;font-size:11px}
#app .panel-head input{width:240px;padding:7px 9px}
#app .metrics{gap:10px;margin-bottom:14px;grid-template-columns:repeat(4,minmax(0,1fr))}
#app .metric{position:relative;overflow:hidden;padding:15px 16px;border:1px solid #6a4831;border-radius:10px;background:radial-gradient(ellipse at 100% 0,#a75d2825,transparent 70%),linear-gradient(130deg,#372a20,#292119);box-shadow:inset 0 1px #ffffff08,0 4px 0 #100c09}
#app .metric:nth-child(4n+2){background:linear-gradient(130deg,#23362c,#1e2821);border-color:#3b5a46}#app .metric:nth-child(4n+3){background:linear-gradient(130deg,#362b41,#251f2d);border-color:#59456c}#app .metric:nth-child(4n+4){background:linear-gradient(130deg,#363122,#272218);border-color:#625634}
#app .metric small{font-size:9px;color:#c3b29f;letter-spacing:.05em}#app .metric strong{font-size:25px;color:#ffbd87;letter-spacing:-.03em;margin-top:7px}#app .metric:nth-child(4n+2) strong{color:#79dbac}#app .metric:nth-child(4n+3) strong{color:#cbb0f0}#app .metric:nth-child(4n+4) strong{color:#f3ce84}#app .metric span{font-size:10px;color:#bda995}
#app .grid-two{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px}
#app .table-wrap{overflow:auto;max-width:100%;scrollbar-color:#8b643f #201912;scrollbar-width:thin;border-radius:0 0 11px 11px}
#app table{font-size:12px;white-space:nowrap;border-collapse:separate;border-spacing:0}
#app th,#app td{padding:8px 10px;font-size:12px;border-bottom:1px solid #3e3026}
#app th{padding:10px;background:#30251c;color:#c9aa89;font-size:9px;letter-spacing:.035em}
#app td{background:#211c17;color:#e2d3c4;line-height:1.45;vertical-align:middle}
#app tbody tr:nth-child(even)>td{background:#251f19}#app tbody tr:hover>td{background:#30261c}
#app td small{font-size:10px;line-height:1.45;color:#b09b85;margin-top:3px}
#app .money{font-variant-numeric:tabular-nums;font-size:12px}#app .positive{color:#6fd4a1}#app .negative{color:#f7958b}
#app .badge{font-size:9px;padding:3px 6px;background:#443627;color:#d6b78d;border:1px solid #715132}
#app .badge.active,#app .badge.paid,#app .badge.answered,#app .badge.automatic{background:#1e3e2e;color:#84e1ad;border-color:#38694a}
#app .badge.blocked,#app .badge.rejected{background:#492b26;color:#ffb6a2;border-color:#8b4b3d}
#app .badge.new,#app .badge.pending,#app .badge.manual{background:#49351c;color:#f6cf8c;border-color:#8d662f}
#app .actions{gap:5px;align-items:center}
#app .actions button,#app .limit-button,#app .balance-cell-button{padding:5px 8px;background:#382b20;border:1px solid #684a30;border-radius:5px;color:#e9c5a0;font-size:11px;min-height:30px;line-height:1.35}
#app .balance-cell-button{min-width:82px;text-align:left}#app .balance-cell-button.positive{color:#75d8a4}
#app .actions .danger{color:#f5a9a3;border-color:#7d4438;background:#3e2520}
#app .actions .topup{color:#8ce3b6;background:#203c2b;border-color:#42684b}
#app .actions .partner-active{color:#efc77c;background:#46351e;border-color:#84602f}
#app .limit-button small,#app .balance-cell-button small{font-size:9px;line-height:1.2;margin-top:2px;color:#b49a7f}
#app .traders-panel>.panel-head{padding:10px 12px;gap:9px;position:relative}
#app .traders-panel>.panel-head>.panel-controls{flex:1 1 100%;gap:7px}
#app .traders-pagination{padding:8px 12px;min-height:44px;border-color:#4a3828;font-size:11px;gap:9px}
#app .traders-pagination label{gap:6px}#app .traders-page-navigation{gap:7px}
#app .traders-pagination input{width:54px;padding:5px 7px}#app .traders-pagination select{min-width:54px;padding:5px 7px}
#app .traders-pagination button{font-size:11px;padding:6px 9px;border-radius:5px;background:#382b20;color:#e6c6a5;border:1px solid #67482f}
#app .withdrawal-summary{font-size:10px;padding:6px 8px;background:#2c2219;border-color:#715232;color:#eac89f;border-radius:5px}
#app .bulk-withdrawal-limit{display:flex;gap:6px;align-items:center;white-space:nowrap}#app #traderBulkPayoutLimit{width:68px;padding:6px 7px}
#app #traderSearch{width:220px;font-size:11px}
#app #tradersTableWrap{max-height:calc(100dvh - 225px);min-height:160px;isolation:isolate}
#app #tradersTableWrap thead th{position:sticky;top:0;z-index:3;border-bottom:1px solid #705032}
#app #tradersTableWrap th:first-child,#app #tradersTableWrap td:first-child{position:sticky;left:0;z-index:2;min-width:210px;box-shadow:1px 0 #6f5131}
#app #tradersTableWrap th:first-child{z-index:4;background:#38291c}
#app #tradersBody>tr>td:first-child>small{white-space:normal;max-width:225px;overflow-wrap:anywhere}
#app .sort-button{font-size:9px;color:inherit;letter-spacing:.025em;min-height:22px}
#app .sort-button:hover,#app .sort-button.active{color:#ffca96}#app .sort-button:after{color:#a17b54}
#app .trader-presence-dot[data-online=true]{background:#45d896;box-shadow:0 0 0 3px #45d89610}
#app .trader-presence-name{font-size:12px}
#app .feed-row{padding:10px 12px;border-color:#423125}#app .feed-row small{color:#bca58d;font-size:10px}#app .feed-row time{color:#a88e75}
#app .support-layout{grid-template-columns:290px minmax(0,1fr);gap:12px;height:calc(100dvh - 96px);min-height:470px}
#app .tickets,#app .conversation{min-width:0}
#app .ticket{padding:11px 12px;color:#ebdccc;border-color:#463426}
#app .ticket:hover,#app .ticket.active{background:#4b332140;box-shadow:inset 3px 0 #ff9b43}
#app .ticket p{color:#bca68d;margin-top:5px}
#app .conversation-head{padding:12px;border-color:#4f3b2a}#app .message{background:#30261e;border-color:#68492e;color:#f1dfcb}
#app .message.support{background:#233a2a;border-color:#436348}
#app .messages{scrollbar-color:#87613d #21180f}
#app .reply{padding:10px;border-color:#4f3927;background:#211a14}
#app .notice{border:1px solid #4c7655;border-radius:8px;background:#243d2c;color:#aeebbc}
#app .notice.error{border-color:#855044;background:#492923;color:#ffc0ac}
#app .risk-card,#app .cold-wallet-card,#app .cold-wallet-free,#app .risk-list,#app .legal-version-item{border-color:#5d4630;background:#2c231a;border-radius:8px}
#app .risk-card small,#app .cold-wallet-card small{color:#bca084}#app .risk-card span,#app .cold-wallet-card span{color:#bda88e}
#app .risk-card strong,#app .cold-wallet-card strong{color:#efc495}
#app .panel .primary{background:linear-gradient(120deg,#ffb064,#f38c39);color:#281a0c;border-radius:7px;box-shadow:inset 0 1px #ffca9040}
body:has(#app:not(.hidden)) dialog{color:#f3e4d6;background:#27201a;border:1px solid #85603e;border-radius:14px;box-shadow:0 24px 100px #0009;max-width:96vw}
body:has(#app:not(.hidden)) dialog::backdrop{background:#0c0805b8;backdrop-filter:blur(3px)}
body:has(#app:not(.hidden)) dialog input,body:has(#app:not(.hidden)) dialog select,body:has(#app:not(.hidden)) dialog textarea{color:#f1dfcd;background:#19130f;border:1px solid #6a4a31;border-radius:6px}
body:has(#app:not(.hidden)) dialog button{border-radius:6px}
body:has(#app:not(.hidden)) .real-trade-layout .selected{background:#583a22}
body:has(#app:not(.hidden)) .real-trade-layout svg{border-color:#765334}
body:has(#app:not(.hidden)) .real-trade-facts dt{color:#c7a98b}
@media(max-width:1100px){#app{grid-template-columns:166px minmax(0,1fr)}#app>main{padding:0 12px 20px}#app .brand{padding:0 12px;gap:8px}#app .brand b{font-size:12px}#app .brand small{font-size:7px}#app .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}#app .grid-two{grid-template-columns:minmax(0,1fr)}#app .support-layout{grid-template-columns:260px minmax(0,1fr)}}
@media(max-width:760px){#app{grid-template-columns:minmax(0,1fr)}#app>aside{position:static;height:auto;overflow:visible;border-right:0;border-bottom:1px solid #5d402a}#app .brand{height:52px}#app>aside nav{display:flex;padding:7px 10px;gap:5px;overflow:auto;max-width:100%;align-items:flex-start}#app>aside nav>button,#app .finance-nav-trigger{white-space:nowrap;min-height:34px;padding:8px 10px;font-size:11px}#app>aside .finance-nav-group{flex-shrink:0}#app .finance-subnav:not(.hidden){width:210px;max-height:240px;overflow:auto}#app .aside-bottom{display:none}#app>main{padding:0 10px 20px}#app>main>header{min-height:68px;gap:9px;padding:12px 0;flex-wrap:wrap}#app>main>header h1{font-size:20px}#app>main>header p{font-size:10px}#app .header-actions{gap:8px}#app .header-actions span{font-size:9px}#app .metrics{gap:8px}#app .metric{padding:12px}#app .metric strong{font-size:23px}#app .panel-head{padding:10px}#app .panel-head input{width:auto;max-width:100%}#app #traderSearch{width:100%}#app .traders-panel>.panel-head>.panel-controls{gap:8px}#app #tradersTableWrap{max-height:65dvh}#app #tradersTableWrap td:first-child,#app #tradersTableWrap th:first-child{min-width:160px}#app #tradersBody>tr>td:first-child>small{max-width:160px}#app .support-layout{grid-template-columns:minmax(0,1fr);height:auto;min-height:0}#app .tickets{height:280px}#app .conversation{height:550px}#app .traders-pagination{padding:8px 10px}.auto-payout-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){#app *,#app *:before,#app *:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
#app .panel-controls label,#app .traders-pagination label{margin:0;line-height:1.3}#app .traders-pagination input,#app .traders-pagination select{height:30px}
#app .traders-pagination label{white-space:nowrap}
