/* voiz-On glass layer for portal and admin (2026-10-06): ambient light, liquid glass surfaces,
   capsule buttons, segmented tabs, sheet dialogs. Loaded after each page's own <style>. */
:root {
  --glass: rgb(255 255 255 / .62); --glass-hi: rgb(255 255 255 / .82); --glass-edge: rgb(255 255 255 / .9);
  --glass-line: rgb(0 0 0 / .07); --ease: cubic-bezier(.16,1,.3,1);
  --lift: inset 0 1px 0 #fff, 0 1px 2px rgb(0 0 0 / .04), 0 14px 34px -20px rgb(30 40 70 / .28);
  --lift-hi: inset 0 1px 0 #fff, 0 2px 4px rgb(0 0 0 / .05), 0 28px 56px -28px rgb(30 40 70 / .38);
  --blur: blur(28px) saturate(180%);
}
body { background: #fff; }

/* header: floating glass bar with the pulsing logo */
.ptop { position: sticky; top: 12px; z-index: 20; padding: 12px 20px; border-radius: 22px; background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); box-shadow: var(--lift); }
.ptop .brand { height: 24px; width: auto; display: block; }
.ptop .who { right: 14px; display: flex; align-items: center; gap: 6px; }
.ptop .who a { margin-left: 0; padding: 7px 12px; border-radius: 999px; text-decoration: none; color: var(--ink); background: rgb(0 0 0 / .045);
  transition: background .3s var(--ease), transform .3s var(--ease); }
