:root {
    --bg: #0A0A0A;
    --sidebar: #0D0D0D;
    --card: #151515;
    --card-border: #1A1A1A;
    --text: #F5F5F5;
    --accent: #FF3D00;
    --mint: #00C853;
    --text-dim: #DCDCDC;
    --text-label: #B8B8B8;
    --footer-text: #A8A8A8;
}

html { height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; display: flex; width: 100%; height: 100vh; height: 100dvh; min-height: 100%; overflow: hidden; overscroll-behavior: none; }
button, input, textarea { font: inherit; }
button { border: 0; }

/* SIDEBAR & RAIL */
.side-rail { width: 108px; height: 100%; min-height: 0; background: var(--sidebar); border-right: 1px solid #1A1A1A; display: flex; flex-direction: column; padding: 20px 0; align-items: center; flex-shrink: 0; box-sizing: border-box; overflow: hidden; }
.rail-icon { cursor: pointer; font-size: 1.3rem; color: var(--accent); opacity: 0.8; margin-bottom: 25px; transition: 0.2s; background: transparent; padding: 0; line-height: 1; flex: 0 0 auto; }
.rail-icon.active { opacity: 1; filter: drop-shadow(0 0 8px var(--mint)) drop-shadow(0 0 15px var(--mint)); }
.pulse-pad-icon { color: #f4c542; filter: drop-shadow(0 0 2px rgba(244, 197, 66, 0.2)); }
.pulse-pad-icon:hover, .pulse-pad-icon:focus-visible { opacity: 1; filter: brightness(1.16) drop-shadow(0 0 5px rgba(244, 197, 66, 0.35)); outline: none; }
.rail-category-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; gap: 3px; overflow-y: auto; overflow-x: hidden; margin-top: 10px; -webkit-overflow-scrolling: touch; }
.cat-rail-pill { cursor: pointer; font-size: 0.55rem; color: var(--accent); font-weight: 900; text-transform: uppercase; padding: 11px 14px; width: 100%; text-align: left; box-sizing: border-box; opacity: 0.78; background: transparent; border: 0; }
.cat-rail-pill.child-tag { text-align: center; opacity: 0.82; font-weight: 600; padding: 7px 6px; font-size: 0.5rem; color: var(--text-dim); }
.cat-rail-pill.active { color: var(--mint); opacity: 1; background: rgba(0, 200, 83, 0.05); }

/* MAIN CONTAINER */
.main-container { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.header { padding: 20px 24px 12px; display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; }
.brand { color: var(--accent); font-weight: 900; font-size: 0.85rem; letter-spacing: 4px; }
.sub-brand { color: #C2C2C2; font-size: 0.55rem; font-weight: 900; letter-spacing: 2px; margin-top: 4px; text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.add-btn { cursor: pointer; background: var(--mint); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-weight: bold; color: black; transition: transform 0.2s; }
.settings-btn { cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 6px; background: transparent; border: 1px solid #292929; color: var(--text-label); font-size: 0.82rem; line-height: 1; opacity: 0.8; }
.settings-btn:hover, .settings-btn:focus-visible { color: var(--mint); border-color: rgba(0, 200, 83, 0.55); opacity: 1; }
.air-mode-pill { cursor: pointer; appearance: none; -webkit-appearance: none; background: rgba(255, 61, 0, 0.04); border: 1px solid rgba(255, 61, 0, 0.45); color: var(--accent); border-radius: 4px; padding: 5px 8px; font-size: 0.52rem; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1; opacity: 0.68; transition: opacity 0.18s, border-color 0.18s, color 0.18s; }
.air-mode-pill:hover, .air-mode-pill:focus-visible { opacity: 1; border-color: rgba(0, 200, 83, 0.65); color: var(--mint); }
#search, #tag-input { background: #121212; border: 1px solid #222; color: white; padding: 12px; border-radius: 8px; outline: none; font-size: 0.8rem; box-sizing: border-box; }
#search { width: calc(100% - 48px); margin: 0 24px 8px 24px; flex: 0 0 auto; }
.pulse-message { min-height: 14px; margin: 0 24px 7px 24px; color: var(--mint); font-size: 0.58rem; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0; transition: opacity 0.18s; flex: 0 0 auto; }
.pulse-message.visible { opacity: 1; }
#list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 24px 24px 24px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.item { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 16px 42px 14px 16px; margin-bottom: 24px; position: relative; transition: 0.2s; cursor: pointer; box-sizing: border-box; }
.item.copy-pulse { animation: copyPulse 520ms ease-out; }
.item.new-skip-pulse { animation: newSkipPulse 3000ms ease-out; }

@keyframes copyPulse {
    0% { border-color: var(--mint); box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.5); }
    55% { border-color: var(--mint); box-shadow: 0 0 0 6px rgba(0, 200, 83, 0.16); }
    100% { border-color: var(--card-border); box-shadow: 0 0 0 0 rgba(0, 200, 83, 0); }
}

@keyframes newSkipPulse {
    0% { border-color: var(--mint); box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.55), 0 0 22px rgba(0, 200, 83, 0.22); }
    18% { border-color: var(--mint); box-shadow: 0 0 0 7px rgba(0, 200, 83, 0.16), 0 0 34px rgba(0, 200, 83, 0.28); }
    70% { border-color: rgba(0, 200, 83, 0.45); box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.08), 0 0 18px rgba(0, 200, 83, 0.13); }
    100% { border-color: var(--card-border); box-shadow: 0 0 0 0 rgba(0, 200, 83, 0), 0 0 0 rgba(0, 200, 83, 0); }
}

/* FIX: WORD WRAP & LINE LIMIT */
.item-content {
    background: #000;
    padding: 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--text-dim);
    max-height: 7.7em;
    overflow-y: auto;
    white-space: pre-wrap; /* Forces word wrap */
    word-break: break-word; /* Prevents long string run-off */
    font-family: "SF Mono", monospace;
    border: 1px solid #111;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
}
.item-content.full-content { max-height: 14em; }

