/* ============================================================
   ZN-X — Glassmorphism UI
   ============================================================ */

:root {
    --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --font-mono: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
    --font-sans: 'Segoe UI', 'Microsoft YaHei', 'Inter', -apple-system, sans-serif;
}
:root {
    --bg-primary: #0a0a14; --bg-secondary: #12122a; --bg-tertiary: #1a1a3e;
    --glass-bg: rgba(20, 20, 50, 0.55); --glass-bg-hover: rgba(30, 30, 70, 0.65);
    --glass-border: rgba(255,255,255,0.08); --glass-border-focus: rgba(255,255,255,0.2);
    --glass-shadow: 0 6px 24px rgba(0,0,0,0.4);
    --text-primary: #e8e8f0; --text-secondary: #a0a0c0; --text-muted: #606080;
    --accent-primary: #6c5ce7; --accent-primary-hover: #7d6ff0;
    --accent-primary-glow: rgba(108,92,231,0.3);
    --accent-secondary: #00cec9; --accent-danger: #e74c3c;
    --accent-success: #00b894; --accent-warning: #fdcb6e;
    --scrollbar-thumb: rgba(108,92,231,0.4); --scrollbar-track: rgba(255,255,255,0.05);
    --orb-1: rgba(108,92,231,0.12); --orb-2: rgba(0,206,201,0.08);
    --orb-3: rgba(253,203,110,0.06); --grid-color: rgba(255,255,255,0.03);
    --card-bg: rgba(30,30,70,0.5);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font-sans);font-size:14px;color:var(--text-primary);background:var(--bg-primary);transition:color var(--transition),background var(--transition);}
body{display:flex;flex-direction:column;}

/* Bg */
.bg-animation{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.bg-orb{position:absolute;border-radius:50%;filter:blur(80px);animation:orbFloat 20s ease-in-out infinite;}
.orb-1{width:500px;height:500px;background:var(--orb-1);top:-150px;left:-100px;}
.orb-2{width:400px;height:400px;background:var(--orb-2);bottom:-100px;right:-80px;animation-delay:-7s;}
.orb-3{width:350px;height:350px;background:var(--orb-3);top:40%;left:50%;animation-delay:-14s;}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(30px,-40px) scale(1.1)}50%{transform:translate(-20px,20px) scale(0.9)}75%{transform:translate(40px,30px) scale(1.05)}}
.bg-grid{position:absolute;inset:0;background-image:linear-gradient(var(--grid-color) 1px,transparent 1px),linear-gradient(90deg,var(--grid-color) 1px,transparent 1px);background-size:60px 60px;}

/* Glass */
.glass{background:var(--glass-bg);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);transition:background var(--transition),border-color var(--transition);}
.glass:hover{background:var(--glass-bg-hover);}
.glass:focus-within{border-color:var(--glass-border-focus);}

/* Navbar */
.navbar{position:relative;z-index:100;display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:6px 14px;margin:8px 8px 0;border-radius:var(--radius-lg);flex-shrink:0;}
.nav-left{display:flex;align-items:center;gap:10px;}
.logo{display:flex;align-items:center;gap:8px;color:var(--accent-primary);}
.logo-text{font-size:17px;font-weight:700;color:var(--text-primary);}
.version-badge{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--accent-primary);color:#fff;font-weight:600;}
.product-picker{position:relative;}
.product-trigger{display:flex;align-items:center;gap:8px;padding:4px 9px;border:1px solid var(--glass-border);border-radius:var(--radius-sm);background:var(--glass-bg);color:var(--text-primary);font-family:var(--font-mono);font-size:12px;font-weight:600;cursor:pointer;outline:none;transition:all var(--transition);}
.product-trigger:hover,.product-trigger[aria-expanded="true"]{background:var(--glass-bg-hover);border-color:var(--accent-primary);}
.product-arrow{color:var(--text-secondary);font-size:14px;line-height:1;}
.product-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:2000;min-width:100%;padding:4px;border-radius:var(--radius-sm);}
.product-menu[hidden]{display:none;}
.product-option{display:block;width:100%;padding:7px 14px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--text-primary);font-family:var(--font-mono);font-size:12px;font-weight:600;text-align:left;cursor:pointer;white-space:nowrap;}
.product-option:hover,.product-option.active{background:rgba(108,92,231,.28);border-color:rgba(108,92,231,.45);}
.nav-center{display:flex;align-items:center;gap:8px;}
.nav-monitor{display:flex;align-items:stretch;gap:8px;font-family:var(--font-mono);justify-content:center;}
.nm-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 18px;border-radius:var(--radius-sm);background:var(--glass-bg);border:1px solid var(--glass-border);white-space:nowrap;color:var(--text-muted);min-width:100px;}
.nm-val{color:var(--accent-secondary);font-weight:700;font-size:20px;line-height:1.1;}
.nm-unit{font-size:9px;color:var(--text-muted);}
.nav-sep{width:1px;height:20px;background:var(--glass-border);margin:0 4px;}
.nav-right{display:flex;align-items:center;gap:8px;}