.ptop .who a:hover { background: rgb(0 0 0 / .08); }
.ptop .who a:active { transform: scale(.96); }
.ptop .who span { margin-right: 6px; }
@media (max-width: 760px) { .ptop { flex-direction: column; gap: 10px; } .ptop .who { position: static; flex-wrap: wrap; justify-content: center; } }
.brand .bar { fill: #000; transform-box: fill-box; transform-origin: center; animation: g-wave 1.2s ease-in-out infinite; }
.brand .bar:nth-of-type(2) { animation-delay: -.25s; } .brand .bar:nth-of-type(3) { animation-delay: -.5s; }
.brand .bar:nth-of-type(4) { animation-delay: -.75s; } .brand .bar:nth-of-type(5) { animation-delay: -1s; }
@keyframes g-wave { 50% { transform: scaleY(.45); } }

/* titles with the slow silver sweep */
h1 { letter-spacing: -.02em; background: linear-gradient(100deg, #000 0%, #000 42%, #a8a8a8 50%, #000 58%, #000 100%);
  background-size: 250% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: g-shine 7s cubic-bezier(.45,.05,.25,1) infinite; width: fit-content; }
h1 em { color: inherit; }
@keyframes g-shine { 0% { background-position: 100% 0; } 32%, 100% { background-position: 0% 0; } }
h2 { color: #6b6b72; }

/* entrance */
.pwrap > *, body > h1, body > h2, body > .wrap, body > button, body > label { animation: g-rise .8s var(--ease) both; }
.pwrap > :nth-child(2) { animation-delay: .06s; } .pwrap > :nth-child(3) { animation-delay: .12s; } .pwrap > :nth-child(4) { animation-delay: .18s; }
@keyframes g-rise { from { opacity: 0; translate: 0 12px; } }

/* search capsule */
.search { border-radius: 999px; padding: 13px 18px 13px 44px; border: 1px solid var(--glass-edge); background-color: var(--glass-hi);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 16px center;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--lift); transition: box-shadow .3s var(--ease); }
.search:focus { outline: none; box-shadow: var(--lift), 0 0 0 4px rgb(0 0 0 / .06); }

/* segmented tabs */
.tabs, .seg { border: 1px solid var(--glass-edge); border-radius: 16px; padding: 4px; gap: 2px; background: rgb(0 0 0 / .035);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: inset 0 1px 2px rgb(0 0 0 / .04); }
.tabs { width: fit-content; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button, .seg button { border: 0; border-radius: 12px; white-space: nowrap; transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease); }
.tabs button:hover, .seg button:hover { color: var(--ink); background: rgb(255 255 255 / .5); }
.tabs button.on, .seg button.on { color: var(--ink); background: #fff; border-bottom-color: transparent; box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 6px 14px -8px rgb(30 40 70 / .3); }

/* glass panels */
.kpi, .split, table.t, table { border: 1px solid var(--glass-edge); background: linear-gradient(180deg, rgb(255 255 255 / .8), rgb(255 255 255 / .55));
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--lift); }
table.t, table { border-collapse: separate; border-spacing: 0; border-radius: 18px; overflow: hidden; }
table.t th, th { background: rgb(255 255 255 / .55); border-bottom: 1px solid var(--glass-line); padding: 12px 12px; }
table.t td, td { border-bottom: 1px solid var(--glass-line); padding: 10px 12px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .25s var(--ease); }
tbody tr:hover { background: rgb(255 255 255 / .7); }
.split { border-radius: 22px; }
.tree { border-right-color: var(--glass-line); padding: 8px; }
.tree .fo { border-radius: 10px; margin: 1px 0; transition: background .25s var(--ease); }
.tree .fo:hover { color: var(--ink); background: rgb(255 255 255 / .7); }
.tree .fo.sel { background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 6px 14px -8px rgb(30 40 70 / .28); }
.preview { border: 1px solid var(--glass-line); background: rgb(255 255 255 / .7); border-radius: 16px; }

/* KPI cards with pointer light */
.kpis { gap: 16px; }
.kpi { position: relative; overflow: hidden; border-radius: 22px; padding: 20px 20px 18px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.kpi::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .95), transparent 62%); mix-blend-mode: soft-light; }
.kpi::after { content: ""; position: absolute; top: 18px; right: 18px; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, #fff 0%, #f1f3f7 45%, #e3e7ee 100%) center / cover;
  box-shadow: inset 0 1px 1px #fff, 0 6px 14px -8px rgb(20 30 60 / .4); transition: background .4s var(--ease), transform .5s var(--ease); }
.kpi > * { position: relative; z-index: 1; }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--lift-hi); border-color: var(--glass-edge); background: linear-gradient(180deg, rgb(255 255 255 / .92), rgb(255 255 255 / .66)); }
.kpi:hover::before { opacity: 1; }
.kpi:hover::after { background: radial-gradient(circle at 32% 26%, #4a4a4f 0%, #111 55%, #000 100%); transform: rotate(-45deg) scale(1.05); }
.kpi .v { font-size: 34px; letter-spacing: -.02em; }

/* capsule buttons */
.sb, body > button, td button, form button, .wrap button { border-radius: 999px; border: 1px solid var(--glass-line); background: rgb(255 255 255 / .75);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(0 0 0 / .05);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); }
.sb:hover, body > button:hover, td button:hover, form button:hover, .wrap button:hover { background: #fff; border-color: var(--glass-line); box-shadow: inset 0 1px 0 #fff, 0 8px 18px -10px rgb(30 40 70 / .35); transform: translateY(-1px); }
.sb:active, body > button:active, td button:active, form button:active { transform: scale(.97); }
.sb.gold, form button[value=save] { background: linear-gradient(180deg, #2a2a2e, #000); color: #fff; border-color: #000; box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 10px 22px -12px rgb(0 0 0 / .55); }
.sb.gold:hover, form button[value=save]:hover { background: linear-gradient(180deg, #3a3a3f, #0a0a0a); }
.tag { border-radius: 999px; padding: 3px 9px; background: rgb(255 255 255 / .75); border: 1px solid var(--glass-line); color: #444; }
.filters select, dialog select, select { border-radius: 12px; border: 1px solid var(--glass-line); background: rgb(255 255 255 / .8); padding: 8px 10px; }

/* fields */
input[type=text], input[type=email], input[type=number], input:not([type]), textarea {
  border: 1px solid var(--glass-line); border-radius: 12px; background: rgb(255 255 255 / .8); padding: 10px 12px;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease); }
input:focus, textarea:focus, select:focus { outline: none; border-color: rgb(0 0 0 / .3); box-shadow: 0 0 0 4px rgb(0 0 0 / .06); }
input[type=checkbox] { accent-color: #000; width: 16px; height: 16px; vertical-align: -3px; }
fieldset { border: 1px solid var(--glass-line); border-radius: 16px; background: rgb(255 255 255 / .5); }

/* sheet dialogs */
dialog { border: 1px solid var(--glass-edge); border-radius: 28px; background: rgb(255 255 255 / .82);
  -webkit-backdrop-filter: blur(36px) saturate(180%); backdrop-filter: blur(36px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, 0 50px 100px -30px rgb(30 40 70 / .45); }
dialog[open] { animation: g-sheet .45s var(--ease); }
dialog::backdrop { background: rgb(235 238 245 / .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
dialog h2 { margin-top: 0; }
@keyframes g-sheet { from { opacity: 0; transform: translateY(16px) scale(.97); } }

footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  h1, .brand .bar, dialog[open] { animation: none; }
  .pwrap > *, body > h1, body > h2, body > .wrap, body > button, body > label { animation: none; }
}
.brand .lshine { animation: g-lshine 7s cubic-bezier(.45,.05,.25,1) infinite; }
@keyframes g-lshine { 0% { transform: translateX(0); } 32%, 100% { transform: translateX(1560px); } }
@media (prefers-reduced-motion: reduce) { .brand .lshine { animation: none; } }
.kpi .lab { padding-right: 40px; }
.seg { overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }