@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
:root{--bg:#1a1a2e;--screen:#fff;--screen-dark:#f0f0f0;--pixel:#222;--pixel-dim:#666;--accent:#00ff88;--accent-dim:#00cc66;--warning:#ff4444;--info:#4488ff;--border:#333;--btn-bg:#2a2a3e;--btn-hover:#3a3a5e;--status-h:32px;--nav-w:60px;--ui-mode:shell}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:'Segoe UI',system-ui,sans-serif;display:flex;justify-content:center;align-items:center}
body.ui-full #flipper{border-radius:0;padding:0;box-shadow:none}
body.ui-full #flipper-inner{border-radius:0;padding:8px}
body.ui-full #status-bar{background:var(--pixel);font-size:11px;padding:0 10px;height:36px}
body.ui-full #nav-buttons{height:64px;padding:6px 4px}
body.ui-full .nav-btn{font-size:20px;max-width:none;border-radius:10px}
body.ui-full .nav-btn.dir{max-width:64px;font-size:26px}
body.ui-full #toast{font-size:10px}
body.ui-full #screen{padding:6px 10px;font-size:11px}
body.ui-full .menu-item{font-size:12px;padding:10px 8px}
body.ui-full #desktop-time{font-size:36px}
body.ui-full #desktop-date{font-size:13px}
body.ui-full .scroll-list li{font-size:11px;padding:8px 8px}
body.ui-full .empty-state .big-icon{font-size:48px}
body.ui-full .view-header{font-size:13px;padding:8px 6px}
body.ui-full .view-content{font-size:11px}
#flipper{--scale:min(1,calc(100vh/740),calc(100vw/420));position:relative;width:420px;height:740px;background:linear-gradient(145deg,#2a2a3e,#1a1a2e);border-radius:40px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.1);transform:scale(var(--scale));transform-origin:center center}
#flipper-inner{width:100%;height:100%;border-radius:24px;background:#111;padding:12px;position:relative;overflow:hidden;display:flex;flex-direction:column}
#status-bar{height:var(--status-h);display:flex;align-items:center;justify-content:space-between;padding:0 8px;background:#111;color:var(--screen);font-size:9px;font-family:'Courier New',monospace;letter-spacing:.5px;border-bottom:1px solid #333;flex-shrink:0}
#status-bar .sb-left{display:flex;gap:8px;align-items:center}
#status-bar .sb-right{display:flex;gap:8px;align-items:center}
.sb-icon{width:10px;height:10px;display:inline-block;position:relative}
.sb-icon.battery{width:18px;height:10px;border:1.5px solid var(--screen);border-radius:2px;padding:1px}
.sb-icon.battery::after{content:'';position:absolute;right:-3px;top:2px;width:3px;height:5px;background:var(--screen);border-radius:1px}
.sb-icon.battery .level{height:100%;background:var(--accent);border-radius:1px;width:80%}
.sb-blink{animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
#screen-wrap{flex:1;position:relative;background:var(--screen);margin:4px 0 0;overflow:hidden;border-radius:4px;image-rendering:pixelated}
#screen{width:100%;height:100%;position:relative;background:var(--screen);overflow-y:auto;overflow-x:hidden;padding:4px 8px;font-family:'Courier New',monospace;scrollbar-width:none}
#screen::-webkit-scrollbar{display:none}
.screen-pixel{font-family:'Courier New',monospace;image-rendering:pixelated}
#nav-buttons{display:flex;justify-content:center;padding:4px 0;flex-shrink:0;height:52px;gap:3px}
.nav-btn{background:var(--btn-bg);border:none;color:var(--screen);font-size:16px;cursor:pointer;border-radius:6px;flex:1;display:flex;align-items:center;justify-content:center;transition:all .1s;font-family:'Courier New',monospace;padding:0;max-width:80px}
.nav-btn:active{background:var(--btn-hover);transform:scale(.95)}
.nav-btn.ok{background:var(--accent);color:#111;font-weight:bold;flex:1.5}
.nav-btn.ok:active{background:var(--accent-dim)}
.nav-btn.back{background:#333;color:#ccc}
.nav-btn.dir{background:var(--btn-bg);color:var(--accent);font-size:20px;max-width:52px}
.nav-btn.dir:active{background:var(--btn-hover);color:var(--accent-dim)}
#dpad{position:absolute;left:-60px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:2px}
#dpad-row{display:flex;gap:2px}
.dpad-btn{width:44px;height:44px;background:var(--btn-bg);border:1px solid #444;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#888;font-size:18px;cursor:pointer;transition:all .1s}
.dpad-btn:active{background:var(--btn-hover);border-color:var(--accent);color:var(--accent)}
.flipper-title{font-size:11px;font-weight:bold;color:var(--screen);padding:6px 8px;text-align:center;letter-spacing:1px;border-bottom:1px solid #333;flex-shrink:0}
/* Desktop / Main Menu */
#desktop{display:flex;flex-direction:column;height:100%}
#desktop-header{text-align:center;padding:6px 0 2px;font-size:10px;font-weight:bold;color:var(--pixel-dim);border-bottom:1px dashed #ccc;flex-shrink:0}
#desktop-time{font-size:28px;text-align:center;padding:12px 0 4px;font-weight:bold;color:var(--pixel);letter-spacing:2px}
#desktop-date{font-size:10px;text-align:center;color:var(--pixel-dim);padding-bottom:8px}
#desktop-menu{flex:1;display:flex;flex-direction:column;gap:0;padding:4px 0}
.menu-item{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:10px;color:var(--pixel);cursor:pointer;border-radius:4px;transition:all .1s}
.menu-item .icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.menu-item.active{background:var(--pixel);color:var(--screen)}
.menu-item .arrow{display:none;margin-left:auto;color:var(--pixel-dim)}
.menu-item.active .arrow{display:block;color:var(--screen)}
/* App Grid */
.app-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;padding:4px}
.app-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;border-radius:6px;cursor:pointer;transition:all .1s;border:1px solid transparent}
.app-icon:active{background:var(--screen-dark)}
.app-icon.active{background:var(--pixel);color:var(--screen)}
.app-icon .ico{font-size:24px;margin-bottom:4px}
.app-icon .label{font-size:8px;text-align:center;line-height:1.2;font-family:'Courier New',monospace;color:var(--pixel)}
.app-icon.active .label{color:var(--screen)}
/* Views */
.view-screen{height:100%;display:flex;flex-direction:column}
.view-header{font-size:10px;font-weight:bold;color:var(--pixel);padding:4px 4px 2px;border-bottom:1px solid #ccc;display:flex;align-items:center;gap:4px;flex-shrink:0}
.view-content{flex:1;overflow-y:auto;padding:4px;font-size:9px;line-height:1.5;scrollbar-width:none}
.view-content::-webkit-scrollbar{display:none}
.view-footer{font-size:8px;color:var(--pixel-dim);padding:2px 4px;border-top:1px solid #eee;text-align:center;flex-shrink:0}
.nfc-data{word-break:break-all;font-size:8px;color:var(--pixel-dim)}
.key-val{display:flex;gap:4px;padding:2px 0;border-bottom:1px solid #f0f0f0}
.key-val .key{font-weight:bold;color:var(--pixel-dim);min-width:40%;flex-shrink:0}
.key-val .val{color:var(--pixel)}
.tag-type-badge{display:inline-block;padding:1px 4px;border-radius:3px;font-size:7px;font-weight:bold;margin:0 2px}
.tag-type-badge.mifare{background:#e8f4e8;color:#2a7a2a}
.tag-type-badge.ntag{background:#e8f0ff;color:#2a5aaa}
.tag-type-badge.mf{background:#fff0e8;color:#aa5a2a}
.tag-type-badge.unknown{background:#eee;color:#888}
/* Dialog / Modal */
#modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:100}
#modal-overlay.show{display:flex}
#modal-box{background:var(--screen);border-radius:8px;padding:12px;max-width:85%;min-width:60%;box-shadow:0 4px 20px rgba(0,0,0,.3)}
#modal-title{font-size:11px;font-weight:bold;color:var(--pixel);margin-bottom:8px;text-align:center}
#modal-body{font-size:9px;color:var(--pixel-dim);margin-bottom:12px;text-align:center;line-height:1.4}
#modal-buttons{display:flex;gap:4px;justify-content:center}
#modal-buttons button{padding:4px 12px;border:none;border-radius:4px;font-size:9px;cursor:pointer;font-family:'Courier New',monospace;font-weight:bold;transition:all .1s}
#modal-buttons button:active{transform:scale(.95)}
.btn-primary{background:var(--pixel);color:var(--screen)}
.btn-secondary{background:#ddd;color:var(--pixel)}
.btn-danger{background:var(--warning);color:#fff}
/* Notification LED */
#led-strip{display:flex;gap:2px;padding:0 4px;align-items:center}
.led{width:6px;height:6px;border-radius:50%;background:#333;transition:all .3s}
.led.r{background:#ff4444}
.led.g{background:#44ff44}
.led.b{background:#4488ff}
/* Reader animation */
.reader-pulse{animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
/* scrollable list */
.scroll-list{list-style:none;padding:0;margin:0}
.scroll-list li{padding:4px 6px;font-size:9px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .1s}
.scroll-list li:active{background:var(--screen-dark)}
.scroll-list li.active{background:var(--pixel);color:var(--screen)}
.scroll-list li .li-icon{width:14px;text-align:center;flex-shrink:0}
/* File browser */
.file-browser{padding:0}
.file-item{padding:4px 6px;font-size:9px;border-bottom:1px solid #eee;cursor:pointer;display:flex;align-items:center;gap:4px}
.file-item:active{background:var(--screen-dark)}
.file-item.active{background:var(--pixel);color:var(--screen)}
.file-item .fi-icon{width:14px;text-align:center;flex-shrink:0}
/* Sub-GHz spectrogram */
#spectrogram{width:100%;height:40px;background:#111;border-radius:4px;position:relative;overflow:hidden}
#spectrogram canvas{width:100%;height:100%}
.freq-label{font-size:7px;color:var(--pixel-dim);font-family:'Courier New',monospace}
/* GPIO */
.pin-row{display:flex;gap:2px;padding:2px 0;align-items:center;font-size:8px}
.pin-num{width:16px;color:var(--pixel-dim);font-weight:bold;flex-shrink:0}
.pin-dot{width:10px;height:10px;border-radius:50%;border:1px solid #ccc;flex-shrink:0}
.pin-dot.high{background:var(--accent);border-color:var(--accent)}
.pin-dot.low{background:#ddd;border-color:#ccc}
.pin-name{color:var(--pixel-dim);flex-shrink:0;width:30px}
.pin-mode{border-radius:3px;padding:0 4px;font-size:7px;color:#fff;background:#888}
.pin-mode.input{background:var(--info)}
.pin-mode.output{background:var(--accent)}
/* Toast notifications */
#toast{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);background:var(--pixel);color:var(--screen);padding:6px 12px;border-radius:6px;font-size:8px;font-family:'Courier New',monospace;opacity:0;transition:all .3s;white-space:nowrap;z-index:50;pointer-events:none}
#toast.show{opacity:1}
/* BT Scan */
.bt-device{padding:4px 6px;font-size:8px;border-bottom:1px solid #eee;cursor:pointer}
.bt-device:active{background:var(--screen-dark)}
.bt-device .bt-name{font-weight:bold;font-size:9px}
.bt-device .bt-addr{color:var(--pixel-dim);font-size:7px}
.bt-device .bt-rssi{float:right;color:var(--info)}
/* Keyboard / Ducky output */
.term-output{font-family:'Courier New',monospace;font-size:8px;line-height:1.4;color:var(--accent);background:#111;padding:4px;border-radius:4px;min-height:30px;white-space:pre-wrap;word-break:break-all;max-height:60px;overflow-y:auto}
.term-output .cursor{animation:blink 1s step-end infinite}
/* Empty state */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--pixel-dim);font-size:9px;gap:8px;text-align:center;padding:20px}
.empty-state .big-icon{font-size:32px;opacity:.3}
/* Loading spinner */
.spinner{display:inline-block;width:12px;height:12px;border:2px solid #ccc;border-top-color:var(--pixel);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Responsive - mobile full screen */
@media(max-width:440px){body:not(.ui-shell){background:var(--screen)}#flipper{width:100vw;height:100vh;border-radius:0;padding:0;transform:none!important}#flipper-inner{border-radius:0;padding:8px}#status-bar{height:36px;font-size:11px;padding:0 10px;background:var(--pixel)}#nav-buttons{height:64px;padding:6px 4px;gap:4px}.nav-btn{font-size:18px;max-width:none;border-radius:10px}.nav-btn.dir{font-size:24px;max-width:60px}#toast{font-size:10px;bottom:68px}#screen{padding:6px 10px;font-size:11px}.menu-item{font-size:12px;padding:10px 8px}#desktop-time{font-size:36px}#desktop-date{font-size:13px}.scroll-list li{font-size:11px;padding:8px 8px}.empty-state .big-icon{font-size:48px}.view-header{font-size:13px;padding:8px 6px}.view-content{font-size:11px}}
@media(max-width:440px){body.ui-shell #flipper{width:100vw;height:100vh;border-radius:0;padding:0;transform:none!important}}
@media(max-height:760px){#flipper{height:100vh;border-radius:0;padding:0;transform:none!important}}