/* Buttons */
.btn-primary{display:inline-flex;align-items:center;gap:5px;padding:9px 18px;border:none;border-radius:var(--radius-sm);background:var(--accent-primary);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition);box-shadow:0 3px 12px var(--accent-primary-glow);}
.btn-primary:hover{background:var(--accent-primary-hover);transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0);}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn-primary.btn-sm{padding:6px 14px;font-size:12px;}
.btn-secondary{display:inline-flex;align-items:center;gap:5px;padding:9px 18px;border:1px solid var(--glass-border);border-radius:var(--radius-sm);background:var(--glass-bg);color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--transition);}
.btn-secondary:hover{background:var(--glass-bg-hover);}
.btn-secondary:disabled{opacity:.4;cursor:not-allowed;}
.btn-secondary.btn-sm{padding:6px 14px;font-size:12px;}
.btn-danger{display:inline-flex;align-items:center;gap:5px;padding:9px 18px;border:1px solid var(--accent-danger);border-radius:var(--radius-sm);background:rgba(231,76,60,.15);color:var(--accent-danger);font-size:13px;font-weight:600;cursor:pointer;transition:all var(--transition);}
.btn-danger:hover{background:rgba(231,76,60,.3);}
.btn-danger:disabled{opacity:.4;cursor:not-allowed;}
.btn-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--glass-border);border-radius:var(--radius-sm);background:var(--glass-bg);color:var(--text-primary);cursor:pointer;font-size:18px;transition:all var(--transition);}
.btn-icon:hover{background:var(--glass-bg-hover);}
.btn-text{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:12px;padding:4px 8px;border-radius:4px;}
.btn-text:hover{color:var(--text-primary);}
.btn-help{white-space:nowrap;}

/* Forms */
.form-group{margin-bottom:12px;}
.form-group label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:5px;}
.form-group-inline{display:flex;align-items:center;gap:8px;margin-bottom:0;}
.form-group-inline label{margin-bottom:0;white-space:nowrap;}
.form-group-half{flex:1;min-width:0;}
.form-row{display:flex;gap:10px;}
.glass-input{width:100%;padding:8px 10px;border:1px solid var(--glass-border);border-radius:var(--radius-sm);background:var(--glass-bg);color:var(--text-primary);font-family:var(--font-mono);font-size:13px;outline:none;transition:all var(--transition);}
.glass-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-primary-glow);}
.glass-input:disabled{opacity:.45;cursor:not-allowed;}
.glass-input[readonly]{cursor:default;}
.glass-input::placeholder{color:var(--text-muted);}
.glass-input-sm{padding:6px 8px;font-size:12px;width:auto;}
select.glass-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23a0a0c0' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;}
.form-actions{display:flex;gap:8px;margin-top:14px;}

/* Status */
.status-indicator{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--glass-bg);font-size:13px;}
.status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.status-dot.connected{background:var(--accent-success);box-shadow:0 0 10px var(--accent-success);animation:pulse 2s ease-in-out infinite;}
.status-dot.disconnected{background:var(--text-muted);}
.status-dot.connecting{background:var(--accent-warning);animation:pulse 1s ease-in-out infinite;}
.status-dot.error{background:var(--accent-danger);}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.status-text{color:var(--text-secondary);}

/* Layout */
.main-content{position:relative;z-index:1;display:flex;flex:1;gap:0;padding:12px 8px;min-height:0;}

