/*! Notch by Notch v2.0 | Copyright (c) 2025 Notch by Notch. All rights reserved. */
/* ═══════════════════════════════════════════════════ NOTCH BY NOTCH — styles.css Themes, patterns, layout, components ═══════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{font-family:'DM Sans',sans-serif;font-size:14px;min-height:100vh;overflow-x:hidden;} /* ═══════════════════════════════════════════════════ BASE THEMES ═══════════════════════════════════════════════════ */ [data-theme="dark"]{ --bg:#070910;--bg2:#0b0d17;--surface:#0f1220;--card:#131825; --border:#1c2333;--border2:#243048; --text:#b0bdd4;--text2:#5a6a8a;--text3:#2e3a52;--white:#e8edf5; --shadow:rgba(0,0,0,.55);--nav-bg:#0b0d17;--nav-border:#1c2333; } [data-theme="light"]{ --bg:#f0f2f8;--bg2:#e4e8f2;--surface:#ffffff;--card:#ffffff; --border:#d0d8e8;--border2:#b8c4d8; --text:#2a3348;--text2:#6878a0;--text3:#a0aec0;--white:#1a2238; --shadow:rgba(0,0,0,.12);--nav-bg:#ffffff;--nav-border:#d0d8e8; } [data-theme="midnight"]{ --bg:#00020a;--bg2:#020510;--surface:#040815;--card:#060b1a; --border:#0e1628;--border2:#162038; --text:#8090b8;--text2:#384868;--text3:#1c2840;--white:#c0d0f0; --shadow:rgba(0,0,30,.8);--nav-bg:#020510;--nav-border:#0e1628; } [data-theme="warm"]{ --bg:#0f0a05;--bg2:#160e06;--surface:#1c1208;--card:#22160a; --border:#321e0e;--border2:#432a14; --text:#c8a882;--text2:#7a5a38;--text3:#3e2c18;--white:#f0e0c8; --shadow:rgba(0,0,0,.6);--nav-bg:#160e06;--nav-border:#321e0e; } [data-theme="contrast"]{ --bg:#000000;--bg2:#0a0a0a;--surface:#111111;--card:#1a1a1a; --border:#333333;--border2:#555555; --text:#ffffff;--text2:#aaaaaa;--text3:#666666;--white:#ffffff; --shadow:rgba(0,0,0,.9);--nav-bg:#0a0a0a;--nav-border:#333333; } [data-theme="forest"]{ --bg:#060e08;--bg2:#0a150b;--surface:#0e1c10;--card:#122214; --border:#1a3020;--border2:#244030; --text:#8ab898;--text2:#4a7858;--text3:#284038;--white:#d0ead8; --shadow:rgba(0,0,0,.6);--nav-bg:#0a150b;--nav-border:#1a3020; } [data-theme="ocean"]{ --bg:#030c14;--bg2:#05101c;--surface:#081524;--card:#0b1a2c; --border:#102438;--border2:#183050; --text:#80aac8;--text2:#3a6888;--text3:#1e4060;--white:#c0e0f8; --shadow:rgba(0,0,0,.7);--nav-bg:#05101c;--nav-border:#102438; } [data-theme="dusk"]{ --bg:#100a18;--bg2:#160e22;--surface:#1c1230;--card:#22163c; --border:#2e1e50;--border2:#3e2868; --text:#b8a0d8;--text2:#7858a8;--text3:#4a3478;--white:#ece0ff; --shadow:rgba(0,0,0,.65);--nav-bg:#160e22;--nav-border:#2e1e50; } [data-accent="cyan"] {--accent:#00d4ff;--accent-d:rgba(0,212,255,.12);--accent-g:rgba(0,212,255,.25);} [data-accent="green"] {--accent:#00ffb3;--accent-d:rgba(0,255,179,.12);--accent-g:rgba(0,255,179,.25);} [data-accent="purple"]{--accent:#a855f7;--accent-d:rgba(168,85,247,.12);--accent-g:rgba(168,85,247,.25);} [data-accent="amber"] {--accent:#ffb347;--accent-d:rgba(255,179,71,.12);--accent-g:rgba(255,179,71,.25);} [data-accent="rose"] {--accent:#ff6b9d;--accent-d:rgba(255,107,157,.12);--accent-g:rgba(255,107,157,.25);} [data-accent="lime"] {--accent:#a3ff47;--accent-d:rgba(163,255,71,.12);--accent-g:rgba(163,255,71,.25);} [data-accent="gold"] {--accent:#ffd700;--accent-d:rgba(255,215,0,.12);--accent-g:rgba(255,215,0,.25);} [data-accent="coral"] {--accent:#ff6b6b;--accent-d:rgba(255,107,107,.12);--accent-g:rgba(255,107,107,.25);} :root{ --green:#00ffb3;--green-d:rgba(0,255,179,.1); --amber:#ffb347;--amber-d:rgba(255,179,71,.1); --red:#ff4757;--red-d:rgba(255,71,87,.12); --purple:#a855f7;--purple-d:rgba(168,85,247,.12); --L:#3b9eff;--L-d:rgba(59,158,255,.12); --R:#ff6b9d;--R-d:rgba(255,107,157,.12); --r:8px; --sidebar-w:224px; --topbar-h:52px; --bottomnav-h:62px; } /* ═══════════════════════════════════════════════════ PATTERNS — Geometric ═══════════════════════════════════════════════════ */ .pattern-overlay{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;} [data-pattern="grain"] .pattern-overlay{ background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"); opacity:.5; } [data-pattern="grid"] .pattern-overlay{ background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:40px 40px;opacity:.35; } [data-pattern="dots"] .pattern-overlay{ background-image:radial-gradient(circle,var(--border2) 1.5px,transparent 1.5px); background-size:22px 22px;opacity:.55; } [data-pattern="waves"] .pattern-overlay{ background-image:repeating-linear-gradient(0deg,transparent,transparent 18px,var(--border) 18px,var(--border) 19px); opacity:.18; } [data-pattern="hexagon"] .pattern-overlay{ background-color:transparent; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z' fill='none' stroke='%231c2333' stroke-width='1'/%3E%3Cpath d='M28 64 L56 80 L56 100' fill='none' stroke='%231c2333' stroke-width='1'/%3E%3Cpath d='M28 64 L0 80 L0 100' fill='none' stroke='%231c2333' stroke-width='1'/%3E%3C/svg%3E"); background-size:56px 100px;opacity:.4; } [data-pattern="diagonal"] .pattern-overlay{ background-image:repeating-linear-gradient(45deg,var(--border) 0,var(--border) 1px,transparent 0,transparent 50%); background-size:16px 16px;opacity:.25; } [data-pattern="crosshatch"] .pattern-overlay{ background-image:repeating-linear-gradient(45deg,var(--border) 0,var(--border) 1px,transparent 0,transparent 50%),repeating-linear-gradient(-45deg,var(--border) 0,var(--border) 1px,transparent 0,transparent 50%); background-size:20px 20px;opacity:.2; } [data-pattern="chevron"] .pattern-overlay{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24'%3E%3Cpolyline points='0,12 20,0 40,12' fill='none' stroke='%231c2333' stroke-width='1.5'/%3E%3Cpolyline points='0,24 20,12 40,24' fill='none' stroke='%231c2333' stroke-width='1.5'/%3E%3C/svg%3E"); background-size:40px 24px;opacity:.35; } [data-pattern="circuit"] .pattern-overlay{ background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px),radial-gradient(circle 2px at 20px 20px,var(--border2) 2px,transparent 2px),radial-gradient(circle 2px at 60px 60px,var(--border2) 2px,transparent 2px); background-size:80px 80px;opacity:.22; } /* ═══════════════════════════════════════════════════ PATTERNS — Nature ═══════════════════════════════════════════════════ */ [data-pattern="trees"] .pattern-overlay{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='80'%3E%3Cpolygon points='30,5 10,35 20,35 12,55 22,55 16,72 44,72 38,55 48,55 40,35 50,35' fill='%231c2333' opacity='.7'/%3E%3Crect x='27' y='72' width='6' height='8' fill='%231c2333' opacity='.5'/%3E%3C/svg%3E"); background-size:60px 80px;opacity:.3; } [data-pattern="pebbles"] .pattern-overlay{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cellipse cx='20' cy='20' rx='14' ry='10' fill='none' stroke='%231c2333' stroke-width='1'/%3E%3Cellipse cx='55' cy='15' rx='10' ry='8' fill='none' stroke='%231c2333' stroke-width='1'/%3E%3Cellipse cx='35' cy='50' rx='18' ry='12' fill='none' stroke='%231c2333' stroke-width='1'/%3E%3Cellipse cx='65' cy='55' rx='12' ry='9' fill='none' stroke='%231c2333' stroke-width='1'/%3E%3Cellipse cx='10' cy='65' rx='8' ry='6' fill='none' stroke='%231c2333' stroke-width='1'/%3E%3C/svg%3E"); background-size:80px 80px;opacity:.4; } [data-pattern="birds"] .pattern-overlay{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='100'%3E%3Cpath d='M20,30 Q25,25 30,30 Q35,25 40,30' fill='none' stroke='%231c2333' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M70,55 Q76,49 83,55 Q90,49 96,55' fill='none' stroke='%231c2333' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M10,75 Q14,71 18,75 Q22,71 26,75' fill='none' stroke='%231c2333' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M90,20 Q95,15 101,20 Q107,15 113,20' fill='none' stroke='%231c2333' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); background-size:120px 100px;opacity:.35; } [data-pattern="leaves"] .pattern-overlay{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M10,40 Q30,10 50,40 Q30,30 10,40 Z' fill='none' stroke='%231c2333' stroke-width='1'/%3E%3Cpath d='M10,40 Q30,35 50,40' fill='none' stroke='%231c2333' stroke-width='.7' stroke-dasharray='2,2'/%3E%3Cpath d='M50,20 Q65,5 75,25 Q65,18 50,20 Z' fill='none' stroke='%231c2333' stroke-width='1'/%3E%3Cpath d='M20,65 Q35,50 55,65 Q35,58 20,65 Z' fill='none' stroke='%231c2333' stroke-width='1'/%3E%3C/svg%3E"); background-size:80px 80px;opacity:.35; } [data-pattern="branches"] .pattern-overlay{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M50,100 L50,60 L30,35 M50,60 L70,35 M30,35 L18,18 M30,35 L42,20 M70,35 L58,15 M70,35 L82,18' fill='none' stroke='%231c2333' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-size:100px 100px;opacity:.3; } /* ═══════════════════════════════════════════════════ PATTERNS — Texture ═══════════════════════════════════════════════════ */ [data-pattern="linen"] .pattern-overlay{ background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,var(--border) 2px,var(--border) 3px),repeating-linear-gradient(90deg,transparent,transparent 2px,var(--border) 2px,var(--border) 3px); background-size:6px 6px;opacity:.18; } [data-pattern="cotton"] .pattern-overlay{ background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); opacity:.6; } [data-pattern="wood"] .pattern-overlay{ background-image:repeating-linear-gradient(92deg,transparent,transparent 8px,rgba(255,179,71,.03) 8px,rgba(255,179,71,.03) 9px),repeating-linear-gradient(88deg,transparent,transparent 20px,rgba(255,179,71,.02) 20px,rgba(255,179,71,.02) 21px); opacity:1; } [data-pattern="concrete"] .pattern-overlay{ background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"); opacity:.55; } [data-pattern="paper"] .pattern-overlay{ background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); opacity:.7; } [data-pattern="brushed"] .pattern-overlay{ background-image:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(255,255,255,.015) 1px,rgba(255,255,255,.015) 2px); opacity:1; } [data-pattern="cork"] .pattern-overlay{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cellipse cx='15' cy='12' rx='9' ry='7' fill='none' stroke='%231c2333' stroke-width='.8'/%3E%3Cellipse cx='42' cy='10' rx='7' ry='6' fill='none' stroke='%231c2333' stroke-width='.8'/%3E%3Cellipse cx='8' cy='35' rx='6' ry='5' fill='none' stroke='%231c2333' stroke-width='.8'/%3E%3Cellipse cx='35' cy='38' rx='11' ry='8' fill='none' stroke='%231c2333' stroke-width='.8'/%3E%3Cellipse cx='52' cy='48' rx='7' ry='5' fill='none' stroke='%231c2333' stroke-width='.8'/%3E%3Cellipse cx='20' cy='54' rx='8' ry='6' fill='none' stroke='%231c2333' stroke-width='.8'/%3E%3C/svg%3E"); background-size:60px 60px;opacity:.35; } [data-pattern="triangles"] .pattern-overlay{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52'%3E%3Cpolygon points='30,2 58,50 2,50' fill='none' stroke='%231c2333' stroke-width='1'/%3E%3Cpolygon points='0,52 28,4 56,52' fill='none' stroke='%231c2333' stroke-width='.5' opacity='.4'/%3E%3C/svg%3E"); background-size:60px 52px;opacity:.3; } [data-pattern="none"] .pattern-overlay{opacity:0;} /* ═══════════════════════════════════════════════════ BODY BACKGROUND ═══════════════════════════════════════════════════ */ body{background:var(--bg);color:var(--text);} /* ═══════════════════════════════════════════════════ SIDEBAR ═══════════════════════════════════════════════════ */ .sidebar{ position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w); background:var(--nav-bg);border-right:1px solid var(--nav-border); z-index:100;display:flex;flex-direction:column;overflow-y:auto; transition:transform .25s cubic-bezier(.4,0,.2,1); } .sidebar-logo{display:flex;align-items:center;gap:10px;padding:18px 16px 14px;border-bottom:1px solid var(--border);} .logo-mark{ width:36px;height:36px;border-radius:8px;flex-shrink:0; background:linear-gradient(135deg,var(--accent),var(--green)); display:flex;align-items:center;justify-content:center; font-family:'Bebas Neue',sans-serif;font-size:11px;letter-spacing:.5px;color:#070910; } .logo-name{ font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:1.5px; background:linear-gradient(110deg,var(--accent),var(--green)); -webkit-background-clip:text;-webkit-text-fill-color:transparent; line-height:1.2; } .logo-tag{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);} .sidebar-local{ display:flex;align-items:center;gap:10px;padding:10px 16px; border-bottom:1px solid var(--border);background:var(--bg2); } .local-icon{font-size:18px;color:var(--text3);flex-shrink:0;width:28px;text-align:center;} .local-title{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text2);} .local-sub{font-family:'DM Mono',monospace;font-size:7.5px;color:var(--text3);margin-top:2px;} .nav-section-label{ font-family:'DM Mono',monospace;font-size:8px;letter-spacing:2.5px;text-transform:uppercase; color:var(--text3);padding:12px 16px 5px; } .nav-item{ display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer; font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.5px; color:var(--text2);text-decoration:none; transition:all .15s;border-left:2px solid transparent; } .nav-item:hover{color:var(--text);background:var(--bg2);} .nav-item.active{color:var(--accent);background:var(--accent-d);border-left-color:var(--accent);} .nav-icon{width:16px;text-align:center;flex-shrink:0;font-size:13px;} .nav-label{flex:1;} .nav-count{font-family:'DM Mono',monospace;font-size:8px;padding:1px 6px;background:var(--border);border-radius:10px;color:var(--text2);} .nav-pip{width:7px;height:7px;border-radius:50%;background:var(--green);animation:blink 1.5s infinite;} @keyframes blink{0%,100%{opacity:1}50%{opacity:.2}} .sidebar-footer{margin-top:auto;padding:12px 16px;border-top:1px solid var(--border);} .sidebar-version{font-family:'DM Mono',monospace;font-size:8px;color:var(--text3);} .sidebar-status{font-family:'DM Mono',monospace;font-size:9px;color:var(--accent);margin-top:2px;} /* ═══════════════════════════════════════════════════ MOBILE TOPBAR ═══════════════════════════════════════════════════ */ .mobile-topbar{ display:none;position:fixed;top:0;left:0;right:0;height:var(--topbar-h); background:var(--nav-bg);border-bottom:1px solid var(--nav-border); z-index:200;align-items:center;padding:0 14px;gap:12px; } .mobile-menu-btn{background:none;border:none;color:var(--text);font-size:18px;cursor:pointer;padding:6px;} .mobile-logo{ font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:2px;flex:1; background:linear-gradient(110deg,var(--accent),var(--green)); -webkit-background-clip:text;-webkit-text-fill-color:transparent; } .mobile-pills{display:flex;gap:6px;align-items:center;} .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99;} .sidebar-overlay.show{display:block;} /* ═══════════════════════════════════════════════════ MAIN CONTENT ═══════════════════════════════════════════════════ */ .main-content{ margin-left:var(--sidebar-w);min-height:100vh; padding:16px 24px 80px;position:relative;z-index:1; } .status-bar{ display:flex;align-items:center;gap:8px;margin-bottom:14px; } .mode-pill,.stat-pill{ font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:1.5px; text-transform:uppercase;padding:3px 10px;border-radius:20px; border:1px solid var(--border2);color:var(--text2);background:var(--surface); } .stat-pill.playing{border-color:var(--green);color:var(--green);background:var(--green-d);} /* ═══════════════════════════════════════════════════ PAGES ═══════════════════════════════════════════════════ */ .page{display:none;} .page.active{display:block;animation:fadeIn .2s ease;} @keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} .page-header{margin-bottom:20px;} .page-brand{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:var(--text3);margin-bottom:4px;} .page-title{ font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:2px; background:linear-gradient(110deg,var(--accent),var(--green)); -webkit-background-clip:text;-webkit-text-fill-color:transparent; } .page-sub{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text2);margin-top:4px;} /* ═══════════════════════════════════════════════════ CARDS ═══════════════════════════════════════════════════ */ .card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;} .card:last-child{margin-bottom:0;} .card-title{ font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:2.5px;text-transform:uppercase; color:var(--text2);margin-bottom:12px;display:flex;align-items:center;gap:7px; } .card-title::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0;} .card-title.green::before{background:var(--green);} .card-title.amber::before{background:var(--amber);} .card-title.purple::before{background:var(--purple);} .card-title.red::before{background:var(--red);} .card-title.L::before{background:var(--L);} .card-title.R::before{background:var(--R);} .g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;} /* ═══════════════════════════════════════════════════ SPECTRUM ═══════════════════════════════════════════════════ */ .spectrum-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:10px;} .spectrum-left{ float:left;width:176px;padding:16px;border-right:1px solid var(--border); display:flex;flex-direction:column;justify-content:center; } .spectrum-right{overflow:hidden;} canvas#cvs{display:block;width:100%;height:140px;background:var(--bg2);} .spectrum-xlabels{display:flex;justify-content:space-between;padding:3px 8px;font-family:'DM Mono',monospace;font-size:7.5px;color:var(--text3);} .freq-display{font-family:'Bebas Neue',sans-serif;font-size:48px;line-height:1;letter-spacing:2px;background:linear-gradient(135deg,var(--accent),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;} .freq-unit{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--text2);} .freq-note{font-family:'DM Mono',monospace;font-size:8px;color:var(--text3);margin-top:2px;} .freq-ch{font-family:'DM Mono',monospace;font-size:10px;margin-top:8px;} .stats-row{display:flex;background:var(--surface);border:1px solid var(--border);border-top:none;border-radius:0 0 12px 12px;overflow:hidden;margin-bottom:10px;} .stat-item{flex:1;padding:8px 12px;border-right:1px solid var(--border);} .stat-item:last-child{border-right:none;} .stat-val{font-family:'DM Mono',monospace;font-size:12px;color:var(--accent);} .stat-val.green{color:var(--green);} .stat-val.amber{color:var(--amber);} .stat-val.purple{color:var(--purple);} .stat-lbl{font-family:'DM Mono',monospace;font-size:7.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);margin-top:1px;} /* ═══════════════════════════════════════════════════ MODE / TRANSPORT ═══════════════════════════════════════════════════ */ .mode-bar{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;} .mode-btn{ flex:1;min-width:90px;padding:9px 8px;text-align:center; background:var(--card);border:1px solid var(--border);border-radius:6px; font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase; color:var(--text2);cursor:pointer;transition:all .15s; } .mode-btn:hover,.mode-btn.active{background:var(--accent-d);border-color:var(--accent);color:var(--accent);} .transport-bar{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;} .play-btn{ flex:2;min-width:130px;background:linear-gradient(120deg,var(--accent),var(--green)); border:none;border-radius:var(--r);font-family:'Bebas Neue',sans-serif;font-size:20px; letter-spacing:3px;color:#070910;padding:12px 20px;cursor:pointer; transition:opacity .2s,transform .1s;display:flex;align-items:center;justify-content:center;gap:10px; } .play-btn:hover{opacity:.9;} .play-btn:active{transform:scale(.98);} .play-btn.playing{background:linear-gradient(120deg,var(--red),var(--amber));} .sec-btn{ flex:1;min-width:80px;background:var(--card);border:1px solid var(--border); border-radius:var(--r);font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px; color:var(--text);padding:12px 8px;cursor:pointer;transition:all .15s; display:flex;align-items:center;justify-content:center;gap:5px; } .sec-btn:hover{border-color:var(--accent);color:var(--accent);} .green-btn:hover{border-color:var(--green);color:var(--green);} .amber-btn:hover{border-color:var(--amber);color:var(--amber);} .sec-btn:disabled{opacity:.3;cursor:not-allowed;} .export-bar{display:none;align-items:center;gap:10px;padding:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);margin-bottom:10px;} .export-bar.show{display:flex;} .export-track{flex:1;height:3px;background:var(--border2);border-radius:3px;overflow:hidden;} .export-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--green));transition:width .08s;} .export-label{font-family:'DM Mono',monospace;font-size:9px;color:var(--text2);white-space:nowrap;} /* ═══════════════════════════════════════════════════ FILE DROP ═══════════════════════════════════════════════════ */ .file-drop{ border:2px dashed var(--border2);border-radius:8px;padding:22px;text-align:center; cursor:pointer;font-family:'DM Mono',monospace;font-size:9px;color:var(--text3); letter-spacing:1px;line-height:1.9;transition:all .2s; } .file-drop:hover,.file-drop.drag{border-color:var(--amber);color:var(--amber);} .file-hint{font-size:8px;opacity:.6;margin-top:2px;} .file-info{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;margin-top:8px;} #fileName{flex:1;font-family:'DM Mono',monospace;font-size:9px;} #fileDur{font-family:'DM Mono',monospace;font-size:8px;color:var(--text3);} /* ═══════════════════════════════════════════════════ CHANNEL TABS + PANELS ═══════════════════════════════════════════════════ */ .ch-tabs{display:flex;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:10px;} .ch-tab{flex:1;padding:10px;text-align:center;cursor:pointer;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;border:none;background:var(--card);color:var(--text2);transition:all .15s;border-right:1px solid var(--border);} .ch-tab:last-child{border-right:none;} .ch-tab.active{background:var(--accent-d);color:var(--accent);} .ch-panel{display:none;} .ch-panel.active{display:block;} /* ═══════════════════════════════════════════════════ NOTCH LAYERS ═══════════════════════════════════════════════════ */ .layer{border:1px solid var(--border);border-radius:8px;background:var(--bg2);overflow:hidden;margin-bottom:8px;} .layer.active-layer{border-color:var(--accent);} .layer-head{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;transition:background .12s;} .layer-head:hover{background:var(--surface);} .layer-num{font-family:'Bebas Neue',sans-serif;font-size:14px;color:var(--text2);width:18px;flex-shrink:0;} .layer-freq{font-family:'DM Mono',monospace;font-size:13px;font-weight:500;flex:1;} .layer-meta{font-family:'DM Mono',monospace;font-size:8px;color:var(--text2);} .layer-actions{display:flex;gap:4px;margin-left:auto;} .layer-toggle{font-size:9px;font-family:'DM Mono',monospace;padding:3px 7px;border-radius:4px;border:1px solid var(--border2);background:transparent;color:var(--text2);cursor:pointer;transition:all .12s;} .layer-toggle.on{border-color:var(--green);color:var(--green);background:var(--green-d);} .layer-del{font-size:11px;padding:3px 7px;border-radius:4px;border:1px solid transparent;background:transparent;color:var(--text3);cursor:pointer;transition:all .12s;} .layer-del:hover{border-color:var(--red);color:var(--red);} .layer-body{display:none;padding:12px;border-top:1px solid var(--border);} .layer-body.open{display:block;} .add-layer-btn{ width:100%;display:flex;align-items:center;justify-content:center;gap:6px; padding:9px;border:1px dashed var(--border2);border-radius:6px;cursor:pointer; font-family:'DM Mono',monospace;font-size:9px;color:var(--text2); background:transparent;transition:all .15s;margin-bottom:10px; } .add-layer-btn:hover{border-color:var(--green);color:var(--green);} .tone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px;} .tone-btn{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:9px 4px 7px;cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .15s;font-family:'DM Mono',monospace;font-size:8.5px;color:var(--text2);} .tone-btn:hover{border-color:var(--green);color:var(--text);} .tone-btn.act{background:var(--green-d);border-color:var(--green);color:var(--green);} .tone-wave{display:block;width:100%;height:18px;} .noise-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:8px;} .noise-btn{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:8px 3px;cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;font-family:'DM Mono',monospace;font-size:8.5px;color:var(--text2);transition:all .15s;} .noise-btn:hover{border-color:var(--accent);color:var(--text);} .noise-btn.act{background:var(--accent-d);border-color:var(--accent);color:var(--accent);} .noise-em{font-size:14px;} .noise-sec{transition:opacity .2s;} .noise-sec.off{opacity:.3;pointer-events:none;} .shape-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;} .shape-btn{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:8px 4px;cursor:pointer;text-align:center;font-family:'DM Mono',monospace;font-size:8.5px;color:var(--text2);transition:all .15s;} .shape-btn svg{display:block;margin:0 auto 3px;} .shape-btn:hover{border-color:var(--purple);color:var(--text);} .shape-btn.act{background:var(--purple-d);border-color:var(--purple);color:var(--purple);} /* ═══════════════════════════════════════════════════ SLIDERS ═══════════════════════════════════════════════════ */ .srow{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;} .srow:last-child{margin-bottom:0;} .slbl{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--text);} .sval{font-family:'DM Mono',monospace;font-size:11px;color:var(--accent);} .sval.g{color:var(--green);} .sval.a{color:var(--amber);} .sval.p{color:var(--purple);} .sval.lc{color:var(--L);} .sval.rc{color:var(--R);} input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:3px;background:var(--border2);outline:none;cursor:pointer;} input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);box-shadow:0 0 7px var(--accent-g);cursor:pointer;transition:transform .1s;} input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.3);} input[type=range].g::-webkit-slider-thumb{background:var(--green);} input[type=range].a::-webkit-slider-thumb{background:var(--amber);} input[type=range].p::-webkit-slider-thumb{background:var(--purple);} input[type=range].lc::-webkit-slider-thumb{background:var(--L);} input[type=range].rc::-webkit-slider-thumb{background:var(--R);} .nudge-row{display:flex;gap:4px;margin-top:6px;} .nudge-btn{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:5px 2px;cursor:pointer;font-family:'DM Mono',monospace;font-size:8.5px;color:var(--text);transition:all .12s;text-align:center;} .nudge-btn:hover{background:var(--accent-d);border-color:var(--accent);color:var(--accent);} .pan-vis{display:flex;align-items:center;gap:8px;margin-top:6px;} .pan-ear{font-family:'DM Mono',monospace;font-size:9px;color:var(--text2);width:14px;} .pan-bar{flex:1;height:18px;background:var(--border2);border-radius:4px;position:relative;overflow:hidden;} .pan-L{position:absolute;right:50%;top:0;bottom:0;background:var(--L);opacity:.6;transition:width .1s;} .pan-R{position:absolute;left:50%;top:0;bottom:0;background:var(--R);opacity:.6;transition:width .1s;} .pan-centre{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--border2);} /* ═══════════════════════════════════════════════════ CHIPS / BUTTONS ═══════════════════════════════════════════════════ */ .chip{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.8px;padding:4px 8px;border-radius:5px;border:1px solid var(--border2);background:var(--bg2);color:var(--text2);cursor:pointer;transition:all .12s;} .chip:hover{border-color:var(--accent);color:var(--text);} .chip-accent{background:var(--accent-d);border-color:var(--accent);color:var(--accent);} .chip-green{background:var(--green-d);border-color:var(--green);color:var(--green);} .chip-amber{background:var(--amber-d);border-color:var(--amber);color:var(--amber);} .chip-red{background:var(--red-d);border-color:var(--red);color:var(--red);} .chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px;} .btn-primary{background:linear-gradient(120deg,var(--accent),var(--green));border:none;border-radius:6px;color:#070910;font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1px;padding:9px 16px;cursor:pointer;transition:opacity .15s;font-weight:500;} .btn-primary:hover{opacity:.88;} .btn-outline{background:transparent;border:1px solid var(--border2);border-radius:6px;color:var(--text2);font-family:'DM Mono',monospace;font-size:10px;letter-spacing:1px;padding:9px 16px;cursor:pointer;transition:all .15s;} .btn-outline:hover{border-color:var(--accent);color:var(--accent);} .btn-danger{border-color:var(--red);color:var(--red);} .btn-danger:hover{background:var(--red-d);border-color:var(--red);color:var(--red);} /* ═══════════════════════════════════════════════════ NOTEBOOK ═══════════════════════════════════════════════════ */ .nb-entry{display:flex;align-items:flex-start;gap:10px;padding:11px 14px;background:var(--card);border:1px solid var(--border);border-radius:8px;margin-bottom:8px;transition:border-color .15s;} .nb-entry:hover{border-color:var(--accent);} .nb-freq-lbl{font-family:'Bebas Neue',sans-serif;font-size:22px;color:var(--accent);min-width:90px;} .nb-info{flex:1;} .nb-name{font-size:13px;color:var(--white);font-weight:500;outline:none;cursor:text;} .nb-name:focus{border-bottom:1px solid var(--accent);} .nb-meta{font-family:'DM Mono',monospace;font-size:8.5px;color:var(--text2);margin-top:2px;} .nb-stars{display:flex;gap:2px;margin-top:4px;} .nb-star{font-size:14px;cursor:pointer;color:var(--text3);transition:color .1s;} .nb-star.lit{color:var(--amber);} .nb-notes{font-size:11px;color:var(--text);margin-top:4px;font-style:italic;outline:none;cursor:text;min-height:16px;} .nb-notes:focus{border-bottom:1px solid var(--border2);} .nb-btns{display:flex;gap:5px;flex-shrink:0;flex-direction:column;align-items:flex-end;} /* ═══════════════════════════════════════════════════ HISTORY ═══════════════════════════════════════════════════ */ .hist-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:8px;margin-bottom:6px;} .hist-date{font-family:'DM Mono',monospace;font-size:9px;color:var(--text2);min-width:80px;} .hist-freqs{font-family:'DM Mono',monospace;font-size:11px;color:var(--accent);} .hist-detail{font-family:'DM Mono',monospace;font-size:8.5px;color:var(--text2);margin-top:2px;} .hist-dur{font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);min-width:50px;text-align:right;} /* ═══════════════════════════════════════════════════ PROFILES & DATASET IMPORT ═══════════════════════════════════════════════════ */ .prof-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:8px;margin-bottom:6px;cursor:pointer;transition:border-color .15s;} .prof-item:hover{border-color:var(--accent);} .prof-name{flex:1;font-size:13px;color:var(--white);font-weight:500;} .prof-meta{font-family:'DM Mono',monospace;font-size:8.5px;color:var(--text2);} .page-tabs{display:flex;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:16px;} .page-tab{flex:1;padding:10px 12px;text-align:center;cursor:pointer;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;border:none;background:var(--card);color:var(--text2);transition:all .15s;border-right:1px solid var(--border);} .page-tab:last-child{border-right:none;} .page-tab.active{background:var(--accent-d);color:var(--accent);} .tab-pane{display:none;} .tab-pane.active{display:block;} .ds-drop{border:2px dashed var(--border2);border-radius:8px;padding:28px 20px;text-align:center;cursor:pointer;font-family:'DM Mono',monospace;font-size:9px;color:var(--text3);letter-spacing:1px;line-height:2;transition:all .2s;margin-bottom:12px;} .ds-drop:hover,.ds-drop.drag{border-color:var(--accent);color:var(--accent);} .ds-map-table{width:100%;border-collapse:collapse;font-family:'DM Mono',monospace;font-size:10px;margin-bottom:12px;} .ds-map-table th{padding:7px 10px;background:var(--surface);color:var(--text2);font-size:8.5px;letter-spacing:1.5px;text-transform:uppercase;border-bottom:1px solid var(--border);text-align:left;} .ds-map-table td{padding:7px 10px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;} .ds-map-table select{background:var(--bg2);border:1px solid var(--border2);border-radius:4px;padding:4px 8px;font-family:'DM Mono',monospace;font-size:9px;color:var(--text);outline:none;cursor:pointer;} .ds-map-table select:focus{border-color:var(--accent);} .ds-status{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;font-family:'DM Mono',monospace;font-size:9px;margin-bottom:10px;} .ds-ok{background:var(--green-d);color:var(--green);border:1px solid var(--green);} .ds-warn{background:var(--amber-d);color:var(--amber);border:1px solid var(--amber);} .ds-err{background:var(--red-d);color:var(--red);border:1px solid var(--red);} /* ═══════════════════════════════════════════════════ THEMES PAGE ═══════════════════════════════════════════════════ */ .theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:16px;} .theme-card{border:2px solid var(--border);border-radius:10px;overflow:hidden;cursor:pointer;transition:all .15s;} .theme-card:hover{border-color:var(--accent);} .theme-card.selected{border-color:var(--accent);box-shadow:0 0 14px var(--accent-g);} .theme-preview{height:70px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;} .tp-q{height:100%;} .theme-label{padding:7px 8px;font-family:'DM Mono',monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--text2);text-align:center;background:var(--card);} .accent-grid{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;} .accent-swatch{width:36px;height:36px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .15s;} .accent-swatch.selected{border-color:var(--white);transform:scale(1.15);} .pattern-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin-bottom:16px;} .pattern-card{border:2px solid var(--border);border-radius:8px;padding:12px 8px;cursor:pointer;text-align:center;font-family:'DM Mono',monospace;font-size:9px;color:var(--text2);transition:all .15s;} .pattern-card:hover{border-color:var(--accent);color:var(--text);} .pattern-card.selected{border-color:var(--accent);color:var(--accent);background:var(--accent-d);} .pattern-icon{font-size:20px;margin-bottom:4px;} .custom-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;} .colour-pick{width:36px;height:36px;border-radius:6px;border:1px solid var(--border);cursor:pointer;padding:2px;background:transparent;} .colour-label{font-family:'DM Mono',monospace;font-size:10px;color:var(--text);flex:1;} .colour-val{font-family:'DM Mono',monospace;font-size:8px;color:var(--text3);} /* ═══════════════════════════════════════════════════ GUIDE PAGE ═══════════════════════════════════════════════════ */ .guide-toc{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;position:sticky;top:0;z-index:10;background:var(--bg);padding:12px 0 10px;border-bottom:1px solid var(--border);} @media(max-width:768px){.guide-toc{top:var(--topbar-h);}} .guide-toc-btn{font-family:'DM Mono',monospace;font-size:9px;padding:5px 11px;border-radius:20px;border:1px solid var(--border2);background:var(--card);color:var(--text2);cursor:pointer;transition:all .15s;text-decoration:none;display:inline-block;} .guide-toc-btn:hover{border-color:var(--accent);color:var(--accent);} .guide-section{margin-bottom:28px;} .guide-section-title{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:2px;color:var(--accent);margin-bottom:4px;padding-bottom:8px;border-bottom:1px solid var(--border);} .guide-section-intro{font-size:13px;color:var(--text2);line-height:1.8;margin-bottom:14px;font-style:italic;} .guide-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px 20px;margin-bottom:10px;} .guide-card-title{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--white);font-weight:500;margin-bottom:10px;display:flex;align-items:center;gap:10px;} .guide-tag{font-size:8px;padding:2px 7px;border-radius:10px;background:var(--accent-d);color:var(--accent);letter-spacing:1px;font-weight:400;} .guide-tag.green{background:var(--green-d);color:var(--green);} .guide-tag.amber{background:var(--amber-d);color:var(--amber);} .guide-tag.purple{background:var(--purple-d);color:var(--purple);} .guide-body{font-size:13px;color:var(--text);line-height:1.85;} .guide-body p{margin-bottom:10px;} .guide-body p:last-child{margin-bottom:0;} .guide-body strong{color:var(--white);} .guide-example{background:var(--bg2);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;padding:11px 14px;margin:10px 0;font-size:12px;color:var(--text2);line-height:1.8;} .guide-example strong{color:var(--accent);} .guide-example.green{border-left-color:var(--green);} .guide-example.green strong{color:var(--green);} .guide-example.amber{border-left-color:var(--amber);} .guide-example.amber strong{color:var(--amber);} .guide-values{display:flex;flex-direction:column;gap:6px;margin:10px 0;} .guide-value-row{display:flex;gap:10px;align-items:flex-start;font-size:12px;line-height:1.7;} .guide-value-label{font-family:'DM Mono',monospace;font-size:10px;background:var(--border);border-radius:4px;padding:2px 8px;color:var(--text2);white-space:nowrap;flex-shrink:0;margin-top:2px;} /* ═══════════════════════════════════════════════════ SETTINGS PAGE ═══════════════════════════════════════════════════ */ .settings-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);} .settings-row:last-child{border-bottom:none;} .settings-info{flex:1;} .settings-label{font-size:13px;color:var(--white);font-weight:500;margin-bottom:2px;} .settings-desc{font-family:'DM Mono',monospace;font-size:9px;color:var(--text2);} /* ═══════════════════════════════════════════════════ FORM INPUTS ═══════════════════════════════════════════════════ */ .form-input{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:5px;padding:8px 10px;font-family:'DM Mono',monospace;font-size:10px;color:var(--white);outline:none;margin-bottom:6px;} .form-input:focus{border-color:var(--accent);} textarea.form-input{resize:vertical;min-height:60px;font-family:'DM Sans',sans-serif;font-size:12px;} .form-row{display:flex;gap:8px;margin-bottom:6px;} .form-row .form-input{margin-bottom:0;} /* ═══════════════════════════════════════════════════ EMPTY STATE / HINT ═══════════════════════════════════════════════════ */ .empty-state{text-align:center;padding:40px 20px;color:var(--text3);} .empty-icon{font-size:36px;margin-bottom:12px;opacity:.3;} .empty-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;} .hint{font-family:'DM Mono',monospace;font-size:8.5px;color:var(--text3);background:var(--bg2);border-radius:4px;padding:6px 9px;margin-top:6px;line-height:1.7;} /* ═══════════════════════════════════════════════════ TOAST + SWEEP BADGE ═══════════════════════════════════════════════════ */ .toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--card);border:1px solid var(--accent);border-radius:30px;padding:9px 20px;font-family:'DM Mono',monospace;font-size:10px;color:var(--accent);z-index:500;opacity:0;transition:all .25s;pointer-events:none;white-space:nowrap;box-shadow:0 4px 20px var(--shadow);} .toast.show{opacity:1;transform:translateX(-50%) translateY(0);} .sweep-badge{display:none;position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:300;background:var(--card);border:1px solid var(--green);border-radius:30px;padding:7px 18px;font-family:'DM Mono',monospace;font-size:9px;color:var(--green);box-shadow:0 0 18px rgba(0,255,179,.2);white-space:nowrap;} .sweep-badge.show{display:block;} /* ═══════════════════════════════════════════════════ BOTTOM NAV ═══════════════════════════════════════════════════ */ .bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:var(--bottomnav-h);background:var(--nav-bg);border-top:1px solid var(--nav-border);z-index:200;} .bnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:none;cursor:pointer;font-family:'DM Mono',monospace;font-size:8px;letter-spacing:.5px;color:var(--text2);padding:6px 0;transition:color .15s;} .bnav-btn.active{color:var(--accent);} .bnav-icon{font-size:16px;} .bnav-lbl{font-size:8px;} /* ═══════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════ */ .site-footer{background:var(--bg2);border-top:1px solid var(--border);margin-left:var(--sidebar-w);padding:36px 28px 100px;position:relative;z-index:1;} .footer-inner{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:28px;margin-bottom:24px;} .footer-logo{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:2px;background:linear-gradient(110deg,var(--accent),var(--green));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:3px;} .footer-tagline{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);margin-bottom:8px;} .footer-desc{font-size:11px;color:var(--text2);line-height:1.8;} .footer-heading{font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:2px;text-transform:uppercase;color:var(--text2);margin-bottom:9px;} .footer-link{display:block;font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);text-decoration:none;cursor:pointer;padding:3px 0;transition:color .15s;} .footer-link:hover{color:var(--accent);} .footer-text{font-size:11px;color:var(--text3);line-height:1.8;} .footer-text strong{color:var(--text2);} .footer-disclaimer{max-width:1060px;margin:0 auto;font-family:'DM Mono',monospace;font-size:9px;color:var(--text3);line-height:1.8;border-top:1px solid var(--border);padding-top:16px;margin-bottom:12px;} .footer-bottom{max-width:1060px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-family:'DM Mono',monospace;font-size:8px;color:var(--text3);} /* ═══════════════════════════════════════════════════ SCROLLBAR ═══════════════════════════════════════════════════ */ ::-webkit-scrollbar{width:4px;} ::-webkit-scrollbar-track{background:var(--bg);} ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;} /* ═══════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════ */ @media(max-width:768px){ .sidebar{transform:translateX(-100%);} .sidebar.open{transform:translateX(0);} .mobile-topbar{display:flex;} .bottom-nav{display:flex;} .main-content{margin-left:0;padding:calc(var(--topbar-h) + 14px) 14px calc(var(--bottomnav-h) + 20px);} .site-footer{margin-left:0;padding-bottom:calc(var(--bottomnav-h) + 20px);} .spectrum-left{float:none;width:100%;border-right:none;border-bottom:1px solid var(--border);flex-direction:row;align-items:center;gap:16px;padding:12px 16px;} .freq-display{font-size:36px;} .stats-row{flex-wrap:wrap;} .stat-item{min-width:33%;} .g2{grid-template-columns:1fr;} .tone-grid{grid-template-columns:repeat(2,1fr);} .theme-grid{grid-template-columns:repeat(2,1fr);} .footer-inner{grid-template-columns:1fr;} } @media(max-width:480px){ .transport-bar{flex-wrap:wrap;} .play-btn{flex:100%;} .noise-grid{grid-template-columns:repeat(3,1fr);} } /* ═══════════════════════════════════════════════════ WORKFLOW STEPS ═══════════════════════════════════════════════════ */ .workflow-step { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 10px; overflow: hidden; } .workflow-step.active-step { border-color: var(--accent); } .step-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; user-select: none; transition: background .15s; } .step-header:hover { background: var(--bg2); } .step-num { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--green)); color: #070910; font-family: 'Bebas Neue', sans-serif; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .workflow-step.done .step-num { background: var(--green); } .step-title { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; color: var(--white); flex: 1; } .step-sub { font-family: 'DM Mono', monospace; font-size: 9px; color: var(--text2); max-width: 400px; } .step-toggle { background: none; border: none; color: var(--text2); font-size: 14px; cursor: pointer; flex-shrink: 0; transition: transform .2s; } .workflow-step.collapsed .step-toggle { transform: rotate(-90deg); } .step-body { padding: 14px 16px 16px; border-top: 1px solid var(--border); } .workflow-step.collapsed .step-body { display: none; } .sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; } .sound-card { background: var(--bg2); border: 2px solid var(--border); border-radius: 8px; padding: 12px 10px; cursor: pointer; text-align: center; transition: all .15s; display: flex; flex-direction: column; align-items: center; gap: 6px; } .sound-card:hover { border-color: var(--accent); } .sound-card.selected { border-color: var(--accent); background: var(--accent-d); box-shadow: 0 0 10px var(--accent-g); } .sound-icon { font-size: 26px; } .sound-name { font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .5px; color: var(--text); line-height: 1.4; } .sound-card.selected .sound-name { color: var(--accent); } .sound-badge { font-family: 'DM Mono', monospace; font-size: 7.5px; padding: 1px 6px; border-radius: 10px; background: var(--border); color: var(--text3); } .sound-card.selected .sound-badge { background: var(--accent-d); color: var(--accent); } .interference-warn { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--amber-d); border: 1px solid var(--amber); border-radius: 6px; margin-bottom: 6px; font-size: 12px; color: var(--text); line-height: 1.7; } .interference-ok { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--green-d); border: 1px solid var(--green); border-radius: 6px; font-family: 'DM Mono', monospace; font-size: 9px; color: var(--green); } @media(max-width:600px) { .sound-grid { grid-template-columns: repeat(2, 1fr); } .step-sub { display: none; } } /* ═══════════════════════════════════════════════════ THERAPY STICKY HEADER ═══════════════════════════════════════════════════ */ .therapy-sticky { position: sticky; top: 0; z-index: 50; background: var(--bg); padding-bottom: 4px; margin-bottom: 10px; } @media(max-width:768px) { .therapy-sticky { top: var(--topbar-h); } } /* ═══════════════════════════════════════════════════ SECTION NAV (Next / Prev buttons) ═══════════════════════════════════════════════════ */ .section-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0 24px; flex-wrap: wrap; } .section-next-btn { padding: 13px 24px; font-size: 13px; letter-spacing: 1px; min-width: 200px; } .section-prev-btn { padding: 13px 20px; font-size: 12px; } /* ═══════════════════════════════════════════════════ BREADCRUMB TRAIL ═══════════════════════════════════════════════════ */ .section-crumb { display: flex; align-items: center; gap: 8px; padding: 10px 0 6px; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; } .crumb { color: var(--text3); padding: 3px 10px; border-radius: 20px; border: 1px solid var(--border); transition: all .2s; } .crumb.active { color: var(--accent); border-color: var(--accent); background: var(--accent-d); } .crumb-sep { color: var(--text3); font-size: 8px; } /* ═══════════════════════════════════════════════════ THERAPY STICKY BLOCK ═══════════════════════════════════════════════════ */ .therapy-sticky { position: sticky; top: 0; z-index: 50; background: var(--bg); padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 14px; } @media(max-width:768px) { .therapy-sticky { top: var(--topbar-h); } } .sticky-controls { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0 4px; } .sticky-freq-block { flex: 1; min-width: 0; } .sticky-freq-labels { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; } .sticky-fstep-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .sticky-fstep-row .chips { flex: 1; } .sticky-play-block { flex-shrink: 0; width: 180px; } .sticky-play-block .play-btn { width: 100%; padding: 11px; font-size: 17px; } @media(max-width:600px) { .sticky-controls { flex-direction: column; } .sticky-play-block { width: 100%; } } .therapy-sticky .spectrum-card { margin-bottom: 0; border-radius: 10px 10px 0 0; } .therapy-sticky .stats-row { border-top: none; border-radius: 0 0 10px 10px; margin-bottom: 0; } /* ═══════════════════════════════════════════════════ SECTION NAV + BREADCRUMB ═══════════════════════════════════════════════════ */ .section-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0 24px; flex-wrap: wrap; } .section-next-btn { padding: 13px 24px; font-size: 13px; letter-spacing: 1px; min-width: 220px; } .section-prev-btn { padding: 11px 18px; font-size: 11px; } .section-crumb { display: flex; align-items: center; gap: 8px; padding: 10px 0 6px; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; } .crumb { color: var(--text3); padding: 3px 10px; border-radius: 20px; border: 1px solid var(--border); } .crumb.active { color: var(--accent); border-color: var(--accent); background: var(--accent-d); } .crumb.done { color: var(--green); border-color: var(--green); background: var(--green-d); } .crumb-sep { color: var(--text3); font-size: 8px; } #card-notch .tone-grid { grid-template-columns: repeat(3,1fr); } #card-notch .noise-grid { grid-template-columns: repeat(5,1fr); } #card-notch .shape-grid { grid-template-columns: repeat(3,1fr); } #sec-a .card, #sec-b .card, #sec-c .card { margin-bottom: 10px; } /* ═══════════════════════════════════════════════════ STICKY INLINE ROW — play + sweep + step + nudge ═══════════════════════════════════════════════════ */ .sticky-controls { padding: 8px 0 4px; } .sticky-inline-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; } .sticky-play-btn { flex-shrink: 0; padding: 7px 14px !important; font-size: 13px !important; min-width: 0 !important; width: auto !important; border-radius: 6px; } .sticky-sweep-btn { flex-shrink: 0; font-size: 9px; padding: 7px 10px; white-space: nowrap; } @media(max-width:680px) { .sticky-inline-row { flex-wrap: wrap; } }