/* ArquIA — camada "argila" (16/10/2026) sobre a apresentação: pílulas claras em relevo,
   painéis de vidro claro, ativo em menta. Valores literais: este documento roda isolado. */
:root{--k-face:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(244,246,245,.94) 55%,rgba(236,238,237,.94) 100%);
  --k-mint:linear-gradient(180deg,#d5f8e7 0%,#b4ecd0 55%,#a3e5c4 100%);
  --k-raised:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -2px 3px rgba(22,34,28,.07),0 2px 0 rgba(200,206,203,.9),0 3px 1px rgba(22,34,28,.12),0 8px 18px -4px rgba(0,0,0,.28);
  --k-mintsh:inset 0 2px 1px rgba(255,255,255,.8),inset 0 -3px 5px rgba(16,120,76,.2),0 2px 0 #84cfaa,0 8px 18px -4px rgba(22,150,98,.45);
  --k-spring:linear(0,.18,.34,.48,.6,.69,.77,.84,.89,.93,.96,.98,.99,1,1.014,1.026,1.028,1.023,1.016,1.008,1.001,.997,.995,.996,.998,1)}
.hud-handle,.drawer-handle,#panel-handle,#title-handle{
  background:var(--k-face)!important;color:#151a18!important;border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:var(--k-raised)!important;-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  font-family:"Geist","Inter",system-ui,-apple-system,sans-serif!important;font-weight:600!important;letter-spacing:.08em!important;
  transition:transform .5s var(--k-spring),box-shadow .3s ease!important}
.hud-handle,#title-handle,#panel-handle{border-radius:999px!important;padding:0 20px!important;min-height:44px}
.drawer-handle{border-radius:999px!important}
.side-drawer .drawer-handle{min-height:120px!important;width:44px!important;padding:0!important}
#panel .drawer-handle,#panel-handle{width:auto!important;min-height:44px!important;padding:0 22px!important}
.side-drawer.left .drawer-handle{left:10px!important}.side-drawer.right .drawer-handle{right:10px!important}
.hud-handle:hover,.drawer-handle:hover,#panel-handle:hover{transform:translateY(-1px);background:var(--k-face)!important;color:#0a3d29!important;box-shadow:var(--k-raised),0 0 0 4px rgba(120,230,180,.28),0 0 24px rgba(70,220,150,.35)!important}
.side-drawer .drawer-handle:hover{transform:translateY(-50%) scale(1.03)}
#panel .drawer-handle:hover{transform:translate(-50%,-100%) translateY(-1px)}
.hud-handle[aria-expanded=true],.drawer-handle[aria-expanded=true],#panel-handle[aria-expanded=true]{background:var(--k-mint)!important;color:#0a3d29!important;box-shadow:var(--k-mintsh)!important;border-color:rgba(46,160,110,.45)!important}
.side-drawer .drawer-inner,#panel,#panel.collapsed .panel-body,#title-body{background:rgba(251,252,251,.9)!important;color:#151a18!important;border:1px solid rgba(255,255,255,.9)!important;border-radius:24px!important;-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(0,0,0,.12),0 30px 60px -20px rgba(0,0,0,.45)!important}
.side-drawer .drawer-inner *,#panel *,#title-body *{color:inherit}
.side-drawer .grp-label,#panel .grp-label{color:#5f6864!important;opacity:1!important;letter-spacing:.06em}
.side-drawer button:not(.drawer-handle),#panel button:not(#panel-handle),#title-body button,#title-body a{
  background:var(--k-face)!important;color:#151a18!important;border:1px solid rgba(22,34,28,.1)!important;border-radius:999px!important;
  box-shadow:inset 0 1.5px 0 #fff,inset 0 -2px 3px rgba(22,34,28,.07),0 2px 0 #d3d8d5,0 4px 10px -3px rgba(22,34,28,.2)!important;
  transition:transform .5s var(--k-spring),box-shadow .3s ease!important}
.side-drawer button:not(.drawer-handle):hover,#panel button:not(#panel-handle):hover{transform:translateY(-1px)}
.side-drawer button:not(.drawer-handle):active,#panel button:not(#panel-handle):active{transform:translateY(1px) scale(.97);box-shadow:inset 0 2px 5px rgba(22,34,28,.16)!important}
.side-drawer button.active,.side-drawer button[aria-pressed=true],#panel button.active,#panel button[aria-pressed=true]{background:var(--k-mint)!important;color:#0a3d29!important;border-color:rgba(46,160,110,.45)!important;box-shadow:inset 0 2px 1px rgba(255,255,255,.8),inset 0 -3px 5px rgba(16,120,76,.2),0 2px 0 #84cfaa,0 6px 14px -4px rgba(22,150,98,.4)!important}
input[type=range]{accent-color:#19b97a}
:focus-visible{outline:2px solid #19b97a!important;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.hud-handle,.drawer-handle,#panel-handle,.side-drawer button,#panel button{transition:none!important}}
#title-handle,#titlecard .hud-handle{display:inline-flex!important;align-items:center;gap:10px;padding-left:8px!important}
#title-handle::before,#titlecard .hud-handle::before{content:"";width:30px;height:30px;flex:none;border-radius:10px;border:1px solid rgba(46,160,110,.45);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.8),inset 0 -3px 5px rgba(16,120,76,.2),0 2px 0 #84cfaa;
  background:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 64 64%27><path d=%27M10 56 31 9 52 56%27 fill=%27none%27 stroke=%27%230f1f18%27 stroke-width=%278.5%27 stroke-miterlimit=%2710%27/><rect x=%2715%27 y=%2733%27 width=%2747%27 height=%2710%27 rx=%272.2%27 fill=%27%23fff%27/><rect x=%2715%27 y=%2743%27 width=%2747%27 height=%272.6%27 rx=%271.3%27 fill=%27%230f1f18%27 opacity=%27.22%27/></svg>") center/68% no-repeat,linear-gradient(180deg,#d5f8e7,#b4ecd0 55%,#a3e5c4)}