/* Navbar connection status */
.nav-conn-status{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--radius-sm);background:var(--glass-bg);border:1px solid var(--glass-border);cursor:pointer;transition:all var(--transition);}
.nav-conn-status:hover{background:var(--glass-bg-hover);}
.nav-conn-port{font-size:12px;color:var(--text-secondary);font-family:var(--font-mono);}
.nav-conn-status .status-dot{width:8px;height:8px;}

/* Data panel */
.data-panel{flex:1;border-radius:var(--radius-lg);display:flex;flex-direction:column;overflow:hidden;min-width:0;align-self:stretch;}

/* Tabs */
.tab-bar{display:flex;gap:0;padding:8px 10px 0;flex-shrink:0;}
.tab-btn{padding:10px 20px;border:none;background:transparent;color:var(--text-secondary);font-size:14px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:all var(--transition);font-family:var(--font-sans);}
.tab-btn:hover{color:var(--text-primary);}
.tab-btn.active{color:var(--accent-primary);border-bottom-color:var(--accent-primary);}
.tab-content{display:none;flex:1;flex-direction:column;overflow:hidden;min-height:0;}
.tab-content.active{display:flex;}

/* Top bar: mode control */
.main-topbar{display:flex;align-items:stretch;gap:8px;padding:6px 10px 0;flex-shrink:0;}
.main-topbar .param-group{margin-bottom:0;flex:1;}

/* Two-column layout */
.main-layout{display:flex;flex:1;gap:10px;padding:8px 10px;min-height:0;}

/* Left: Config panel */
.config-panel{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;}

.config-panel .param-group{margin-bottom:clamp(4px,0.8vh,8px);}
.config-panel .params-scroll{flex:1;overflow-y:auto;min-height:0;}

/* Config tab */
.params-scroll{flex:1;overflow-y:auto;min-height:0;}
.params-actions{display:flex;align-items:center;gap:8px;padding:clamp(6px,1vh,12px) 14px;margin:clamp(4px,0.8vh,10px) 0 0;border-radius:var(--radius-md);flex-shrink:0;}
.param-group{margin-bottom:clamp(6px,1vh,12px);padding:clamp(6px,1vh,14px) 14px;border-radius:var(--radius-md);border:1px solid var(--glass-border);}
.param-group legend{font-size:clamp(11px,1.3vw,13px);font-weight:700;color:var(--text-primary);padding:0 6px;}
.param-row{display:flex;gap:clamp(6px,0.8vw,12px);margin-bottom:clamp(3px,0.5vh,8px);}
.param-row-split{display:flex;gap:clamp(6px,0.8vw,10px);margin-bottom:clamp(6px,1vh,10px);}
.param-row-split .param-group{margin-bottom:0;}
.param-row:last-child{margin-bottom:0;}
.param-item{flex:1;min-width:0;}
.param-item label{display:block;font-size:clamp(9px,1vw,11px);font-weight:600;color:var(--text-secondary);margin-bottom:3px;text-transform:uppercase;letter-spacing:.3px;}
.param-item .glass-input{width:100%;padding:clamp(4px,0.6vh,7px) 8px;font-size:clamp(11px,1.2vw,13px);}
.param-item select.glass-input{padding-right:24px;background-position:right 8px center;}
.param-status{font-size:clamp(10px,1.2vw,12px);color:var(--text-muted);margin-left:auto;}

