:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #080b14; color: #f5f7ff; font-synthesis: none; }
* { box-sizing: border-box; }.hidden { display: none !important; }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 80% 8%,rgba(123,92,255,.18),transparent 34rem),radial-gradient(circle at 10% 100%,rgba(21,199,180,.12),transparent 30rem),#080b14; }
body::before { position: fixed; inset: 0; z-index: -1; content: ""; opacity: .18; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom,black,transparent 70%); }
h1,h2,p { margin: 0; } h1 { font-size: 1.28rem; letter-spacing: -.02em; }
.eyebrow,.kicker { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 750; color: #9ba7c5; }.kicker { color: #45d8c8; }
.mark { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 15px; background: linear-gradient(145deg,rgba(123,92,255,.32),rgba(21,199,180,.16)); }
.mark span { width: 13px; height: 16px; border-radius: 3px 9px 9px 3px; background: #f5f7ff; clip-path: polygon(0 0,100% 50%,0 100%); }
.auth-screen { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
.auth-card { width: min(440px,100%); padding: clamp(26px,5vw,40px); border: 1px solid rgba(255,255,255,.11); border-radius: 26px; background: rgba(15,19,34,.88); box-shadow: 0 30px 100px rgba(0,0,0,.38); backdrop-filter: blur(18px); }
.auth-brand,.brand,.topbar,.account { display: flex; align-items: center; }.auth-brand,.brand { gap: 14px; }.auth-brand { margin-bottom: 48px; }
form { display: grid; gap: 17px; }.form-heading { display: grid; gap: 13px; margin-bottom: 9px; }.form-heading h2 { font-size: 2.15rem; letter-spacing: -.045em; }.form-heading > p:last-child { color: #aeb8d2; line-height: 1.55; }.form-heading strong { color: #e7eaff; }
label { display: grid; gap: 8px; color: #cbd3e8; font-size: .82rem; font-weight: 650; }
input { width: 100%; min-height: 49px; padding: 0 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; outline: none; background: rgba(6,9,18,.8); color: #f5f7ff; font: inherit; }
input:focus { border-color: #7b5cff; box-shadow: 0 0 0 3px rgba(123,92,255,.16); }
.primary-button,.secondary-button,.text-button { border: 0; cursor: pointer; font: inherit; font-weight: 750; }
.primary-button { min-height: 50px; margin-top: 5px; border-radius: 13px; background: linear-gradient(135deg,#7b5cff,#4e8dff); color: white; }.primary-button:disabled { cursor: wait; opacity: .65; }
.secondary-button { min-height: 42px; background: transparent; color: #9ba7c5; }.secondary-button:hover,.text-button:hover { color: white; }
.form-error { padding: 11px 12px; border: 1px solid rgba(255,92,108,.24); border-radius: 10px; background: rgba(255,78,95,.09); color: #ffadb5; font-size: .8rem; line-height: 1.4; }
.shell { width: min(1180px,calc(100% - 40px)); margin: 0 auto; padding: 36px 0 32px; }.topbar { justify-content: space-between; gap: 24px; }.account { gap: 10px; color: #cbd3e8; font-size: .85rem; }
.role,.pill { padding: 6px 9px; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.role { color: #bcb0ff; background: rgba(123,92,255,.14); }.text-button { padding: 7px 9px; background: transparent; color: #aeb8d2; }
.hero { max-width: 800px; padding: clamp(80px,13vw,140px) 0 64px; }.hero h2 { max-width: 760px; margin-top: 18px; font-size: clamp(3rem,8vw,6.2rem); font-weight: 650; line-height: .94; letter-spacing: -.065em; }.intro { max-width: 680px; margin-top: 28px; color: #aeb8d2; font-size: clamp(1rem,2vw,1.2rem); line-height: 1.7; }
.status-card { display: grid; grid-template-columns: 1fr 1.2fr; gap: 42px; padding: clamp(24px,5vw,42px); border: 1px solid rgba(255,255,255,.11); border-radius: 26px; background: rgba(15,19,34,.78); }.status-copy { margin-top: 13px; color: #c3cbe0; line-height: 1.55; }.checks { display: grid; gap: 10px; }
.check-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 48px; padding: 0 14px 0 16px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.025); color: #dce2f2; font-size: .9rem; }.pill.good { color: #75eee1; background: rgba(21,199,180,.14); }.pill.pending { color: #c7d0e7; background: rgba(155,167,197,.12); }.pill.bad { color: #ff9fa8; background: rgba(255,78,95,.13); }
footer { display: flex; justify-content: space-between; gap: 24px; padding: 24px 4px 0; color: #77819e; font-size: .76rem; }
.section-nav { display: flex; gap: 8px; margin-bottom: 24px; padding: 5px; width: fit-content; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: rgba(15,19,34,.72); }
.nav-button { padding: 9px 15px; border: 0; border-radius: 9px; background: transparent; color: #929db9; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 750; }.nav-button.active { background: rgba(123,92,255,.18); color: #ece9ff; }
.app-panel { display: grid; gap: 24px; }
.room-card { display: grid; gap: 22px; padding: clamp(22px,4vw,34px); border: 1px solid rgba(69,216,200,.18); border-radius: 24px; background: linear-gradient(145deg,rgba(15,19,34,.9),rgba(13,25,36,.82)); }.room-heading,.room-grid,.room-actions,.control-request { display: flex; align-items: center; justify-content: space-between; gap: 24px; }.room-heading { align-items: flex-start; }.room-heading h3 { margin: 7px 0 0; font-size: 1.55rem; letter-spacing: -.035em; }.room-grid { align-items: end; padding-top: 4px; }.room-label { margin-bottom: 9px; color: #7f8aa8; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.participants { display: flex; flex-wrap: wrap; gap: 8px; }.participant { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 99px; background: rgba(255,255,255,.035); color: #dce2f2; font-size: .8rem; }.participant::before { width: 7px; height: 7px; border-radius: 50%; background: #45d8c8; content: ""; }.participant-role { color: #9ba7c5; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.room-mode { min-width: 190px; }.room-mode select { min-height: 42px; padding: 0 36px 0 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; outline: none; background: #0b1020; color: #f5f7ff; font: inherit; font-size: .82rem; }.room-mode select:disabled { cursor: not-allowed; opacity: .55; }
.room-note { color: #8e99b5; font-size: .78rem; }.control-request { padding: 13px 15px; border: 1px solid rgba(123,92,255,.2); border-radius: 13px; background: rgba(123,92,255,.08); color: #dcd6ff; font-size: .82rem; }.control-request > div { display: flex; gap: 8px; }
.player-card { display: grid; gap: 18px; padding: clamp(18px,3vw,28px); border: 1px solid rgba(123,92,255,.22); border-radius: 24px; background: rgba(10,13,24,.92); box-shadow: 0 24px 80px rgba(0,0,0,.25); }.player-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; }.player-heading h3 { margin: 7px 0 0; font-size: 1.5rem; letter-spacing: -.035em; }
#media-player { display: block; width: 100%; max-height: min(70vh,720px); border-radius: 16px; background: #000; }
.upload-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,.75fr); gap: 28px 48px; padding: clamp(24px,4vw,38px); border: 1px solid rgba(69,216,200,.18); border-radius: 24px; background: linear-gradient(135deg,rgba(21,199,180,.07),rgba(123,92,255,.07)); }
.upload-card h3,.library-heading h3 { margin: 8px 0 0; font-size: 1.5rem; letter-spacing: -.035em; }.muted { margin-top: 12px; color: #9fa9c3; font-size: .88rem; line-height: 1.55; }
.upload-controls { display: grid; align-content: center; gap: 11px; }.file-input { min-height: 48px; padding: 9px; color: #aeb8d2; }.file-input::file-selector-button { height: 30px; margin-right: 11px; padding: 0 12px; border: 0; border-radius: 8px; background: rgba(255,255,255,.09); color: #f5f7ff; cursor: pointer; }
.upload-progress { grid-column: 1/-1; display: grid; gap: 12px; }.progress-copy { display: flex; justify-content: space-between; gap: 20px; color: #dce2f2; font-size: .82rem; }.progress-copy span { color: #929db9; }
.progress-track { height: 8px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#15c7b4,#7b5cff); transition: width .2s ease; }
.upload-actions { display: flex; gap: 10px; }.secondary-button.compact { min-height: 34px; padding: 0 9px; font-size: .78rem; }.secondary-button.danger { color: #ff9fa8; }
.library-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 14px 4px 0; }
.media-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.media-card { display: grid; grid-template-columns: 112px 1fr; gap: 18px; min-width: 0; padding: 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(15,19,34,.72); }
.media-art { position: relative; display: grid; min-height: 90px; overflow: hidden; place-items: center; padding: 0; border: 0; border-radius: 12px; background: radial-gradient(circle at 70% 20%,rgba(123,92,255,.45),transparent 55%),linear-gradient(145deg,#15203a,#0d1325); color: rgba(255,255,255,.82); cursor: pointer; }.media-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease,filter .25s ease; }.media-art:hover img { transform: scale(1.035); filter: brightness(.78); }.media-art span { position: relative; z-index: 1; display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(8,11,20,.62); box-shadow: 0 6px 20px rgba(0,0,0,.35); font-size: .8rem; backdrop-filter: blur(6px); }
.media-copy { min-width: 0; }.media-title-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.media-title-row h4 { overflow: hidden; margin: 2px 0 0; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.media-status { flex: none; padding: 5px 7px; border-radius: 99px; color: #75eee1; background: rgba(21,199,180,.12); font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.media-status.uploading,.media-status.inspecting,.media-status.queued,.media-status.processing { color: #c7bfff; background: rgba(123,92,255,.14); }.media-status.failed { color: #ff9fa8; background: rgba(255,78,95,.13); }
.media-meta,.media-submeta,.media-error { margin-top: 11px; color: #aeb8d2; font-size: .76rem; line-height: 1.45; }.media-submeta { color: #77819e; }.media-error { color: #ff9fa8; }
.media-actions { margin-top: 13px; }.primary-button.compact { min-height: 36px; margin: 0; padding: 0 16px; font-size: .78rem; }
.media-edit-actions { display: none; flex-wrap: wrap; gap: 4px 13px; margin-top: 12px; }.media-card.editing .media-edit-actions { display: flex; }.media-card.editing .media-actions { display: none; }.text-button.danger { color: #ff929d; }
.empty-library { padding: 64px 20px; border: 1px dashed rgba(255,255,255,.11); border-radius: 20px; text-align: center; }.empty-library p { font-size: 1.1rem; font-weight: 700; }.empty-library span { display: block; margin-top: 8px; color: #77819e; font-size: .82rem; }
@media (max-width:760px) { .shell { width: min(100% - 28px,1180px); padding-top: 24px; }.status-card,.upload-card { grid-template-columns: 1fr; gap: 28px; }.account { align-items: flex-end; flex-direction: column; }.check-row { align-items: flex-start; flex-direction: column; gap: 8px; padding-block: 13px; }.media-grid { grid-template-columns: 1fr; }.media-card { grid-template-columns: 90px 1fr; }.progress-copy,.player-heading,.room-heading,.room-grid,.room-actions,.control-request { align-items: flex-start; flex-direction: column; gap: 12px; }.room-mode { width: 100%; }.room-mode select { width: 100%; } }

/* v0.8 compact workspace layout */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.shell { width: min(1320px,calc(100% - 32px)); padding-top: 16px; }
.workspace-header { position: sticky; top: 0; z-index: 20; display: grid; gap: 10px; padding: 10px 0 14px; background: linear-gradient(to bottom,#080b14 78%,transparent); }
.topbar { min-height: 58px; padding: 0 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(12,16,29,.94); backdrop-filter: blur(18px); }
.top-status { display: flex; align-items: center; gap: 7px; margin-left: auto; margin-right: 18px; }
.control-bar { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(360px,.8fr); gap: 16px; padding: 14px; border: 1px solid rgba(69,216,200,.16); border-radius: 18px; background: rgba(13,20,32,.95); box-shadow: 0 18px 50px rgba(0,0,0,.24); backdrop-filter: blur(18px); }
.room-compact { display: grid; grid-template-columns: minmax(190px,.8fr) minmax(180px,1fr) auto; align-items: center; gap: 10px 18px; min-width: 0; }
.room-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }.room-identity > div { min-width: 0; }.room-identity #room-summary { margin-top: 5px; overflow: hidden; color: #cbd3e8; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.room-controls { display: flex; align-items: end; gap: 9px; }.room-controls .room-mode { min-width: 160px; }.room-controls .room-mode select { min-height: 36px; }
.room-compact .participants { max-height: 72px; overflow: auto; }.room-compact .participant { padding: 6px 9px; }
.room-compact .room-note { grid-column: 1/-1; }
.control-bar .upload-card { display: grid; grid-template-columns: 1fr; align-content: center; gap: 9px; padding: 0 0 0 16px; border: 0; border-left: 1px solid rgba(255,255,255,.09); border-radius: 0; background: transparent; }
.control-bar .upload-controls { grid-template-columns: minmax(0,1fr) auto; gap: 8px; }.control-bar .file-input { min-height: 38px; padding: 4px; font-size: .74rem; }.control-bar .file-input::file-selector-button { height: 28px; }
.control-bar .upload-progress { grid-column: auto; gap: 7px; }.control-bar .progress-copy { font-size: .7rem; }.control-bar .upload-actions { justify-content: flex-end; }.control-bar .form-error { padding: 7px 9px; }
.workspace-header > .control-request { margin: 0 12px; }
.library-panel { padding-top: 42px; }.library-heading { align-items: center; padding: 0 6px 8px; }.library-heading h2 { margin-top: 8px; font-size: clamp(2rem,4vw,3.25rem); letter-spacing: -.05em; }.library-heading p:last-child { margin-top: 9px; color: #8994b0; font-size: .86rem; }
.media-card.decision-card { grid-column: 1/-1; grid-template-columns: 112px minmax(0,1fr); border-color: rgba(123,92,255,.24); background: linear-gradient(145deg,rgba(18,21,39,.95),rgba(12,22,34,.92)); }
.compatibility-panel { display: grid; gap: 13px; margin-top: 15px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.08); }.compatibility-panel > strong { color: #ece9ff; font-size: .9rem; }
.compatibility-list { display: grid; gap: 7px; }.compatibility-row { display: grid; gap: 5px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.025); color: #cbd3e8; font-size: .75rem; }.compatibility-row::before { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #8d97b2; content: ""; }.compatibility-row.supported::before { background: #45d8c8; }.compatibility-row.unsupported::before { background: #ff6978; }.compatibility-row small { padding-left: 14px; color: #9ca7c2; line-height: 1.45; }
.decision-guidance,.decision-message { color: #b2bdd5; font-size: .78rem; line-height: 1.5; }.decision-message { color: #cfc8ff; }
.conversion-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.conversion-choice { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.025); }.conversion-choice > div,.conversion-choice.browser-choice { display: grid; gap: 5px; }.conversion-choice strong { color: #e8ebf7; font-size: .8rem; }.conversion-choice span { color: #8f9ab7; font-size: .7rem; line-height: 1.4; }.browser-choice { align-items: start; }.browser-choice .text-button { justify-self: start; padding-left: 0; }
.media-status.awaiting_compatibility { color: #ffcf7d; background: rgba(255,174,66,.13); }

@media (max-width:980px) {
  .workspace-header { position: static; }.control-bar { grid-template-columns: 1fr; }.control-bar .upload-card { padding: 13px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.09); }.room-compact { grid-template-columns: 1fr 1fr; }.room-controls { justify-content: flex-end; }.top-status { display: none; }
}
@media (max-width:650px) {
  .shell { width: min(100% - 20px,1320px); padding-top: 10px; }.topbar { align-items: flex-start; padding: 12px; }.brand .eyebrow { display: none; }.account { gap: 5px; }.control-bar { padding: 12px; }.room-compact { grid-template-columns: 1fr; align-items: start; }.room-controls { align-items: stretch; flex-direction: column; }.room-compact .room-note { grid-column: auto; }.control-bar .upload-controls { grid-template-columns: 1fr; }.conversion-options { grid-template-columns: 1fr; }.media-card.decision-card { grid-template-columns: 72px minmax(0,1fr); }.library-panel { padding-top: 24px; }
}

/* v0.9 account workspace, upload drawer and player consent */
select { min-height: 44px; padding: 0 36px 0 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 11px; outline: none; background: #0b1020; color: #f5f7ff; font: inherit; }
.topbar { position: relative; z-index: 50; overflow: visible; }
.top-actions,.account-trigger,.settings-actions { display: flex; align-items: center; gap: 10px; }
.account-menu-wrap { position: relative; }
.account-trigger { min-height: 40px; padding: 5px 7px 5px 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #e5e9f6; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 700; }
.account-trigger:hover,.account-trigger[aria-expanded="true"] { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.045); }
.account-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; display: grid; min-width: 170px; padding: 6px; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; background: #101525; box-shadow: 0 18px 48px rgba(0,0,0,.45); }
.account-menu button { padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: #cbd3e8; text-align: left; cursor: pointer; font: inherit; }
.account-menu button:hover { background: rgba(123,92,255,.13); color: white; }
.upload-drawer { position: relative; z-index: 20; display: grid; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-10px); transition: max-height .4s cubic-bezier(.2,.8,.2,1),opacity .28s ease,transform .4s cubic-bezier(.2,.8,.2,1); }
.upload-drawer.open { max-height: 280px; opacity: 1; transform: translateY(0); }
.upload-drawer .upload-card { grid-template-columns: 1fr; gap: 10px; margin: 0 8px; padding: 14px 16px; border-radius: 15px; background: rgba(13,20,32,.97); }
.upload-drawer .upload-controls { grid-template-columns: minmax(0,1fr) auto; }
.upload-drawer .upload-progress { gap: 8px; }
.control-bar { position: relative; z-index: 10; grid-template-columns: 1fr; }
.player-card { min-height: 360px; }
.player-stage { position: relative; min-height: 300px; overflow: hidden; border-radius: 16px; background: #03050a; }
.player-stage #media-player { min-height: 300px; border-radius: 0; }
.player-unlock { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 28px; border: 0; background: linear-gradient(145deg,rgba(25,31,47,.94),rgba(8,11,20,.97)); color: white; cursor: pointer; text-align: center; backdrop-filter: blur(9px); transition: opacity .28s ease,visibility .28s ease; }
.player-unlock > span { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: linear-gradient(145deg,#7b5cff,#3a78e8); box-shadow: 0 12px 36px rgba(78,91,255,.32); }
.player-unlock strong { font-size: clamp(1.15rem,3vw,1.65rem); }.player-unlock small { max-width: 440px; color: #aeb8d2; font-size: .82rem; line-height: 1.5; }
.player-stage.enabled .player-unlock { visibility: hidden; opacity: 0; pointer-events: none; }
.player-stage.locked #media-player { filter: grayscale(.75) brightness(.4); }
.profile-panel { gap: 28px; padding-top: 38px; }.profile-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; }.profile-heading h2 { margin: 8px 0 0; font-size: clamp(2rem,4vw,3.1rem); letter-spacing: -.05em; }.profile-heading p:last-child { margin-top: 9px; color: #8994b0; }
.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.settings-card { display: grid; align-content: start; gap: 16px; padding: 22px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(15,19,34,.8); }.settings-card h3 { margin: 7px 0 0; font-size: 1.35rem; }.settings-card form { display: grid; gap: 15px; }.settings-actions { flex-wrap: wrap; }
.form-success { padding: 10px 12px; border: 1px solid rgba(69,216,200,.22); border-radius: 10px; background: rgba(21,199,180,.08); color: #83e9dc; font-size: .8rem; }
.totp-qr { width: min(230px,100%); padding: 10px; border-radius: 14px; background: white; }.manual-secret { color: #9ca7c2; font-size: .78rem; line-height: 1.5; }.manual-secret code { color: #e6e9f5; word-break: break-all; }
.totp-details { display: grid; gap: 10px; }.recovery-code-list { margin: 0; padding: 15px; overflow: auto; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: #080b14; color: #e7eaff; font: 700 .86rem/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .06em; }
.recovery-intro { display: grid; gap: 18px; }.user-list { display: grid; gap: 8px; max-height: 360px; overflow: auto; }.user-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px 12px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; color: #cbd3e8; font-size: .78rem; }.user-row small { display: block; margin-top: 3px; color: #8994b0; }.user-row.inactive { opacity: .68; }.user-actions { display: flex; gap: 6px; }.user-reset-form { display: grid; grid-column: 1/-1; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 7px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.07); }.user-reset-form input { min-width: 0; }.user-reset-message { grid-column: 1/-1; margin: 0; }
.media-status.conversion_required { color: #ffcf7d; background: rgba(255,174,66,.13); }

@media (max-width:800px) { .settings-grid { grid-template-columns: 1fr; }.profile-heading { flex-direction: column; }.upload-drawer.open { max-height: 360px; }.upload-drawer .upload-controls { grid-template-columns: 1fr; } }
@media (max-width:560px) { .top-actions { gap: 4px; }.account-trigger .role { display: none; }.account-trigger { padding-inline: 8px; }.topbar .brand h1 { font-size: 1.05rem; }.player-card { min-height: 300px; }.player-stage,.player-stage #media-player { min-height: 240px; }.user-row { grid-template-columns: 1fr; }.user-actions { justify-content: flex-start; }.user-reset-form { grid-template-columns: 1fr; } }

/* v0.10 folder library, editing tools and generated thumbnails */
.library-heading-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }.secondary-button.active { color: #07110f; border-color: #65e6d8; background: #65e6d8; }
.folder-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 36px; padding: 4px 6px 12px; color: #697590; font-size: .8rem; }.folder-breadcrumbs button { padding: 3px 0; border: 0; background: none; color: #aeb8d2; cursor: pointer; }.folder-breadcrumbs button:hover { color: #67e6d9; }.folder-breadcrumbs strong { color: #eef1fb; }
.folder-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }.folder-tile { min-width: 0; padding: 11px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(16,21,37,.68); transition: border-color .2s ease,transform .2s ease; }.folder-tile:hover { border-color: rgba(101,230,216,.26); transform: translateY(-1px); }.folder-open { display: grid; width: 100%; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 11px; padding: 4px; border: 0; background: none; color: #edf1fc; text-align: left; cursor: pointer; }.folder-open strong,.folder-open small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.folder-open small { margin-top: 5px; color: #78849f; font-size: .7rem; }.folder-icon { position: relative; display: block; width: 38px; height: 28px; border-radius: 5px; background: linear-gradient(145deg,#7464e8,#5140b9); }.folder-icon::before { position: absolute; top: -5px; left: 3px; width: 17px; height: 8px; border-radius: 4px 4px 0 0; background: #8274ef; content: ""; }.folder-edit-actions { display: none; flex-wrap: wrap; gap: 10px; padding: 9px 4px 0 57px; }.folder-tile.editing .folder-edit-actions { display: flex; }
.upload-folder-label { display: flex; align-items: center; gap: 8px; color: #929db9; font-size: .72rem; white-space: nowrap; }.upload-folder-label select { min-width: 160px; height: 34px; }
.library-dialog { width: min(92vw,470px); padding: 0; border: 1px solid rgba(255,255,255,.13); border-radius: 20px; background: #111629; color: #f5f7ff; box-shadow: 0 28px 90px rgba(0,0,0,.55); }.library-dialog::backdrop { background: rgba(3,6,13,.72); backdrop-filter: blur(5px); }.library-dialog form { display: grid; gap: 18px; padding: 24px; }.library-dialog label { display: grid; gap: 8px; color: #aeb8d2; font-size: .8rem; }.dialog-heading,.dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.dialog-heading h3 { margin: 6px 0 0; font-size: 1.35rem; }.dialog-actions { justify-content: flex-end; }.icon-button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.07); color: #aeb8d2; font-size: 1.35rem; cursor: pointer; }
@media (max-width:980px) { .folder-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.upload-folder-label { align-items: stretch; flex-direction: column; }.upload-folder-label select { width: 100%; } }
@media (max-width:560px) { .library-heading { align-items: flex-start; flex-direction: column; }.library-heading-actions { justify-content: flex-start; }.folder-grid { grid-template-columns: 1fr; }.media-art { min-height: 78px; } }

/* v0.11 CoExist app shell */
.shell { display: grid; width: min(1530px,calc(100% - 28px)); grid-template-columns: 216px minmax(0,1fr); align-items: start; gap: 18px; }
.workspace-main { min-width: 0; }
.app-rail { position: sticky; top: 16px; z-index: 30; display: grid; max-height: calc(100vh - 32px); gap: 7px; padding: 13px; overflow-y: auto; border: 1px solid rgba(255,255,255,.085); border-radius: 20px; background: rgba(11,15,27,.94); box-shadow: 0 22px 64px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
.app-rail-heading { display: flex; align-items: center; gap: 8px; padding: 4px 8px 10px; color: #78849e; font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.app-rail-dot { width: 7px; height: 7px; border-radius: 50%; background: #45d8c8; box-shadow: 0 0 15px rgba(69,216,200,.65); }
.app-rail-group { display: grid; gap: 5px; margin-top: 7px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.065); }.app-rail-group > span { padding: 0 8px 5px; color: #5f6b86; font-size: .6rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.app-launcher { display: grid; width: 100%; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; padding: 8px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: #c9d0e2; text-align: left; cursor: pointer; transition: background .2s ease,border-color .2s ease,transform .2s ease; }.app-launcher:hover { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.04); transform: translateX(2px); }.app-launcher.active { border-color: rgba(101,230,216,.2); background: linear-gradient(135deg,rgba(21,199,180,.12),rgba(123,92,255,.09)); color: #f6f8ff; }.app-launcher.primary-app { grid-template-columns: 52px minmax(0,1fr); min-height: 70px; padding: 9px; }.app-launcher.primary-app .app-icon { width: 52px; height: 52px; font-size: 1rem; }
.app-icon { display: grid; width: 38px; height: 38px; flex: none; place-items: center; border-radius: 11px; background: #182039; color: white; font-size: .9rem; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }.app-icon.large { width: 74px; height: 74px; border-radius: 21px; font-size: 1.7rem; }.video-icon { background: linear-gradient(145deg,#7b5cff,#3e80ef); }.netflix-icon { background: #151515; color: #e50914; font: 950 1.25rem/1 Arial,sans-serif; }.prime-icon { background: #102b49; color: #27a7e7; font: 900 1.2rem/1 Arial,sans-serif; }.max-icon { background: linear-gradient(145deg,#33109a,#6d36e8); }.spotify-icon { background: #1ed760; color: #07170d; font-size: 1.25rem; }.sonos-icon { background: #f1f1ed; color: #111; }.home-icon { background: #18a5df; font-size: 1.25rem; }.lovense-icon { background: linear-gradient(145deg,#ff537d,#b73be5); }
.torrent-browser-icon { background: linear-gradient(145deg,#f2aa42,#dc5d34); }.torrent-icon { background: linear-gradient(145deg,#25c6ae,#157d91); font-size: 1.2rem; }.vpn-icon { background: linear-gradient(145deg,#5869e8,#352a9b); font-size: 1.2rem; }
.app-label { min-width: 0; }.app-label strong,.app-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.app-label strong { font-size: .76rem; }.app-label small { margin-top: 4px; color: #69758f; font-size: .61rem; font-weight: 650; }.app-launcher.active .app-label small { color: #92a2bd; }
.library-panel { padding-top: 26px; }.player-card + .library-heading { margin-top: 34px; }.library-heading { padding-top: 0; }
.future-app-panel { min-height: 620px; padding-top: 38px; }.future-app-hero { display: grid; max-width: 800px; justify-items: start; padding: clamp(34px,7vw,76px); border: 1px solid rgba(255,255,255,.09); border-radius: 28px; background: radial-gradient(circle at 85% 10%,rgba(123,92,255,.18),transparent 44%),rgba(14,18,33,.78); }.future-app-hero .eyebrow { margin-top: 24px; }.future-app-hero h2 { margin-top: 11px; font-size: clamp(2.5rem,7vw,5.3rem); letter-spacing: -.06em; }.future-app-hero > p:not(.eyebrow) { max-width: 650px; margin-top: 22px; color: #abb5cd; font-size: 1rem; line-height: 1.7; }.future-app-status { margin-top: 26px; padding: 8px 11px; border: 1px solid rgba(101,230,216,.18); border-radius: 999px; background: rgba(21,199,180,.08); color: #78e7dc; font-size: .67rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }.future-app-note { max-width: 800px; margin-top: 14px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: rgba(255,255,255,.025); }.future-app-note strong { font-size: .8rem; }.future-app-note p { margin-top: 7px; color: #7f8ba6; font-size: .75rem; line-height: 1.55; }
@media (max-width:1080px) { .shell { grid-template-columns: 78px minmax(0,1fr); }.app-rail { padding: 10px; }.app-rail-heading span:last-child,.app-rail-group > span,.app-label { display: none; }.app-launcher,.app-launcher.primary-app { grid-template-columns: 1fr; justify-items: center; min-height: auto; padding: 8px; }.app-launcher.primary-app .app-icon { width: 48px; height: 48px; }.app-launcher:hover { transform: translateY(-1px); } }
@media (max-width:700px) { .shell { width: min(100% - 16px,1530px); grid-template-columns: 1fr; gap: 8px; }.app-rail { position: sticky; top: 0; z-index: 80; display: flex; max-width: 100%; height: 72px; padding: 9px; overflow-x: auto; overflow-y: hidden; border-radius: 0 0 16px 16px; }.app-rail-heading,.app-rail-group > span { display: none; }.app-rail-group { display: contents; }.app-launcher,.app-launcher.primary-app { width: auto; min-width: 52px; padding: 6px; border-radius: 11px; }.app-launcher .app-icon,.app-launcher.primary-app .app-icon { width: 42px; height: 42px; }.workspace-header { padding-top: 6px; }.future-app-panel { min-height: 480px; padding-top: 18px; } }

/* v0.12 VPN-isolated torrent workspace */
.torrent-browser-panel,.torrent-panel,.vpn-panel { display: grid; gap: 18px; padding-top: 28px; }.app-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 0 5px; }.app-section-heading h2 { margin-top: 8px; font-size: clamp(2.25rem,5vw,4rem); letter-spacing: -.055em; }.app-section-heading p:last-child { max-width: 720px; margin-top: 10px; color: #8d99b4; line-height: 1.55; }.safety-badge { padding: 8px 11px; border: 1px solid rgba(255,190,92,.2); border-radius: 999px; background: rgba(255,174,66,.08); color: #ffd08a; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.browser-frame-wrap { position: relative; min-height: 680px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: #05070c; }.browser-frame-wrap iframe { display: block; width: 100%; min-height: 680px; border: 0; background: #080b14; }.browser-offline { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 28px; background: rgba(8,11,20,.94); text-align: center; }.browser-offline span { color: #8994af; }.safety-note { padding: 17px 19px; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(255,255,255,.025); }.safety-note p { margin-top: 7px; color: #8994af; font-size: .78rem; line-height: 1.55; }
.magnet-card { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: end; gap: 12px; padding: 17px; border: 1px solid rgba(69,216,200,.16); border-radius: 17px; background: rgba(13,24,33,.85); }.magnet-card .form-error { grid-column: 1/-1; }.inline-check { display: flex; align-items: center; gap: 8px; min-height: 48px; white-space: nowrap; }.inline-check input { width: 18px; min-height: 18px; }.torrent-summary { display: flex; flex-wrap: wrap; gap: 10px; }.torrent-summary > span { padding: 9px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.025); color: #7f8aa5; font-size: .74rem; }.torrent-summary strong { color: #dce3f4; }.torrent-list { display: grid; gap: 10px; }.torrent-row { display: grid; gap: 11px; padding: 16px; border: 1px solid rgba(255,255,255,.085); border-radius: 15px; background: rgba(15,19,34,.76); }.torrent-row-heading,.torrent-meta,.torrent-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; }.torrent-row-heading > div { min-width: 0; }.torrent-row-heading strong,.torrent-row-heading span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.torrent-row-heading span { margin-top: 4px; color: #69758f; font-size: .68rem; }.torrent-state { flex: none; padding: 5px 8px; border-radius: 999px; background: rgba(21,199,180,.11); color: #75e4d7 !important; font-size: .61rem !important; text-transform: uppercase; }.torrent-meta { color: #8c97b1; font-size: .71rem; }.torrent-actions { justify-content: flex-start; }.torrent-settings { margin-top: 8px; }.settings-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }.vpn-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
@media (max-width:900px) { .settings-fields,.vpn-grid { grid-template-columns: 1fr 1fr; }.browser-frame-wrap,.browser-frame-wrap iframe { min-height: 560px; } }
@media (max-width:650px) { .app-section-heading { align-items: flex-start; flex-direction: column; }.magnet-card,.settings-fields,.vpn-grid { grid-template-columns: 1fr; }.torrent-row-heading,.torrent-meta { align-items: flex-start; flex-direction: column; }.browser-frame-wrap,.browser-frame-wrap iframe { min-height: 480px; } }