*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;background:#1a1a1a;color:#ddd;height:100vh;overflow:hidden}

/* ===== Screens ===== */
.screen{display:none;height:100vh}
.screen.active{display:flex}

/* ===== Auth Screens ===== */
.auth-container{margin:auto;text-align:center;width:320px}
.auth-container h1{font-size:24px;font-weight:600;margin-bottom:8px;color:#fff}
.auth-subtitle{font-size:13px;color:#888;margin-bottom:24px}
.auth-error{color:#f87171;font-size:12px;margin-top:12px;min-height:18px}

.pin-input-wrap{position:relative;width:200px;margin:0 auto;cursor:text}
.pin-hidden-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pin-dots{display:flex;gap:14px;justify-content:center;padding:16px 0}
.pin-dots .dot{width:14px;height:14px;border-radius:50%;background:#444;border:2px solid #555;transition:all 0.15s}
.pin-dots .dot.filled{background:#3b82f6;border-color:#3b82f6}
.pin-dots.error .dot{background:#f87171;border-color:#f87171;animation:shake 0.4s ease-out}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

.user-grid{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.user-btn{padding:12px 16px;background:#2a2a2a;border:1px solid #444;border-radius:8px;color:#ddd;font-size:14px;cursor:pointer;transition:all 0.15s;text-align:left}
.user-btn:hover{background:#333;border-color:#3b82f6}

/* ===== Nav Bar ===== */
#nav-bar{display:flex;align-items:center;justify-content:space-between;background:#222;border-bottom:1px solid #333;padding:0 16px;height:40px;flex-shrink:0}
.nav-tabs{display:flex;gap:2px}
.nav-tab{padding:8px 16px;background:none;border:none;color:#888;font-size:12px;font-weight:500;cursor:pointer;border-radius:4px;text-transform:uppercase;letter-spacing:0.5px;transition:all 0.15s}
.nav-tab:hover{color:#ddd}
.nav-tab.active{color:#fff;background:#2563eb}
.nav-user{display:flex;align-items:center;gap:8px;font-size:12px;color:#888}
#nav-username{color:#aaa}
.nav-logout-btn{background:none;border:none;color:#888;cursor:pointer;padding:4px;display:flex;align-items:center}
.nav-logout-btn:hover{color:#f87171}

/* ===== Views ===== */
#screen-app{flex-direction:column}
#view-container{flex:1;min-height:0;position:relative}
.view{display:none;position:absolute;inset:0}
.view.active{display:flex}

/* ===== Common UI Elements ===== */
button{background:#333;color:#ddd;border:1px solid #444;padding:6px 10px;border-radius:4px;cursor:pointer;font-size:12px;transition:background 0.15s;font-family:inherit}
button:hover{background:#444}
button:active{background:#555}
button.primary{background:#2563eb;border-color:#3b82f6;color:#fff}
button.primary:hover{background:#1d4ed8}
button.success{background:#16a34a;border-color:#22c55e;color:#fff}
button.success:hover{background:#15803d}
button.danger{background:#b91c1c;border-color:#dc2626;color:#fff}
button.danger:hover{background:#991b1b}
button:disabled{opacity:0.4;cursor:default}

input[type="text"],input[type="password"],input[type="date"]{background:#2a2a2a;color:#ddd;border:1px solid #444;padding:6px 8px;border-radius:4px;font-size:12px;font-family:inherit}
input:focus{outline:none;border-color:#3b82f6}

.btn-row{display:flex;gap:4px;margin-bottom:8px}
.btn-row button{flex:1;text-align:center}
.full-btn{width:100%}

.section{margin-bottom:16px;border-bottom:1px solid #333;padding-bottom:14px}
.section:last-child{border-bottom:none;margin-bottom:0}
.section h3{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#666;margin-bottom:8px;font-weight:600}

.saved-info{border-radius:4px;padding:8px 10px;margin-bottom:8px;font-size:12px;line-height:1.5;position:relative}
.saved-info.set{background:#0f2a1a;border:1px solid #1a4a2a;color:#4ade80}
.saved-info.empty{background:#2a2a2a;border:1px solid #3a3a3a;color:#666}
.saved-clear{position:absolute;top:6px;right:6px;background:none;border:none;color:#888;cursor:pointer;font-size:14px;padding:0 4px;line-height:1}
.saved-clear:hover{color:#f87171}

/* ===== Icon Buttons ===== */
.icon-btn{width:28px;height:28px;padding:4px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;background:transparent;color:#aaa;cursor:pointer;border-radius:4px}
.icon-btn:hover{background:#333;color:#fff}
.icon-btn.danger-icon:hover{background:rgba(185,28,28,0.3);color:#f87171}

/* ===== Sidebar (shared) ===== */
.app-sidebar{width:320px;border-left:1px solid #333;padding:16px;overflow-y:auto;flex-shrink:0;background:#222}

/* ===== Image Area (shared) ===== */
.image-area{flex:1;min-width:0;position:relative;overflow:hidden;background:#111}

/* ===== Section Header ===== */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}

.hidden{display:none !important}