*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
    --bg:#0a0a0c;
    --bg-gradient-start:#0a0a0c;
    --bg-gradient-mid:#11131a;
    --bg-gradient-end:#0d1117;
    --surface:rgba(20,22,30,.72);
    --surface-solid:#151720;
    --surface2:rgba(35,38,50,.65);
    --border:rgba(255,255,255,.10);
    --border-strong:rgba(255,255,255,.16);
    --text:#f0f2f5;
    --text2:#a7adb8;
    --accent:#6ec6ff;
    --accent2:#4a9cd6;
    --accent-glow:rgba(110,198,255,.35);
    --error:#ff6b6b;
    --success:#6bff8d;
    --warn:#ffcc00;
    --radius-sm:8px;
    --radius-md:14px;
    --radius-lg:22px;
    --radius-xl:28px;
    --shadow:0 8px 32px rgba(0,0,0,.35);
    --shadow-soft:0 4px 18px rgba(0,0,0,.25);
    --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
    --nav-height:64px;
    --topbar-height:56px;
}

html,body{
    height:100%;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font);
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:transparent;
}

body{
    background:
        radial-gradient(ellipse at 20% 0%, rgba(110,198,255,.10) 0%, transparent 45%),
        radial-gradient(ellipse at 80% 100%, rgba(74,156,214,.08) 0%, transparent 45%),
        linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
    background-attachment:fixed;
}

/* Scrollbars */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}

::selection{background:rgba(110,198,255,.25)}

.hidden{display:none!important}

/* App shell */
#app{
    display:flex;
    flex-direction:column;
    height:100vh;
    height:100dvh;
    width:100%;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}

/* Top bar */
#topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    height:var(--topbar-height);
    padding:0 14px;
    padding-top:env(safe-area-inset-top);
    border-bottom:1px solid var(--border);
    background:var(--surface);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    flex-shrink:0;
    z-index:20;
}
.brand{
    font-weight:800;
    font-size:18px;
    letter-spacing:.5px;
    background:linear-gradient(135deg,var(--accent) 0%,#9fd8ff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.meta{
    font-size:12px;
    color:var(--text2);
    text-align:right;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.topbar-nav{display:none;align-items:center;gap:8px}

/* Bottom navigation (mobile) */
#bottom-nav{
    display:none;
    align-items:center;
    justify-content:space-around;
    gap:4px;
    height:calc(var(--nav-height) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    border-top:1px solid var(--border);
    background:var(--surface);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    flex-shrink:0;
    z-index:20;
}
#bottom-nav:not(.hidden){display:flex}
.nav-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    flex:1;
    height:100%;
    background:transparent;
    border:none;
    color:var(--text2);
    font-size:11px;
    font-weight:600;
    cursor:pointer;
    transition:color .15s, transform .1s;
}
.nav-item svg{width:22px;height:22px}
.nav-item.active{color:var(--accent)}
.nav-item:active{transform:scale(.95)}

/* Buttons */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid var(--border-strong);
    background:var(--surface2);
    color:var(--text);
    padding:10px 16px;
    border-radius:var(--radius-md);
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    line-height:1.2;
    min-height:44px;
    transition:background .15s,border-color .15s,transform .1s,box-shadow .15s;
}
.btn:active{transform:scale(.97)}
.btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.btn-sm{padding:8px 12px;font-size:13px;min-height:36px}
.btn-block{width:100%}
.btn-primary{
    background:linear-gradient(135deg,var(--accent2) 0%,var(--accent) 100%);
    border-color:transparent;
    color:#081018;
    box-shadow:0 4px 14px rgba(110,198,255,.25);
}
.btn-primary:hover{filter:brightness(1.1);box-shadow:0 6px 18px rgba(110,198,255,.35)}
.btn-danger{background:var(--error);border-color:transparent;color:#1a0505}
.btn-danger:hover{filter:brightness(1.1)}
.btn-icon{
    width:48px;
    height:48px;
    min-width:48px;
    padding:0;
    border-radius:50%;
}
.btn-send{width:48px;height:48px;padding:0;border-radius:50%}

/* Toast */
.toast{
    position:fixed;
    bottom:calc(var(--nav-height) + 16px + env(safe-area-inset-bottom));
    left:50%;
    transform:translateX(-50%);
    background:var(--surface-solid);
    color:var(--text);
    border:1px solid var(--border-strong);
    border-radius:999px;
    padding:10px 18px;
    font-size:13px;
    box-shadow:var(--shadow);
    z-index:200;
    pointer-events:none;
    transition:opacity .25s,transform .25s;
}
.toast.hidden{opacity:0;transform:translate(-50%,10px)}

/* Login */
#login-panel{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1;
    padding:24px;
    overflow:auto;
}
#login-form,#register-form{
    display:flex;
    flex-direction:column;
    gap:14px;
    width:100%;
    max-width:360px;
}
.login-brand{
    font-size:36px;
    font-weight:800;
    text-align:center;
    letter-spacing:1px;
    background:linear-gradient(135deg,var(--accent) 0%,#9fd8ff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    margin-bottom:8px;
}
#login-form input,#register-form input{
    width:100%;
    padding:14px 16px;
    border:1px solid var(--border-strong);
    border-radius:var(--radius-md);
    background:var(--surface);
    color:var(--text);
    font-size:16px;
    outline:none;
    transition:border-color .15s,box-shadow .15s;
}
#login-form input:focus,#register-form input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--accent-glow);
}
#register-form h3{font-size:16px;font-weight:700;color:var(--accent);text-align:center}
.register-actions{display:flex;gap:10px;justify-content:center}
.error{color:var(--error);font-size:13px;text-align:center}
#register-success{min-height:20px;text-align:center}

