:root{--bg: #1a1a2e;--bg2: #16213e;--bg3: #0f3460;--fg: #e6e6e6;--fg2: #a0a0b0;--accent: #e94560;--accent2: #533483;--border: #2a2a4a;--success: #4caf50;--warning: #ff9800;--error: #f44336;--radius: 8px;--font: "SF Mono", "Fira Code", "Cascadia Code", monospace}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font);background:var(--bg);color:var(--fg);font-size:14px;-webkit-font-smoothing:antialiased}#ciao-app{min-height:100vh;display:flex;flex-direction:column}.top-nav{display:flex;align-items:center;gap:16px;padding:8px 16px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}.nav-brand{font-weight:700;font-size:18px;color:var(--accent);text-decoration:none}.nav-links{display:flex;gap:12px;flex:1}.nav-links a{color:var(--fg2);text-decoration:none;padding:4px 8px;border-radius:var(--radius);transition:all .2s}.nav-links a:hover,.nav-links a.router-link-exact-active{color:var(--fg);background:var(--bg3)}main{flex:1;display:flex;flex-direction:column}.btn-small{padding:4px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg3);color:var(--fg);cursor:pointer;font-family:var(--font);font-size:12px}.btn-small:hover{opacity:.8}.btn-primary{padding:8px 20px;border:none;border-radius:var(--radius);background:var(--accent);color:#fff;cursor:pointer;font-family:var(--font);font-size:14px;font-weight:600}.btn-primary:hover{opacity:.9}.btn-primary:disabled{opacity:.5;cursor:not-allowed}input,textarea,select{background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;font-family:var(--font);font-size:14px;outline:none}input:focus,textarea:focus,select:focus{border-color:var(--accent)}.page{padding:16px;max-width:600px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:12px}.page-header{display:flex;justify-content:space-between;align-items:center}.page-header h2{font-size:16px;font-weight:700}.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px}.section-title{font-size:11px;color:var(--fg2);text-transform:uppercase;letter-spacing:.5px;margin:0}@media(max-width:600px){.top-nav{padding:8px 12px;gap:8px}.nav-links a{padding:4px 6px;font-size:13px}.page{padding:12px}}