/* Control elements inside config */
.config-mode-row{display:flex;align-items:center;gap:clamp(8px,1vw,14px);flex-wrap:wrap;}
.control-label{font-size:clamp(11px,1.3vw,13px);color:var(--text-secondary);}
.mode-badge{padding:3px 14px;border-radius:20px;font-size:clamp(11px,1.3vw,13px);font-weight:700;}
.mode-badge.run{background:rgba(0,184,148,.2);color:var(--accent-success);}
.mode-badge.setup{background:rgba(253,203,110,.2);color:var(--accent-warning);}
.control-hint{font-size:clamp(10px,1.1vw,12px);color:var(--text-muted);font-style:italic;}
.config-info{display:flex;align-items:center;gap:4px;font-size:clamp(10px,1.2vw,12px);color:var(--text-muted);margin-left:auto;}
.danger-section{border:1px solid rgba(231,76,60,.3)!important;}
.btn-row-center{display:flex;justify-content:center;margin-bottom:6px;}
.input-with-btn{display:flex;gap:2px;align-items:center;}
.input-with-btn .glass-input{flex:1;min-width:0;}
/* Log tab */
.log-header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;flex-shrink:0;border-bottom:1px solid var(--glass-border);}
.log-header h3{font-size:clamp(11px,1.3vw,14px);font-weight:700;}
.log-actions{display:flex;align-items:center;gap:12px;}
.log-count{font-size:clamp(10px,1vw,12px);color:var(--text-muted);font-family:var(--font-mono);}
.log-body{flex:1;overflow-y:auto;padding:6px 14px;font-family:var(--font-mono);font-size:clamp(10px,1.2vw,12px);line-height:1.8;}
.log-entry{display:flex;gap:8px;padding:1px 0;align-items:baseline;}
.log-entry .log-head{display:flex;gap:6px;flex-shrink:0;min-width:95px;}
.log-entry .log-time{color:var(--text-muted);}
.log-entry .log-dir{font-weight:700;min-width:26px;text-transform:uppercase;}
.log-entry .log-dir.tx{color:var(--accent-success);}
.log-entry .log-dir.rx{color:var(--accent-warning);}
.log-entry .log-dir.system{color:var(--accent-primary);}
.log-entry .log-dir.error{color:var(--accent-danger);}
.log-entry .log-data{color:var(--text-secondary);word-break:break-all;white-space:pre-wrap;flex:1;}
.log-empty{color:var(--text-muted);text-align:center;padding:20px;font-family:var(--font-sans);}

/* Modal */
.modal-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);}
.modal-dialog{width:760px;max-width:94vw;border-radius:var(--radius-lg);overflow:hidden;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;}
.modal-header h2{font-size:15px;font-weight:700;}
.modal-body{padding:0 18px 10px;}
.modal-footer{display:flex;gap:10px;padding:12px 18px;border-top:1px solid var(--glass-border);}
.modal-status{display:flex;align-items:center;gap:8px;padding:10px 12px;margin-top:8px;border-radius:var(--radius-sm);background:var(--glass-bg);font-size:13px;}
.serial-picker-row{display:flex;align-items:center;gap:8px;}
.serial-picker-row .glass-input{flex:1;min-width:0;}
.serial-picker-row .btn-secondary{white-space:nowrap;padding:8px 12px;}
.serial-meta{margin-top:5px;color:var(--text-muted);font-size:11px;line-height:1.5;}
.serial-hint{margin-top:9px;padding:9px 11px;border-radius:var(--radius-sm);font-size:12px;line-height:1.5;background:var(--glass-bg);color:var(--text-muted);border:1px solid var(--glass-border);}
.serial-hint.supported{color:var(--accent-success);border-color:rgba(0,184,148,.3);}
.serial-hint.unsupported{color:var(--accent-danger);border-color:rgba(231,76,60,.35);}
.help-dialog{width:620px;}
.help-body{padding-bottom:18px;}
.help-summary,.help-note{padding:11px 13px;border:1px solid var(--glass-border);border-radius:var(--radius-sm);background:var(--glass-bg);color:var(--text-secondary);line-height:1.7;}
.help-summary{color:var(--accent-success);border-color:rgba(0,184,148,.28);}
.help-note{color:var(--accent-warning);border-color:rgba(253,203,110,.28);}
.help-steps{margin:12px 0;padding-left:22px;color:var(--text-secondary);line-height:1.85;}
.help-steps li{margin-bottom:5px;}
.help-steps strong{color:var(--text-primary);}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:3px;}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--accent-primary);}

/* ── Responsive breakpoints ── */

/* Height < 800px: compact */
@media(max-height:799px){
    .param-group{margin-bottom:5px;padding:5px 10px;}
    .param-row{gap:5px;margin-bottom:2px;}
    .param-item .glass-input{padding:4px 6px;font-size:11px;}
    .param-item label{font-size:9px;}
    .params-actions{padding:5px 10px;margin:4px 0 0;}
}
@media(max-height:679px){
    .param-group legend{font-size:10px;}
    .param-item .glass-input{padding:3px 5px;font-size:10px;}
    .log-body{font-size:10px;line-height:1.5;}
}