/* Panels */
#chat-panel,#detail-panel,#profile-panel,#admin-panel{
    display:flex;
    flex-direction:column;
    flex:1;
    overflow:hidden;
    position:relative;
}
.panel-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 16px;
    padding-top:env(safe-area-inset-top);
    border-bottom:1px solid var(--border);
    background:var(--surface);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    flex-shrink:0;
}
.panel-header h2{font-size:17px;font-weight:700}

/* Chat messages */
#chat-messages{
    flex:1;
    overflow-y:auto;
    padding:18px 14px 8px;
    display:flex;
    flex-direction:column;
    gap:16px;
}
.msg-row{
    display:flex;
    align-items:flex-end;
    gap:10px;
    max-width:min(92%,720px);
    animation:msg-in .25s ease-out both;
}
.msg-row.user{align-self:flex-end;flex-direction:row-reverse}
.msg-row.assistant{align-self:flex-start}
.msg-row.system{align-self:center;flex-direction:column;align-items:center;gap:4px}
.msg-avatar,.msg-initial{
    width:32px;
    height:32px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:13px;
    font-weight:700;
    flex-shrink:0;
    user-select:none;
}
.msg-avatar{background:var(--surface2);color:var(--accent)}
.msg-initial{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#081018}
.msg{
    padding:12px 16px;
    border-radius:var(--radius-lg);
    word-break:break-word;
    line-height:1.55;
    box-shadow:var(--shadow-soft);
    position:relative;
}
.msg.user{
    background:linear-gradient(135deg,#3a6d99 0%,var(--accent2) 100%);
    color:#fff;
    border-bottom-right-radius:6px;
}
.msg.assistant{
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text);
    border-bottom-left-radius:6px;
}
.msg.system{
    background:transparent;
    border:none;
    box-shadow:none;
    color:var(--text2);
    font-size:12px;
    font-style:italic;
    text-align:center;
    padding:4px 12px;
}
.msg-time{
    font-size:10px;
    color:var(--text2);
    opacity:.7;
    margin-top:4px;
    text-align:right;
}
.msg-row.assistant .msg-time{text-align:left}
.msg-reply{white-space:pre-wrap}
.msg-reasoning{
    margin-top:10px;
    padding:10px 14px;
    border-left:3px solid var(--accent);
    background:rgba(110,198,255,.08);
    color:var(--text2);
    font-size:12px;
    line-height:1.5;
    white-space:pre-wrap;
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}

/* Chat composer */
#chat-form{
    flex-shrink:0;
    background:var(--surface);
    border-top:1px solid var(--border);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}
.chat-composer{
    display:flex;
    align-items:flex-end;
    gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
}
#chat-input{
    flex:1;
    padding:13px 16px;
    border:1px solid var(--border-strong);
    border-radius:var(--radius-xl);
    background:var(--surface2);
    color:var(--text);
    font-size:16px;
    font-family:var(--font);
    resize:none;
    min-height:48px;
    max-height:160px;
    line-height:1.4;
    outline:none;
    transition:border-color .15s,box-shadow .15s;
}
#chat-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.chat-controls{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 16px 10px;
}
#typing-indicator{color:var(--text2);font-size:13px;animation:pulse 1.2s infinite}

