/* Deep Mind FX — Design System v2 */
/* Horizontal navbar layout, full-width content */

:root {
    --dm-orange: #E8922A;
    --dm-orange-light: #F0A844;
    --dm-orange-dark: #C47A1E;
    --dm-red: #D63031;
    --dm-red-light: #E74C3C;
    --dm-black: #0D0D0D;
    --dm-dark: #141414;
    --dm-dark-card: #1A1A1A;
    --dm-dark-surface: #1E1E1E;
    --dm-dark-border: #2A2A2A;
    --dm-text: #E8E8E8;
    --dm-text-muted: #888888;
    --dm-text-dim: #666666;
    --dm-success: #00C853;
    --dm-warning: #FFB300;
    --dm-info: #29B6F6;
    --dm-danger: var(--dm-red);
    --dm-radius: 10px;
    --dm-radius-sm: 6px;
    --dm-radius-lg: 16px;
    --dm-shadow: 0 2px 12px rgba(0,0,0,.4);
    --dm-shadow-lg: 0 8px 32px rgba(0,0,0,.5);
    --dm-transition: .2s ease;
    --dm-font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --dm-font-mono: 'JetBrains Mono','Fira Code','Consolas',monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:14px;scroll-behavior:smooth}
body{font-family:var(--dm-font);background:var(--dm-black);color:var(--dm-text);margin:0;padding:0;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--dm-orange);text-decoration:none;transition:color var(--dm-transition)}
a:hover{color:var(--dm-orange-light)}
::selection{background:var(--dm-orange);color:#fff}
img{max-width:100%;height:auto}

/* ═══════════════════════════════════════
   TOP BAR — user info, separate row
   ═══════════════════════════════════════ */

.dm-topbar{
    display:flex;align-items:center;justify-content:flex-end;
    height:30px;
    background:var(--dm-black);
    border-bottom:1px solid var(--dm-dark-border);
    padding:0 1.25rem;
    gap:12px;
    flex-shrink:0;
}
.dm-topbar-user{
    display:inline-flex;align-items:center;gap:5px;
    font-size:11px;color:var(--dm-text-dim);
}
.dm-topbar-user svg{width:13px;height:13px;opacity:.5}
.dm-topbar-signout{
    font-size:11px;color:var(--dm-text-muted);
    padding:2px 8px;border-radius:var(--dm-radius-sm);
    transition:all var(--dm-transition);
}
.dm-topbar-signout:hover{color:var(--dm-red-light);background:rgba(214,48,49,.08)}

/* ═══════════════════════════════════════
   NAVBAR — horizontal, full-width
   ═══════════════════════════════════════ */

.dm-navbar{
    position:sticky;top:0;z-index:1040;
    display:flex;align-items:center;
    height:48px;
    background:var(--dm-dark);
    border-bottom:1px solid var(--dm-dark-border);
    padding:0 1.25rem;
    gap:.25rem;
}

.dm-navbar-brand{
    display:flex;align-items:center;
    margin-right:1.25rem;flex-shrink:0;
}
.dm-navbar-brand img{
    height:28px;width:auto;display:block;
}

.dm-navbar-nav{
    display:flex;align-items:center;
    gap:2px;flex:1;
    overflow-x:auto;
    scrollbar-width:none;
}
.dm-navbar-nav::-webkit-scrollbar{display:none}

.dm-navbar-nav a{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 12px;
    color:var(--dm-text-muted);
    font-size:13px;font-weight:500;
    white-space:nowrap;
    border-radius:var(--dm-radius-sm);
    border-bottom:2px solid transparent;
    transition:all var(--dm-transition);
}
.dm-navbar-nav a:hover{
    color:var(--dm-text);
    background:rgba(232,146,42,.06);
}
.dm-navbar-nav a.active{
    color:var(--dm-orange);
    background:rgba(232,146,42,.08);
    border-bottom-color:var(--dm-orange);
}

/* inline SVG icons inside nav links */
.dm-navbar-nav a svg,
.dm-mobile-nav a svg{
    width:16px;height:16px;
    flex-shrink:0;
    vertical-align:middle;
    opacity:.6;
}
.dm-navbar-nav a.active svg,
.dm-navbar-nav a:hover svg,
.dm-mobile-nav a.active svg{opacity:1}

.dm-navbar-nav .nav-separator{
    width:1px;height:20px;
    background:var(--dm-dark-border);
    margin:0 4px;flex-shrink:0;
}

/* hamburger — hidden on desktop */
.dm-hamburger{
    display:none;
    background:none;border:none;
    color:var(--dm-text);cursor:pointer;
    padding:4px;margin-right:8px;
}
.dm-hamburger svg{width:22px;height:22px;display:block}

/* mobile dropdown — appears below topbar + navbar (30+48 = 78px) */
.dm-mobile-nav{
    display:none;
    position:absolute;top:78px;left:0;right:0;
    background:var(--dm-dark);
    border-bottom:1px solid var(--dm-dark-border);
    padding:8px;z-index:1039;
    flex-wrap:wrap;gap:4px;
    box-shadow:var(--dm-shadow-lg);
}
.dm-mobile-nav.open{display:flex}
.dm-mobile-nav a{
    display:inline-flex;align-items:center;gap:6px;
    padding:8px 12px;
    color:var(--dm-text-muted);font-size:13px;font-weight:500;
    white-space:nowrap;border-radius:var(--dm-radius-sm);
    transition:all var(--dm-transition);
}
.dm-mobile-nav a.active{color:var(--dm-orange);background:rgba(232,146,42,.1)}

/* ═══════════════════════════════════════
   APP SHELL
   ═══════════════════════════════════════ */

.dm-app{
    display:flex;flex-direction:column;
    min-height:100vh;
    position:relative;
}
.dm-main{
    flex:1;display:flex;flex-direction:column;
}
.dm-content{
    flex:1;padding:1.25rem 1.5rem;
}
.dm-page-title{
    font-size:1.125rem;font-weight:600;
    color:var(--dm-text);margin:0 0 1rem;
}
.dm-footer{
    padding:1rem 1.5rem;
    border-top:1px solid var(--dm-dark-border);
    text-align:center;font-size:.75rem;
    color:var(--dm-text-dim);
}

/* ═══════════════════════════════════════
   CARDS
   ═══════════════════════════════════════ */

.dm-card{
    background:var(--dm-dark-card);
    border:1px solid var(--dm-dark-border);
    border-radius:var(--dm-radius);
    box-shadow:var(--dm-shadow);
    overflow:hidden;
    transition:border-color var(--dm-transition);
}
.dm-card:hover{border-color:rgba(232,146,42,.15)}
.dm-card-header{
    padding:1rem 1.25rem;
    border-bottom:1px solid var(--dm-dark-border);
    font-weight:600;font-size:.9rem;color:var(--dm-text);
}
.dm-card-body{padding:1.25rem}
.dm-card-body-flush{padding:0}

/* ── Stat cards ── */

.dm-stat-card{
    background:var(--dm-dark-card);
    border:1px solid var(--dm-dark-border);
    border-radius:var(--dm-radius);
    padding:1.25rem;
    display:flex;flex-direction:column;gap:.25rem;
    transition:all var(--dm-transition);
}
.dm-stat-card:hover{
    border-color:var(--dm-orange);
    transform:translateY(-2px);
    box-shadow:var(--dm-shadow-lg);
}
.dm-stat-label{
    font-size:.75rem;font-weight:500;
    text-transform:uppercase;letter-spacing:.06em;
    color:var(--dm-text-muted);
}
.dm-stat-value{
    font-size:1.75rem;font-weight:700;
    color:var(--dm-orange);line-height:1.2;
}
.dm-stat-card.dm-stat-success .dm-stat-value{color:var(--dm-success)}
.dm-stat-card.dm-stat-info .dm-stat-value{color:var(--dm-info)}
.dm-stat-card.dm-stat-danger .dm-stat-value{color:var(--dm-red)}

/* ═══════════════════════════════════════
   TABLES
   ═══════════════════════════════════════ */

.dm-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dm-table{width:100%;border-collapse:collapse;font-size:.8125rem}
.dm-table thead th{
    background:var(--dm-dark-surface);color:var(--dm-text-muted);
    font-weight:600;text-transform:uppercase;letter-spacing:.04em;
    font-size:.7rem;padding:.75rem 1rem;white-space:nowrap;
    border-bottom:1px solid var(--dm-dark-border);
    position:sticky;top:0;z-index:1;
}
.dm-table tbody td{
    padding:.625rem 1rem;
    border-bottom:1px solid var(--dm-dark-border);
    color:var(--dm-text);vertical-align:middle;
}
.dm-table tbody tr{transition:background var(--dm-transition)}
.dm-table tbody tr:hover{background:rgba(232,146,42,.04)}
.dm-table .mono{font-family:var(--dm-font-mono);font-size:.75rem}

/* ═══════════════════════════════════════
   BADGES
   ═══════════════════════════════════════ */

.dm-badge{
    display:inline-flex;align-items:center;
    padding:.2rem .6rem;border-radius:999px;
    font-size:.675rem;font-weight:600;
    text-transform:uppercase;letter-spacing:.04em;
}
.dm-badge-success{background:rgba(0,200,83,.15);color:var(--dm-success)}
.dm-badge-warning{background:rgba(255,179,0,.15);color:var(--dm-warning)}
.dm-badge-danger{background:rgba(214,48,49,.15);color:var(--dm-red-light)}
.dm-badge-info{background:rgba(41,182,246,.15);color:var(--dm-info)}
.dm-badge-muted{background:rgba(136,136,136,.15);color:var(--dm-text-muted)}
.dm-badge-orange{background:rgba(232,146,42,.15);color:var(--dm-orange)}

/* ═══════════════════════════════════════
   FORMS
   ═══════════════════════════════════════ */

.dm-form-label{
    display:block;margin-bottom:.375rem;
    font-size:.8rem;font-weight:500;color:var(--dm-text-muted);
}
.dm-input,.dm-select{
    width:100%;background:var(--dm-dark-surface);
    border:1px solid var(--dm-dark-border);
    border-radius:var(--dm-radius-sm);
    color:var(--dm-text);padding:.5rem .75rem;
    font-size:.875rem;font-family:var(--dm-font);
    transition:border-color var(--dm-transition),box-shadow var(--dm-transition);
    outline:none;
}
.dm-input:focus,.dm-select:focus{
    border-color:var(--dm-orange);
    box-shadow:0 0 0 3px rgba(232,146,42,.15);
}
.dm-input::placeholder{color:var(--dm-text-dim)}
.dm-select{appearance:auto}
.dm-input-sm,.dm-select-sm{padding:.35rem .5rem;font-size:.8rem}
.dm-form-group{margin-bottom:1rem}
.dm-form-check{
    display:flex;align-items:center;gap:.5rem;
    font-size:.8rem;color:var(--dm-text-muted);cursor:pointer;
}
.dm-form-check input[type="checkbox"]{accent-color:var(--dm-orange);width:16px;height:16px}

/* ═══════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════ */

.dm-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.375rem;
    padding:.5rem 1.25rem;border-radius:var(--dm-radius-sm);
    font-family:var(--dm-font);font-size:.875rem;font-weight:600;
    border:none;cursor:pointer;transition:all var(--dm-transition);
    text-decoration:none;line-height:1.4;
}
.dm-btn:disabled{opacity:.5;cursor:not-allowed}
.dm-btn-primary{background:linear-gradient(135deg,var(--dm-orange),var(--dm-orange-dark));color:#fff}
.dm-btn-primary:hover{background:linear-gradient(135deg,var(--dm-orange-light),var(--dm-orange));color:#fff;transform:translateY(-1px);box-shadow:0 4px 16px rgba(232,146,42,.3)}
.dm-btn-danger{background:linear-gradient(135deg,var(--dm-red),#B71C1C);color:#fff}
.dm-btn-danger:hover{background:linear-gradient(135deg,var(--dm-red-light),var(--dm-red));color:#fff}
.dm-btn-outline{background:transparent;border:1px solid var(--dm-dark-border);color:var(--dm-text-muted)}
.dm-btn-outline:hover{border-color:var(--dm-orange);color:var(--dm-orange)}
.dm-btn-sm{padding:.3rem .75rem;font-size:.75rem}
.dm-btn-block{width:100%}
.dm-btn-success{background:linear-gradient(135deg,var(--dm-success),#00A846);color:#fff}
.dm-btn-success:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,200,83,.3);color:#fff}

/* ═══════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════ */

.dm-alert{padding:.75rem 1rem;border-radius:var(--dm-radius-sm);font-size:.8125rem;margin-bottom:1rem;border:1px solid transparent}
.dm-alert-success{background:rgba(0,200,83,.1);border-color:rgba(0,200,83,.2);color:var(--dm-success)}
.dm-alert-danger{background:rgba(214,48,49,.1);border-color:rgba(214,48,49,.2);color:var(--dm-red-light)}
.dm-alert-warning{background:rgba(255,179,0,.1);border-color:rgba(255,179,0,.2);color:var(--dm-warning)}
.dm-alert-info{background:rgba(41,182,246,.1);border-color:rgba(41,182,246,.2);color:var(--dm-info)}

/* ═══════════════════════════════════════
   GRID
   ═══════════════════════════════════════ */

.dm-grid{display:grid;gap:1rem}
.dm-grid-2{grid-template-columns:repeat(2,1fr)}
.dm-grid-3{grid-template-columns:repeat(3,1fr)}
.dm-grid-4{grid-template-columns:repeat(4,1fr)}
.dm-grid-6{grid-template-columns:repeat(6,1fr)}

.dm-flex{display:flex}
.dm-flex-col{flex-direction:column}
.dm-flex-wrap{flex-wrap:wrap}
.dm-items-center{align-items:center}
.dm-justify-between{justify-content:space-between}
.dm-gap-1{gap:.5rem}
.dm-gap-2{gap:1rem}
.dm-gap-3{gap:1.5rem}

/* ═══════════════════════════════════════
   AUTH PAGES
   ═══════════════════════════════════════ */

.dm-auth-page{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    padding:2rem 1rem;
    background:radial-gradient(ellipse at 50% 20%,rgba(232,146,42,.08),transparent 60%),var(--dm-black);
}
.dm-auth-card{
    width:100%;max-width:440px;
    background:var(--dm-dark-card);border:1px solid var(--dm-dark-border);
    border-radius:var(--dm-radius-lg);box-shadow:var(--dm-shadow-lg);
    padding:2.5rem 2rem;
}
.dm-auth-logo{display:flex;justify-content:center;margin-bottom:1.5rem}
.dm-auth-logo img{height:44px;width:auto}
.dm-auth-title{text-align:center;font-size:1.25rem;font-weight:700;margin-bottom:1.5rem;color:var(--dm-text)}
.dm-auth-footer{text-align:center;margin-top:1.25rem;font-size:.8rem;color:var(--dm-text-dim)}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */

@media(max-width:1024px){
    .dm-grid-6{grid-template-columns:repeat(3,1fr)}
    .dm-grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
    .dm-navbar-nav{display:none}
    .dm-hamburger{display:flex}
    .dm-grid-6{grid-template-columns:repeat(2,1fr)}
    .dm-grid-4{grid-template-columns:repeat(2,1fr)}
    .dm-grid-3{grid-template-columns:1fr}
    .dm-grid-2{grid-template-columns:1fr}
    .dm-content{padding:1rem}
    .dm-auth-card{padding:1.5rem}
    .dm-navbar{padding:0 .75rem}
    .dm-topbar-user{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:480px){
    html{font-size:13px}
    .dm-grid-6{grid-template-columns:1fr 1fr}
    .dm-grid-4{grid-template-columns:1fr}
    .dm-stat-value{font-size:1.5rem}
}

/* ═══════════════════════════════════════
   SCROLLBAR + UTILITIES
   ═══════════════════════════════════════ */

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--dm-dark)}
::-webkit-scrollbar-thumb{background:var(--dm-dark-border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--dm-text-dim)}

.text-orange{color:var(--dm-orange)!important}
.text-success{color:var(--dm-success)!important}
.text-danger{color:var(--dm-red-light)!important}
.text-warning{color:var(--dm-warning)!important}
.text-info{color:var(--dm-info)!important}
.text-muted{color:var(--dm-text-muted)!important}
.text-dim{color:var(--dm-text-dim)!important}
.text-center{text-align:center}
.text-end{text-align:right}
.text-sm{font-size:.8rem}
.text-xs{font-size:.7rem}
.text-nowrap{white-space:nowrap}
.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-break{word-break:break-word}
.fw-600{font-weight:600}
.fw-700{font-weight:700}
.mb-0{margin-bottom:0}
.mb-1{margin-bottom:.5rem}
.mb-2{margin-bottom:1rem}
.mb-3{margin-bottom:1.5rem}
.mt-1{margin-top:.5rem}
.mt-2{margin-top:1rem}
.mt-3{margin-top:1.5rem}
.p-0{padding:0}
.px-3{padding-left:1rem;padding-right:1rem}