/* ==========================================================================
   Unbox OS — front runtime styles (DS v2.3)
   Runtime theme vars (--acc,--txt,--win,...) are (re)written by os.js in
   applyTheme(); the light values below are the no-flash first-paint defaults.
   ========================================================================== */

:root {
  --acc:#f97316; --acc2:#ea650b; --danger:#ef4444; --success:#22c55e;
  --txt:#111318; --sub:#778092; --bd:#e0e5ee; --bd2:#cfd7e6;
  --bg1:#ffffff; --bg2:#ffffff; --win:rgba(255,255,255,.92); --win2:#f7f8fb;
  --bar:rgba(255,255,255,.72); --menu:rgba(255,255,255,.92);
  --hover:rgba(17,19,24,.05); --field:#ffffff; --inpb:#d4dbe8;
  --og:rgba(249,115,22,.10); --og2:rgba(249,115,22,.18);
  --title:rgba(249,115,22,.07);
  --sh:0 20px 50px rgba(15,23,42,.16); --shsm:0 3px 12px rgba(15,23,42,.07);
  --deskLabel:#1b2230; --deskShadow:0 1px 2px rgba(255,255,255,.6);
  --wall:radial-gradient(1100px 700px at 15% 0%, rgba(249,115,22,.10), transparent 55%),
         radial-gradient(900px 700px at 100% 100%, rgba(249,115,22,.06), transparent 55%),
         linear-gradient(160deg,#f4f6fb,#e7ecf4);
  --font-display:'Sora',system-ui,sans-serif;
  --font-text:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}

* { box-sizing:border-box; }
html.uos-html, body.uos-body { margin:0; padding:0; height:100%; background:#e9edf5; overflow:hidden; }
body.uos-body { font-family:var(--font-display); color:var(--txt); -webkit-font-smoothing:antialiased; }

/* Scrollbar padrão Unbox (DS §20) */
* { scrollbar-width:thin; scrollbar-color:var(--acc) transparent; }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--acc); border-radius:999px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--acc2); background-clip:content-box; }
::-webkit-scrollbar-corner { background:transparent; }

a { color:var(--acc); text-decoration:none; }
a:hover { color:var(--acc2); }

/* Visible keyboard focus (a11y) */
:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.uos-ico:focus-visible, .uos-start__tile:focus-visible, .uos-sb-tile:focus-visible, .uos-dock__tile:focus-visible { outline:2px solid var(--acc); outline-offset:2px; border-radius:10px; }
.uos-input:focus-visible, .uos-textarea:focus-visible, .uos-select:focus-visible { outline:none; }

