/* DoisQ Studio — camada visual; sem dependências e sem etapa de build. */
:root {
  color-scheme: light;
  --white:#FFFFFF; --ground:#F7F8FA; --ink:#0A0B0D;
  --ink-2:#1B1E24; --ink-3:#2E333B;
  --txt:#0A0B0D; --dim:#555C66; --dimmer:#757D87; --faint:#98A0AA;
  --line:#E6E9EE; --line-2:#D5DAE1;
  --blue:#1F5BFF; --blue-dark:#1442C4; --blue-tint:#EEF3FF; --blue-line:#CFE0FF;
  --ok:#12996B; --ok-bright:#24C08A; --danger:#D92D20;
  --sidebar:216px; --nav:76px; --details:290px;
}
body { background:var(--ground); }
button,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button:disabled { transform:none !important; box-shadow:none !important; }
.btn,.pcbtn,.seg,.gtitle,.fname,.block-head h2,.lock-head h2,.lib-title h1,.empty h2 {
  font-family:'IBM Plex Sans',system-ui,sans-serif; letter-spacing:0; text-transform:none;
}
.btn,.iconbtn,.input,.select,.search,.pcbtn,.goto,.rem-tog { border-radius:9px; }
.btn { font-size:13px; font-weight:500; }
.btn.primary,.playbtn { background:var(--blue); color:#FFFFFF; border-color:var(--blue); }
.btn.primary:hover,.playbtn:hover { background:var(--blue-dark); border-color:var(--blue-dark); }
.btn.ink { background:#0A0B0D; color:#FFFFFF; border-color:#0A0B0D; }
.btn.ink:hover { background:#1B1E24; border-color:#1B1E24; }
.btn.tiny { font-size:12px; }
.input,.select { background-color:#FFFFFF; }
.input:focus,.search:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint); }
.logo { clip-path:none; border-radius:11px; color:#FFFFFF; width:36px; height:36px; font-size:16px; }
.avatar { border-radius:50%; color:#FFFFFF; border:3px solid #2E333B; }
*::-webkit-scrollbar-thumb { background:#CDD3DB; border-color:var(--ground); }

/* Navigation stays available while browsing a large library. */
.sidebar { position:fixed; inset:0 auto 0 0; z-index:12; width:var(--sidebar); padding:28px 16px 20px; background:#0A0B0D; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.side-brand { display:flex; gap:11px; align-items:center; text-decoration:none; color:var(--ink); padding:0 10px; margin-bottom:54px; font-size:24px; font-weight:600; letter-spacing:-1px; }
.side-brand small { display:block; margin-top:2px; color:var(--faint); font:8px 'IBM Plex Mono',monospace; letter-spacing:1.3px; }
.nav-label { margin:0 14px 15px; color:var(--faint); font:10px 'IBM Plex Mono',monospace; letter-spacing:1.6px; }
.side-links { display:flex; flex-direction:column; gap:6px; }
.nav-item { width:100%; min-height:45px; padding:11px 13px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--dimmer); display:flex; align-items:center; gap:11px; text-align:left; font:13px 'IBM Plex Sans',sans-serif; cursor:pointer; transition:background .2s,color .2s,border-color .2s; }
.nav-item > span:first-child { display:flex; }
.nav-item:hover { background:#ffffff06; color:var(--ink); }
.nav-item[aria-current=page] { color:#CFE0FF; background:#1F5BFF20; border-color:#1F5BFF40; }
.nav-count { margin-left:auto; padding:0 6px; min-width:20px; text-align:center; border-radius:5px; background:#ffffff09; font:11px/20px 'IBM Plex Mono',monospace; }
.side-bottom { margin-top:auto; }
.local-status { display:flex; align-items:center; gap:9px; margin-top:18px; padding:19px 8px 0; border-top:1px solid var(--line); }
.local-status div { min-width:0; }
.local-status strong { display:block; font-size:11px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.local-status small { display:block; font-size:9px; color:var(--faint); margin-top:3px; }
.topbar { margin-left:var(--sidebar); padding:0 36px; background:#0A0B0D; border-bottom:1px solid var(--line); gap:10px; }
.topbar .brand { display:none; }
.top-label { color:var(--dimmer); font-size:12px; }
body:not([data-view=home]) .top-label { display:none; }
.topbar .iconbtn { background:transparent; border-color:transparent; color:var(--dimmer); }
.topbar .iconbtn:hover { background:var(--white); border-color:var(--line); color:var(--ink); }
.view:not(.lock) { margin-left:var(--sidebar); }
body[data-view=lock] .sidebar { display:none; }
.crumb { color:var(--dimmer); }

/* Dashboard */
.home { padding:34px 38px 40px; gap:30px; }
.home-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.home-intro h1 { font-size:clamp(28px,2.65vw,42px); letter-spacing:-1.4px; font-weight:500; line-height:1.14; margin:12px 0; }
.home-intro h1 span { color:var(--blue); }
.home-intro h1 br { display:none; }
.home-intro p { color:var(--dimmer); font-size:13px; margin:0; }
.eyebrow { font:10px 'IBM Plex Mono',monospace; letter-spacing:1.7px; }
.home-intro .btn { background:#FFFFFF; flex-shrink:0; }
.top-row { gap:20px; }
.pc { position:relative; overflow:hidden; border:1px solid #2E333B; border-radius:16px; padding:24px; min-height:258px; gap:16px; background:radial-gradient(ellipse at 100% 0%,#1F5BFF18,transparent 65%),#0A0B0D; }
.pc-head { flex-wrap:wrap; gap:8px; }
.pc-head .eyebrow { color:#FFFFFF; }
.pc-head .mono { color:var(--dimmer); }
.pc-pill { border-radius:20px; font-size:9px; color:#a8adbc; padding:4px 9px; background:#ffffff04; border-color:#ffffff12; text-transform:none; }
.pc-pill.on { background:#24C08A0B; border-color:#24C08A30; }
.pc-big { font:500 clamp(21px,2vw,30px)/1.2 'IBM Plex Sans',sans-serif; letter-spacing:-.8px; margin-top:10px; }
.pc-description { margin:-8px 0 3px; font-size:12px; color:var(--dimmer); }
.pc-actions { gap:7px; }
.pcbtn { flex:1 1 auto; padding:0 12px; height:40px; font-size:12px; font-weight:500; border-color:#ffffff18; background:#ffffff03; }
.pcbtn.blue { background:var(--blue); border-color:var(--blue); color:#FFFFFF; }
.pcbtn.blue:hover { background:var(--blue-dark); border-color:var(--blue-dark); }
.pcbtn:disabled { color:#878a99; border-color:#ffffff0b; }
.pc-foot { color:#939aab; font-size:10.5px; }
.inbox { width:272px; border:1px solid #CFE0FF; border-radius:16px; padding:24px; gap:9px; background:radial-gradient(ellipse at 100% 0%,#1F5BFF0A,transparent 80%),#FFFFFF; transition:background .2s,border-color .2s,transform .25s; }
.inbox:hover { background-color:#EEF3FF; border-color:#1F5BFF; transform:translateY(-3px); }
.inbox-num { font:500 62px/1 'IBM Plex Sans',sans-serif; letter-spacing:-3px; }
.inbox-head { gap:8px; }
.inbox-sub { font-size:13px; color:#555C66; }
.inbox-path { color:var(--dimmer); font-size:11px; }
.inbox-sub b { font-size:10px; color:var(--dimmer); }
.inbox-cta { font:500 12px 'IBM Plex Sans',sans-serif; text-transform:none; letter-spacing:0; width:100%; justify-content:space-between; border-top:1px solid #CFE0FF; padding-top:16px; }
.inbox-cta svg { transition:transform .2s; }
.inbox:hover .inbox-cta svg { transform:translateX(4px); }
.block { gap:15px; }
.block-head h2 { font-size:17px; font-weight:500; }
.block-head h2::before { display:none; }
.block-head .n { background:#ffffff06; border:1px solid var(--line); padding:1px 7px; border-radius:6px; font-size:10px; color:var(--dimmer); }
.block-head .rule { background:transparent; }
.block-head .btn { border-color:transparent; background:transparent; color:var(--dimmer); }
.block-head .btn:hover { background:var(--white); border-color:var(--line); color:var(--ink); }
.folders.games { grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:14px; }
.fcard,.gcard { border-radius:12px; background:var(--white); overflow:hidden; will-change:auto; }
.fcard { position:relative; }
.fcard-open { display:flex; flex-direction:column; width:100%; min-width:0; border:0; padding:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.fcard-open:focus-visible { outline-offset:-3px; }
.folder-delete { position:absolute; top:7px; right:44px; z-index:4; display:grid; place-items:center; width:30px; height:30px; border:1px solid #ffffff2e; border-radius:8px; background:#0A0B0DCC; color:#FFFFFF; cursor:pointer; transition:background .18s,color .18s; }
.folder-delete:hover { background:#D92D20; color:#fff; }
.folder-delete svg { width:14px; height:14px; }
.remove-folder-option { display:flex; align-items:flex-start; gap:10px; margin:20px 0 10px; font-size:13px; }
.remove-folder-option input { margin-top:4px; accent-color:var(--danger); }
.danger-action { color:var(--danger); border-color:var(--danger); }
.danger-action:hover { background:#FFF0EE; border-color:var(--danger); }
.fcard:hover,.gcard:hover { border-color:#1F5BFF; box-shadow:0 12px 28px #0003; transform:translateY(-4px); }
.fhead { height:124px; padding:16px; background:radial-gradient(ellipse at 100% 0%,#1F5BFF20,transparent 80%),linear-gradient(140deg,#1B1E24,#0A0B0D); }
.fhead::before { width:100%; height:1px; top:auto; background:linear-gradient(90deg,transparent,#1F5BFF,transparent); }
.fhead::after { content:''; position:absolute; width:96px; height:96px; border:1px solid #ffffff0b; border-radius:24px; right:-12px; top:-12px; transform:rotate(-25deg); }
.fsig { font:600 35px/1 'Chakra Petch',sans-serif; color:#FFFFFF; opacity:.8; letter-spacing:-1px; }
.fcard.game:hover .fsig { opacity:1; }
.fbody { padding:14px; gap:7px; }
.fname { font-size:13px; font-weight:500; }
.fmeta { font-size:10px; }
.fart-set { width:30px; height:30px; border-radius:8px; }
.fcard.game:focus-within .fart-set { opacity:1; transform:none; }
.fhead.has-art::after { width:100%; height:100%; border:0; border-radius:0; transform:none; }
.folders.media { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.fcard.media { background:#FFFFFF; padding:17px; gap:13px; }
.fcard.media:hover { background:#EEF3FF; }
.mico { padding:10px; border:1px solid #ffffff09; border-radius:10px; background:#EEF3FF; }
.mico svg { width:19px; height:19px; }
.home:has(#home-empty:not(.hidden)) #home-empty { order:-1; }
.home:has(#home-empty:not(.hidden)) .home-intro { order:-2; }
#home-empty { width:100%; max-width:none; margin:0; padding:22px; background:#EEF3FF; border:1px dashed #CFE0FF; border-radius:14px; }
#home-empty .empty-ico { display:none; }
#home-empty h2 { font-size:19px; }
#home-empty p { max-width:560px; margin:auto; font-size:12px; }
#home-empty .btn { margin-top:13px; }

/* Library and editing */
.lib-head { padding:30px 36px 22px; background:#F7F8FAF5; backdrop-filter:blur(14px); }
.lib-title h1 { font-size:30px; font-weight:500; }
.groups { padding:0 36px 36px; }
.segmented { border-color:var(--line); padding:4px; border-radius:10px; background:var(--white); gap:3px; }
.seg { border:0; border-radius:6px; height:31px; font-size:12px; padding:0 14px; background:transparent; transition:background .2s,color .2s; }
.seg.on { background:#EEF3FF; color:#1442C4; }
.seg:hover { background:#ffffff09; }
.group-head { font-size:11px; letter-spacing:.7px; }
.group-head::before { width:5px; height:5px; border-radius:50%; }
.gcard.today { border-color:#CFE0FF; }
.gbody { padding:14px; }
.gtitle { font-size:13px; font-weight:500; }
.gsub { font-size:10px; }
.thumb > svg { color:#757D87; }
.thumb:not(.k-video)::before,.thumb.failed::before { display:none; }
.flag { z-index:4; }
.flag i { border-radius:5px; color:#FFFFFF; }
.triage .ibtn,.ibtn { border-radius:6px; }
.ibtn { min-height:34px; min-width:34px; }
.screen { border-radius:12px; background:#08090b; padding:0; min-height:180px; }
.screen video { border-radius:12px; }
.details { background:#FFFFFF; padding:23px; }
.details .facts dd { max-width:175px; }
.playbtn,.presets,.timeline,.progressbar,.dest { border-radius:8px; }
.presets { overflow:hidden; }
.tl-sel { background:#1F5BFF25; }
.tl-tick { background:#0A0B0D10; }
.tinput { background:var(--white); border-color:var(--line); }
.stepper { border-radius:6px; overflow:hidden; }
.nudge { color:var(--dim); }
.progressbar { height:30px; }
#progress-text { color:#fff; text-shadow:0 1px 3px #000; }
.rem-bar { background:#FFFFFF; }
.rem-foot { padding:12px 18px; }
.rem-empty { color:var(--dimmer); }

/* Login: editorial type, quiet geometric backdrop, a single primary action. */
.lock { background:#FFFFFF; overflow-y:auto; }
.lock-left { width:54%; background:radial-gradient(ellipse at 15% 100%,#1F5BFF18,transparent 70%),#0A0B0D; padding:48px; border-right:1px solid #ffffff0b; min-height:600px; }
.lock-brand .wordmark { text-transform:none; font:600 24px 'IBM Plex Sans',sans-serif; letter-spacing:-.5px; }
.lock-pitch { margin-top:auto; margin-bottom:35px; gap:24px; }
.lock-pitch h1 { font:500 clamp(36px,4.5vw,68px)/1.08 'IBM Plex Sans',sans-serif; letter-spacing:-2.8px; }
.lock-pitch h1 em { font-style:normal; color:#1F5BFF; }
.lock-pitch p { max-width:350px; color:#AEB6C0; font-size:14px; line-height:1.8; margin:0; }
.lock-bar { display:none; }
.lock-mesh.a { width:380px; height:380px; right:-130px; top:30px; border-color:#1F5BFF25; border-radius:80px; }
.lock-mesh.b { width:290px; height:290px; right:-80px; top:75px; border-color:#1F5BFF35; border-radius:65px; }
.lock-features { display:flex; gap:24px; margin-top:30px; font:9px 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:1px; color:#AEB6C0; }
.lock-right { padding:40px; }
.lock-form { max-width:340px; gap:23px; }
.lock-head { gap:10px; margin-bottom:9px; }
.lock-head h2 { font-size:28px; font-weight:500; letter-spacing:-.8px; }
.lock-head p { margin:0; font-size:13px; }
.caps { font:12px 'IBM Plex Sans',sans-serif; color:var(--dim); letter-spacing:0; text-transform:none; }
.input.tall { height:48px; font-size:14px; }
.btn.tall { text-transform:none; letter-spacing:0; font-size:14px; height:48px; }
.lock-note { font-size:10px; color:var(--faint); text-align:center; margin:0; }

.dlg { max-height:88dvh; overflow-y:auto; padding:28px; border-radius:18px; border-color:#D5DAE1; box-shadow:0 30px 100px #0009; }
.dlg::backdrop { background:#07080dbb; backdrop-filter:blur(8px); }
.dlg h3 { font:500 24px 'IBM Plex Sans',sans-serif; letter-spacing:-.5px; }
.dlg fieldset { border-radius:10px; padding:18px; }
.dlg legend { font:10px 'IBM Plex Mono',monospace; letter-spacing:1px; }
.hint { line-height:1.6; }
.toast { background:#0A0B0D; color:#FFFFFF; border:1px solid #2E333B; border-left:3px solid var(--blue); border-radius:10px; box-shadow:0 16px 60px #0008; line-height:1.5; }
.toast.err { border-left-color:var(--danger); }
.dot:not(.off) { animation:none; box-shadow:0 0 0 3px #24C08A0C; }
/* Finite entrance animations must release transform so hover can take over. */
.fcard,.gcard,.group { animation-fill-mode:backwards; animation-delay:calc(min(var(--i,0),8) * 28ms); }
.group { animation-delay:calc(min(var(--g,0),5) * 40ms); }
.thumb.failed { background:#1B1E24; }
.is-loading svg { animation:spin .8s linear infinite; }
@media (min-width:1101px) and (max-width:1300px) { .pc-actions .pcbtn { flex-basis:42%; } }
@media (max-width:1100px) {
  :root { --sidebar:190px; }
  .top-row { flex-direction:row; }
  .inbox { width:240px; }
  .pc-actions .pcbtn { flex-basis:42%; }
  .home { padding:26px; }
  .home-intro h1 br { display:block; }
  .editor { grid-template-columns:minmax(0,1fr); grid-template-rows:max-content max-content; align-content:start; overflow-y:auto; display:none; }
  .editor .details { display:flex; border-left:0; border-top:1px solid var(--line); overflow:visible; }
  .editor .stage { overflow:visible; padding:20px; display:block; }
  .editor .player-wrap { min-height:0; }
  .editor .screen { min-height:240px; flex:none; aspect-ratio:16/9; }
  .editor .details .grow { display:none; }
}
@media (max-width:820px) {
  :root { --sidebar:72px; }
  .sidebar { padding:22px 10px; }
  .side-brand { padding:0 7px; margin-bottom:38px; }
  .side-brand > span:last-child,.nav-label,.nav-item > span:not(:first-child),.local-status { display:none; }
  .nav-item { justify-content:center; padding:13px; }
  .topbar { padding:0 22px; }
  .lock-left { width:48%; padding:32px; min-height:560px; }
  .lock-pitch h1 { font-size:42px; }
  .lock-features { flex-wrap:wrap; gap:12px; }
  .lock { flex-direction:row; }
  .lock-left .wordmark { display:block; }
  .lock-right { padding:28px; }
}
@media (max-width:600px) {
  :root { --nav:62px; --sidebar:0px; }
  .sidebar { width:100%; top:auto; bottom:0; height:66px; padding:7px 12px max(7px,env(safe-area-inset-bottom)); flex-direction:row; border:0; border-top:1px solid var(--line); background:#0A0B0DF7; backdrop-filter:blur(12px); }
  .side-brand,.nav-label,.local-status { display:none; }
  .side-links { flex:3; flex-direction:row; gap:4px; }
  .side-bottom { flex:1; margin:0; }
  .side-links .nav-item,.side-bottom .nav-item { height:50px; padding:5px; gap:5px; flex-direction:column; justify-content:center; }
  .nav-item > span:nth-child(2) { display:block; font-size:9px; }
  .nav-item svg { width:17px; height:17px; }
  .view:not(.lock) { margin-bottom:66px; }
  .topbar { padding:0 16px; gap:5px; }
  .topbar .avatar { width:30px; height:30px; }
  .topbar .iconbtn { width:32px; }
  .topbar .brand { display:flex; margin-right:8px; }
  .topbar .brand .logo { width:28px; height:28px; font-size:12px; border-radius:8px; }
  .top-label { font-size:10px; }
  #btn-lock { display:grid; }
  .home { padding:24px 16px; gap:25px; }
  .home-intro { align-items:flex-start; gap:12px; }
  .home-intro h1 { font-size:29px; letter-spacing:-1px; }
  .home-intro p { font-size:11px; max-width:235px; }
  .home-intro .btn { padding:0 10px; height:34px; font-size:10px; }
  .home-intro .btn svg { display:none; }
  .home-intro .eyebrow { font-size:8px; letter-spacing:1px; }
  .top-row { flex-direction:column; gap:14px; }
  .pc { min-height:240px; padding:20px; }
  .pc-big { font-size:24px; }
  .inbox { width:100%; padding:20px; display:grid; grid-template-columns:70px 1fr; gap:10px 16px; }
  .inbox-head,.inbox-cta { grid-column:1/-1; }
  .inbox-num { font-size:50px; grid-row:2; }
  .inbox-sub { grid-column:2; align-self:center; }
  .inbox > .grow { display:none; }
  .folders.games { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .folders.media { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .fcard.media { padding:12px; gap:9px; }
  .fcard.media .fname { font-size:12px; }
  .mico { padding:7px; }
  .mico svg { width:16px; }
  .fmeta { font-size:9px; }
  .fart-set { opacity:1; transform:none; }
  .block-head h2 { font-size:16px; }
  .lib-head { padding:22px 16px 16px; }
  .lib-title { flex-wrap:wrap; gap:8px; }
  .lib-title h1 { font-size:26px; }
  .groups { padding:0 16px 26px; }
  .grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
  .sortwrap { width:100%; justify-content:space-between; }
  .lib-tools > .grow { display:none; }
  .search.big { width:100%; }
  .editor .stage { padding:14px; }
  .transport { flex-wrap:wrap; gap:9px; }
  .preset { padding:0 9px; }
  .cut-actions { flex-wrap:wrap; }
  .cut-actions .btn { flex:1; font-size:11px; padding:0 10px; }
  .lock { flex-direction:column; }
  .lock-left { width:100%; min-height:0; padding:24px; }
  .lock-brand { margin-bottom:30px; }
  .lock-pitch { margin:0; gap:14px; }
  .lock-pitch h1 { font-size:38px; letter-spacing:-1.5px; }
  .lock-pitch p,.lock-features { display:none; }
  .lock-right { padding:30px 24px 40px; }
  .lock-form { max-width:none; gap:18px; }
  .lock-head h2 { font-size:24px; }
  .dlg { padding:20px; max-height:85dvh; }
  .dlg .row { flex-wrap:wrap; }
  .dlg .row .input { min-width:150px; }
  .toast { bottom:82px; width:max-content; max-width:90vw; font-size:12px; }
  body[data-view=lock] .toast { bottom:20px; }
  .rem-bar { padding:10px; }
}
@media (hover:none) { .fart-set { opacity:1; transform:none; } }
.fcard.media { padding:0; gap:0; }
.fcard.media .fcard-open { flex-direction:row; align-items:center; gap:13px; padding:17px; flex:1; }
.fcard.media .folder-delete { position:static; flex-shrink:0; margin-right:10px; background:var(--white); border-color:var(--line); color:var(--dimmer); }
.fcard.media .folder-delete:hover { background:#FFF0EE; border-color:var(--danger); color:var(--danger); }
@media (max-width:600px) {
  .fcard.media .fcard-open { gap:7px; padding:12px 7px; }
  .fcard.media .folder-delete { width:28px; margin-right:6px; }
  .fcard.media .mico { padding:5px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Paleta original: branco dominante, preto nos painéis, azul nas ações. */
.sidebar,.topbar { --ink:#FFFFFF; --dim:#C9CDD3; --dimmer:#AEB6C0; --faint:#98A0AA; --line:#262A31; --white:#1B1E24; color:#FFFFFF; }
.pc { --dimmer:#AEB6C0; }
.seg:hover { background:var(--ground); }
.mico { border-color:var(--blue-line); }
.lock-note { color:var(--dimmer); }
.thumb.k-text > svg,.thumb.k-file > svg { color:var(--dimmer); }