.item-action-rail { position: absolute; top: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; z-index: 1; }
.fav-toggle { cursor: pointer; opacity: 0.68; transition: opacity 0.18s, color 0.18s, transform 0.18s; appearance: none; -webkit-appearance: none; background: transparent; color: #B8B8B8; font-size: 0.82rem; line-height: 1; padding: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 0; box-shadow: none; }
.fav-toggle:hover, .fav-toggle:focus-visible { opacity: 0.9; }
.fav-toggle.active { opacity: 1; color: #FF3D00; }

/* ALIGNED ACTION ROW */
.meta-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 0; }
.tag-row { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.tag-trigger { cursor: pointer; font-size: 0.82rem; opacity: 0.7; background: transparent; padding: 0; line-height: 1; }
.tag-mini-container { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.tag-mini { border: 1px solid var(--mint); color: var(--mint); font-size: 0.48rem; padding: 1px 5px; border-radius: 3px; font-weight: 800; text-transform: uppercase; }
.archive-chip { cursor: pointer; background: rgba(0, 255, 178, 0.08); line-height: 1; appearance: none; -webkit-appearance: none; }
.archive-chip:hover, .archive-chip:focus-visible { background: rgba(0, 255, 178, 0.16); }
.tag-mini-empty { opacity: 0.25; }

.item-timestamp { font-size: 0.52rem; color: var(--text-label); margin-left: 4px; opacity: 0.96; line-height: 1.2; }
.trash-btn { cursor: pointer; font-size: 0.92rem; opacity: 0.72; color: #FF5A33 !important; transition: opacity 0.18s, filter 0.18s; padding: 0; background: transparent; line-height: 1; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; }
.trash-btn:hover, .trash-btn:focus-visible { opacity: 0.95; filter: drop-shadow(0 0 4px rgba(255, 61, 0, 0.65)); }

/* TAG MANAGER MODAL */
#tag-manager { display: none !important; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #111; border: 2px solid #333; padding: 30px; z-index: 9999; width: 380px; border-radius: 20px; flex-direction: column; }
#paste-fallback, #air-capture, #account-settings, #export-panel { display: none !important; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #111; border: 2px solid #333; padding: 24px; z-index: 9999; width: min(380px, calc(100vw - 32px)); max-height: calc(100dvh - 28px); border-radius: 20px; flex-direction: column; box-sizing: border-box; overflow-y: auto; }
#pulse-pad { display: none !important; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 390px; height: 620px; min-width: 280px; min-height: 360px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 20px; box-sizing: border-box; overflow: hidden; resize: both; flex-direction: column; background: #111; border: 2px solid #333; border-radius: 18px; z-index: 9999; }
.pulse-pad-header { flex: 0 0 auto; margin-bottom: 10px; }
.pulse-pad-context { flex: 0 0 auto; min-height: 16px; margin-bottom: 9px; color: var(--text-label); font-size: 0.58rem; line-height: 1.35; overflow-wrap: anywhere; }
.pulse-pad-context::before { content: 'Context: '; color: #777; }
#pulse-pad-editor { flex: 1 1 auto; min-height: 0; width: 100%; resize: none; overflow: auto; box-sizing: border-box; padding: 12px; border: 1px solid #333; border-radius: 8px; outline: none; background: #050505; color: var(--text); font: 0.78rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre-wrap; tab-size: 4; }
#pulse-pad-editor:focus { border-color: rgba(0, 200, 83, 0.55); }
#pulse-pad-status { flex: 0 0 auto; margin-top: 7px; }
.pulse-pad-actions { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; margin-top: 8px; }
.pulse-pad-actions button { cursor: pointer; min-height: 34px; padding: 7px 9px; border-radius: 7px; background: #1a1a1a; border: 1px solid #333; color: var(--text-dim); font-size: 0.62rem; font-weight: 900; }
#pulse-pad-create { background: rgba(0, 200, 83, 0.12); border-color: rgba(0, 200, 83, 0.55); color: var(--mint); }
#pulse-pad-clear { color: #ff8161; }
.pulse-pad-actions button:hover, .pulse-pad-actions button:focus-visible { border-color: var(--mint); outline: none; }
#paste-fallback-text { width: 100%; min-height: 120px; resize: vertical; background: #000; border: 1px solid #333; color: var(--text); padding: 12px; border-radius: 8px; font-size: 0.75rem; box-sizing: border-box; margin-bottom: 15px; outline: none; }
#paste-fallback-save { background: var(--mint); border: none; width: 100%; padding: 16px; border-radius: 12px; font-weight: 900; cursor: pointer; color: #000; }
.air-status { background: #050505; border: 1px solid rgba(0, 200, 83, 0.2); color: var(--mint); border-radius: 8px; padding: 12px; font-size: 0.72rem; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; text-align: center; box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.65); }
.air-entitlement { color: var(--text-label); font-size: 0.59rem; font-weight: 800; letter-spacing: 0.7px; text-align: center; margin-top: 8px; }
.air-elapsed { color: var(--text-dim); font-size: 0.72rem; font-weight: 900; letter-spacing: 1px; text-align: center; margin: 10px 0 16px; }
.air-privacy { color: var(--text-label); font-size: 0.62rem; line-height: 1.5; margin: 12px 0 14px; text-align: center; }
.air-record-core { cursor: pointer; appearance: none; -webkit-appearance: none; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: min(230px, 68vw, 40dvh); min-width: 168px; max-width: 230px; aspect-ratio: 1; border-radius: 50%; padding: 16px; color: var(--mint); background: radial-gradient(circle at 50% 45%, rgba(0, 200, 83, 0.22), rgba(0, 200, 83, 0.07) 36%, #080808 62%, #020202 100%); border: 1px solid rgba(0, 200, 83, 0.5); box-shadow: inset 0 0 0 9px #111, inset 0 0 0 11px rgba(255, 255, 255, 0.08), inset 0 0 38px rgba(0, 0, 0, 0.92), 0 0 18px rgba(0, 200, 83, 0.2), 0 0 44px rgba(0, 200, 83, 0.1); position: relative; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s, color 0.2s, opacity 0.2s, transform 0.2s; }
.air-record-core::before, .air-record-core::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.air-record-core::before { inset: 13px; border: 2px solid rgba(0, 200, 83, 0.72); border-left-color: rgba(0, 200, 83, 0.18); border-right-color: rgba(255, 255, 255, 0.12); box-shadow: 0 0 14px rgba(0, 200, 83, 0.48), inset 0 0 18px rgba(0, 200, 83, 0.12); }
.air-record-core::after { inset: 32px; border: 1px solid rgba(255, 255, 255, 0.12); background: radial-gradient(circle, rgba(0, 200, 83, 0.14), transparent 60%), repeating-radial-gradient(circle, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 9px); opacity: 0.58; }
.air-record-core:hover, .air-record-core:focus-visible { border-color: rgba(0, 200, 83, 0.86); box-shadow: inset 0 0 0 9px #111, inset 0 0 0 11px rgba(255, 255, 255, 0.08), inset 0 0 38px rgba(0, 0, 0, 0.92), 0 0 22px rgba(0, 200, 83, 0.38), 0 0 58px rgba(0, 200, 83, 0.16); outline: none; transform: translateY(-1px); }
.air-record-core:disabled { cursor: not-allowed; opacity: 0.78; transform: none; }
.air-record-ring { width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #1d1d1d, #030303); border: 1px solid rgba(0, 200, 83, 0.5); box-shadow: inset 0 0 0 7px rgba(0, 0, 0, 0.78), inset 0 0 22px rgba(0, 200, 83, 0.15), 0 0 24px rgba(0, 200, 83, 0.32); position: relative; z-index: 1; }
.air-record-icon { color: currentColor; font-size: 2.1rem; line-height: 1; filter: drop-shadow(0 0 8px currentColor); }
.air-record-state { position: relative; z-index: 1; color: currentColor; font-size: 0.68rem; font-weight: 900; letter-spacing: 1.4px; line-height: 1.2; text-align: center; text-transform: uppercase; text-shadow: 0 0 10px currentColor; }
.air-record-core.recording { color: #ff4444; border-color: rgba(255, 61, 0, 0.82); background: radial-gradient(circle at 50% 45%, rgba(255, 61, 0, 0.2), rgba(255, 61, 0, 0.06) 36%, #080808 62%, #020202 100%); box-shadow: inset 0 0 0 9px #111, inset 0 0 0 11px rgba(255, 255, 255, 0.08), inset 0 0 38px rgba(0, 0, 0, 0.92), 0 0 20px rgba(255, 61, 0, 0.32), 0 0 54px rgba(255, 61, 0, 0.14); animation: airRecordingPulse 1.25s ease-in-out infinite; }
.air-record-core.recording::before { border-color: rgba(255, 61, 0, 0.88); border-left-color: rgba(255, 61, 0, 0.18); box-shadow: 0 0 16px rgba(255, 61, 0, 0.52), inset 0 0 18px rgba(255, 61, 0, 0.12); }
.air-record-core.recording .air-record-ring { border-color: rgba(255, 61, 0, 0.72); box-shadow: inset 0 0 0 7px rgba(0, 0, 0, 0.78), inset 0 0 22px rgba(255, 61, 0, 0.18), 0 0 24px rgba(255, 61, 0, 0.36); }
.air-record-core.transcribing { color: #ffc400; border-color: rgba(255, 196, 0, 0.76); background: radial-gradient(circle at 50% 45%, rgba(255, 196, 0, 0.16), rgba(255, 196, 0, 0.05) 36%, #080808 62%, #020202 100%); box-shadow: inset 0 0 0 9px #111, inset 0 0 0 11px rgba(255, 255, 255, 0.08), inset 0 0 38px rgba(0, 0, 0, 0.92), 0 0 20px rgba(255, 196, 0, 0.28), 0 0 54px rgba(255, 196, 0, 0.12); }
.air-record-core.transcribing::before { border-color: rgba(255, 196, 0, 0.82); border-left-color: transparent; animation: airRingRotate 1s linear infinite; box-shadow: 0 0 16px rgba(255, 196, 0, 0.45), inset 0 0 18px rgba(255, 196, 0, 0.1); }
.air-record-core.transcribing .air-record-ring { border-color: rgba(255, 196, 0, 0.68); box-shadow: inset 0 0 0 7px rgba(0, 0, 0, 0.78), inset 0 0 22px rgba(255, 196, 0, 0.14), 0 0 24px rgba(255, 196, 0, 0.32); }
.air-pending { width: min(100%, 28rem); margin-top: 0.7rem; font-size: 0.78rem; color: #bbb; }
.air-pending-summary { width: 100%; margin-bottom: 0.35rem; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.air-pending-summary::after { content: ' ▾'; }
.air-pending-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0; border-top: 1px solid rgba(255,255,255,0.08); }
.air-pending-item button { font: inherit; color: #fff; background: #181818; border: 1px solid #555; border-radius: 0.35rem; padding: 0.25rem 0.45rem; }
.air-record-core.retry-ready { color: #ffc400; border-color: rgba(255, 196, 0, 0.72); }
.air-record-core.complete { animation: airCompleteFlash 620ms ease-out; }
.air-controls { display: flex; gap: 8px; justify-content: center; align-items: center; }
.air-stop-btn, .air-retry-btn, .air-cancel-btn { cursor: pointer; border-radius: 7px; padding: 9px 12px; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.8px; text-transform: uppercase; }
.air-stop-btn { background: rgba(255, 61, 0, 0.12); border: 1px solid rgba(255, 61, 0, 0.7); color: var(--accent); }
.air-retry-btn { background: rgba(255, 196, 0, 0.12); border: 1px solid rgba(255, 196, 0, 0.7); color: #ffc400; }
.air-cancel-btn { background: #1A1A1A; border: 1px solid #333; color: var(--text-dim); }
.air-stop-btn:disabled, .air-retry-btn:disabled, .air-cancel-btn:disabled { cursor: not-allowed; opacity: 0.38; }

@keyframes airRecordingPulse {
    0%, 100% { box-shadow: inset 0 0 0 9px #111, inset 0 0 0 11px rgba(255, 255, 255, 0.08), inset 0 0 38px rgba(0, 0, 0, 0.92), 0 0 16px rgba(255, 61, 0, 0.28), 0 0 40px rgba(255, 61, 0, 0.12); }
    50% { box-shadow: inset 0 0 0 9px #111, inset 0 0 0 11px rgba(255, 255, 255, 0.08), inset 0 0 38px rgba(0, 0, 0, 0.92), 0 0 28px rgba(255, 61, 0, 0.55), 0 0 72px rgba(255, 61, 0, 0.2); }
}

@keyframes airRingRotate {
    to { transform: rotate(360deg); }
}

@keyframes airCompleteFlash {
    0% { box-shadow: inset 0 0 0 9px #111, inset 0 0 0 11px rgba(255, 255, 255, 0.08), 0 0 0 rgba(0, 200, 83, 0); }
    45% { box-shadow: inset 0 0 0 9px #111, inset 0 0 0 11px rgba(255, 255, 255, 0.1), 0 0 34px rgba(0, 200, 83, 0.78), 0 0 90px rgba(0, 200, 83, 0.28); }
    100% { box-shadow: inset 0 0 0 9px #111, inset 0 0 0 11px rgba(255, 255, 255, 0.08), 0 0 18px rgba(0, 200, 83, 0.2), 0 0 44px rgba(0, 200, 83, 0.1); }
}
.modal-header { width: 100%; display: flex; justify-content: center; align-items: center; position: relative; margin-bottom: 25px; }
.modal-title { font-size: 0.8rem; font-weight: 900; color: var(--text-label); letter-spacing: 3px; text-transform: uppercase; margin: 0; }
.modal-close { position: absolute; right: -10px; cursor: pointer; color: #ff4444; font-size: 1.5rem; background: transparent; padding: 0; }
.modal-label { font-size: 0.65rem; font-weight: 900; color: var(--text-label); letter-spacing: 2px; margin-bottom: 12px; text-transform: uppercase; }
.account-modal-header { margin-bottom: 16px; }
.account-inline-message { min-height: 16px; color: var(--text-label); font-size: 0.64rem; line-height: 1.4; }
.account-connected { color: var(--text-label); font-size: 0.65rem; overflow-wrap: anywhere; }
.account-connected span { color: var(--text-dim); }
.account-status-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 14px 0 10px; padding: 9px 0; border-top: 1px solid #252525; border-bottom: 1px solid #252525; color: var(--text-label); font-size: 0.63rem; text-transform: uppercase; letter-spacing: 0.8px; }
.account-status-row strong { color: var(--text); margin-left: 4px; }
.account-action-list { display: flex; flex-direction: column; }
.account-action { cursor: pointer; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px 0; background: transparent; border-bottom: 1px solid #222; color: var(--text-dim); font-size: 0.68rem; text-align: left; }
.account-action span { color: var(--mint); font-size: 1rem; }
.account-action:hover, .account-action:focus-visible { color: var(--mint); }
.account-action:disabled, .account-mini-action:disabled { cursor: wait; opacity: 0.45; }
.account-air-breakdown { width: 100%; display: grid; gap: 6px; padding: 10px 0 1px; color: var(--text-label); font-size: 0.62rem; line-height: 1.25; box-sizing: border-box; }
.account-air-breakdown > span { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.account-air-breakdown strong { color: var(--text); font-variant-numeric: tabular-nums; }
.account-upgrade { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #222; color: var(--text-dim); font-size: 0.68rem; }
.account-upgrade[hidden] { display: none !important; }
.account-upgrade > div { display: flex; gap: 6px; }
.account-mini-action { cursor: pointer; padding: 5px 7px; border-radius: 5px; background: rgba(0, 200, 83, 0.08); border: 1px solid rgba(0, 200, 83, 0.45); color: var(--mint); font-size: 0.58rem; font-weight: 800; }
.account-footer { margin-top: 15px; padding-top: 10px; border-top: 1px solid #222; color: #858585; font-size: 0.56rem; text-align: center; }
.account-footer a { color: #a9a9a9; text-underline-offset: 2px; }
.account-footer a:hover { color: var(--mint); }
.export-vault-action { flex: 0 0 auto; }
.export-divider { height: 1px; background: #292929; margin: 14px 0; }
.export-section-title { margin: 0 0 14px; color: var(--text-label); font-size: 0.68rem; letter-spacing: 1.8px; }
.export-field { display: grid; gap: 6px; margin-bottom: 12px; color: var(--text-label); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; }
.export-field select { width: 100%; background: #090909; border: 1px solid #303030; border-radius: 7px; color: var(--text); padding: 9px; font-size: 0.68rem; }
.export-field select:disabled { opacity: 0.45; }
.export-check { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: 0.66rem; margin: 2px 0 12px; }
.export-check input { accent-color: var(--mint); }
.export-match-count { min-height: 18px; color: var(--text-label); font-size: 0.63rem; margin-bottom: 10px; }
.export-submit { width: 100%; padding: 11px; border-radius: 8px; background: var(--mint); color: #000; font-size: 0.68rem; font-weight: 900; text-transform: uppercase; cursor: pointer; }
.export-submit:disabled { cursor: not-allowed; opacity: 0.4; }
.export-status { margin-top: 9px; }
.export-success { display: grid; gap: 7px; color: var(--text-label); font-size: 0.66rem; overflow-wrap: anywhere; }
.export-success[hidden] { display: none !important; }
.export-success strong { color: var(--mint); font-size: 0.72rem; }
.export-success-actions { display: flex; gap: 8px; margin-top: 8px; }
.export-success-actions button { flex: 1; padding: 9px; border-radius: 7px; border: 1px solid rgba(0, 200, 83, 0.5); background: rgba(0, 200, 83, 0.08); color: var(--mint); cursor: pointer; font-size: 0.63rem; font-weight: 800; }
#active-tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.tag-pill { background: #222; color: var(--mint); padding: 6px 12px; border-radius: 8px; font-size: 0.7rem; font-weight: 800; display: flex; align-items: center; gap: 10px; border: 1px solid #333; cursor: grab; user-select: none; touch-action: none; transition: opacity 0.15s, border-color 0.15s, transform 0.15s; }
.tag-pill.dragging { opacity: 0.72; border-color: var(--mint); transform: scale(0.98); cursor: grabbing; }
.tag-x { background: transparent; color: #ff4444; cursor: pointer; padding: 0; font-weight: 900; }
.sugg-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 120px; overflow-y: auto; margin-bottom: 20px; }
.sugg-btn { background: #1A1A1A; color: #BBB; padding: 6px 10px; border-radius: 6px; font-size: 0.6rem; cursor: pointer; border: 1px solid #222; }
#tag-input { width: 100%; margin-bottom: 15px; }
#tag-save { align-self: flex-end; background: rgba(0, 200, 83, 0.1); border: 1px solid rgba(0, 200, 83, 0.65); color: var(--mint); padding: 8px 14px; border-radius: 6px; font-size: 0.68rem; font-weight: 900; cursor: pointer; letter-spacing: 0.8px; }
.empty-state { border: 1px dashed #222; border-radius: 12px; padding: 24px; color: var(--text-label); font-size: 0.72rem; font-weight: 900; letter-spacing: 2px; text-align: center; text-transform: uppercase; }
.status-group { display: flex; align-items: center; gap: 8px; }
.cloud-status-group { min-width: 0; flex-wrap: wrap; }
.google-connection-disclosure { flex-basis: 100%; max-width: 760px; margin: 2px 0 0; color: #8f8f8f; font-size: 0.56rem; font-weight: 600; line-height: 1.45; letter-spacing: 0; }
.google-connection-disclosure a { color: #bdbdbd; text-underline-offset: 2px; }
.google-connection-disclosure a:hover { color: var(--mint); }
.google-connected-legal { flex-basis: 100%; min-width: 0; max-width: 100%; color: #8f8f8f; font-size: 0.54rem; font-weight: 600; line-height: 1.4; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; }
.google-connected-legal a { color: #a9a9a9; text-underline-offset: 2px; }
.google-connected-legal a:hover { color: var(--mint); }
.cloud-online { color: var(--mint); }
.cloud-offline { color: var(--accent); }
.cloud-action { background: var(--mint); color: #000; border-radius: 5px; cursor: pointer; font-size: 0.55rem; font-weight: 900; padding: 5px 8px; letter-spacing: 0.7px; }
.cloud-action:disabled { cursor: not-allowed; opacity: 0.45; }
.sync-badge { font-weight: 900; }
.sync-badge-synced { color: var(--mint); }
.sync-badge-syncing { color: var(--mint); }
.sync-badge-queued { color: #ffc400; }
.sync-badge-error { color: var(--accent); }
.sync-badge-local { color: var(--text-label); }
.item.skip-loading { opacity: 0.82; }
.item.skip-loading .sync-badge { color: var(--mint); }
.footer { padding: 12px 24px calc(12px + env(safe-area-inset-bottom)); background: #080808; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 0.6rem; font-weight: 900; color: var(--footer-text); flex: 0 0 auto; box-sizing: border-box; }

@media (max-width: 768px) and (pointer: coarse) {
	#pulse-pad { width: calc(100vw - 20px) !important; height: calc(100dvh - 20px) !important; min-width: 0; min-height: 0; max-width: none; max-height: none; resize: none; padding: 16px; border-radius: 14px; }
	.pulse-pad-actions { grid-template-columns: 1fr 1fr; }
	#pulse-pad-done { grid-column: 1 / -1; }
    body {
        min-width: 0;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        align-items: stretch;
    }

    .main-container {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .header {
        padding: 16px 16px 10px;
    }

    #search {
        width: calc(100% - 32px);
        margin: 0 16px 8px;
    }

    .pulse-message {
        margin: 0 16px 7px;
    }

    #list {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0 16px 18px;
    }

    .item {
        padding: 12px 34px 11px 12px;
        margin-bottom: 16px;
        overflow: visible;
    }

    .item-content {
        max-height: 5.6em;
        padding: 9px;
        font-size: 0.68rem;
        box-sizing: border-box;
        width: 100%;
    }

    .item-content.full-content {
        max-height: 10em;
    }

    .item-action-rail {
        top: 10px;
        right: 10px;
        bottom: 10px;
    }

    .fav-toggle {
        font-size: 0.78rem;
    }

    .meta-row {
        align-items: flex-start;
        gap: 6px;
        flex-wrap: wrap;
        min-width: 0;
        margin-top: 7px;
    }

    .tag-row {
        flex: 1 1 100%;
        min-width: 0;
        flex-wrap: wrap;
        gap: 6px;
    }

    .tag-mini-container {
        flex: 1 1 150px;
        min-width: 0;
        max-width: 100%;
    }

    .item-timestamp {
        margin-left: 0;
        flex: 0 0 auto;
    }

    .trash-btn {
        font-size: 0.86rem;
    }

    .air-controls {
        flex-wrap: wrap;
    }

    #air-capture {
        padding: 18px;
        width: min(360px, calc(100vw - 20px));
    }

    #air-capture .modal-header {
        margin-bottom: 16px;
    }

    .air-record-core {
        width: min(208px, 66vw, 36dvh);
        min-width: 156px;
        gap: 10px;
    }

    .air-record-ring {
        width: 64px;
        height: 64px;
    }

    .air-record-icon {
        font-size: 1.85rem;
    }

    .footer {
        flex-shrink: 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        flex-wrap: wrap;
    }
}

@media (max-width: 720px) {
    .side-rail { width: 72px; }
}