/* Voice button */
.voice-btn{color:var(--accent)}
.voice-btn.recording{
    background:rgba(255,107,107,.18);
    border-color:var(--error);
    color:var(--error);
    animation:pulse 1s infinite;
}

/* Detail / profile / admin content */
#detail-content,#profile-content,#admin-providers,#admin-settings,#admin-identity,#admin-prompt-rules,#admin-users{
    flex:1;
    overflow:auto;
    padding:16px;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
#detail-content pre,
.identity-preview pre{
    background:var(--surface);
    padding:14px;
    border-radius:var(--radius-md);
    overflow-x:auto;
    font-size:12px;
    line-height:1.6;
    color:var(--text);
    border:1px solid var(--border);
    white-space:pre-wrap;
}

/* Dashboard */
.dash-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-bottom:18px;
    padding-bottom:14px;
    border-bottom:1px solid var(--border);
}
.dash-header h2{font-size:20px;font-weight:800;color:var(--accent)}
.dash-subtitle{font-size:12px;color:var(--text2)}
.dash-grid{display:grid;grid-template-columns:1fr;gap:14px}
.dash-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.dash-card h3{font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.5px;text-transform:uppercase}
.dash-card-body{display:flex;flex-direction:column;gap:8px;font-size:13px}
.dash-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:5px 0;
    border-bottom:1px dashed var(--border);
}
.dash-row:last-child{border-bottom:none}
.dash-row span:first-child{color:var(--text2)}
.dash-row code{
    background:var(--surface2);
    padding:2px 6px;
    border-radius:4px;
    font-size:11px;
    max-width:180px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.dash-metric-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px;padding:6px 0}
