@import url('/src/styles/tokens.css');

*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}html,body{overflow-x:hidden}body{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-width) minmax(0,1fr)}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:50}.brand{height:var(--topbar-height);display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--border);font-weight:800;letter-spacing:.3px}.brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(145deg,var(--accent),#ffb347);display:grid;place-items:center;color:#111;font-weight:950;margin-right:10px}.nav{padding:14px 12px;display:grid;gap:4px}.nav-link{height:42px;border-radius:8px;display:flex;align-items:center;gap:11px;padding:0 12px;color:var(--text-secondary);font-weight:650}.nav-link:hover{background:var(--panel-hover);color:var(--text)}.nav-link.active{background:rgba(255,121,0,.11);color:var(--text);box-shadow:inset 3px 0 var(--accent)}.nav-link .icon{width:18px;text-align:center;color:inherit}.sidebar-footer{margin-top:auto;padding:16px;border-top:1px solid var(--border)}.sidebar-plan{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:14px}.plan-name{font-weight:800}.plan-meta{font-size:12px;color:var(--text-secondary);margin:8px 0}.progress{height:6px;background:#20262e;border-radius:99px;overflow:hidden}.progress>span{display:block;height:100%;background:var(--accent);border-radius:99px}.ghost-link{margin-top:10px;color:var(--accent);font-size:12px;font-weight:700}.shell-main{grid-column:2;min-width:0}.topbar{height:var(--topbar-height);position:sticky;top:0;z-index:40;background:rgba(8,10,14,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px}.topbar-left,.topbar-right{display:flex;align-items:center;gap:10px}.mobile-menu{display:none}.select-compact,.icon-btn,.profile-btn{height:38px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:9px;padding:0 12px}.icon-btn{width:38px;padding:0;display:grid;place-items:center}.profile-btn{display:flex;align-items:center;gap:9px}.avatar{width:26px;height:26px;border-radius:50%;background:rgba(255,121,0,.18);color:var(--accent);display:grid;place-items:center;font-size:11px;font-weight:900}.page-wrap{max-width:var(--content-max);margin:0 auto;padding:24px}.page-title{font-size:24px;line-height:1.2;margin:0;font-weight:800}.page-subtitle{color:var(--text-secondary);margin:6px 0 0}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}.placeholder{padding:32px;margin-top:20px}.mobile-overlay{display:none}.mobile-sidebar{display:none}
.btn{height:38px;padding:0 14px;border-radius:9px;border:1px solid var(--border);background:var(--panel-hover);color:var(--text);font-weight:750}.btn.primary{background:var(--accent);border-color:var(--accent);color:#15100a}.btn.primary:hover{background:var(--accent-hover)}.btn.secondary{background:transparent}.btn.danger{background:rgba(239,83,80,.12);border-color:rgba(239,83,80,.45);color:#ff8886}.btn.small{height:32px;padding:0 10px;font-size:12px}.layer,.drawer-layer{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;z-index:120;padding:18px}.modal-panel{width:min(520px,100%);max-height:90vh;overflow:auto;background:#10141a;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}.modal-panel.wide{width:min(760px,100%)}.drawer-layer{justify-content:flex-end;padding:0}.drawer-panel{height:100%;width:420px;max-width:100%;background:#10141a;border-left:1px solid var(--border);box-shadow:var(--shadow);overflow:auto}.layer-head{height:64px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.layer-head h2{font-size:17px;margin:0}.layer-body{padding:18px}.layer-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--border)}.confirm-message{color:var(--text-secondary);line-height:1.6}.toast-host{position:fixed;right:18px;bottom:18px;display:grid;gap:8px;z-index:200;width:min(380px,calc(100vw - 24px))}.toast{background:#151a21;border:1px solid var(--border);border-left:3px solid var(--info);padding:12px 12px 12px 14px;border-radius:10px;box-shadow:var(--shadow);display:flex;justify-content:space-between;gap:12px;align-items:center}.toast.success{border-left-color:var(--success)}.toast.warning{border-left-color:var(--warning)}.toast.error{border-left-color:var(--danger)}.toast button{border:0;background:transparent;color:var(--muted);font-size:18px}.page-header{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:18px}.page-actions{display:flex;gap:8px;flex-wrap:wrap}.data-table-wrap{overflow:hidden;border:1px solid var(--border);border-radius:12px;background:var(--panel)}.data-table{width:100%;border-collapse:collapse;font-size:13px}.data-table th{height:42px;text-align:left;padding:0 14px;color:var(--text-secondary);font-weight:700;background:#0f1318;border-bottom:1px solid var(--border)}.data-table td{height:54px;padding:0 14px;border-bottom:1px solid rgba(37,43,52,.8)}.data-table tr:last-child td{border-bottom:0}.data-table tr.clickable:hover{background:var(--panel-hover);cursor:pointer}.data-table-mobile{display:none}.status-badge{display:inline-flex;align-items:center;gap:7px;color:var(--text-secondary);font-weight:700;font-size:12px}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}.status-badge.success .status-dot{background:var(--success)}.status-badge.warning .status-dot{background:var(--warning)}.status-badge.danger .status-dot{background:var(--danger)}.metric-card{min-height:105px;padding:16px}.metric-top{display:flex;align-items:center;justify-content:space-between;color:var(--text-secondary);font-weight:700}.metric-value{font-size:26px;display:block;margin:10px 0 4px}.metric-meta{color:var(--muted);font-size:12px}.metric-icon{color:var(--accent)}.progress-block{display:grid;gap:7px}.progress-label{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary)}.empty-state,.empty-cell{padding:24px;color:var(--text-secondary);text-align:center}.empty-state p{margin:7px 0 0;color:var(--muted)}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.8fr);gap:12px;margin-top:12px}.dashboard-panel,.events-panel{padding:18px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.section-head h2{margin:0;font-size:16px}.section-head>span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.resource-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}.service-title{display:flex;align-items:center;justify-content:space-between;font-weight:850;font-size:18px;margin-bottom:12px}.kv-list{margin:0}.kv-list>div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-top:1px solid var(--border)}.kv-list dt{color:var(--text-secondary)}.kv-list dd{margin:0;font-weight:750}.events-panel{margin-top:12px}.events-list{display:grid}.event-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:8px;align-items:center;padding:11px 0;border-top:1px solid var(--border)}.event-row:first-child{border-top:0}.event-dot{color:var(--accent)}.event-row time{color:var(--muted);font-size:12px}
.form-grid{display:grid;gap:14px}.form-grid label{display:grid;gap:7px;color:var(--text-secondary);font-size:12px;font-weight:700}.form-grid input,.form-grid select,.form-grid textarea,.field{width:100%;height:40px;border:1px solid var(--border);background:#0b0f14;color:var(--text);border-radius:8px;padding:0 11px;outline:none}.form-grid textarea{height:130px;padding:10px;resize:vertical}.form-grid input:focus,.form-grid select:focus,.field:focus{border-color:var(--accent)}.check-row{display:flex!important;align-items:center;gap:9px!important}.check-row input{width:16px;height:16px}.drawer-section{padding:14px 0;border-bottom:1px solid var(--border)}.drawer-section:first-child{padding-top:0}.drawer-section h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.danger-zone{display:grid;gap:8px}.muted{color:var(--muted)}.mobile-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.mobile-kv{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.mobile-kv span{color:var(--text-secondary);font-size:12px;display:grid;gap:4px}.mobile-kv b{color:var(--text);font-size:13px}.mobile-kv button{align-self:end}
.hint,.process-hint{color:var(--muted);font-size:12px;line-height:1.5}.row-actions{display:flex;gap:6px;justify-content:flex-end}.settings-panel{padding:16px;margin-bottom:12px}.inline-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:750}.field.compact{width:auto;min-width:120px}.php-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.php-card{padding:16px;display:grid;gap:16px}.php-card p{margin:5px 0 0}.php-meta{display:grid;gap:8px}.php-meta span{display:flex;justify-content:space-between;gap:12px;color:var(--text-secondary);font-size:12px}.php-meta b{color:var(--text)}
.breadcrumbs{display:flex;align-items:center;gap:6px;margin:0 0 12px;overflow:auto}.breadcrumbs button{border:0;background:transparent;color:var(--text-secondary);padding:4px 0}.breadcrumbs button+button:before{content:'/';color:var(--muted);margin-right:6px}
.topbar-pop-wrap{position:relative}.topbar-pop{position:absolute;right:0;top:46px;width:300px;background:#11161d;border:1px solid var(--border);border-radius:11px;padding:12px;box-shadow:var(--shadow);z-index:90}.topbar-pop>strong{display:block;padding:3px 5px 10px}.pop-item{padding:9px 5px;border-top:1px solid var(--border);font-size:12px;line-height:1.4}.profile-pop{width:240px}.btn.full{width:100%;margin-top:10px}.tabs{display:flex;gap:6px;margin-bottom:12px}.tabs button{height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--border);background:var(--panel);color:var(--text-secondary);font-weight:750}.tabs button.active{border-color:rgba(255,121,0,.45);background:rgba(255,121,0,.1);color:var(--accent)}.log-filters{padding:12px;display:grid;grid-template-columns:minmax(220px,1fr) 160px 220px;gap:10px;margin-bottom:12px}.log-filters label{display:grid;gap:6px;color:var(--muted);font-size:11px}.log-panel{overflow:hidden}.log-row{display:grid;grid-template-columns:80px 52px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 14px;border-top:1px solid var(--border);font-size:12px}.log-row:first-child{border-top:0}.log-row.log-error{background:rgba(239,83,80,.045)}.http-status{font-weight:900}.http-status.s200{color:var(--success)}.http-status.s404,.http-status.s500{color:var(--danger)}

/* AREX_WEB_RESPONSIVE_CASCADE_R1 */
/*
 * Base desktop state.
 * responsive.css is loaded after global.css and overrides this <= 768px.
 */
.mobile-menu{display:none}

/* AREX_WEB_REAL_UI_V111 */
.arex-auth-screen{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:24px;
    background:
        radial-gradient(circle at 50% 15%,rgba(255,126,34,.10),transparent 34%),
        var(--bg,#080a0e);
}

.arex-auth-card{
    width:min(100%,440px);
    padding:36px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    background:rgba(15,18,24,.96);
    box-shadow:0 24px 80px rgba(0,0,0,.34);
    text-align:center;
}

.arex-auth-mark{
    width:58px;
    height:58px;
    margin:0 auto 20px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:#ff7a1a;
    color:#fff;
    font-size:28px;
    font-weight:800;
}

.arex-auth-eyebrow{
    margin-bottom:8px;
    color:#ff7a1a;
    font-size:12px;
    font-weight:800;
    letter-spacing:.14em;
}

.arex-auth-card h1{
    margin:0 0 12px;
    font-size:28px;
}

.arex-auth-login{
    width:100%;
    margin-top:18px;
}

.arex-auth-note{
    margin:16px 0 0;
    color:var(--muted,#8d96a5);
    font-size:12px;
    line-height:1.5;
}

.arex-auth-loader{
    width:32px;
    height:32px;
    margin:22px auto 0;
    border:3px solid rgba(255,255,255,.12);
    border-top-color:#ff7a1a;
    border-radius:50%;
    animation:arex-auth-spin .8s linear infinite;
}

@keyframes arex-auth-spin{
    to{transform:rotate(360deg)}
}

@media(max-width:480px){
    .arex-auth-card{
        padding:28px 20px;
        border-radius:16px;
    }
}