/* Animations */
@keyframes uspin { to { transform:rotate(360deg); } }
@keyframes ublink { 50% { opacity:0; } }
@keyframes upop { from { opacity:0; transform:translateY(8px) scale(.99); } to { opacity:1; transform:none; } }
@keyframes uappin { from { opacity:0; transform:scale(.965); } to { opacity:1; transform:none; } }
html.no-anim *, html.no-anim *::before, html.no-anim *::after { animation:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce) { * { animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* Root canvas */
#uos-root { position:relative; width:100vw; height:100vh; overflow:hidden; }
.uos-desk-canvas { position:absolute; inset:0; z-index:0; background:var(--wall); }
.uos-watermark { position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.uos-watermark img { max-width:min(560px,42vw); max-height:52%; object-fit:contain; display:block; }

/* Boot splash */
.uos-boot { position:absolute; inset:0; z-index:5000; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:24px;
  background-color:#0c0f14; background-image:radial-gradient(1200px 600px at 50% -10%, rgba(249,115,22,.18), transparent 60%); background-size:cover; background-position:center; }
.uos-boot__logo { display:flex; align-items:center; justify-content:center; }
.uos-boot__logo img { max-width:min(360px,62vw); max-height:34vh; object-fit:contain; display:block; }
.uos-boot__title { font-size:12px; font-weight:700; letter-spacing:.42em; text-transform:uppercase; color:#f5f6fa; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.uos-boot__text { font-size:13px; color:#9aa0ad; max-width:520px; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.uos-boot__spin { width:34px; height:34px; margin-top:6px; border-radius:50%; border:3px solid rgba(249,115,22,.25); border-top-color:var(--acc); animation:uspin .9s linear infinite; }
/* Barra de progresso 3D (escura, enche com laranja em relevo) */
.uos-boot__bar { position:relative; width:min(300px,68vw); height:14px; margin-top:12px; border-radius:999px; overflow:hidden;
  background:linear-gradient(180deg,#05070a,#141922); border:1px solid rgba(255,255,255,.05);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.85), inset 0 -1px 1px rgba(255,255,255,.05), 0 1px 0 rgba(255,255,255,.04); }
.uos-boot__fill { position:relative; display:block; width:100%; height:100%; border-radius:999px;
  background:linear-gradient(180deg,#ffc078 0%, var(--acc) 42%, #d1560b 78%, #a8440a 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55), inset 0 -3px 5px rgba(0,0,0,.35), 0 0 14px rgba(249,115,22,.65);
  animation:uload 2.2s cubic-bezier(.32,.72,.36,1) both; }
/* Brilho superior (efeito 3D "gloss") sobre o preenchimento */
.uos-boot__fill::after { content:''; position:absolute; left:2px; right:2px; top:1px; height:45%; border-radius:999px 999px 60% 60%;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0)); pointer-events:none; }
@keyframes uload { from { width:0; } to { width:100%; } }
.uos-boot__label { font-weight:700; letter-spacing:.5px; color:var(--txt); }
/* Server-rendered institutional content (SEO / no-JS). Visually hidden for JS
   visitors — the app owns the viewport — but present in the DOM for crawlers.
   Revealed by the <noscript> style in shell.php; removed once the app boots. */
.uos-ssr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.uos-booted .uos-ssr { display:none !important; }
.uos-ssr h1, .uos-ssr h2 { font-family:var(--font-display); }
.uos-ssr section { margin:0 0 22px; }
.uos-ssr a { color:var(--acc); }

/* ---- Desktop icons ----
   Grade invisível: cada célula (.uos-ico) tem largura e ALTURA fixas, então o
   flow em colunas (flex-wrap) alinha tudo numa grade regular. O rótulo é limitado
   a 2 linhas (line-clamp) para não quebrar a uniformidade. */
.uos-desktop { position:absolute; inset:0 0 54px 0; z-index:5; padding:18px 12px; display:flex; flex-direction:column; flex-wrap:wrap; align-content:flex-start; gap:6px; }
.uos-ico { width:96px; height:108px; padding:10px 6px 8px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:8px;
  border-radius:12px; border:1px solid transparent; cursor:default; user-select:none; transition:background .12s ease, border-color .12s ease; }
.uos-ico:hover { background:var(--hover); }
.uos-ico.sel { border-color:var(--og2); background:var(--og); }
/* Minimalista (estilo Windows): sem moldura — só o ícone, com sombra sutil. */
.uos-ico__glyph { width:50px; height:50px; flex:none; display:flex; align-items:center; justify-content:center; color:var(--acc);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.4)); }
/* Rótulo: no MÁXIMO 2 linhas; reticências só quando passa de 2 linhas, sempre
   na ÚLTIMA linha (comportamento nativo do line-clamp). overflow-wrap quebra
   palavras longas só quando necessário (sem quebras estranhas do word-break). */
.uos-ico__label { width:100%; font-size:12px; font-weight:600; text-align:center; line-height:1.25; color:var(--deskLabel); text-shadow:var(--deskShadow);
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:break-word; }

/* Emoji colorido (estilo Windows) — usado em todos os ícones de app/conteúdo
   via setGlyph(). A cor vem da fonte de emoji; o tamanho é definido inline. */
.is-emoji { font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif; line-height:1;
  display:flex; align-items:center; justify-content:center; }

/* Ícones ricos (SVG multicolor com identidade própria) — não herdam a cor do
   contexto; apenas centralizam o SVG dentro do slot. */
.is-rich { display:flex; align-items:center; justify-content:center; line-height:0; }
.is-rich svg { display:block; }

/* Arte própria em PNG (ICON_IMG) — o tamanho vem inline do setGlyph; o
   max-width/height impede estourar slots menores (título da janela, barra). */
.is-img { display:flex; align-items:center; justify-content:center; line-height:0; }
.is-img img { display:block; max-width:100%; max-height:100%; object-fit:contain; }

/* ---- Windows ---- */
.uos-win { position:absolute; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--bd); border-radius:12px;
  background:var(--win); -webkit-backdrop-filter:blur(36px) saturate(1.5); backdrop-filter:blur(36px) saturate(1.5); box-shadow:var(--sh); }
.uos-win.is-new { animation:uappin .16s ease; }
.uos-win__bar { height:46px; flex:none; display:flex; align-items:center; gap:9px; padding:0 6px 0 12px; border-bottom:1px solid var(--bd); background:var(--title); cursor:grab; }
.uos-win__bar:active { cursor:grabbing; }
.uos-win__ico { width:16px; height:16px; color:var(--acc); }
.uos-win__title { flex:1; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uos-win__btn { width:50px; height:38px; border:none; background:transparent; color:inherit; display:flex; align-items:center; justify-content:center; border-radius:6px; cursor:pointer; }
.uos-win__btn:hover { background:var(--hover); }
.uos-win__btn.close:hover { background:var(--danger); color:#fff; }
.uos-win__body { flex:1; overflow:auto; }
html.os-touch .uos-win__btn.max { display:none; }

/* Interruptor (toggle) — usado no app Ajustes */
.uos-switch { position:relative; display:inline-flex; flex:none; cursor:pointer; }
.uos-switch__input { position:absolute; opacity:0; width:0; height:0; }
.uos-switch__track { width:44px; height:24px; border-radius:999px; background:var(--bd2,#cfd7e6); border:1px solid var(--bd); transition:background .16s ease; display:block; }
.uos-switch__thumb { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .16s ease; }
.uos-switch__input:checked + .uos-switch__track { background:var(--acc); border-color:var(--acc); }
.uos-switch__input:checked + .uos-switch__track .uos-switch__thumb { transform:translateX(20px); }
.uos-switch__input:focus-visible + .uos-switch__track { box-shadow:0 0 0 3px rgba(249,115,22,.35); }
html.no-anim .uos-switch__track, html.no-anim .uos-switch__thumb { transition:none; }

/* ---- Taskbar ---- */
.uos-taskbar { position:absolute; left:0; right:0; bottom:0; height:54px; z-index:900; display:flex; align-items:center; gap:10px; padding:0 12px;
  background:var(--bar); -webkit-backdrop-filter:blur(34px) saturate(1.6); backdrop-filter:blur(34px) saturate(1.6); border-top:1px solid var(--bd); }
/* Widget de clima (canto inferior esquerdo, por IP — estilo Windows) */
.uos-weather { display:flex; align-items:center; gap:9px; min-width:150px; max-width:230px; height:40px; padding:0 6px; color:var(--txt); }
.uos-weather__ico { display:flex; flex:none; color:var(--sub); }
.uos-weather__ico.is-clear { color:var(--acc); }
.uos-weather__txt { line-height:1.15; min-width:0; }
.uos-weather__temp { font-family:var(--font-display); font-size:13.5px; font-weight:600; }
.uos-weather__txt small { display:block; color:var(--sub); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uos-task-apps { display:flex; align-items:center; gap:4px; margin:0 auto; }
.uos-task-btn { position:relative; width:42px; height:40px; border:none; background:transparent; border-radius:9px; color:var(--acc); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.uos-task-btn:hover { background:var(--hover); }
.uos-task-btn.active { background:var(--hover); }
.uos-task-btn .dot { position:absolute; bottom:3px; left:50%; transform:translateX(-50%); height:2.5px; border-radius:999px; background:var(--acc); transition:width .2s; }
.uos-task-btn__img { width:24px; height:24px; object-fit:contain; display:block; }
/* Badge de mensagens novas do chat (barra de tarefas e dock). */
.uos-badge { position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  background:var(--danger); color:#fff; font-size:10px; font-weight:700; line-height:16px; text-align:center;
  font-family:var(--font-display); pointer-events:none; }
.uos-tray { display:flex; align-items:center; gap:12px; }
.uos-tray__clock { display:block; text-align:right; font-size:11.5px; line-height:1.2; color:var(--txt); font-family:var(--font-display);
  border:none; background:transparent; padding:5px 8px; border-radius:8px; cursor:pointer; }
.uos-tray__clock:hover { background:var(--hover); }
.uos-tray__clock.active { background:var(--hover); }
.uos-tray__clock small { display:block; color:var(--sub); font-size:10.5px; }
.uos-iconbtn { width:32px; height:32px; border:none; background:transparent; border-radius:8px; color:var(--txt); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.uos-iconbtn:hover { background:var(--hover); color:var(--acc); }

/* Botão de cookies na bandeja — destaque (tom laranja) + âncora do balão */
.uos-tray__cookie { position:relative; color:var(--acc); background:var(--og); border:1px solid var(--og2); }
.uos-tray__cookie:hover { background:var(--og2); color:var(--acc); }
/* Balão pós-consentimento "Preferências de cookies" (some sozinho) */
.uos-cookie-tip { position:absolute; bottom:calc(100% + 11px); left:50%; transform:translateX(-50%); white-space:nowrap;
  padding:7px 12px; border-radius:9px; background:var(--acc); color:#fff; font-family:var(--font-text); font-size:12px; font-weight:600;
  box-shadow:0 10px 26px rgba(249,115,22,.45); pointer-events:none; z-index:1000; animation:ucktip 4.2s ease forwards; }
.uos-cookie-tip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--acc); }
@keyframes ucktip {
  0% { opacity:0; transform:translateX(-50%) translateY(6px); }
  10% { opacity:1; transform:translateX(-50%) translateY(0); }
  85% { opacity:1; transform:translateX(-50%) translateY(0); }
  100% { opacity:0; transform:translateX(-50%) translateY(-4px); }
}
/* Cookies vivem na bandeja (desktop) e como ícone no springboard (toque):
   o FAB flutuante do unbox-lgpd fica escondido nos dois casos. */
#unbox-lgpd-fab { display:none !important; }

/* Start menu */
.uos-start { position:absolute; left:50%; bottom:66px; transform:translateX(-50%); width:600px; max-width:calc(100vw - 24px); z-index:950; padding:18px; border-radius:14px;
  background:var(--menu); -webkit-backdrop-filter:blur(46px) saturate(1.5); backdrop-filter:blur(46px) saturate(1.5); border:1px solid var(--bd); box-shadow:var(--sh); }
.uos-start.is-new { animation:upop .18s ease; }
.uos-start input { width:100%; height:38px; padding:0 14px; border-radius:9px; border:1px solid var(--inpb); background:var(--field); color:var(--txt); font-family:var(--font-text); font-size:14px; outline:none; }
.uos-start__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; }
.uos-start__tile { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 8px; border-radius:11px; border:1px solid transparent; cursor:pointer; color:var(--txt); }
.uos-start__tile:hover { background:var(--hover); border-color:var(--bd); }
.uos-start__tile .g { width:26px; height:26px; color:var(--acc); }
.uos-start__tile span { font-size:12px; font-weight:600; text-align:center; }
.uos-start__empty { grid-column:1/-1; padding:26px 8px; text-align:center; font-family:var(--font-text); font-size:13px; color:var(--sub); }
.uos-start__foot { display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:12px; border-top:1px solid var(--bd); font-size:11px; color:var(--sub); }
.uos-start__foot img { height:16px; width:auto; }

/* Calendário (flyout do relógio, estilo Windows) */
.uos-cal { position:absolute; right:12px; bottom:66px; width:340px; max-width:calc(100vw - 24px); z-index:950; padding:16px; border-radius:14px;
  background:var(--menu); -webkit-backdrop-filter:blur(46px) saturate(1.5); backdrop-filter:blur(46px) saturate(1.5); border:1px solid var(--bd); box-shadow:var(--sh); }
.uos-cal.is-new { animation:ucalin .14s ease; }
@keyframes ucalin { from { opacity:0; } to { opacity:1; } }
.uos-cal__head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:12px; margin-bottom:8px; border-bottom:1px solid var(--bd); }
.uos-cal__today { font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--txt); }
.uos-cal__nav { display:flex; align-items:center; justify-content:center; border:none; background:transparent; color:var(--sub); border-radius:8px; cursor:pointer; }
.uos-cal__nav:hover { background:var(--hover); color:var(--acc); }
.uos-cal__bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.uos-cal__month { font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--txt); }
.uos-cal__navs { display:flex; align-items:center; gap:2px; }
.uos-cal__nav { width:30px; height:30px; }
.uos-cal__week { display:grid; grid-template-columns:repeat(7,1fr); margin:6px 0 2px; }
.uos-cal__week span { text-align:center; font-family:var(--font-text); font-size:12px; font-weight:600; color:var(--sub); }
.uos-cal__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.uos-cal__day { display:grid; place-items:center; aspect-ratio:1; border-radius:50%; font-family:var(--font-text); font-size:13px; color:var(--txt); cursor:default; }
.uos-cal__day.out { color:var(--sub); opacity:.5; }
.uos-cal__day.today { background:var(--acc); color:#fff; font-weight:700; box-shadow:0 4px 12px rgba(249,115,22,.4); }

/* Support FAB */

/* Support modal (DS §15) */
.uos-modal__backdrop { position:absolute; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(8,10,16,.42); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.uos-modal__backdrop.is-new { animation:upop .16s ease; }
.uos-modal__card { position:relative; display:flex; flex-direction:column; width:560px; max-width:100%; max-height:calc(100vh - 48px); overflow:hidden;
  border-radius:14px; border:1px solid var(--bd); background:var(--win); -webkit-backdrop-filter:blur(40px) saturate(1.5); backdrop-filter:blur(40px) saturate(1.5);
  box-shadow:var(--sh); }
.uos-modal__backdrop.is-new .uos-modal__card { animation:uappin .16s ease; }
.uos-modal__head { display:flex; align-items:center; gap:11px; padding:16px 14px 14px 18px; border-bottom:1px solid var(--bd); background:var(--title); }
.uos-modal__ico { width:34px; height:34px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:9px; background:var(--og); color:var(--acc); }
.uos-modal__x { width:32px; height:32px; flex:none; border:none; background:transparent; color:var(--sub); border-radius:7px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.uos-modal__x:hover { background:var(--danger); color:#fff; }
.uos-modal__body { flex:1; overflow:auto; padding:20px 18px; }
.uos-modal__foot { display:flex; align-items:center; gap:10px; padding:14px 18px; border-top:1px solid var(--bd); background:var(--win2); }
.uos-modal__wa { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-text); font-size:12.5px; font-weight:600; color:var(--acc); }
.uos-modal__wa span:first-child { display:inline-flex; }

/* Print dropzone */
.uos-drop { position:relative; display:flex; align-items:center; gap:9px; min-height:48px; padding:11px 13px; border-radius:8px; border:1px dashed var(--inpb); background:var(--field); color:var(--sub); font-family:var(--font-text); font-size:13px; cursor:pointer; }
.uos-drop:hover { border-color:var(--acc); color:var(--acc); }
.uos-drop__ico { display:inline-flex; color:var(--acc); }
.uos-drop.has { color:var(--txt); border-style:solid; padding-right:40px; }
.uos-drop__thumb { width:40px; height:40px; flex:none; border-radius:6px; object-fit:cover; border:1px solid var(--bd); }
.uos-drop__name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uos-drop__rm { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:24px; height:24px; border:none; background:transparent; color:var(--sub); border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.uos-drop__rm:hover { background:var(--danger); color:#fff; }

/* Context menu */
.uos-ctx { position:absolute; z-index:2000; width:222px; padding:6px; border-radius:11px; background:var(--menu); -webkit-backdrop-filter:blur(40px); backdrop-filter:blur(40px); border:1px solid var(--bd); box-shadow:var(--sh); }
.uos-ctx.is-new { animation:upop .14s ease; }
.uos-ctx__item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:13px; cursor:pointer; color:var(--txt); }
.uos-ctx__item:hover { background:var(--hover); color:var(--acc); }
.uos-ctx__item .g { width:16px; height:16px; color:var(--acc); }
.uos-ctx__sep { height:1px; margin:5px 8px; background:var(--bd); }

/* Sticky notes */
.uos-notes { position:absolute; inset:0; z-index:40; pointer-events:none; }
.uos-note { position:absolute; width:236px; min-height:196px; border-radius:10px; box-shadow:0 10px 26px rgba(0,0,0,.18); pointer-events:auto; display:flex; flex-direction:column; overflow:hidden; }
.uos-note__head { height:40px; flex:none; display:flex; align-items:center; gap:8px; padding:0 8px; cursor:grab; background:rgba(0,0,0,.05); }
.uos-note__dot { width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.2); cursor:pointer; }
.uos-note__sp { flex:1; }
.uos-note__btn { width:30px; height:30px; border:none; background:rgba(0,0,0,.06); border-radius:8px; cursor:pointer; color:#1a1a1a;
  display:flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease; }
.uos-note__btn:hover { background:#f97316; color:#fff; }
.uos-note__btn:focus-visible { outline:2px solid #f97316; outline-offset:2px; }
.uos-note__body { flex:1; padding:10px 12px; font-family:var(--font-text); font-size:15px; line-height:1.5; color:#1a1a1a; outline:none; overflow:auto; }

/* ---- Common app content ---- */
.uos-app-pad { padding:26px 30px; }
.uos-h { font-family:var(--font-display); font-weight:700; letter-spacing:-.3px; }
.uos-sub { color:var(--sub); font-family:var(--font-text); }
.uos-prose { font-family:var(--font-text); font-size:14.5px; line-height:1.75; color:var(--txt); }
.uos-prose p { margin:0 0 15px; }
.uos-prose blockquote { margin:0; padding:16px 18px; border-left:3px solid var(--acc); background:var(--og); border-radius:0 10px 10px 0; }
.uos-btn { font-family:var(--font-display); font-size:13px; font-weight:700; padding:11px 18px; border-radius:8px; border:1px solid var(--acc); background:var(--acc); color:#fff; cursor:pointer; }
.uos-btn:hover { background:var(--acc2); border-color:var(--acc2); }
.uos-btn--ghost { background:var(--bg1); color:var(--txt); border:1px solid var(--bd2); }
.uos-btn--ghost:hover { border-color:var(--acc); color:var(--acc); background:var(--bg1); }
.uos-field { display:flex; flex-direction:column; gap:6px; }
.uos-field > span { font-size:12px; color:var(--sub); }
.uos-field .req { color:var(--acc); }
.uos-input, .uos-textarea, .uos-select { font-family:var(--font-text); font-size:14px; padding:10px 13px; border-radius:8px; border:1px solid var(--inpb); background:var(--field); color:var(--txt); outline:none; width:100%; }
.uos-input:focus, .uos-textarea:focus, .uos-select:focus { border-color:rgba(249,115,22,.55); box-shadow:0 0 0 3px rgba(249,115,22,.12); }
.uos-textarea { min-height:110px; resize:vertical; line-height:1.6; }
.uos-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.uos-toast { position:absolute; right:26px; bottom:22px; display:flex; align-items:center; gap:10px; padding:13px 18px; border-radius:10px; background:var(--success); color:#fff; font-size:13px; box-shadow:0 12px 30px rgba(0,0,0,.28); animation:upop .25s ease; }
.uos-card { background:var(--bg2); border:1px solid var(--bd); border-radius:12px; box-shadow:var(--shsm); }
.uos-cards { display:grid; gap:14px; }

/* Portfolio explorer */
.uos-explorer { flex:1; overflow:hidden; display:flex; }
.uos-explorer__grid { flex:1; min-width:0; overflow:auto; padding:22px 24px; }
.uos-explorer__grid .g { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; align-content:start; }
.uos-folder { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 8px; border-radius:10px; border:1px solid transparent; cursor:default; text-align:center; }
.uos-folder:hover { background:var(--hover); border-color:var(--bd); }
.uos-folder.sel { background:var(--og); border-color:var(--og2); }
.uos-folder__glyph { width:58px; height:48px; color:var(--acc); }
.uos-side { width:300px; flex:none; border-left:1px solid var(--bd); overflow:auto; padding:24px 22px 26px; }
.uos-crumbs { display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:var(--field); border:1px solid var(--bd); border-radius:8px; font-size:12.5px; color:var(--sub); }

/* Terminal */
.uos-term { flex:1; overflow:auto; background:#0c0c0e; padding:20px 24px; font-family:var(--font-mono); font-size:13px; line-height:1.7; color:#e6e6ec; }
.uos-term .cmd { color:var(--acc); }
.uos-term .out { margin:2px 0 12px; color:#c8c8d8; white-space:pre-wrap; }
.uos-term .cursor { display:inline-block; width:8px; height:15px; background:var(--acc); vertical-align:middle; animation:ublink 1s step-end infinite; }

/* Chat Unbox (estilo mensageiro: coluna de avatares + conversa + composer) */
.uos-chat { position:relative; display:flex; height:100%; --chatfs:14px; }

/* Coluna esquerda: avatar da Unbox (topo) e do visitante (base). */
.uos-chat__rail { width:152px; flex:none; display:flex; flex-direction:column; justify-content:space-between;
  align-items:center; padding:18px 0; border-right:1px solid var(--bd); }
.uos-chat__av { width:104px; height:104px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--win2); border:2px solid var(--bd2); }
.uos-chat__av img { width:100%; height:100%; object-fit:cover; display:block; }
/* Avatar do visitante + atalho para trocar a imagem durante a conversa. */
.uos-chat__mewrap { display:flex; flex-direction:column; align-items:center; gap:6px; }
.uos-chat__avchange { border:0; background:none; padding:0; cursor:pointer; font-family:var(--font-text);
  font-size:11px; line-height:1.2; color:var(--sub); text-decoration:underline; text-underline-offset:2px; }
.uos-chat__avchange:hover { color:var(--acc); }
/* Painel compacto da troca de imagem (reaproveita a camada do portão). */
.uos-chat__gate.is-compact { justify-content:center; }
.uos-chat__avacts { display:flex; gap:10px; align-items:center; margin-top:16px; }
/* Dica sob o campo (por que pedimos o e-mail) e aviso do fechamento sem e-mail. */
.uos-chat__hint { display:block; margin-top:4px; font-size:11.5px; line-height:1.4; color:var(--sub); }
.uos-chat__warn { max-width:520px; margin:0 0 4px; font-size:13px; line-height:1.5; color:var(--txt);
  background:var(--og); border:1px solid var(--og2); border-radius:9px; padding:10px 12px; }
.uos-chat__avcancel { border:1px solid var(--bd2); background:transparent; color:var(--txt); cursor:pointer;
  border-radius:10px; padding:0 16px; height:40px; font-family:var(--font-display); font-size:13px; }
.uos-chat__avcancel:hover { border-color:var(--acc); color:var(--acc); }
.uos-chat__av.is-brand { border-color:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.14); background:#1a1a1d; padding:3px; }
.uos-chat__av.is-brand img { border-radius:10px; }
.uos-chat__av.is-me { font-size:44px; line-height:1; }

/* Coluna direita */
.uos-chat__main { flex:1; min-width:0; display:flex; flex-direction:column; }
.uos-chat__head { flex:none; padding:18px 20px 12px; }
.uos-chat__id { display:flex; align-items:center; gap:10px; }
.uos-chat__name { font-family:var(--font-display); font-size:24px; font-weight:800; color:var(--txt); letter-spacing:-.02em; }
.uos-chat__pill { display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 10px; border-radius:999px;
  font-size:12px; font-weight:600; color:#22c55e; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.35); }
.uos-chat__pill i { width:7px; height:7px; border-radius:50%; background:#22c55e; }
/* Presença do atendimento (Central de Atendimento do Painel). */
.uos-chat__pill.is-away { color:#f59e0b; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35); }
.uos-chat__pill.is-away i { background:#f59e0b; }
.uos-chat__pill.is-offline { color:var(--sub); background:var(--hover); border-color:var(--bd2); }
.uos-chat__pill.is-offline i { background:var(--sub); }
.uos-chat__sub { margin-top:5px; font-size:13px; color:var(--sub); }

.uos-chat__msgs { flex:1; overflow:auto; padding:4px 16px 10px 20px; display:flex; flex-direction:column; gap:14px; }
.uos-chat__who { font-size:12.5px; font-weight:700; margin-bottom:5px; }
.uos-chat__msg.bot .uos-chat__who { color:var(--acc); }
.uos-chat__msg.me .uos-chat__who { color:var(--sub); }
.uos-bubble { display:inline-block; max-width:100%; padding:11px 15px; border-radius:9px;
  font-family:var(--font-text); font-size:var(--chatfs); line-height:1.55; color:var(--txt); background:var(--win2); }
.uos-bubble.bot { border:1px solid rgba(249,115,22,.55); }
.uos-bubble.me { border:1px solid var(--bd2); }
/* Atendente humano: mesma cor de remetente do assistente (--acc), mas a bolha
   é sólida/preenchida — o bot fica tracejado e apagado. */
.uos-chat__msg.op .uos-chat__who { color:var(--acc); }
.uos-bubble.op { border:1px solid var(--acc); background:var(--og); }
.uos-bubble.bot { border-style:dashed; }
.uos-chat__notice { align-self:center; max-width:92%; text-align:center; font-size:12.5px; line-height:1.5;
  color:var(--sub); background:var(--hover); border:1px dashed var(--bd2); border-radius:9px; padding:8px 12px; }
/* "digitando…" — 3 pontinhos; para de animar com movimento reduzido. */
.uos-chat__typing { display:flex; align-items:center; gap:4px; font-size:12px; color:var(--sub); }
.uos-chat__typing i { width:5px; height:5px; border-radius:50%; background:var(--sub); animation:uostyping 1.1s infinite; }
.uos-chat__typing i:nth-child(2) { animation-delay:.15s; }
.uos-chat__typing i:nth-child(3) { animation-delay:.3s; }
@keyframes uostyping { 0%,60%,100% { opacity:.25; } 30% { opacity:1; } }
html.no-anim .uos-chat__typing i { animation:none; }
@media (prefers-reduced-motion: reduce) { .uos-chat__typing i { animation:none; } }

.uos-chat__chips { display:flex; flex-wrap:wrap; gap:6px; padding:0 20px 10px; }
.uos-chip { font-size:12px; padding:6px 11px; border-radius:999px; border:1px solid var(--bd2); background:transparent; color:var(--txt); cursor:pointer; }
.uos-chip:hover { border-color:var(--acc); color:var(--acc); }

/* Barra de formatação */
.uos-chat__tools { flex:none; display:flex; align-items:center; gap:6px; padding:10px 16px 0 20px; }
.uos-chat__tools .sp { flex:1; }
.uos-chat__tool { min-width:30px; height:30px; padding:0 7px; border-radius:7px; border:1px solid var(--bd);
  background:var(--field); color:var(--txt); font-size:14px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-text); }
.uos-chat__tool:hover { border-color:var(--acc); color:var(--acc); }
.uos-chat__tool.is-on { border-color:var(--acc); color:var(--acc); background:var(--og); }
.uos-chat__tool.b { font-weight:800; }
.uos-chat__tool.i { font-style:italic; }
.uos-chat__tool.u { text-decoration:underline; }

/* Seletor de emoji (botão único com seta) */
.uos-chat__pickwrap { position:relative; display:flex; margin-left:4px; }
.uos-chat__tool.is-pick { gap:3px; padding:0 6px 0 8px; font-size:16px; }
.uos-chat__tool.is-pick .car { display:flex; color:var(--sub); }
.uos-chat__tool.is-pick:hover .car { color:var(--acc); }
.uos-chat__pop { display:none; position:absolute; bottom:calc(100% + 8px); left:0; z-index:20; width:272px;
  padding:8px; border-radius:12px; border:1px solid var(--bd2); background:var(--menu); box-shadow:var(--sh);
  -webkit-backdrop-filter:blur(28px); backdrop-filter:blur(28px);
  grid-template-columns:repeat(8,1fr); gap:2px; }
.uos-chat__pickwrap.is-open .uos-chat__pop { display:grid; }
.uos-chat__popem { height:30px; border:none; border-radius:7px; background:transparent; font-size:17px; line-height:1; cursor:pointer; }
.uos-chat__popem:hover { background:var(--hover); }

/* Chamar atenção — botão em destaque (efeito só visual) */
.uos-chat__tool.is-nudge { margin-left:2px; line-height:0; border-color:var(--og2); background:var(--og); }
.uos-chat__tool.is-nudge:hover { border-color:var(--acc); background:var(--og2); }
.uos-chat__tool.is-nudge:active { transform:scale(.94); }
.uos-win.is-shake { animation:ushake .6s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes ushake {
  10%, 90% { transform:translate(-2px,1px); }
  20%, 80% { transform:translate(4px,-2px); }
  30%, 50%, 70% { transform:translate(-7px,3px); }
  40%, 60% { transform:translate(7px,-3px); }
}
html.no-anim .uos-win.is-shake { animation:none; }

/* Composer */
.uos-chat__bar { flex:none; display:flex; gap:10px; padding:10px 16px 16px 20px; align-items:stretch; }
.uos-chat__input { flex:1; min-height:64px; max-height:132px; overflow:auto; padding:12px 14px; border-radius:10px;
  border:1px solid var(--bd2); background:var(--field); color:var(--txt); font-family:var(--font-text);
  font-size:var(--chatfs); line-height:1.5; outline:none; }
.uos-chat__input:focus { border-color:var(--acc); }
.uos-chat__input:empty::before { content:attr(data-ph); color:var(--sub); pointer-events:none; }
.uos-chat__send { flex:none; width:96px; border:none; border-radius:10px; background:var(--acc); color:#fff;
  font-family:var(--font-display); font-size:15px; font-weight:700; cursor:pointer; }
.uos-chat__send:hover { background:var(--acc2); }

/* Portão de entrada (sobreposto à conversa) */
.uos-chat__gate { position:absolute; inset:0; z-index:5; overflow:auto; padding:26px 28px;
  background:var(--win2); /* fallback p/ navegadores sem color-mix */
  background:color-mix(in srgb, var(--bg1) 92%, transparent); backdrop-filter:blur(2px); }
.uos-chat__gate h3 { font-family:var(--font-display); font-size:26px; font-weight:800; color:var(--txt); margin:0 0 6px; letter-spacing:-.02em; }
.uos-chat__gate p { margin:0 0 16px; font-size:13.5px; color:var(--sub); }
.uos-chat__gate label { display:block; font-size:13px; color:var(--txt); margin-bottom:6px; }
.uos-chat__avrow { display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 18px; }
.uos-chat__avpick { width:46px; height:46px; border-radius:50%; border:2px solid var(--bd2); background:var(--field);
  font-size:22px; cursor:pointer; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0; }
.uos-chat__avpick img { width:100%; height:100%; object-fit:cover; }
.uos-chat__avpick.is-sel { border-color:var(--acc); box-shadow:0 0 0 3px var(--og); }
.uos-chat__avpick.is-add { border-style:dashed; font-size:20px; color:var(--sub); }
.uos-chat__grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; margin-bottom:20px; }
.uos-chat__gate .uos-input { width:100%; }
.uos-chat__start { border:none; border-radius:10px; background:var(--acc); color:#fff; padding:14px 22px;
  font-family:var(--font-display); font-size:15px; font-weight:700; cursor:pointer; }
.uos-chat__start:hover { background:var(--acc2); }

/* Telas estreitas: sem coluna de avatares, campos em 1 coluna. */
@media (max-width:620px) {
  .uos-chat__rail { display:none; }
  .uos-chat__grid { grid-template-columns:1fr; }
  .uos-chat__send { width:78px; }
}

/* WinBox — player de rádio com a silhueta do Winamp clássico.
   Cores fixas de propósito: o app tem skin própria, não segue o tema do OS. */
.uos-wb { height:100%; display:flex; flex-direction:column; gap:6px; padding:6px;
  background:#1b1f2c; font-family:var(--font-mono); color:#c9d3ea; }
.uos-wb__panel { display:flex; flex-direction:column; border-radius:3px;
  background:linear-gradient(180deg,#39415c,#262c3f);
  border:1px solid #10131c; box-shadow:inset 1px 1px 0 rgba(255,255,255,.18), inset -1px -1px 0 rgba(0,0,0,.5); }
.uos-wb__panel.grow { flex:1; min-height:0; }
.uos-wb__cap { flex:none; height:15px; display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:8px; font-weight:700; letter-spacing:2.4px; color:#aab6d6;
  background:linear-gradient(180deg,#525d7d,#2f374e);
  border-bottom:1px solid #10131c; text-shadow:0 1px 0 rgba(0,0,0,.6); }
/* Titlebar da skin (substitui o chrome do OS): arrasta a janela */
.uos-wb__cap.is-title { height:19px; padding:0 3px 0 8px; cursor:grab; }
.uos-wb__cap.is-title:active { cursor:grabbing; }
.uos-wb__cap.is-title .tt { flex:none; }
.uos-wb__cap.is-title .lt { flex:1; height:7px; border-radius:1px;
  background:repeating-linear-gradient(180deg,#8f9cbe 0 1px,transparent 1px 2px); opacity:.5; }
.uos-wb__wbtn { flex:none; width:15px; height:13px; margin-left:2px; border:1px solid #10131c; border-radius:2px;
  background:linear-gradient(180deg,#4d5878,#2c3348); color:#dbe3f7; font-family:var(--font-mono);
  font-size:10px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.uos-wb__wbtn:hover { background:linear-gradient(180deg,#5c6890,#333c55); color:#fff; }
.uos-wb__wbtn.x:hover { background:linear-gradient(180deg,#e2564a,#b3271b); }
/* Janela sem chrome do OS (WinBox) */
.uos-win.is-bare { border:none; background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
.uos-win.is-bare .uos-win__body { overflow:hidden; }
.uos-wb__main { padding:8px; display:flex; flex-direction:column; gap:8px; }
.uos-wb__row { display:flex; gap:8px; align-items:stretch; }

/* Visualizador (decorativo: stream de outro domínio não passa pelo WebAudio) */
.uos-wb__viz { width:80px; flex:none; height:46px; padding:3px; display:flex; align-items:flex-end; gap:1px;
  background:#05090c; border:1px solid #0d1117; box-shadow:inset 0 0 8px rgba(0,255,120,.08); }
.uos-wb__viz i { flex:1; height:3px; border-radius:1px;
  background:linear-gradient(180deg,#ffb020,#22e33f); transition:height .1s linear; }

/* Visor LCD */
.uos-wb__lcd { flex:1; min-width:0; padding:4px 8px; background:#05090c; border:1px solid #0d1117;
  display:flex; flex-direction:column; justify-content:center; gap:2px; }
.uos-wb__time { font-size:22px; font-weight:700; line-height:1; color:#22e33f; letter-spacing:2px; text-shadow:0 0 8px rgba(34,227,63,.45); }
.uos-wb__track { overflow:hidden; white-space:nowrap; font-size:10.5px; color:#8ef0a8; }
.uos-wb__track .roll { display:inline-block; padding-left:100%; animation:uroll 14s linear infinite; }
.uos-wb__meta { display:flex; align-items:center; gap:5px; font-size:8.5px; color:#4f7f63; letter-spacing:.6px; }
.uos-wb__meta b { color:#22e33f; font-weight:700; }
.uos-wb__meta em { font-style:normal; color:#2c4a38; }
.uos-wb__meta em.on { color:#22e33f; text-shadow:0 0 6px rgba(34,227,63,.5); }
.uos-wb__meta .st { margin-left:auto; color:#f97316; }
@keyframes uroll { from { transform:translateX(0); } to { transform:translateX(-100%); } }
html.no-anim .uos-wb__track .roll { animation:none; padding-left:0; }

/* Volume */
.uos-wb__slider { display:flex; align-items:center; gap:8px; font-size:8.5px; letter-spacing:1.5px; color:#8f9cbe; }
.uos-wb__vol { flex:1; -webkit-appearance:none; appearance:none; height:6px; border-radius:3px; background:#151a26;
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.7); outline:none; }
.uos-wb__vol::-webkit-slider-thumb { -webkit-appearance:none; width:11px; height:17px; border-radius:2px; cursor:pointer;
  background:linear-gradient(180deg,#ffb020,#d2540a); border:1px solid #10131c; }
.uos-wb__vol::-moz-range-thumb { width:11px; height:17px; border-radius:2px; cursor:pointer;
  background:linear-gradient(180deg,#ffb020,#d2540a); border:1px solid #10131c; }
.uos-wb__vollbl { width:22px; text-align:right; color:#22e33f; font-size:9px; }

/* Transporte */
.uos-wb__transport { display:flex; align-items:center; gap:3px; }
.uos-wb__transport .sp { flex:1; }
.uos-wb__btn { width:29px; height:24px; border-radius:2px; cursor:pointer; font-size:11px; color:#dbe3f7;
  background:linear-gradient(180deg,#4d5878,#2c3348); border:1px solid #10131c;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; }
.uos-wb__btn:hover { background:linear-gradient(180deg,#5c6890,#333c55); color:#fff; }
.uos-wb__btn:active { box-shadow:inset 1px 1px 3px rgba(0,0,0,.6); }
.uos-wb__btn.play { color:#22e33f; }
.uos-wb__btn.rf { color:#ffb020; font-size:14px; }
.uos-wb__btn.rf.spin { color:#22e33f; animation:ublink .8s step-end infinite; }
.uos-wb__tgl { height:20px; padding:0 7px; border-radius:2px; cursor:pointer; font-family:var(--font-mono);
  font-size:8px; letter-spacing:1.2px; color:#9fadd2; background:linear-gradient(180deg,#3d4661,#242a3b);
  border:1px solid #10131c; box-shadow:inset 1px 1px 0 rgba(255,255,255,.14); }
.uos-wb__tgl:hover { color:#fff; }
.uos-wb__tgl.on { color:#0d1117; background:linear-gradient(180deg,#ffb020,#f97316); border-color:#7a3205; }

/* Equalizador (decorativo) */
.uos-wb__eq { display:flex; align-items:flex-end; gap:4px; padding:8px; }
.uos-wb__band { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
.uos-wb__band.pre .sl { background:#151a26; }
.uos-wb__band .sl { --knobh:8px; position:relative; width:9px; height:44px; border-radius:2px; background:#151a26;
  box-shadow:inset 1px 1px 0 rgba(0,0,0,.7); cursor:ns-resize; touch-action:none; }
.uos-wb__band .sl:focus-visible { outline:1px solid #f97316; outline-offset:2px; }
/* --v (0..1) vem do JS; o curso útil é a trilha menos a altura do cursor. */
.uos-wb__band .sl i { position:absolute; left:-1px; width:11px; height:var(--knobh); border-radius:2px;
  bottom:calc(var(--v,.6) * (100% - var(--knobh)));
  background:linear-gradient(180deg,#ffb020,#d2540a); border:1px solid #10131c; }
.uos-wb__band span { font-size:7px; letter-spacing:.4px; color:#8f9cbe; }

/* Playlist */
.uos-wb__list { flex:1; min-height:0; overflow:auto; background:#05090c; border:1px solid #0d1117; margin:4px;
  padding:4px 2px; font-size:11px; }
.uos-wb__item { display:flex; align-items:center; gap:6px; padding:2px 7px; color:#22e33f; cursor:pointer; white-space:nowrap; }
.uos-wb__item:hover { background:rgba(34,227,63,.08); }
.uos-wb__item.on { background:#1b3a8a; color:#fff; }
.uos-wb__item .n { width:22px; flex:none; text-align:right; opacity:.75; }
.uos-wb__item .nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.uos-wb__item .kb { flex:none; opacity:.8; font-size:10px; }
.uos-wb__empty { padding:10px 8px; font-size:10.5px; color:#4f7f63; }
.uos-wb__empty.err { color:#ff7a5c; }
.uos-wb__foot { flex:none; display:flex; align-items:center; gap:5px; padding:0 5px 5px; }
/* Campo de busca: seletor mais específico para vencer o CSS do tema do site,
   que estiliza input[type=...] e deixava o campo claro e alto. */
.uos-wb .uos-wb__q, .uos-wb input.uos-wb__q { flex:1; min-width:0; width:auto; height:17px; padding:0 6px; margin:0;
  border-radius:2px; border:1px solid #10131c; background:#000; color:#22e33f; box-shadow:none;
  font-family:var(--font-mono); font-size:9.5px; line-height:15px; outline:none;
  -webkit-appearance:none; appearance:none; }
.uos-wb .uos-wb__q::placeholder { color:#2f6b45; opacity:1; }
.uos-wb .uos-wb__q:focus { border-color:#f97316; box-shadow:none; }
.uos-wb__foot .cnt { font-size:8px; letter-spacing:.8px; color:#8f9cbe; white-space:nowrap; }

/* ---- Assistente Clipe (canto inferior direito) ----
   Vive fora do ciclo de render: criado uma vez e animado por classes, para as
   animações não reiniciarem a cada clique no OS. Os "olhos" são pálpebras
   sobrepostas nas coordenadas medidas na arte (250x500). */
.uos-clip { position:fixed; right:78px; bottom:64px; z-index:940; width:104px;
  pointer-events:none; user-select:none; }
.uos-clip.is-off { display:none; }
.uos-clip__body { position:relative; width:100%; transform-origin:50% 92%;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.42)); pointer-events:auto; cursor:pointer; }
.uos-clip__body img { display:block; width:100%; height:auto; }
.uos-clip__hide { position:absolute; top:-6px; right:-6px; width:20px; height:20px; padding:0; z-index:3;
  border-radius:50%; border:1px solid rgba(0,0,0,.25); background:rgba(20,20,24,.82); color:#fff;
  font-size:12px; line-height:1; cursor:pointer; pointer-events:auto; opacity:0; transition:opacity .15s ease;
  display:flex; align-items:center; justify-content:center; }
.uos-clip:hover .uos-clip__hide { opacity:1; }

/* Pálpebras — bbox dos olhos medido na arte, em % do container */
.uos-clip__lid { position:absolute; z-index:2; background:#9b92c9; border-bottom:2px solid #6f66a0;
  border-radius:50%; transform:scaleY(0); transform-origin:50% 0; }
.uos-clip__lid.l { left:11.6%; top:24.2%; width:29.2%; height:12.4%; }
.uos-clip__lid.r { left:52.0%; top:25.4%; width:27.6%; height:12.0%; }
/* Cochilo: olhos fechados enquanto dura o ato (transition faz o fechar/abrir) */
.uos-clip.act-sleep .uos-clip__lid { animation:none !important; transition:transform .3s ease; transform:scaleY(1); }
.uos-clip.is-blink .uos-clip__lid { animation:uclip-blink .22s ease both; }
.uos-clip.is-blink2 .uos-clip__lid { animation:uclip-blink .2s ease 2 both; }
@keyframes uclip-blink { 0%,100% { transform:scaleY(0); } 45%,55% { transform:scaleY(1); } }

/* Fone de ouvido (só no ato "música") */
.uos-clip__phones { position:absolute; inset:0; z-index:1; width:100%; height:100%; opacity:0;
  transform:translateY(-8px); transition:opacity .25s ease, transform .25s ease; }
.uos-clip.act-music .uos-clip__phones { opacity:1; transform:none; }

/* Balão de fala */
.uos-clip__bubble { position:absolute; right:96%; bottom:62%; min-width:104px; max-width:180px; padding:8px 11px;
  border-radius:11px 11px 3px 11px; background:#fdf6c9; border:1px solid #d8c98a; color:#2a2410;
  font-family:var(--font-text); font-size:12px; line-height:1.35; text-align:center; white-space:normal;
  box-shadow:0 8px 18px rgba(0,0,0,.3); opacity:0; transform:translateY(6px) scale(.94);
  transition:opacity .18s ease, transform .18s ease; pointer-events:none; }
.uos-clip.is-say .uos-clip__bubble { opacity:1; transform:none; }

/* Notas musicais / assobio */
.uos-clip__notes { position:absolute; left:-6px; bottom:58%; z-index:3; pointer-events:none; }
.uos-clip__notes i { position:absolute; font-style:normal; font-size:17px; color:#ffd23f;
  text-shadow:0 2px 5px rgba(0,0,0,.5); opacity:0; }
.uos-clip.is-notes .uos-clip__notes i { animation:uclip-note 2.1s ease-out infinite; }
.uos-clip__notes i:nth-child(2) { animation-delay:.65s !important; font-size:14px; color:#7ef0a2; }
.uos-clip__notes i:nth-child(3) { animation-delay:1.3s !important; font-size:19px; color:#ffb020; }
@keyframes uclip-note {
  0% { opacity:0; transform:translate(0,0) scale(.6) rotate(-8deg); }
  15% { opacity:1; }
  100% { opacity:0; transform:translate(-38px,-78px) scale(1.15) rotate(12deg); }
}

/* Zzz do cochilo */
.uos-clip__zzz { position:absolute; left:82%; bottom:70%; z-index:3; font-family:var(--font-display);
  font-weight:800; font-size:15px; color:#cfd6ff; text-shadow:0 2px 6px rgba(0,0,0,.5); opacity:0; }
.uos-clip.act-sleep .uos-clip__zzz { animation:uclip-zzz 2s ease-out infinite; }
@keyframes uclip-zzz {
  0% { opacity:0; transform:translate(0,0) scale(.7); }
  25% { opacity:1; }
  100% { opacity:0; transform:translate(16px,-42px) scale(1.2); }
}

/* ---- Os atos ---- */
.uos-clip.act-attn   .uos-clip__body { animation:uclip-attn 1.25s ease-in-out 2; }
.uos-clip.act-dance  .uos-clip__body { animation:uclip-dance 1.05s ease-in-out 4; }
.uos-clip.act-music  .uos-clip__body { animation:uclip-bob .62s ease-in-out 9; }
.uos-clip.act-wave   .uos-clip__body { animation:uclip-wave 1.15s ease-in-out 2; }
.uos-clip.act-exit   .uos-clip__body { animation:uclip-exit 6s cubic-bezier(.5,0,.3,1) 1; }
.uos-clip.act-sleep  .uos-clip__body { animation:uclip-sleep 2.4s ease-in-out 2; }
.uos-clip.act-jump   .uos-clip__body { animation:uclip-jump 1.6s cubic-bezier(.3,1.4,.5,1) 1; }
.uos-clip.act-peek   .uos-clip__body { animation:uclip-peek 4s ease-in-out 1; }
.uos-clip.act-spin   .uos-clip__body { animation:uclip-spin 2.2s ease-in-out 1; }

@keyframes uclip-attn {
  0%,100% { transform:translateY(0) rotate(0); }
  12% { transform:translateY(-15px) rotate(-9deg); }
  26% { transform:translateY(0) rotate(7deg); }
  40% { transform:translateY(-11px) rotate(-7deg); }
  54% { transform:translateY(0) rotate(5deg); }
  70% { transform:translateY(-5px) rotate(-3deg); }
  85% { transform:translateY(0) rotate(2deg); }
}
@keyframes uclip-dance {
  0%,100% { transform:translateX(0) rotate(0) scale(1,1); }
  15% { transform:translateX(-11px) rotate(-13deg) scale(1.03,.95); }
  30% { transform:translateX(0) rotate(0) scale(.96,1.06); }
  45% { transform:translateX(11px) rotate(13deg) scale(1.03,.95); }
  60% { transform:translateX(0) rotate(0) scale(.96,1.06); }
  78% { transform:translateX(-7px) rotate(-8deg) scale(1,1); }
  90% { transform:translateX(6px) rotate(7deg) scale(1,1); }
}
@keyframes uclip-bob {
  0%,100% { transform:translateY(0) rotate(-3deg); }
  50% { transform:translateY(-8px) rotate(3deg); }
}
@keyframes uclip-wave {
  0%,100% { transform:rotate(0); }
  14% { transform:rotate(-18deg); }
  30% { transform:rotate(11deg); }
  46% { transform:rotate(-15deg); }
  62% { transform:rotate(9deg); }
  80% { transform:rotate(-6deg); }
}
@keyframes uclip-exit {
  0% { transform:translateX(0) rotate(0); }
  6% { transform:translateX(-14px) rotate(-10deg); }        /* toma impulso */
  20% { transform:translateX(190px) rotate(16deg); }
  22%,64% { transform:translateX(210px) rotate(0); }        /* fora da tela */
  82% { transform:translateX(-12px) rotate(-8deg); }
  92% { transform:translateX(6px) rotate(5deg); }
  100% { transform:translateX(0) rotate(0); }
}
@keyframes uclip-sleep {
  0%,100% { transform:rotate(-4deg) translateY(0) scaleY(1); }
  50% { transform:rotate(-4deg) translateY(5px) scaleY(.97); }
}
@keyframes uclip-jump {
  0%,100% { transform:translateY(0) rotate(0) scaleY(1); }
  12% { transform:translateY(0) scaleY(.86); }
  40% { transform:translateY(-46px) rotate(190deg) scaleY(1.06); }
  70% { transform:translateY(0) rotate(360deg) scaleY(.9); }
  85% { transform:translateY(-7px) rotate(360deg) scaleY(1.02); }
}
@keyframes uclip-peek {
  0% { transform:translateX(0); }
  10%,72% { transform:translateX(86px); }                   /* escondido na borda */
  20%,34%,48% { transform:translateX(52px) rotate(-8deg); } /* espia */
  27%,41% { transform:translateX(74px) rotate(-2deg); }
  100% { transform:translateX(0); }
}
@keyframes uclip-spin {
  0%,100% { transform:rotate(0) scale(1); }
  35% { transform:rotate(360deg) scale(.92); }
  55% { transform:rotate(360deg) scale(1.06); }
  75% { transform:rotate(348deg) scale(1); }
}

@media (max-width:820px) { .uos-clip { display:none; } }
html.no-anim .uos-clip { display:none; }

/* WinBox no toque: mesma skin do desktop, com alvos de dedo (mín. ~40px).
   O tamanho vem só daqui — a marcação é a mesma nos dois modos. */
html.os-touch .uos-wb { gap:8px; padding:8px; }
html.os-touch .uos-wb__cap { height:24px; font-size:10px; letter-spacing:3px; }
html.os-touch .uos-wb__cap.is-title { height:46px; padding:0 6px 0 14px; font-size:12px; }
html.os-touch .uos-wb__wbtn { width:40px; height:36px; margin-left:6px; font-size:17px; border-radius:4px; }
html.os-touch .uos-wb__main { padding:12px; gap:12px; }
html.os-touch .uos-wb__viz { width:104px; height:66px; }
html.os-touch .uos-wb__lcd { padding:8px 12px; }
html.os-touch .uos-wb__time { font-size:32px; }
html.os-touch .uos-wb__track { font-size:14px; }
html.os-touch .uos-wb__meta { font-size:11px; gap:7px; }
html.os-touch .uos-wb__slider { font-size:11px; gap:12px; }
html.os-touch .uos-wb__vol { height:12px; border-radius:6px; }
html.os-touch .uos-wb__vol::-webkit-slider-thumb { width:22px; height:32px; border-radius:4px; }
html.os-touch .uos-wb__vol::-moz-range-thumb { width:22px; height:32px; border-radius:4px; }
html.os-touch .uos-wb__vollbl { width:32px; font-size:13px; }
html.os-touch .uos-wb__transport { gap:8px; }
html.os-touch .uos-wb__btn { width:52px; height:46px; font-size:19px; border-radius:4px; }
html.os-touch .uos-wb__tgl { height:40px; padding:0 16px; font-size:11px; border-radius:4px; }
html.os-touch .uos-wb__eq { gap:8px; padding:12px 10px; }
html.os-touch .uos-wb__band .sl { --knobh:16px; width:16px; height:74px; border-radius:4px; }
html.os-touch .uos-wb__band .sl i { left:-3px; width:22px; border-radius:4px; }
html.os-touch .uos-wb__band span { font-size:9px; }
html.os-touch .uos-wb__list { font-size:15px; padding:6px 2px; margin:6px; }
html.os-touch .uos-wb__item { padding:11px 10px; gap:10px; min-height:46px; }
html.os-touch .uos-wb__item .n { width:30px; }
html.os-touch .uos-wb__item .kb { font-size:13px; }
html.os-touch .uos-wb__empty { font-size:14px; padding:14px 10px; }
html.os-touch .uos-wb__foot { gap:8px; padding:0 6px 8px; }
html.os-touch .uos-wb .uos-wb__q, html.os-touch .uos-wb input.uos-wb__q { height:40px; font-size:14px; padding:0 12px; line-height:38px; }
html.os-touch .uos-wb__foot .cnt { font-size:10px; }

/* ---- Notas (app de toque) — lista + editor, estilo caderninho ---- */
.uos-notas { position:relative; height:100%; display:flex; flex-direction:column; background:var(--bg1); }
.uos-notas__head { flex:none; padding:20px 20px 10px; }
.uos-notas__head h2 { margin:0; font-family:var(--font-display); font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--txt); }
.uos-notas__head span { font-size:13px; color:var(--sub); }
.uos-notas__list { flex:1; min-height:0; overflow:auto; padding:8px 14px 96px; display:flex; flex-direction:column; gap:10px; }
.uos-notas__card { display:flex; align-items:center; gap:12px; min-height:64px; padding:12px 14px; border-radius:16px;
  background:var(--win2); border:1px solid var(--bd); cursor:pointer; }
.uos-notas__card:active { transform:scale(.99); }
.uos-notas__chip { width:12px; height:38px; flex:none; border-radius:6px; border:1px solid rgba(0,0,0,.12); }
.uos-notas__txt { min-width:0; }
.uos-notas__title { font-size:15px; font-weight:700; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uos-notas__prev { margin-top:2px; font-family:var(--font-text); font-size:13px; color:var(--sub);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.uos-notas__empty { padding:26px 6px; font-size:14px; color:var(--sub); text-align:center; }
.uos-notas__fab { position:absolute; right:18px; bottom:18px; width:58px; height:58px; border-radius:50%; border:none;
  background:var(--acc); color:#fff; font-size:30px; line-height:1; cursor:pointer; box-shadow:0 10px 24px rgba(249,115,22,.42); }
.uos-notas__fab:active { background:var(--acc2); }

.uos-notas.is-editor { padding:0; }
.uos-notas__bar { flex:none; display:flex; align-items:center; gap:8px; padding:10px 12px; }
.uos-notas__bar .sp { flex:1; }
.uos-notas__act { width:44px; height:44px; border-radius:50%; border:none; background:rgba(0,0,0,.07); color:#1a1a1a;
  display:flex; align-items:center; justify-content:center; cursor:pointer; }
.uos-notas__act:active { background:rgba(0,0,0,.14); }
.uos-notas__act.danger:active { background:var(--danger); color:#fff; }
.uos-notas__body { flex:1; min-height:0; overflow:auto; padding:6px 20px 16px; outline:none;
  font-family:var(--font-text); font-size:17px; line-height:1.55; color:#1a1a1a; -webkit-user-select:text; user-select:text; }
.uos-notas__body:empty::before { content:attr(data-ph); color:rgba(0,0,0,.38); }
.uos-notas__pal { flex:none; display:flex; gap:10px; padding:12px 18px 18px; }
.uos-notas__sw { width:34px; height:34px; border-radius:50%; border:2px solid rgba(0,0,0,.15); cursor:pointer; padding:0; }
.uos-notas__sw.is-on { border-color:#1a1a1a; box-shadow:0 0 0 3px rgba(0,0,0,.12); }

/* ---- Cortina de informações (toque) ---- */
.uos-shade { position:absolute; inset:0; z-index:965; background:rgba(6,8,14,.45);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.uos-shade__panel { position:absolute; left:0; right:0; top:0; padding:52px 14px 10px;
  background:var(--menu); -webkit-backdrop-filter:blur(46px) saturate(1.5); backdrop-filter:blur(46px) saturate(1.5);
  border-bottom:1px solid var(--bd); border-radius:0 0 22px 22px; box-shadow:var(--sh);
  animation:ushade .22s cubic-bezier(.3,.9,.4,1) both; touch-action:none; }
@keyframes ushade { from { transform:translateY(-100%); } to { transform:none; } }
.uos-shade__card { padding:4px 6px 2px; }
.uos-shade__wx { display:flex; align-items:center; gap:14px; }
.uos-shade__ico { color:var(--sub); display:flex; }
.uos-shade__ico.is-clear { color:#f7b500; }
.uos-shade__temp { font-family:var(--font-display); font-size:34px; font-weight:800; line-height:1; color:var(--txt); }
.uos-shade__desc { margin-top:4px; font-size:13px; color:var(--sub); }
.uos-shade__date { margin-top:16px; padding-top:14px; border-top:1px solid var(--bd); }
.uos-shade__date .wd { font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--txt); }
.uos-shade__date .dt { margin-top:2px; font-size:13.5px; color:var(--sub); }
.uos-shade__acts { display:flex; gap:10px; margin-top:16px; }
.uos-shade__act { flex:1; height:44px; border-radius:12px; border:1px solid var(--bd); background:var(--field);
  color:var(--txt); font-family:var(--font-display); font-size:13.5px; font-weight:600; cursor:pointer; }
.uos-shade__act:active { background:var(--og); border-color:var(--og2); color:var(--acc); }
.uos-shade__grip { width:42px; height:5px; margin:12px auto 2px; border-radius:999px; background:var(--bd2); }

/* Calendário como app (toque): grade e navegação em tamanho de dedo */
.uos-cal.is-app { position:static; width:auto; max-width:none; padding:18px 16px 22px; border:none;
  background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.uos-cal.is-app .uos-cal__month { font-size:17px; }
.uos-cal.is-app .uos-cal__navs { gap:8px; }
.uos-cal.is-app .uos-cal__nav { width:48px; height:48px; border-radius:14px; border:1px solid var(--bd);
  background:var(--field); color:var(--txt); }
.uos-cal.is-app .uos-cal__nav:active { background:var(--og); border-color:var(--og2); color:var(--acc); }
.uos-cal.is-app .uos-cal__nav svg { width:24px; height:24px; }
.uos-cal.is-app .uos-cal__week span { font-size:13px; }
.uos-cal.is-app .uos-cal__day { font-size:16px; }
/* No flyout do relógio em telas de toque, as setas também crescem */
html.os-touch .uos-cal__nav { width:44px; height:44px; border-radius:12px; }
html.os-touch .uos-cal__nav svg { width:22px; height:22px; }

/* ---- App Clima ---- */
.uos-clima { height:100%; overflow:auto; padding:22px 18px 26px; }
.uos-clima__empty { padding:30px 4px; font-size:14px; color:var(--sub); text-align:center; }
.uos-clima__now { display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px; }
.uos-clima__ico { color:var(--sub); display:flex; }
.uos-clima__ico.is-clear { color:#f7b500; }
.uos-clima__temp { font-family:var(--font-display); font-size:58px; font-weight:800; line-height:1.05; color:var(--txt); }
.uos-clima__desc { font-size:15px; color:var(--txt); }
.uos-clima__place { font-size:13px; color:var(--sub); }
.uos-clima__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0 6px; }
.uos-clima__cell { padding:12px 8px; border-radius:14px; border:1px solid var(--bd); background:var(--win2); text-align:center; }
.uos-clima__cell b { display:block; font-family:var(--font-display); font-size:18px; color:var(--txt); }
.uos-clima__cell span { font-size:11.5px; color:var(--sub); }
.uos-clima__cap { margin:20px 0 8px; font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--sub); }
.uos-clima__days { display:flex; flex-direction:column; }
.uos-clima__day { display:flex; align-items:center; gap:10px; padding:11px 4px; border-bottom:1px solid var(--bd); font-size:14px; }
.uos-clima__day:last-child { border-bottom:none; }
.uos-clima__day .nm { width:52px; flex:none; font-weight:600; color:var(--txt); }
.uos-clima__day .ic { flex:none; display:flex; color:var(--sub); }
.uos-clima__day .tx { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--sub); font-size:13px; }
.uos-clima__day .mx { font-weight:700; color:var(--txt); }
.uos-clima__day .mn { width:34px; text-align:right; color:var(--sub); }
.uos-clima__src { margin-top:18px; font-size:11px; color:var(--sub); text-align:center; }

/* Browser */
.uos-browser__chrome { height:46px; flex:none; display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid var(--bd); }
.uos-omni { flex:1; display:flex; align-items:center; gap:8px; height:30px; padding:0 14px; background:var(--field); border:1px solid var(--bd); border-radius:16px; font-size:12.5px; color:var(--sub); }

/* ---- Touch (tablet/mobile) ---- */
/* Barra de status (toque): mesmo tratamento da barra de tarefas do desktop —
   fundo translúcido que acompanha o tema claro/escuro, com desfoque e fio. */
.uos-status { position:absolute; left:0; right:0; top:0; z-index:970; display:flex; align-items:center;
  justify-content:space-between; padding:0 18px; font-size:12px; font-weight:600; color:var(--txt);
  background:var(--bar); -webkit-backdrop-filter:blur(34px) saturate(1.6); backdrop-filter:blur(34px) saturate(1.6);
  border-bottom:1px solid var(--bd); cursor:pointer; touch-action:none; }
/* Alcinha da cortina: sinaliza que a barra pode ser puxada para baixo. */
.uos-status::after { content:''; position:absolute; left:50%; bottom:3px; width:34px; height:3px; margin-left:-17px;
  border-radius:999px; background:var(--bd2); }
/* Rola quando a grade não couber (mais ícones que altura de tela) */
.uos-springboard { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center;
  padding:56px 18px 108px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.uos-springboard img { height:30px; margin-bottom:8px; }
.uos-springboard__greet { font-size:13px; color:var(--sub); margin-bottom:28px; text-align:center; }
.uos-springboard__grid { display:grid; gap:16px 12px; width:100%; max-width:520px; justify-items:center; }
.uos-sb-tile { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; width:100%; }
.uos-sb-tile__icon { flex:none; display:flex; align-items:center; justify-content:center; border:1px solid var(--bd); box-shadow:var(--shsm); background:var(--bg1); color:var(--acc); }
/* Rótulo centralizado e com altura fixa (2 linhas) — sem isso os nomes longos
   quebravam alinhados à esquerda e desencontravam as fileiras. */
.uos-sb-tile span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  width:100%; min-height:2.6em; font-size:11.5px; font-weight:600; line-height:1.3; text-align:center;
  overflow-wrap:break-word; }
.uos-dock { position:absolute; left:50%; transform:translateX(-50%); bottom:40px; z-index:22; display:flex; gap:12px; padding:10px 14px; border-radius:22px; background:var(--bar); -webkit-backdrop-filter:blur(30px); backdrop-filter:blur(30px); border:1px solid var(--bd); }
.uos-dock__tile { position:relative; display:flex; align-items:center; justify-content:center; border-radius:14px; background:var(--bg1); border:1px solid var(--bd); color:var(--acc); cursor:pointer; }
.uos-home-indicator { position:absolute; left:0; right:0; bottom:0; z-index:971; display:flex; align-items:center; justify-content:center; }
.uos-home-indicator .bar { height:5px; border-radius:999px; background:var(--txt); opacity:.5; cursor:pointer;
  touch-action:none; }
.uos-home-indicator .bar:active { opacity:.85; }

/* ---- Alternador de apps (toque) ---- */
.uos-recents { position:absolute; inset:0; z-index:960; background:rgba(6,8,14,.5);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.uos-recents__panel { position:absolute; left:0; right:0; bottom:0; padding:8px 0 34px;
  background:var(--menu); -webkit-backdrop-filter:blur(46px) saturate(1.5); backdrop-filter:blur(46px) saturate(1.5);
  border-top:1px solid var(--bd); border-radius:22px 22px 0 0; box-shadow:var(--sh);
  animation:urecents .22s cubic-bezier(.3,.9,.4,1) both; touch-action:none; }
@keyframes urecents { from { transform:translateY(100%); } to { transform:none; } }
.uos-recents__grip { width:42px; height:5px; margin:2px auto 12px; border-radius:999px; background:var(--bd2); }
.uos-recents__row { display:flex; gap:12px; overflow-x:auto; padding:4px 16px 6px; scroll-snap-type:x mandatory; }
.uos-recents__card { position:relative; flex:none; width:124px; height:150px; scroll-snap-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:14px 10px;
  border-radius:18px; border:1px solid var(--bd); background:var(--win2); cursor:pointer; }
.uos-recents__card.is-on { border-color:var(--og2); background:var(--og); }
.uos-recents__card:active { transform:scale(.98); }
.uos-recents__ico { width:46px; height:46px; display:flex; align-items:center; justify-content:center; color:var(--acc); }
.uos-recents__nm { font-size:12px; font-weight:600; color:var(--txt); text-align:center; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.uos-recents__x { position:absolute; top:6px; right:6px; width:26px; height:26px; padding:0; border-radius:50%;
  border:1px solid var(--bd); background:var(--bg1); color:var(--sub); font-size:15px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.uos-recents__x:active { background:var(--danger); border-color:var(--danger); color:#fff; }
.uos-recents__empty { padding:44px 18px; font-size:14px; color:var(--sub); }
.uos-recents__foot { display:flex; gap:10px; padding:12px 16px 0; }
.uos-recents__btn { flex:1; height:44px; border-radius:12px; border:1px solid var(--bd); background:var(--field);
  color:var(--txt); font-family:var(--font-display); font-size:13.5px; font-weight:600; cursor:pointer; }
.uos-recents__btn:active { background:var(--og); border-color:var(--og2); color:var(--acc); }

@media (max-width: 720px) {
  .uos-grid-2 { grid-template-columns:1fr; }
  .uos-side { display:none; }
}