.dash-metric{
    text-align:center;
    background:var(--surface2);
    border-radius:var(--radius-sm);
    padding:10px 4px;
    border:1px solid var(--border);
}
.dash-metric-value{font-size:20px;font-weight:800;color:var(--text)}
.dash-metric-label{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.dash-list{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:4px;max-height:180px;overflow-y:auto;padding-right:4px}
.dash-list li{background:var(--surface2);border-radius:var(--radius-sm);padding:8px 12px;font-size:12px}
.dash-muted{color:var(--text2);font-weight:400}
.status-pill{
    font-size:11px;
    font-weight:700;
    padding:3px 10px;
    border-radius:999px;
    background:var(--surface2);
    text-transform:capitalize;
    border:1px solid var(--border);
}
.status-pill.ok{background:rgba(107,255,141,.12);color:var(--success);border-color:rgba(107,255,141,.25)}
.status-pill.off{background:rgba(255,107,107,.12);color:var(--error);border-color:rgba(255,107,107,.25)}
.status-pill.warn{background:rgba(255,204,0,.10);color:var(--warn);border-color:rgba(255,204,0,.25)}

/* Task tables */
.task-section{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.task-section h3{font-size:13px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px}
.task-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.task-table{width:100%;border-collapse:collapse;font-size:12px}
.task-table th,.task-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.task-table th{background:var(--surface2);color:var(--text2);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.task-table tr:last-child td{border-bottom:none}
.task-table tr:hover td{background:rgba(255,255,255,.03)}
.task-table code{background:var(--surface2);padding:2px 6px;border-radius:4px;font-size:11px;word-break:break-word}
.task-empty{text-align:center;color:var(--text2);padding:24px;font-style:italic}
.task-error{color:var(--error);font-size:12px;line-height:1.4}

/* Gate */
.gate-section{display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
.gate-section h3{font-size:13px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:8px}
.gate-count{font-size:12px;color:var(--text2);background:var(--surface);padding:2px 8px;border-radius:999px;border:1px solid var(--border)}
.gate-list{display:flex;flex-direction:column;gap:12px}
.gate-rule{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:10px;
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.gate-rule-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.gate-rule-header strong{font-size:14px;color:var(--text);word-break:break-word}
.gate-badges{display:flex;gap:6px;flex-shrink:0}
.gate-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--text2)}
.gate-meta code{background:var(--surface2);padding:2px 6px;border-radius:4px;font-size:11px}
.gate-desc{font-size:12px;color:var(--text2);line-height:1.5}
.severity-hard{background:rgba(255,107,107,.12);color:var(--error)}
.severity-soft{background:rgba(110,198,255,.12);color:var(--accent)}

/* Admin tabs and settings */
.admin-tabs{
    display:flex;
    gap:4px;
    border-bottom:1px solid var(--border);
    padding:0 12px;
    background:var(--surface);
    overflow-x:auto;
    flex-shrink:0;
}
.admin-tab{
    background:transparent;
    border:none;
    border-bottom:2px solid transparent;
    color:var(--text2);
    padding:12px 14px;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    transition:color .15s,border-color .15s;
}
.admin-tab:hover{color:var(--text)}
.admin-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.admin-section{display:flex;flex-direction:column;gap:16px}
.settings-actions{display:flex;justify-content:flex-end;gap:10px;padding:0 2px;flex-wrap:wrap}
.settings-group{
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:16px;
    background:var(--surface);
    box-shadow:var(--shadow-soft);
}
.settings-group legend{padding:0 10px;font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px}
.settings-grid{display:grid;grid-template-columns:1fr;gap:14px}
.setting-row{display:flex;flex-direction:column;gap:6px}
.setting-row > label{display:flex;flex-direction:column;gap:4px}
.setting-label-text{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}
.setting-help{font-size:11px;color:var(--text2);line-height:1.4}
.setting-row input,.setting-row textarea,.setting-row select{
    width:100%;
    padding:11px 12px;
    border:1px solid var(--border-strong);
    border-radius:var(--radius-sm);
    background:var(--surface2);
    color:var(--text);
    font-size:14px;
    outline:none;
    transition:border-color .15s,box-shadow .15s;
}
.setting-row input:focus,.setting-row textarea:focus,.setting-row select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.setting-code{font-family:var(--mono);font-size:12px}
.setting-bool{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;font-weight:500}
.setting-bool input{width:20px;height:20px;accent-color:var(--accent)}
.restart-badge{font-size:9px;font-weight:700;text-transform:uppercase;color:var(--warn);border:1px solid rgba(255,204,0,.3);padding:1px 6px;border-radius:999px}

/* Identity / prompt rules */
.identity-header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.identity-header h2{font-size:20px;font-weight:800;color:var(--accent)}
.identity-groups{display:flex;flex-direction:column;gap:18px}
.identity-group{display:flex;flex-direction:column;gap:10px}
.identity-group h3{font-size:13px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px}
.identity-list{display:flex;flex-direction:column;gap:12px}
.identity-component{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:10px;
    box-shadow:var(--shadow-soft);
}
.identity-component.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.identity-component-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text2)}
.identity-version{background:var(--surface2);padding:3px 8px;border-radius:999px;border:1px solid var(--border)}
.identity-content{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--border-strong);
    border-radius:var(--radius-sm);
    background:var(--surface2);
    color:var(--text);
    font-size:14px;
    font-family:var(--font);
    resize:vertical;
    min-height:64px;
    outline:none;
}
.identity-content:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.identity-actions{display:flex;justify-content:flex-end}
.identity-add{margin-top:20px;padding-top:18px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:12px}
.identity-add h3{font-size:14px;font-weight:700;color:var(--accent)}
.identity-add select{padding:11px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface2);color:var(--text);font-size:14px}
.identity-preview{
    margin-top:16px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    box-shadow:var(--shadow-soft);
}
.identity-preview-header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.identity-preview-header h3{font-size:14px;font-weight:700;color:var(--accent)}
.prompt-rule-list{display:flex;flex-direction:column;gap:14px}
.prompt-rule-label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text2)}
.prompt-rule-title{width:100%;padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface2);color:var(--text);font-size:14px;outline:none}
.prompt-rule-title:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.prompt-rule-warning{
    margin-top:14px;
    padding:12px 14px;
    background:rgba(255,204,0,.08);
    border:1px solid rgba(255,204,0,.25);
    border-radius:var(--radius-md);
    color:var(--warn);
    font-size:12px;
}

/* Profile / user forms */
#profile-panel{flex:1;overflow:hidden;display:flex;flex-direction:column}
.profile-header{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);padding:12px 16px;background:var(--surface);flex-shrink:0}
.profile-header h2{font-size:17px;font-weight:700}
.profile-section{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:16px;
    box-shadow:var(--shadow-soft);
}
.profile-section h3{font-size:13px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px}
.profile-field{display:flex;flex-direction:column;gap:5px}
.profile-field label{font-size:12px;color:var(--text2);font-weight:600}
.profile-input{
    width:100%;
    padding:11px 12px;
    border:1px solid var(--border-strong);
    border-radius:var(--radius-sm);
    background:var(--surface2);
    color:var(--text);
    font-size:14px;
    outline:none;
    transition:border-color .15s,box-shadow .15s;
}
.profile-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
textarea.profile-input{font-family:var(--font);resize:vertical;min-height:72px}
.profile-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.user-actions{display:flex;gap:8px;flex-wrap:wrap}
.user-table .user-actions{min-width:220px}
.user-edit-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:16px;margin-top:18px;box-shadow:var(--shadow-soft)}
.user-edit-form h3{font-size:14px;font-weight:700;color:var(--accent);margin-bottom:14px}

