* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: system-ui, -apple-system, sans-serif; background: #2e3440; color: #d8dee9; padding: 0 16px; display: flex; flex-direction: column; }
h1 { font-size: 1.4rem; color: #88c0d1; margin-bottom: 16px; }
h2 { font-size: 1.1rem; color: #81a1c1; margin: 16px 0 8px 0; }

/* Control bar */
.control-bar { background: #3b4252; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.control-bar label { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; color: #8899aa; min-width: 0; }
.control-bar select, .control-bar input { background: #2e3440; color: #d8dee9; border: 1px solid #4c566a; border-radius: 4px; padding: 6px 8px; font-size: 0.85rem; font-family: monospace; min-width: 0; }
.control-bar .preset-label { flex: 1 1 200px; }
.control-bar select { width: 100%; }
.control-bar .num-sm { flex: 0 0 auto; }
.control-bar .num-sm input { width: 80px; }
.control-bar .num-xs input { width: 55px; }
.control-bar .wide-label { flex: 0 1 auto; }
.control-bar .wide-label input { width: 120px; }
.control-bar .chk { flex-direction: row; align-items: center; gap: 6px; font-size: 0.85rem; color: #d8dee9; padding-bottom: 4px; }
.btn { padding: 6px 18px; border: none; border-radius: 4px; font-size: 0.85rem; cursor: pointer; font-weight: 600; }
.btn-start { background: #a3be8c; color: #2e3440; }
.btn-stop { background: #bf616a; color: #eceff4; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.status-dot.running { background: #a3be8c; }
.status-dot.stopped { background: #4c566a; }
.status-text { font-size: 0.85rem; padding-bottom: 4px; }
.btn-config { background: none; border: 1px solid #4c566a; color: #6a7585; font-size: 1.1rem; width: 30px; height: 30px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s; line-height: 1; padding: 0; }
.btn-config:hover { color: #88c0d1; border-color: #88c0d1; }

/* GPU table */
.gpu-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.gpu-table th { text-align: left; padding: 8px 10px; background: #3b4252; font-weight: 600; color: #88c0d1; font-size: 0.85rem; }
.gpu-table td { padding: 8px 10px; border-bottom: 1px solid #4c566a; overflow: hidden; text-overflow: ellipsis; }
.gpu-table tr:last-child td { border-bottom: none; }
.value { font-family: monospace; font-size: 0.9rem; white-space: nowrap; }
.card { font-weight: 600; color: #88c0d1; }
.temp { color: #bf616a; }
.load { color: #81a1c1; }
.power { color: #d08770; }
.vram { color: #b48ead; }
.sclk { color: #88c0d1; }
.mclk { color: #ebcb8b; }
.capped { color: #bf616a; font-weight: 600; }

/* Inference panel */
.inference-panel { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.metric-card { background: #3b4252; border-radius: 8px; padding: 12px 18px; min-width: 140px; }
.metric-label { font-size: 0.75rem; color: #8899aa; text-transform: uppercase; letter-spacing: 0.5px; }
.metric-value { font-family: monospace; font-size: 1.3rem; margin-top: 4px; }
.metric-value.prompt { color: #a3be8c; }
.metric-value.gen { color: #88c0d1; }
.metric-value.ctx { color: #b48ead; }
.metric-value.slots { color: #d08770; }
.metric-value.status-ok { color: #a3be8c; }
.metric-value.status-busy { color: #ebcb8b; }
.metric-value.status-err { color: #bf616a; }

/* Logs */
.log-panel { background: #272c35; border-radius: 8px; padding: 10px; flex: 1; min-height: 120px; overflow-y: auto; font-family: monospace; font-size: 0.8rem; line-height: 1.5; color: #a0aab5; white-space: pre-wrap; word-break: break-all; }

/* Chat */
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.chat-input-row { display: flex; gap: 8px; padding: 8px 0 0 0; border-top: 1px solid #3b4252; flex-shrink: 0; }
.chat-input-row textarea { flex: 1; background: #2e3440; color: #d8dee9; border: 1px solid #4c566a; border-radius: 6px; padding: 8px 10px; font-family: system-ui, sans-serif; font-size: 0.9rem; resize: none; outline: none; }
.chat-input-row textarea:focus { border-color: #88c0d1; }
.msg { padding: 8px 12px; border-radius: 8px; max-width: 100%; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.msg-user { background: #434c5e; color: #eceff4; align-self: flex-end; }
.msg-assistant { background: #3b4252; color: #d8dee9; align-self: stretch; white-space: normal; }
.msg-thinking { background: #333a47; color: #6a7585; align-self: flex-start; font-style: italic; font-size: 0.82rem; }
.msg-thinking summary { cursor: pointer; font-size: 0.78rem; color: #5a6575; }
.chat-actions { display: flex; gap: 6px; padding: 0 0 4px 0; flex-shrink: 0; }
.chat-actions button { background: none; border: 1px solid #4c566a; color: #8899aa; border-radius: 4px; padding: 3px 10px; font-size: 0.75rem; cursor: pointer; }
.chat-actions button:hover { border-color: #88c0d1; color: #88c0d1; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Tabs */
.tab-bar { display: flex; gap: 0; border-bottom: 2px solid #3b4252; margin-bottom: 12px; }
.tab-btn { background: none; border: none; color: #6a7585; font-size: 0.9rem; font-weight: 600; padding: 8px 16px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; position: relative; }
.tab-btn:hover { color: #d8dee9; }
.tab-btn.active { color: #88c0d1; border-bottom-color: #88c0d1; }
.tab-btn .tab-badge { font-family: monospace; font-size: 0.7rem; color: #4c566a; margin-left: 6px; font-weight: 400; }
.tab-btn.active .tab-badge { color: #6a7585; }
.page { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding-bottom: 16px; }
.page.active { display: flex; }

.title {
    display: flex;
    justify-content: space-between;
    background: #2e3440;
    position: sticky;
    padding-top: 16px;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

/* Mobile */
@media (max-width: 700px) {
    body { padding: 0 10px; }
    .title { padding-top: 10px; }
    h1 { font-size: 1.2rem; margin-bottom: 10px; padding-top: 10px; }
    h2 { font-size: 1rem; margin: 12px 0 6px 0; }
    .control-bar { padding: 10px; gap: 6px; }
    .control-bar .preset-label { flex: 1 1 100%; }
    .control-bar .num-sm input { width: 70px; }
    .control-bar .num-xs input { width: 50px; }
    .control-bar .wide-label input { width: 90px; }
    .btn { padding: 8px 14px; flex-shrink: 0; }
    .inference-panel { gap: 8px; }
    .metric-card { padding: 8px 12px; min-width: 0; flex: 1 1 calc(50% - 8px); }
    .metric-value { font-size: 1rem; }
    .gpu-table th, .gpu-table td { padding: 6px 6px; font-size: 0.8rem; }
    .log-panel { min-height: 100px; font-size: 0.72rem; }
    .msg { max-width: 100%; font-size: 0.85rem; }
    .chat-input-row textarea { font-size: 0.85rem; }
}
/* Markdown in chat */
.msg-assistant p { margin: 0.4em 0; }
.msg-assistant p:first-child { margin-top: 0; }
.msg-assistant p:last-child { margin-bottom: 0; }
.msg-assistant pre { background: #2e3440; border-radius: 4px; padding: 8px 10px; overflow-x: auto; margin: 0.5em 0; font-size: 0.82rem; }
.msg-assistant code { background: #2e3440; padding: 1px 4px; border-radius: 3px; font-size: 0.85em; }
.msg-assistant pre code { background: none; padding: 0; }
.msg-assistant ul, .msg-assistant ol { margin: 0.3em 0 0.3em 1.4em; }
.msg-assistant li { margin: 0.15em 0; }
.msg-assistant blockquote { border-left: 3px solid #4c566a; padding-left: 10px; color: #8899aa; margin: 0.4em 0; }
.msg-assistant a { color: #88c0d1; }
.msg-assistant h1,.msg-assistant h2,.msg-assistant h3,.msg-assistant h4 { margin: 0.5em 0 0.2em 0; font-size: 1em; color: #88c0d1; }
.msg-assistant table { border-collapse: collapse; margin: 0.4em 0; font-size: 0.85em; }
.msg-assistant th, .msg-assistant td { border: 1px solid #4c566a; padding: 3px 8px; }


/* Preset management buttons */
.preset-actions { display: flex; gap: 4px; margin-top: 4px; }
.btn-sm { padding: 2px 8px; border: none; border-radius: 3px; font-size: 0.72rem; cursor: pointer; font-weight: 500; }
.btn-preset { background: #4c566a; color: #d8dee9; }
.btn-preset:hover { background: #5e6a7a; }
.btn-preset-delete { background: #4c566a; color: #bf616a; }
.btn-preset-delete:hover { background: #5e3a3a; color: #d8dee9; }
.btn-preset-reset { background: none; border: 1px solid #4c566a; color: #6a7585; font-size: 0.68rem; padding: 2px 6px; border-radius: 3px; cursor: pointer; }
.btn-preset-reset:hover { border-color: #88c0d1; color: #88c0d1; }

/* Preset Modal — overlay */
.modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    z-index: 1000; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.22s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }

/* Modal shell */
.modal {
    background: #3b4252;
    border-radius: 12px;
    width: 520px; max-width: 95vw; max-height: 88vh;
    box-shadow: 0 12px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(136,192,209,0.08);
    display: flex; flex-direction: column; overflow: hidden;
    transform: translateY(12px) scale(0.97);
    transition: transform 0.22s cubic-bezier(.4,.0,.2,1);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }

/* Sticky header */
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px 14px; border-bottom: 1px solid #434c5e;
    flex-shrink: 0;
}
.modal-header h2 { color: #88c0d1; font-size: 1.1rem; margin: 0; }
.modal-close {
    background: none; border: none; color: #6a7585; font-size: 1.2rem;
    cursor: pointer; padding: 4px 8px; border-radius: 4px; line-height: 1;
    transition: color 0.15s, background 0.15s;
}
.modal-close:hover { color: #d8dee9; background: #434c5e; }

/* Form as flex container */
.modal form { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Scrollable body */
.modal-body {
    overflow-y: auto; padding: 6px 24px 8px; flex: 1; min-height: 0;
}
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body::-webkit-scrollbar-thumb { background: #4c566a; border-radius: 3px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: #5e6a7a; }

/* Sticky footer */
.modal-buttons {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 12px 24px 18px; border-top: 1px solid #434c5e;
    flex-shrink: 0;
}
.btn-modal-cancel { background: #4c566a; color: #d8dee9; }
.btn-modal-cancel:hover { background: #5e6a7a; }
.btn-modal-save { background: #a3be8c; color: #2e3440; position: relative; overflow: hidden; }
.btn-modal-save:hover { background: #8fbf70; }
.btn-modal-save.saving { pointer-events: none; opacity: 0.7; }

/* Form fields */
.modal-field {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 0.8rem; color: #8899aa; margin-bottom: 10px; width: 100%;
}
.modal-field input[type="text"],
.modal-field input[type="number"] {
    background: #2e3440; color: #d8dee9;
    border: 1px solid #4c566a; border-radius: 5px;
    padding: 7px 10px; font-size: 0.85rem; font-family: monospace; width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.modal-field input:focus, .modal-field select:focus {
    border-color: #88c0d1; outline: none;
    box-shadow: 0 0 0 2px rgba(136,192,209,0.15);
}
.modal-field input.field-error { border-color: #bf616a; }
.modal-field input.field-error:focus { box-shadow: 0 0 0 2px rgba(191,97,106,0.15); }
.modal-field .field-error-msg { color: #bf616a; font-size: 0.72rem; margin-top: 1px; display: none; }
.modal-field input.field-error ~ .field-error-msg { display: block; }
.modal-field select {
    background: #2e3440; color: #d8dee9;
    border: 1px solid #4c566a; border-radius: 5px;
    padding: 7px 10px; font-size: 0.85rem; font-family: monospace; width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Collapsible sections — custom chevron */
.modal-section {
    border: 1px solid #4c566a; border-radius: 7px; margin-bottom: 10px;
    transition: border-color 0.2s;
}
.modal-section[open] { border-color: #5a6577; }
.modal-section summary {
    cursor: pointer; padding: 9px 12px; font-size: 0.82rem; font-weight: 600;
    color: #88c0d1; user-select: none;
    list-style: none; display: flex; align-items: center; gap: 8px;
    transition: color 0.15s;
}
.modal-section summary::-webkit-details-marker { display: none; }
.modal-section summary::before {
    content: ''; display: inline-block; width: 14px; height: 14px; flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2388c0d1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 5.5l3 3 3-3'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform 0.2s ease;
    transform: rotate(-90deg);
}
.modal-section[open] > summary::before { transform: rotate(0deg); }
.modal-section summary:hover { color: #a3d5e4; }
.modal-section > :not(summary) { padding: 0 12px; }
.modal-section > :last-child { padding-bottom: 10px; }
.modal-section .modal-checks { margin: 2px 12px 4px 12px; }
.modal-section p { padding: 0 12px; }
.modal-row { display: flex; gap: 10px; }
.modal-row .modal-field { flex: 1; }
.modal-checks { margin: 6px 0 16px 0; gap: 16px; }
.modal-checks .chk {
    font-size: 0.85rem; color: #d8dee9; display: flex; align-items: center; gap: 6px; cursor: pointer;
}

/* File Browser */
.file-browser-bar {
    display: flex; gap: 6px; align-items: center;
    padding: 8px 16px; border-bottom: 1px solid #434c5e; flex-shrink: 0;
}
.fb-path-input {
    flex: 1; background: #2e3440; color: #d8dee9; border: 1px solid #4c566a;
    border-radius: 4px; padding: 5px 8px; font-size: 0.78rem; font-family: monospace;
    outline: none;
}
.fb-path-input:focus { border-color: #88c0d1; }
.fb-entries { min-height: 200px; max-height: 400px; overflow-y: auto; }
.fb-entries::-webkit-scrollbar { width: 6px; }
.fb-entries::-webkit-scrollbar-thumb { background: #4c566a; border-radius: 3px; }
.fb-entry {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 16px; cursor: pointer; font-size: 0.82rem;
    border-bottom: 1px solid rgba(76,86,106,0.3);
    transition: background 0.1s;
}
.fb-entry:hover { background: #434c5e; }
.fb-entry-icon { width: 16px; text-align: center; flex-shrink: 0; font-size: 0.75rem; }
.fb-entry-dir .fb-entry-icon { color: #ebcb8b; }
.fb-entry-file .fb-entry-icon { color: #6a7585; }
.fb-entry-file.fb-match .fb-entry-icon { color: #88c0d1; }
.fb-entry-name { flex: 1; color: #d8dee9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-entry-dir .fb-entry-name { color: #ebcb8b; }
.fb-entry-size { color: #6a7585; font-size: 0.72rem; font-family: monospace; flex-shrink: 0; }
.fb-empty { padding: 16px; color: #6a7585; text-align: center; font-size: 0.82rem; }

/* Toast notifications */
.toast-container {
    position: fixed; top: 16px; right: 16px; z-index: 2000;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
    background: #3b4252; color: #d8dee9; border-radius: 8px;
    padding: 10px 16px; font-size: 0.82rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 0 1px rgba(76,86,106,0.5);
    pointer-events: auto; display: flex; align-items: center; gap: 8px;
    transform: translateX(120%); opacity: 0;
    transition: transform 0.25s cubic-bezier(.4,.0,.2,1), opacity 0.25s ease;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.toast-error { border-left: 3px solid #bf616a; }
.toast.toast-success { border-left: 3px solid #a3be8c; }
.toast.toast-warn { border-left: 3px solid #ebcb8b; }

@media (max-width: 700px) {
    .modal { width: 95vw; }
    .modal-header { padding: 14px 16px 12px; }
    .modal-body { padding: 6px 16px 8px; }
    .modal-buttons { padding: 10px 16px 14px; }
    .modal-row { flex-direction: column; gap: 0; }
    .preset-actions { flex-wrap: wrap; }
}