/* Provider cards */
#admin-providers{display:flex;flex-direction:column;gap:14px}
.provider-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.provider-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.provider-header{display:flex;align-items:center;gap:10px}
.provider-kind{font-size:10px;color:var(--text2);background:var(--surface2);padding:3px 8px;border-radius:999px;text-transform:uppercase;font-weight:700;letter-spacing:.5px}
.provider-card label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text2);font-weight:500}
.provider-card input,.provider-card select{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--border-strong);
    border-radius:var(--radius-sm);
    background:var(--surface2);
    color:var(--text);
    font-size:14px;
    outline:none;
}
.provider-card input:focus,.provider-card select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.provider-row{display:grid;grid-template-columns:1fr;gap:12px}
.provider-actions{display:flex;gap:10px;flex-wrap:wrap}
.provider-status{font-size:12px;color:var(--success);min-height:20px}
.provider-status.error{color:var(--error)}
.provider-status.warn{color:var(--warn)}

/* Preview modal */
#preview-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.preview-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(4px)}
.preview-modal-content{
    position:relative;
    background:var(--surface-solid);
    border:1px solid var(--border-strong);
    border-radius:var(--radius-md);
    width:100%;
    max-width:760px;
    max-height:85vh;
    display:flex;
    flex-direction:column;
    box-shadow:var(--shadow);
}
.preview-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.preview-modal-header h3{font-size:15px;font-weight:700;color:var(--accent)}
#preview-modal-body{flex:1;overflow:auto;padding:18px;background:var(--surface2);font-size:12px;line-height:1.6;white-space:pre-wrap}

/* Markdown in assistant messages */
.markdown-body{white-space:normal;line-height:1.65}
.markdown-body > *:last-child{margin-bottom:0}
.markdown-body p{margin-bottom:.75em}
.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{margin:.75em 0 .5em;font-weight:700;color:var(--accent)}
.markdown-body h1{font-size:1.35em}
.markdown-body h2{font-size:1.18em}
.markdown-body h3{font-size:1.05em}
.markdown-body ul,.markdown-body ol{padding-left:1.5em;margin-bottom:.75em}
.markdown-body li{margin-bottom:.25em}
.markdown-body table.msg-table{width:100%;border-collapse:collapse;margin:.75em 0;font-size:13px}
.markdown-body table.msg-table th,.markdown-body table.msg-table td{border:1px solid var(--border);padding:7px 11px;text-align:left;vertical-align:top}
.markdown-body table.msg-table th{background:var(--surface);color:var(--text2);font-weight:700}
.markdown-body table.msg-table tr:nth-child(even) td{background:rgba(255,255,255,.03)}
.markdown-body code{background:var(--surface);padding:2px 5px;border-radius:4px;font-family:var(--mono);font-size:12px}
.markdown-body pre{background:var(--surface);padding:12px;border-radius:var(--radius-sm);overflow-x:auto;border:1px solid var(--border);margin-bottom:.75em}
.markdown-body pre code{background:transparent;padding:0}
.markdown-body strong{font-weight:700}
.markdown-body em{font-style:italic}
.markdown-body a{color:var(--accent);text-decoration:none}
.markdown-body a:hover{text-decoration:underline}

/* Animations */
@keyframes msg-in{
    from{opacity:0;transform:translateY(12px) scale(.98)}
    to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes shimmer{
    0%{background-position:-200% 0}
    100%{background-position:200% 0}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Tablet / desktop enhancements */
@media (min-width:769px){
    #app{max-width:1100px;border-left:1px solid var(--border);border-right:1px solid var(--border);box-shadow:0 0 60px rgba(0,0,0,.4)}
    .topbar-nav{display:flex}
    #bottom-nav{display:none!important}
    .dash-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
    .provider-row{grid-template-columns:repeat(3,1fr)}
    .settings-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
    .msg-row{max-width:min(75%,680px)}
    #chat-messages{padding:22px 24px 10px}
}

/* Small phone tweaks */
@media (max-width:380px){
    .brand{font-size:16px}
    .btn-sm{padding:7px 10px;font-size:12px}
    .msg{padding:10px 13px;border-radius:var(--radius-md)}
    .chat-composer{padding:8px 10px}
    #chat-input{padding:11px 13px}
}