:root{--human-bg:#0b0e14;--human-surface:rgba(255,255,255,0.06);--human-text:#eceef2;--human-accent:#f0abfc;--human-radius:16px;--human-gap:12px;--human-blur:16px;--human-shadow:0 8px 32px rgba(0,0,0,0.28);--human-font:"Plus Jakarta Sans";--human-mono:"JetBrains Mono";}

:root {
    --primary-h: 0;
    --primary-s: 0%;
    --primary-l: 88%;

    --md-sys-color-primary: hsl(0, 0%, 92%);
    --md-sys-color-on-primary: hsl(0, 0%, 7%);
    --md-sys-color-primary-container: hsl(0, 0%, 16%);
    --md-sys-color-on-primary-container: hsl(0, 0%, 88%);
    --md-sys-color-secondary: hsl(0, 0%, 68%);
    --md-sys-color-on-secondary: hsl(0, 0%, 10%);
    --md-sys-color-secondary-container: hsl(0, 0%, 16%);
    --md-sys-color-on-secondary-container: hsl(0, 0%, 86%);
    --md-sys-color-tertiary: hsl(0, 0%, 70%);
    --md-sys-color-on-tertiary: hsl(0, 0%, 10%);
    --md-sys-color-tertiary-container: hsl(0, 0%, 16%);
    --md-sys-color-on-tertiary-container: hsl(0, 0%, 88%);

    --md-sys-color-surface: hsl(0, 0%, 7%);
    --md-sys-color-surface-dim: hsl(0, 0%, 5%);
    --md-sys-color-surface-bright: hsl(0, 0%, 11%);
    --md-sys-color-on-surface: hsl(0, 0%, 92%);
    --md-sys-color-surface-variant: hsl(0, 0%, 16%);
    --md-sys-color-on-surface-variant: hsl(0, 0%, 80%);
    --md-sys-color-surface-container-lowest: hsl(0, 0%, 4%);
    --md-sys-color-surface-container-low: hsl(0, 0%, 9%);
    --md-sys-color-surface-container: hsl(0, 0%, 12%);
    --md-sys-color-surface-container-high: hsl(0, 0%, 15%);
    --md-sys-color-surface-container-highest: hsl(0, 0%, 19%);
    --md-sys-color-outline: hsl(0, 0%, 42%);
    --md-sys-color-outline-variant: hsl(0, 0%, 22%);
    --md-sys-color-inverse-surface: hsl(0, 0%, 90%);
    --md-sys-color-inverse-primary: hsl(0, 0%, 20%);
    --md-sys-color-error: #ff5a5a;
    --md-sys-color-success: #4ade80;
    --md-sys-color-warning: #fbbf24;
    --md-sys-color-border: var(--md-sys-color-outline-variant);
    --md-sys-color-border-strong: var(--md-sys-color-outline);
    --radius-xs: 4px;
    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-xl: 28px;
    --radius-full: 9999px;
    --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --elevation-2: 0 4px 10px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35);
    --elevation-3: 0 8px 20px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.4);
    --transition-standard: 240ms cubic-bezier(0.2, 0, 0, 1);
    --transition-decelerate: 300ms cubic-bezier(0.05, 0.7, 0.1, 1);
    --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --drawer-width: 270px;
    --rail-width: 76px;

  --lime: #e0f28c;
  --lime-strong: hsl(0, 0%, 82%);
  --lime-soft: hsla(0, 0%, 92%, 0.10);
  --lime-glow: hsla(0, 0%, 100%, 0.14);
  --ink: hsl(0, 0%, 7%);
  --ink-2: hsl(0, 0%, 5%);
  --surface: var(--md-sys-color-surface-container);
  --surface-2: hsl(0, 0%, 10%);
  --surface-3: var(--md-sys-color-surface-container-high);
  --surface-4: var(--md-sys-color-surface-container-highest);
  --text: var(--md-sys-color-on-surface);
  --text-2: hsl(var(--primary-h), 12%, 90%);
  --text-3: hsl(var(--primary-h), 10%, 89%);
  --text-4: hsl(var(--primary-h), 8%, 66%);
  --line: var(--md-sys-color-outline-variant);
  --line-strong: var(--md-sys-color-outline);
  --line-highlight: hsla(var(--primary-h), 10%, 26%, 0.5);
  --success: var(--md-sys-color-success);
  --warning: var(--md-sys-color-warning);
  --danger: var(--md-sys-color-error);
  --md-font: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --display-font: 'Space Grotesk', 'Plus Jakarta Sans', 'Inter', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --md-radius: var(--radius-l);
  --md-radius-sm: var(--radius-m);
  --md-radius-xs: var(--radius-s);
  --radius-pill: var(--radius-full);
  --shadow-soft: var(--elevation-1);
  --shadow-lift: var(--elevation-3);
  --shadow-card: var(--elevation-2);
  --shadow-glow-lime: 0 8px 24px hsla(var(--primary-h), 65%, 74%, 0.16);
  --glass-bg: hsla(var(--primary-h), 14%, 12%, 0.72);
  --glass-border: var(--md-sys-color-outline-variant);
  --blur: 16px;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --dur-1: 180ms; --dur-2: 260ms; --dur-3: 420ms;

  --cube-depth: 420px;
  --cube-rot-y: 0deg;
  --ease-spring: cubic-bezier(0.34, 1.24, 0.5, 1);
  --ease-spring-soft: cubic-bezier(0.22, 1.04, 0.32, 1);
}
@supports (transition-timing-function: linear(0, 1)){
    :root {
        --ease-spring: linear(0, 4.17% 0.0933, 8.33% 0.2953, 12.5% 0.5206, 16.67% 0.7207, 20.83% 0.8735, 25% 0.9757, 29.17% 1.034, 33.33% 1.0592, 37.5% 1.0625, 41.67% 1.0538, 45.83% 1.0401, 50% 1.0262, 54.17% 1.0144, 58.33% 1.0057, 62.5% 1.0001, 66.67% 0.9972, 70.83% 0.9961, 75% 0.9962, 79.17% 0.9968, 83.33% 0.9977, 87.5% 0.9986, 91.67% 0.9993, 95.83% 0.9998, 100% 1);
        --ease-spring-soft: linear(0, 5% 0.089, 10% 0.2686, 15% 0.4598, 20% 0.6257, 25% 0.7555, 30% 0.8494, 35% 0.9131, 40% 0.9541, 45% 0.9788, 50% 0.9928, 55% 0.9999, 60% 1.003, 65% 1.0039, 70% 1.0036, 75% 1.003, 80% 1.0022, 85% 1.0016, 90% 1.001, 95% 1.0006, 100% 1);
    }
}
[data-theme="ocean"] { --primary-h: 210; }
[data-theme="amethyst"] { --primary-h: 275; }
[data-theme="amber"] { --primary-h: 38; }
[data-theme="rose"] { --primary-h: 345; }
.light-theme, :root.light-theme {
    --md-sys-color-primary: hsl(0, 0%, 12%);
    --md-sys-color-on-primary: hsl(0, 0%, 100%);
    --md-sys-color-primary-container: hsl(0, 0%, 80%);
    --md-sys-color-on-primary-container: hsl(0, 0%, 12%);
    --md-sys-color-secondary: hsl(0, 0%, 30%);
    --md-sys-color-on-secondary: hsl(0, 0%, 100%);
    --md-sys-color-secondary-container: hsl(0, 0%, 85%);
    --md-sys-color-on-secondary-container: hsl(0, 0%, 12%);
    --md-sys-color-tertiary: hsl(0, 0%, 28%);
    --md-sys-color-on-tertiary: hsl(0, 0%, 100%);
    --md-sys-color-tertiary-container: hsl(0, 0%, 83%);
    --md-sys-color-on-tertiary-container: hsl(0, 0%, 12%);
    --md-sys-color-surface: hsl(0, 0%, 92%);
    --md-sys-color-surface-dim: hsl(0, 0%, 86%);
    --md-sys-color-surface-bright: hsl(0, 0%, 96%);
    --md-sys-color-on-surface: hsl(0, 0%, 10%);
    --md-sys-color-surface-variant: hsl(0, 0%, 88%);
    --md-sys-color-on-surface-variant: hsl(0, 0%, 28%);
    --md-sys-color-surface-container-lowest: hsl(0, 0%, 96%);
    --md-sys-color-surface-container-low: hsl(0, 0%, 90%);
    --md-sys-color-surface-container: hsl(0, 0%, 86%);
    --md-sys-color-surface-container-high: hsl(0, 0%, 82%);
    --md-sys-color-surface-container-highest: hsl(0, 0%, 78%);
    --md-sys-color-outline: hsl(var(--primary-h), 18%, 46%);
    --md-sys-color-outline-variant: hsl(var(--primary-h), 20%, 70%);
    --md-sys-color-inverse-surface: hsl(var(--primary-h), 30%, 15%);
    --md-sys-color-inverse-primary: hsl(var(--primary-h), 65%, 82%);
    --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
    --elevation-2: 0 3px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --elevation-3: 0 6px 14px rgba(0, 0, 0, 0.12), 0 3px 6px rgba(0, 0, 0, 0.08);
}
.light-theme .floating-nav-bar { background-color: var(--md-sys-color-surface-container-high); border-color: var(--md-sys-color-outline-variant); }
.light-theme .floating-nav-indicator { background-color: var(--md-sys-color-primary); }
.light-theme .floating-nav-item.active { color: var(--md-sys-color-on-primary); }
.light-theme .floating-nav-item { color: var(--md-sys-color-on-surface-variant); }
.light-theme .floating-nav-item:hover { color: var(--md-sys-color-on-surface); }
.dark-theme, :root.dark-theme { --md-sys-color-primary: hsl(var(--primary-h), 65%, 74%); --md-sys-color-on-primary: hsl(var(--primary-h), 65%, 12%); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; scrollbar-width: none !important; -ms-overflow-style: none !important; }
[hidden] { display: none !important; }
*::-webkit-scrollbar, *::-webkit-scrollbar-thumb, *::-webkit-scrollbar-track { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
body {
  font-family: var(--md-font);
  background: var(--ink);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body::after {
  content: ''; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.018; pointer-events: none; z-index: 9999; mix-blend-mode: soft-light;
}
button { font-family: inherit; cursor: var(--velard-cursor, pointer); border: none; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

.app-main, .tool-modal-card{ text-shadow:0 1px 8px rgba(0,0,0,.6); }

.bg-static{
  position:fixed; inset:0; overflow:hidden;
  background-color:#0a0a20;
  background-image:
    radial-gradient(ellipse 90% 46% at 28% -8%, rgba(232,226,255,0.5) 0%, rgba(200,190,250,0.2) 46%, transparent 70%),
    linear-gradient(115deg, rgba(190,182,255,0.14) 0%, rgba(124,110,250,0.3) 34%, rgba(129,120,250,0.14) 52%, transparent 68%),
    radial-gradient(ellipse 52% 52% at 58% 44%, rgba(139,124,252,0.38) 0%, rgba(110,95,235,0.16) 52%, transparent 74%),
    radial-gradient(ellipse 44% 52% at 86% 54%, rgba(34,211,238,0.32) 0%, rgba(14,116,144,0.16) 48%, transparent 74%),
    radial-gradient(ellipse 70% 52% at 10% 98%, rgba(32,84,224,0.72) 0%, rgba(18,40,150,0.4) 52%, transparent 78%),
    linear-gradient(180deg, #08081c 0%, #121034 30%, #1b1850 50%, #101448 74%, #040412 100%);
  z-index:-1; pointer-events:none;
}
.bg-static::before{
  content:''; position:absolute; inset:-12%;
  background:
    radial-gradient(ellipse 44% 34% at 30% 22%, rgba(205,195,255,0.28) 0%, transparent 70%),
    radial-gradient(ellipse 38% 34% at 80% 52%, rgba(34,211,238,0.22) 0%, transparent 70%),
    radial-gradient(ellipse 52% 30% at 52% 46%, rgba(139,124,252,0.2) 0%, transparent 70%),
    radial-gradient(ellipse 58% 32% at 22% 94%, rgba(52,110,255,0.3) 0%, transparent 72%);
  animation: bgAuroraDrift 26s ease-in-out infinite alternate;
  will-change: transform; pointer-events:none;
}
@keyframes bgAuroraDrift{
  0%{ transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
  50%{ transform: translate3d(2%, 1.2%, 0) scale(1.05); }
  100%{ transform: translate3d(-1%, 2.2%, 0) scale(1.02); }
}
.bg-static::after{
  content:''; position:absolute; inset:0; display:block;
  background:
    linear-gradient(180deg, rgba(6,6,20,0.34) 0%, transparent 24%, transparent 66%, rgba(2,2,10,0.48) 100%),
    radial-gradient(ellipse 125% 105% at 50% 45%, transparent 58%, rgba(2,2,10,0.55) 100%);
  pointer-events:none;
}
.bg-static svg.bg-curves{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.bg-silk-sway{
  animation: silkSway 32s ease-in-out infinite alternate;
  transform-box: fill-box; transform-origin: center;
}
@keyframes silkSway{
  from{ transform: translateX(-18px); }
  to{ transform: translateX(18px); }
}
@media (prefers-reduced-motion: reduce){
  .bg-static::before{ animation: none; }
  .bg-silk-sway{ animation: none; }
}
.bg-glow { display: none !important; }
.streak-bg { display:none !important; }
.streak-bg-dummy{ display:none; }
.streak-bg-old {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
  background: #04060a;

  background-image:
    radial-gradient(ellipse 1400px 900px at 18% -8%, rgba(96,165,250,0.16) 0%, rgba(96,165,250,0.08) 28%, transparent 58%),
    radial-gradient(ellipse 1100px 780px at 88% 12%, rgba(168,85,247,0.13) 0%, rgba(168,85,247,0.06) 32%, transparent 62%),
    radial-gradient(ellipse 980px 640px at 48% 38%, rgba(34,211,238,0.10) 0%, transparent 66%),
    radial-gradient(ellipse 820px 560px at 72% 78%, rgba(236,72,153,0.08) 0%, transparent 64%),
    radial-gradient(ellipse 680px 480px at 22% 68%, rgba(59,130,246,0.09) 0%, transparent 68%),
    radial-gradient(ellipse 1200px 700px at 50% 100%, rgba(6,8,20,0.92) 0%, transparent 72%),
    linear-gradient(180deg, #05070a 0%, #070a14 32%, #06080a 68%, #04060a 100%);
  background-color: #04060a;
  z-index: -1; pointer-events: none; overflow: hidden;
}
.streak-bg::before{
  content:''; position:absolute; inset:-20% -10%; pointer-events:none; z-index:2;
  background:
    linear-gradient(112deg, transparent 28%, rgba(96,165,250,0.07) 42%, rgba(168,85,247,0.06) 54%, transparent 72%),
    linear-gradient(-12deg, transparent 22%, rgba(34,211,238,0.06) 38%, rgba(236,72,153,0.04) 52%, transparent 74%),
    radial-gradient(ellipse 700px 320px at 34% 18%, rgba(96,165,250,0.07) 0%, transparent 68%),
    radial-gradient(ellipse 520px 280px at 78% 32%, rgba(168,85,247,0.06) 0%, transparent 68%);
  filter: blur(18px) saturate(1.15);
  opacity:0.9;
  animation: auroraDrift 28s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes auroraDrift{
  0%,100%{ transform: translate3d(0,0,0) scale(1) rotate(0deg); opacity:0.88; }
  33%{ transform: translate3d(-14px,8px,0) scale(1.02) rotate(0.6deg); opacity:1; }
  66%{ transform: translate3d(10px,-10px,0) scale(1.03) rotate(-0.5deg); opacity:0.92; }
}
.streak-bg .bumi-img{
  position:absolute; left:50%; bottom:-5%; top:auto; transform:translateX(-50%);
  width:min(1380px, 140vw); height:min(560px, 54vh); object-fit:cover; object-position:center 28%;
  opacity:1; filter:brightness(1.22) saturate(1.28) contrast(1.12) drop-shadow(0 -8px 32px rgba(110,180,255,0.18));
  -webkit-mask-image:
    radial-gradient(ellipse 88% 74% at 50% 100%, black 44%, transparent 78%),
    linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 88% 74% at 50% 100%, black 44%, transparent 78%),
    linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-composite:source-in, source-in; mask-composite:intersect, intersect;
  border-radius:50% 50% 0 0 / 18% 18% 0 0;
  pointer-events:none; z-index:1;
  animation:bumiBreathe 18s ease-in-out infinite;
  will-change:transform;
}
.streak-bg .bumi-glow{
  position:absolute; left:50%; bottom:2.5%; transform:translateX(-50%);
  width:min(1100px, 98vw); height:68px;
  background:radial-gradient(ellipse at 50% 0%, rgba(110,180,255,0.72) 0%, rgba(66,140,255,0.36) 28%, rgba(34,211,238,0.18) 48%, rgba(168,85,247,0.08) 62%, transparent 76%);
  filter:blur(16px); opacity:1; pointer-events:none; z-index:2;
  animation:glowPulse 4.2s ease-in-out infinite;
}
.streak-bg .blackhole-img{
  position:absolute; right:-1%; bottom:19%; left:auto; top:auto; transform:none;
  width:min(660px, 58vw); height:auto; aspect-ratio:1.82; object-fit:cover; object-position:center 44%;
  opacity:0.68; filter:brightness(1.06) saturate(1.12) contrast(1.08) drop-shadow(0 0 28px rgba(96,165,250,0.22));
  -webkit-mask-image:radial-gradient(ellipse 74% 66% at 58% 48%, black 46%, transparent 76%);
  mask-image:radial-gradient(ellipse 74% 66% at 58% 48%, black 46%, transparent 76%);
  pointer-events:none; z-index:2; transform-origin:62% 48%;
  animation:holeDrift 22s ease-in-out infinite 1.2s;
  will-change:transform;
}
.streak-bg .blackhole-glow{
  position:absolute; right:-1%; bottom:19%; left:auto; top:auto; transform:none;
  width:min(620px, 56vw); height:min(380px, 46vh);
  background:radial-gradient(ellipse at 52% 48%, rgba(110,180,255,0.18) 0%, rgba(80,120,255,0.10) 30%, rgba(168,85,247,0.08) 48%, transparent 70%);
  filter:blur(20px); opacity:0.95; pointer-events:none; z-index:2;
  animation:glowPulse 5.6s ease-in-out infinite 0.8s;
}

@keyframes bumiBreathe{
  0%,100%{ transform:translateX(-50%) scale(1) translateY(0); filter:brightness(1.18) saturate(1.22) contrast(1.08); }
  50%{ transform:translateX(-50%) scale(1.015) translateY(-5px); filter:brightness(1.22) saturate(1.26) contrast(1.10); }
}
@keyframes holeDrift{
  0%,100%{ transform:translate3d(0,0,0) scale(1) rotate(0deg); }
  35%{ transform:translate3d(-7px,5px,0) scale(1.012) rotate(0.28deg); }
  68%{ transform:translate3d(4px,-4px,0) scale(1.016) rotate(-0.22deg); }
}
@keyframes bumiSpin{
  from{ transform:translateX(-50%) rotate(0deg); }
  to{ transform:translateX(-50%) rotate(360deg); }
}
@keyframes glowPulse{
  0%,100%{ opacity:0.92; filter:blur(14px) brightness(1); }
  50%{ opacity:1; filter:blur(16px) brightness(1.12); }
}
@media(prefers-reduced-motion:reduce){
  .streak-bg .bumi-img, .streak-bg .blackhole-img, .streak-bg .bumi-glow, .streak-bg .blackhole-glow{ animation:none !important; }
}
@media(max-width:900px){
  .streak-bg .bumi-img{ width:148vw; height:44vh; bottom:-2%; opacity:0.72; }
  .streak-bg .blackhole-img{ width:78vw; right:-6%; bottom:22%; opacity:0.52; }
  .streak-bg .blackhole-glow{ right:-6%; bottom:22%; }
}
.comets{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2;}

@media(max-width:1024px){
  .comets, .comet, .edge-flashes{ display:none !important; }
}
.comet{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--len); height:1.9px;
  background:linear-gradient(90deg, rgba(34,211,238,0) 0%, rgba(59,130,246,0.42) 38%, rgba(96,165,250,0.68) 66%, rgba(140,190,255,0.94) 86%, #eef6ff 100%);
  border-radius:999px; opacity:0;
  box-shadow:0 0 9px rgba(59,130,246,0.52), 0 0 16px rgba(34,211,238,0.32), 0 0 22px rgba(96,165,250,0.14);
  transform:translate3d(0,0,0) rotate(14deg);
  animation:cometFly var(--d) linear infinite;
  animation-delay:var(--delay);
  will-change:transform,opacity;
}
.comet.comet-fast{
  height:1.9px;
  background:linear-gradient(90deg, rgba(34,211,238,0) 0%, rgba(96,165,250,0.52) 42%, rgba(120,180,255,0.78) 68%, #fff 100%);
  box-shadow:0 0 10px rgba(96,165,250,0.72), 0 0 18px rgba(59,130,246,0.42);
  filter:brightness(1.18);
}
.comet.comet-fast::after{ width:4px; height:4px; box-shadow:0 0 9px #fff, 0 0 16px rgba(96,165,250,0.92); }
.comet.comet-ultra{
  height:2.2px;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(96,165,250,0.0) 22%, rgba(96,165,250,0.58) 48%, rgba(170,200,255,0.88) 72%, #ffffff 94%, #e6f0ff 100%);
  box-shadow:0 0 12px rgba(96,165,250,0.72), 0 0 22px rgba(59,130,246,0.42), 0 0 28px rgba(34,211,238,0.22);
  filter:brightness(1.18) contrast(1.04);
  animation:cometFly var(--d) linear forwards !important;
}
.comet.comet-ultra::after{
  width:5px; height:5px; background:#fff; box-shadow:0 0 10px #fff, 0 0 18px rgba(96,165,250,1), 0 0 28px rgba(59,130,246,0.72);
}
.comet.comet-ultra::before{
  content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:28px; height:12px; border-radius:50%;
  background:radial-gradient(ellipse at 30% 50%, rgba(96,165,250,0.28) 0%, transparent 72%);
  filter:blur(3px);
}
.comet::after{
  content:''; position:absolute; right:-1px; top:50%; transform:translateY(-50%);
  width:3.4px; height:3.4px; background:#e0f0ff; border-radius:50%;
  box-shadow:0 0 7px rgba(255,255,255,0.96), 0 0 13px rgba(59,130,246,0.82), 0 0 18px rgba(34,211,238,0.62);
}
@keyframes cometFly{
  0%{ transform:translate3d(0,0,0) rotate(14deg); opacity:0; }
  8%{ opacity:0.88; }
  100%{ transform:translate3d(92vw, 24vh, 0) rotate(14deg); opacity:0; }
}
@media(prefers-reduced-motion:reduce){ .comet{ animation:none !important; opacity:0; } }
@media(prefers-reduced-motion:reduce){ .comet{ animation:none !important; opacity:0.18; } }
.edge-flashes{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;}
.edge-flash{
  position:absolute; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(110,160,255,0.96) 0%, rgba(66,120,255,0.58) 22%, rgba(34,211,238,0.20) 44%, transparent 70%);
  filter:blur(22px); opacity:0;
  animation:edgeFlash var(--d) ease-in-out infinite;
  animation-delay:var(--delay);
  will-change:opacity,transform;
}
.edge-flash::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:10px; height:10px; background:#e6f0ff; border-radius:50%;
  box-shadow:0 0 14px rgba(255,255,255,0.96), 0 0 26px rgba(110,160,255,0.88), 0 0 42px rgba(34,211,238,0.56);
  opacity:0.96;
}

.ef-tl{ right:-180px; top:6%; left:auto; }
.ef-tr{ right:-180px; top:18%; left:auto; }
.ef-bl{ right:-180px; top:32%; left:auto; bottom:auto; }
.ef-br{ right:-180px; top:48%; left:auto; bottom:auto; }
.ef-lm{ right:-180px; top:64%; left:auto; }
.ef-rm{ right:-180px; top:78%; left:auto; }
@keyframes edgeFlash{
  0%{ opacity:0; transform:scale(0.72); filter:brightness(1); }
  3%{ opacity:0; transform:scale(0.72); }
  4%{ opacity:0.96; transform:scale(1); filter:brightness(1.35); }
  6%{ opacity:0.18; transform:scale(1.02); }
  7%{ opacity:0.88; transform:scale(1.01); filter:brightness(1.22); }
  9%{ opacity:0.32; transform:scale(1.03); }
  12%{ opacity:0.72; transform:scale(1.02); }
  18%{ opacity:0; transform:scale(0.88); filter:brightness(1); }
  100%{ opacity:0; transform:scale(0.72); }
}
@media(max-width:640px){
  .edge-flash{ width:260px; height:260px; filter:blur(16px); }
  .ef-tl{ right:-130px; top:8%; left:auto; } .ef-tr{ right:-130px; top:20%; left:auto; }
  .ef-bl{ right:-130px; top:36%; left:auto; bottom:auto; } .ef-br{ right:-130px; top:52%; left:auto; bottom:auto; }
  .ef-lm{ right:-130px; top:68%; left:auto; } .ef-rm{ right:-130px; top:82%; left:auto; }
}
@media(prefers-reduced-motion:reduce){ .edge-flash{ animation:none !important; opacity:0.22; } }

.galaxy-particles{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;}
.galaxy-particles .gp{
  position:absolute; border-radius:50%; background:#cdd6f4;
  opacity:0; box-shadow:0 0 4px rgba(180,190,255,0.52);
  animation:gpDrift var(--d) ease-in-out infinite;
  animation-delay:var(--delay);
  will-change:transform,opacity;
}
.galaxy-particles .gp::after{
  content:''; position:absolute; inset:-3px; border-radius:50%;
  background:radial-gradient(circle, rgba(180,190,255,0.18) 0%, transparent 68%);
  filter:blur(1.5px);
}
@keyframes gpDrift{
  0%{ transform:translate3d(0,0,0) scale(1); opacity:0; }
  12%{ opacity:var(--o); }
  50%{ transform:translate3d(var(--tx), var(--ty), 0) scale(1.06); opacity:var(--o); }
  88%{ opacity:var(--o); }
  100%{ transform:translate3d(calc(var(--tx) * 1.6), calc(var(--ty) * 1.6), 0) scale(0.92); opacity:0; }
}
@media(prefers-reduced-motion:reduce){ .galaxy-particles .gp{ animation:none !important; opacity:0.12; } }
.streak-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0.52; z-index:1; filter: drop-shadow(0 0 8px rgba(180,190,255,0.12)); }
.streak-bg .galaxy-stars,
.streak-bg .galaxy-stars2 {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index:1;
}
.streak-bg .galaxy-stars { opacity: 0.58; animation:starTwinkle 7.2s ease-in-out infinite; }
.streak-bg .galaxy-stars2 { opacity: 0.34; transform: scale(1.4); animation:starTwinkle 9.4s ease-in-out infinite reverse; }
@keyframes starTwinkle{ 0%,100%{opacity:0.48} 50%{opacity:0.72} }
.streak-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 4;
  background-image:
    linear-gradient(rgba(255,255,255,0.008) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.008) 1px, transparent 1px),
    radial-gradient(ellipse 900px 500px at 50% 100%, rgba(6,10,28,0.72) 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, transparent 62%, rgba(4,6,14,0.58) 88%, rgba(2,4,10,0.82) 100%);
  background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
  opacity: 0.42;
  pointer-events: none;
}
@media(max-width:640px){
  .streak-bg .bimasakti-img{ width:148vw; height:92vh; top:40%; opacity:0.32; }
  .streak-bg .blackhole-img{ width:112vw; right:-14%; bottom:-2%; left:auto; top:auto; opacity:0.36; }
  .streak-bg .blackhole-glow{ width:96vw; right:-8%; bottom:-2%; left:auto; top:auto; }
}

.app-container {
  display: flex; flex: 1; min-height: 0; width: 100%; max-width: 920px; margin: 0 auto;
  gap: 16px; align-items: flex-start; justify-content: center; padding: 20px 16px 118px;
}
.app-main {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 44px 16px 16px; width: 100%;
}
.dash-panels { width: 100%; max-width: 560px; margin:0 auto; }
html, body{ max-width:100% !important; overflow-x:hidden !important; }
.dash-panel { display: flex; flex-direction: column; gap: 18px; width:100%; }
.dash-panel[hidden] { display: none !important; }

@media(min-width:641px) and (max-width:1024px){
  .slide-container.cube-viewport{ width:100% !important; max-width:100% !important; margin:0 auto !important; left:auto !important; right:auto !important; }
  .slide-panel.cube-face{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; }
  .slide-track.cube-3d-box{ width:100% !important; }
}

html{ overscroll-behavior:auto; }
body{ overflow-y:auto; overflow-x:hidden; height:auto; overscroll-behavior:auto; }
.app-container{ height:auto !important; min-height:0 !important; overflow:visible !important; }
.app-main{ overflow:visible !important; }
.slide-container.cube-viewport{ overflow:hidden !important; min-height:0 !important; height:auto !important; max-height:none !important; }
.slide-track.cube-3d-box{ height:auto !important; }
.slide-panel.cube-face{ overflow:visible !important; height:auto !important; max-height:none !important; padding:0 16px 32px; }

body:not([data-view="beranda"]){
  overflow-y:auto !important;
  overflow-x:hidden !important;
  height:auto !important;
  min-height:100dvh !important;
  overscroll-behavior:auto !important;
}
body:not([data-view="beranda"]) .app-container{
  height:auto !important;
  min-height:calc(100dvh - 20px) !important;
  max-height:none !important;
  overflow:visible !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding:10px 16px 120px !important;
}
body:not([data-view="beranda"]) .app-main{
  height:auto !important;
  min-height:calc(100dvh - 32px) !important;
  overflow:visible !important;
  justify-content:flex-start !important;
  align-items:center !important;
  padding:10px 0 0 !important;
  width:100% !important;
}
body:not([data-view="beranda"]) .slide-container.cube-viewport{
  height:auto !important;
  min-height:calc(100dvh - 110px) !important;
  max-height:none !important;
  overflow:visible !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding-top:0 !important;
}
body:not([data-view="beranda"]) .slide-track.cube-3d-box{
  height:auto !important;
  align-items:flex-start !important;
}
body:not([data-view="beranda"]) .slide-panel.cube-face{
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  overflow:visible !important;
  overflow-x:hidden !important;
  padding:6px 16px 40px !important;
  justify-content:flex-start !important;
  align-items:center !important;
  align-content:flex-start !important;
  gap:12px !important;
  box-sizing:border-box !important;
}

body:not([data-view="beranda"]) .panel-head-large{ margin-bottom:2px !important; padding-bottom:6px !important; }
body:not([data-view="beranda"]) .panel-head-large .panel-title-large{ font-size: clamp(1.35rem, 3.6vw, 1.75rem) !important; line-height:1.05 !important; }
body:not([data-view="beranda"]) .upload-card{ padding:12px !important; gap:8px !important; max-width:560px !important; }
body:not([data-view="beranda"]) .upload-area{ padding:16px 12px !important; }
body:not([data-view="beranda"]) .upload-icon{ font-size:28px !important; margin-bottom:3px !important; }
body:not([data-view="beranda"]) .upload-text{ font-size:13px !important; }
body:not([data-view="beranda"]) .toggle-row{ gap:8px !important; }
body:not([data-view="beranda"]) .tools-grid-new{ gap:8px !important; }
body:not([data-view="beranda"]) .tool-card-new{ padding:10px 11px !important; }
body:not([data-view="beranda"]) .tutorial-grid{ gap:10px !important; display:grid !important; grid-template-columns:1fr 1fr !important; align-items:start !important; }
body:not([data-view="beranda"]) .tutorial-card{ padding:9px 9px !important; }
body:not([data-view="beranda"]) .tutorial-card h3{ font-size:11.5px !important; }
body:not([data-view="beranda"]) .tutorial-card p{ font-size:10.5px !important; line-height:1.45 !important; }
body:not([data-view="beranda"]) .tutorial-step{ padding:4px 0 !important; gap:6px !important; }
body:not([data-view="beranda"]) .tutorial-step .step-num{ width:22px !important; height:22px !important; font-size:10px !important; }
body[data-view="tutorial"] .tutorial-card{ padding:8px 9px !important; }
body[data-view="tutorial"] .tutorial-grid{ gap:8px !important; }
body[data-view="tutorial"] .tut-section-title{ font-size:10px !important; margin-bottom:6px !important; padding-bottom:6px !important; }
body[data-view="tutorial"] .help-card-wide{ padding:8px 10px !important; min-height:0 !important; }
body[data-view="tutorial"] .app-container{ padding-bottom:90px !important; }
body[data-view="tutorial"] .slide-panel.cube-face{ padding-bottom:16px !important; }
body:not([data-view="beranda"]) .help-card-wide{ padding:10px 12px !important; gap:8px !important; }
body:not([data-view="beranda"]) .donate-card{ gap:10px !important; padding:12px !important; }
body:not([data-view="beranda"]) .qris-image{ width:164px !important; height:164px !important; }
body:not([data-view="beranda"]) .about-card{ gap:10px !important; padding:12px !important; }
body:not([data-view="beranda"]) .feature-item{ padding:9px 10px !important; }
body:not([data-view="beranda"]) .about-contact{ padding-top:10px !important; margin-bottom:4px !important; }
@media(max-width:860px){
  body:not([data-view="beranda"]) .tutorial-grid{ grid-template-columns:1fr 1fr !important; }
}
@media(max-width:640px){
  body:not([data-view="beranda"]) .app-container{ height:auto !important; min-height:0 !important; max-height:none !important; padding:10px 10px 110px !important; overflow:visible !important; }
  body:not([data-view="beranda"]) .slide-container.cube-viewport{ height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; }
  body:not([data-view="beranda"]) .slide-panel.cube-face{ max-height:none !important; height:auto !important; overflow:visible !important; padding:6px 10px 40px !important; gap:8px !important; }
  body:not([data-view="beranda"]) .tutorial-grid{ grid-template-columns:1fr !important; gap:8px !important; }
  body:not([data-view="beranda"]) .panel-head-large .panel-title-large{ font-size: clamp(1.25rem, 5vw, 1.55rem) !important; }
  #panel-tentang{ padding-bottom: 24px !important; }
  #panel-tentang .about-card{ padding-bottom: 16px !important; }
  #panel-tentang .about-contact{ padding-bottom: 20px !important; margin-bottom: 16px !important; display:flex !important; }
}

#panel-beranda:not(.active-panel) .tiktok-section{ display:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
.slide-container.cube-viewport:not(.is-ready){ opacity:1; }
.panel-head,
.panel-head-large{
  position: relative; top: auto; z-index: auto;
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding-top:12px; margin:0 -16px; padding-left:16px; padding-right:16px; padding-bottom:12px;
  border-bottom: none;
}

.top-header {
  position: fixed; top: 12px; right: 12px; z-index: 50;
  display: flex; align-items: center; justify-content: flex-end;
}
.top-header .lang-toggle {
  display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 3px; gap: 2px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-pill); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 6px 20px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.1);
  min-height: 34px; box-sizing:border-box;
}
.lang-btn {
  background: transparent; border: none; color: var(--text-3);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 0 13px; border-radius: var(--radius-pill);
  transition: all var(--dur-1) var(--ease-out); min-height: 28px; min-width: 38px;
  display:inline-flex; align-items:center; justify-content:center; line-height:1; box-sizing:border-box;
}
.lang-btn:hover { color: var(--text); }
.lang-btn.active { background: linear-gradient(135deg, #f2f4f6 0%, #dfe6ec 100%); color: #0b0e12; font-weight: 800; box-shadow: 0 2px 10px rgba(255,255,255,0.18); }

.kinetic-hero {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 0 10px; position: relative;
}

#panel-beranda .kinetic-hero{
  min-height: calc(100dvh - 160px);
  justify-content: center;
  padding: 18px 0 12px;
}
body[data-view="beranda"] .slide-container.cube-viewport{
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}
body[data-view="beranda"] .slide-panel.cube-face{
  overflow: visible !important;
}

.tiktok-section{
  padding-bottom: 40px !important;
  scroll-margin-bottom: 120px;
}
@media(max-width:640px){
  #panel-beranda .kinetic-hero{ min-height: auto; padding: 14px 0 12px; justify-content:flex-start; }
  #panel-beranda{ padding-top:6px; }
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px;
  background: hsla(0, 0%, 92%, 0.1); border: 1px solid hsla(0, 0%, 92%, 0.18);
  border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--md-sys-color-primary); width: fit-content;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px hsla(0, 0%, 92%, 0.1);
}
.hero-badge::before {
  content: ''; width: 7px; height: 7px; background: var(--md-sys-color-primary); border-radius: 50%;
  box-shadow: 0 0 10px hsla(0, 0%, 92%, 0.8); animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:0.72; transform:scale(0.9)} }
.kinetic-stacked-title { display: flex; flex-direction: column; gap: 2px; }
.kinetic-greeting-line {
  font-family: var(--display-font); font-size: clamp(1.45rem, 3.2vw, 1.85rem); font-weight: 900;
  line-height: 1.08; letter-spacing: -0.03em; color: #fff; min-height: 1.15em; white-space: nowrap;
  text-transform: uppercase; filter: drop-shadow(0 0 10px rgba(255,255,255,0.14)); opacity: 1;
}
.greeting-box .flip-char { color: #fff; font-weight: 900; text-shadow: 0 0 8px rgba(255,255,255,0.42), 0 0 16px rgba(255,255,255,0.18); }
.kinetic-name-line {
  font-family: var(--display-font); font-size: clamp(3.4rem, 11vw, 6.2rem); font-weight: 900;
  line-height: 0.85; letter-spacing: -0.05em; min-height: 1em; white-space: nowrap;
  color: #a5f3fc;
  background: none;
  -webkit-text-fill-color: #a5f3fc;
  filter: drop-shadow(0 0 18px rgba(34,211,238,0.45)) drop-shadow(0 0 42px rgba(34,211,238,0.25)) drop-shadow(0 2px 14px rgba(0,0,0,0.5));
  text-transform: uppercase;
}
.kinetic-flip-box { position: relative; display: inline-flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; perspective: 900px; transform-style: preserve-3d; vertical-align: baseline; max-width: 100%; overflow: visible; }
.flip-layer { display: inline-flex; align-items: baseline; white-space: nowrap; transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-layer.layer-next { position: absolute; top: 0; left: 0; pointer-events: none; }
.flip-char { display: inline-block; will-change: transform, opacity; transition: transform 380ms cubic-bezier(0.25,0.8,0.25,1), opacity 260ms ease; transform-origin: 50% 80%; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; }
.name-box .flip-char {
  font-weight: 900;
  color: #a5f3fc;
  -webkit-text-fill-color: #a5f3fc;
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  text-shadow: 0 0 14px rgba(34,211,238,0.85), 0 0 30px rgba(34,211,238,0.5), 0 0 46px rgba(34,211,238,0.3);
  filter: drop-shadow(0 0 10px rgba(34,211,238,0.4));
}
.flip-space { display: inline-block; width: 0.28em; }
@keyframes charFlipOut { 0%{transform:rotateX(0deg) translateY(0);opacity:1} 100%{transform:rotateX(85deg) translateY(-35%);opacity:0} }
@keyframes charFlipIn { 0%{transform:rotateX(-85deg) translateY(35%);opacity:0} 100%{transform:rotateX(0deg) translateY(0);opacity:1} }
.char-flip-out { animation: charFlipOut 380ms cubic-bezier(0.25,0.8,0.25,1) both; }
.char-flip-in { animation: charFlipIn 380ms cubic-bezier(0.25,0.8,0.25,1) both; }
.cd-0{animation-delay:0ms}.cd-1{animation-delay:24ms}.cd-2{animation-delay:48ms}.cd-3{animation-delay:72ms}.cd-4{animation-delay:96ms}.cd-5{animation-delay:120ms}.cd-6{animation-delay:144ms}.cd-7{animation-delay:168ms}.cd-8{animation-delay:192ms}.cd-9{animation-delay:216ms}.cd-10{animation-delay:240ms}.cd-11{animation-delay:264ms}.cd-12{animation-delay:288ms}

#panel-beranda { position: relative; overflow: visible; padding: 8px 0 6px; }
#panel-beranda > * { position: relative; z-index: 1; }
.hero-bio-text { font-size: 12.2px; line-height: 1.65; color: var(--text-3); max-width: 560px; font-weight: 500; white-space: pre-line; }
.hero-action-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
#panel-beranda .hero-action-row .btn-main {
  background: var(--md-sys-color-primary); color: #0b0c0e; font-weight: 800; padding: 0 18px; min-height: 42px;
  box-shadow: var(--shadow-glow-lime); border-radius: var(--radius-pill);
}
#panel-beranda .hero-action-row .btn-main:hover { filter: brightness(1.04); transform: translateY(-1px); }
#panel-beranda .hero-action-row .btn-ghost {
  background: rgba(255,255,255,0.08); color: var(--text); border: 1px solid rgba(255,255,255,0.16); font-weight: 700;
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
#panel-beranda .hero-action-row .btn-ghost:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.24); }
#panel-beranda .hero-action-row .btn-main, #panel-beranda .hero-action-row .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1; }
#panel-beranda .hero-action-row .material-symbols-rounded { display: inline-flex; align-items: center; justify-content: center; line-height: 1; font-size: 18px; flex-shrink: 0; }

@keyframes fadeInUp { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)} }
.kinetic-hero .hero-badge { animation: fadeInUp 0.6s var(--ease-out) 0.08s both; }
.kinetic-hero .kinetic-stacked-title { animation: fadeInUp 0.6s var(--ease-out) 0.16s both; }
.kinetic-hero .hero-bio-text { animation: fadeInUp 0.6s var(--ease-out) 0.26s both; }
.kinetic-hero .hero-action-row { animation: fadeInUp 0.6s var(--ease-out) 0.36s both; }

.slide-panel.cube-face > .tiktok-section{ max-width:1100px; }
.tiktok-section{
  width:100%; margin-left:auto; margin-right:auto;
  margin-top:140px;
  padding:32px 16px 72px; display:flex; flex-direction:column; align-items:center; gap:28px;
  overflow:visible;
  opacity:0; transform:translateY(28px);
  transition: opacity 620ms ease, transform 720ms var(--ease-spring-soft);
  will-change: opacity, transform;
  background: transparent;
  border: none;
}
.tiktok-section.is-visible{
  opacity:1; transform:translateY(0);
}
.tiktok-title{
  font-family:var(--display-font); font-size:clamp(2rem,6vw,3.2rem); font-weight:900;
  color:#fff; text-align:center; letter-spacing:-0.04em; line-height:1;
  text-shadow:0 0 14px rgba(255,255,255,0.32), 0 0 28px rgba(255,255,255,0.14);
  margin-bottom:6px;
}
@media(max-width:640px){
  .tiktok-section{ margin-top:100px; padding:24px 12px 12px; gap:22px; }
}
.tiktok-grid{
  width:100%; max-width:1100px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  justify-items:stretch;
}
.tiktok-grid > *{ min-width:0; }
.tiktok-card{
  background:linear-gradient(180deg, rgba(22,26,32,0.96) 0%, rgba(14,16,20,0.96) 100%);
  border:1px solid rgba(255,255,255,0.08); border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:inherit; cursor: var(--velard-cursor, pointer); font-family:inherit;
  opacity:0; transform:translateY(18px) scale(0.96); padding:0; text-align:left; width:100%;
  transition:opacity 420ms ease, transform 560ms var(--ease-spring-soft), border-color 180ms ease, box-shadow 220ms ease;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,0.22);
  will-change: transform, opacity;
}
.tiktok-card:hover{ transform:translateY(-3px) scale(1); border-color:rgba(255,255,255,0.14); box-shadow:0 12px 28px rgba(0,0,0,0.32); }
.tiktok-section.is-visible .tiktok-card{
  opacity:1; transform:translateY(0) scale(1);
}
.tiktok-section.is-visible .tiktok-card:nth-child(1){ transition-delay: 80ms; }
.tiktok-section.is-visible .tiktok-card:nth-child(2){ transition-delay: 140ms; }
.tiktok-section.is-visible .tiktok-card:nth-child(3){ transition-delay: 200ms; }
.tiktok-section.is-visible .tiktok-card:nth-child(4){ transition-delay: 260ms; }
.tiktok-thumb{ aspect-ratio:1/1; overflow:hidden; background:#0f1117; display:grid; place-items:center; }
.tiktok-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.tiktok-like{
  display:flex; align-items:center; justify-content:space-around; gap:8px;
  padding:10px 8px; font-size:11.5px; font-weight:700; color:var(--text-3);
  border-top:1px solid var(--line); background:rgba(255,255,255,0.02);
}
.tiktok-stat{ display:inline-flex; align-items:center; gap:4px; }
.tiktok-stat .material-symbols-rounded{ font-size:14px; font-variation-settings:'FILL' 1; }
.tiktok-stat:nth-child(1) .material-symbols-rounded{ color:#e2e8f0; }
.tiktok-stat:nth-child(2) .material-symbols-rounded{ color:#ff3b6b; }
.tiktok-stat:nth-child(3) .material-symbols-rounded{ color:#60a5fa; }
.tiktok-like{ gap:6px; font-size:10.5px; }
.tiktok-stat{ gap:3px; }
@media(max-width:860px){ .tiktok-grid{ grid-template-columns:repeat(4,1fr); gap:10px; } .tiktok-title{ font-size:2.2rem; } .tiktok-card{ border-radius:14px; } .tiktok-like{ font-size:10px; gap:4px; } }
@media(max-width:640px){ .tiktok-section{ padding:20px 10px 10px; gap:14px; } .tiktok-grid{ grid-template-columns:repeat(2,1fr); gap:8px; } .tiktok-title{ font-size:1.9rem; } .tiktok-like{ padding:6px 3px; font-size:9.5px; gap:4px; } .tiktok-stat{ gap:2px; } .tiktok-stat .material-symbols-rounded{ font-size:11px; } .tiktok-thumb{ aspect-ratio:1/1; } }
@media(prefers-reduced-motion:reduce){ .tiktok-card{ transition:none; } }

.panel-head { position: relative; padding-bottom: 10px; margin-bottom: -2px; }
.panel-head::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 28px; height: 2px;
  background: var(--md-sys-color-primary); border-radius: var(--radius-pill); opacity: 0.9;
}
.panel-head h1 { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 750; color: var(--text-3); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.panel-by { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--lime); letter-spacing: 0; text-transform: none; }
.head-sub { font-size: 12.5px; font-weight: 500; color: var(--text-3); margin-top: 4px; }

.panel-head-large { display: block; padding-bottom: 14px; margin-bottom: 2px; border-bottom: none; }
.panel-head-large::after { display: none; }
.panel-head-large .panel-title-large { font-size: clamp(1.8rem, 5.5vw, 2.4rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1.05; color: #ffffff !important; text-transform: uppercase; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; text-shadow: 0 0 14px rgba(255,255,255,0.55), 0 0 28px rgba(255,255,255,0.28); filter: drop-shadow(0 0 12px rgba(255,255,255,0.32)); opacity: 1; }
.panel-title-large .panel-by { font-size: clamp(12px, 2.8vw, 13.5px); font-weight: 700; color: var(--text-3); text-transform: none; letter-spacing: 0; }
.panel-head-large .head-sub { display: block; margin-top: 6px; }
.panel-title-row{ display:flex; align-items:center; justify-content:flex-start; gap:10px; flex-wrap:nowrap; }
.hard-refresh-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:0 14px; min-height:34px;
  background:#7a0a0a; border:1px solid rgba(255,110,110,.45);
  border-radius:999px; color:#fff; font-size:12px; font-weight:700; letter-spacing:0.02em;
  backdrop-filter:blur(10px) saturate(1.15); -webkit-backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 4px 14px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
  transition:all 180ms var(--ease-out); cursor:pointer; white-space:nowrap; flex-shrink:0;
}
.hard-refresh-btn:hover{ background:#a31313; border-color:rgba(255,110,110,.45); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,0.28); }
.hard-refresh-btn:active{ transform:scale(0.97); }
.hard-refresh-btn .material-symbols-rounded{ font-size:16px; line-height:1; }
.hard-refresh-btn.hard-refresh-icon{
  width:36px; height:36px; min-width:36px; min-height:36px; padding:0; gap:0;
  border-radius:10px; flex-shrink:0;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
}
.hard-refresh-btn.hard-refresh-icon .material-symbols-rounded{ font-size:18px; }
.hard-refresh-btn.is-spinning .material-symbols-rounded{ animation:hardSpin 680ms linear infinite; }
@keyframes hardSpin{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@media(max-width:640px){
  .panel-title-row{ gap:8px; }
  .hard-refresh-btn{ padding:0 12px; min-height:32px; font-size:11.5px; }
  .hard-refresh-btn.hard-refresh-icon{ width:34px; height:34px; min-width:34px; min-height:34px; border-radius:9px; }
  .hard-refresh-btn.hard-refresh-icon .material-symbols-rounded{ font-size:17px; }
}

.progress-wrap[hidden], .log-head[hidden], .log-area[hidden] { display: none !important; }

.card {
  background: linear-gradient(180deg, rgba(22,26,32,0.92) 0%, rgba(14,16,20,0.92) 100%);
  border: 1px solid var(--glass-border); border-top: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--md-radius); padding: 16px;
  box-shadow: var(--shadow-card); backdrop-filter: blur(12px) saturate(1.08); -webkit-backdrop-filter: blur(12px) saturate(1.08);
  transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease, transform var(--dur-2) var(--ease-out);
  position: relative; overflow: hidden;
}
.card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 42%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--dur-2) ease; pointer-events: none;
}
.card:hover { border-color: rgba(255,255,255,0.12); box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,0.06); }
.card:hover::before { opacity: 1; }

.built-excellence{margin-top:22px;padding:28px 0 24px;border:none;border-radius:0;background:transparent;overflow:visible;overflow-x:clip;position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);min-height:96vh;min-height:96dvh;display:flex;flex-direction:column;align-items:center;gap:10px;}
.built-kicker{display:none !important;}
.built-title{font-size:clamp(22px,4.8vw,30px);font-weight:900;letter-spacing:-0.03em;line-height:1.08;text-align:center;color:#ffffff;margin-bottom:4px;text-shadow:0 1px 18px rgba(255,255,255,0.14),0 0 32px rgba(255,255,255,0.08);position:relative;padding-bottom:14px;}
.built-title::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:36px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.95),transparent);box-shadow:0 0 10px rgba(255,255,255,0.45);}
.built-title .grad-text{background:none;-webkit-text-fill-color:#fff;color:#fff;}
.excellence-tree{position:relative;width:min(1100px,96vw);height:clamp(540px,70vh,720px);min-height:540px;margin-left:auto;margin-right:auto;}
.excellence-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.excellence-lines path{stroke-linecap:round;stroke-linejoin:round;}
.ex-card{position:absolute;width:228px;background:linear-gradient(180deg,rgba(18,22,32,0.96) 0%,rgba(13,16,24,0.94) 100%);border:1px solid rgba(255,255,255,0.10);border-top:1px solid rgba(255,255,255,0.14);border-radius:14px;padding:15px;display:flex;gap:13px;backdrop-filter:blur(14px) saturate(1.12);-webkit-backdrop-filter:blur(14px) saturate(1.12);box-shadow:0 12px 32px rgba(0,0,0,0.38),0 2px 10px rgba(0,0,0,0.22),inset 0 1px 0 rgba(255,255,255,0.06);transition:transform 260ms var(--ease-out),border-color 200ms ease,box-shadow 260ms ease;}
.ex-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,0.16);box-shadow:0 16px 40px rgba(0,0,0,0.44),0 4px 14px rgba(0,0,0,0.28),inset 0 1px 0 rgba(255,255,255,0.08);}
.ex-card:focus-within{outline:2px solid rgba(255,255,255,0.18);outline-offset:2px;}
.ex-tl{left:1.8%;top:17%}.ex-tr{right:1.8%;top:17%}.ex-bl{left:1.8%;bottom:13%}.ex-br{right:1.8%;bottom:13%}
.ex-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;border:1px solid;box-shadow:0 0 14px currentColor;transition:transform 260ms var(--ease-out);}
.ex-card:hover .ex-icon{transform:scale(1.05);}
.ex-blue{background:rgba(96,165,250,0.14);border-color:rgba(96,165,250,0.32);color:#7ab4ff;box-shadow:0 0 18px rgba(96,165,250,0.22);}
.ex-purple{background:rgba(168,139,250,0.14);border-color:rgba(168,139,250,0.32);color:#b3a0ff;}
.ex-green{background:rgba(52,211,153,0.13);border-color:rgba(52,211,153,0.30);color:#5ee9b5;}
.ex-orange{background:rgba(251,146,60,0.13);border-color:rgba(251,146,60,0.30);color:#ffb86a;}
.ex-card h4{font-size:13px;font-weight:800;letter-spacing:-0.01em;line-height:1.22;color:#fff;margin-bottom:5px;}
.ex-card i{display:block;width:28px;height:2px;border-radius:999px;margin-bottom:7px;opacity:0.95;background:linear-gradient(90deg,rgba(255,255,255,0.95),rgba(255,255,255,0.22));box-shadow:0 0 8px rgba(255,255,255,0.28);}
.ex-card p{font-size:11.2px;line-height:1.62;color:rgba(255,255,255,0.72);font-weight:500;}
.ex-card .material-symbols-rounded{font-size:19px;}

@keyframes exCardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.ex-card{animation:exCardIn 560ms var(--ease-out) both;}
.ex-tl{animation-delay:80ms}.ex-tr{animation-delay:160ms}.ex-bl{animation-delay:240ms}.ex-br{animation-delay:320ms}
@media(max-width:860px){.excellence-tree{width:96vw;max-width:860px;height:clamp(520px,74vh,680px)}.ex-card{width:210px;padding:13px}}
@media(max-width:640px){.built-excellence{padding:20px 10px 18px;min-height:92vh;min-height:92dvh;gap:8px}.built-title{font-size:clamp(18px,5.6vw,22px);padding-bottom:12px}.excellence-tree{height:84vh;min-height:620px;width:98vw}.ex-card{width:150px;padding:11px 10px;gap:9px;border-radius:12px}.ex-icon{width:34px;height:34px}.ex-card h4{font-size:11.2px}.ex-card p{font-size:10px;line-height:1.55}.ex-card i{width:22px}.ex-tl{left:1.2%;top:15%}.ex-tr{right:1.2%;top:15%}.ex-bl{left:1.2%;bottom:11%}.ex-br{right:1.2%;bottom:11%}}

:root{--nn-cyan:#22d3ee;--nn-blue:#3b82f6;--nn-purple:#a78bfa;--nn-glow:0 0 22px rgba(59,130,246,0.28);--nn-card-h:148px;--nn-gap:16px;}
.neural-wrap{position:relative;width:min(1180px,96vw);margin:10px auto 0;display:flex;flex-direction:column;align-items:center;gap:0;padding:18px 0 8px;overflow:visible;}
.nn-central{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:3;margin-bottom:6px;}
.nn-central-node{position:relative;width:22px;height:22px;display:grid;place-items:center;}
.nn-dot{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e0f2ff 0%,#7dd3fc 38%,#3b82f6 78%,#1d4ed8 100%);box-shadow:0 0 18px rgba(59,130,246,0.55),0 0 36px rgba(34,211,238,0.32),inset 0 1px 2px rgba(255,255,255,0.9);border:1px solid rgba(255,255,255,0.55);z-index:2;}
.nn-pulse{position:absolute;inset:-7px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,0.22) 0%,rgba(34,211,238,0.12) 45%,transparent 72%);border:1px solid rgba(125,211,252,0.22);animation:nnPulse 2.8s ease-in-out infinite;z-index:1;}
.nn-pulse2{inset:-13px;animation-delay:0.9s;opacity:0.55;}
@keyframes nnPulse{0%,100%{transform:scale(0.92);opacity:0.9}50%{transform:scale(1.08);opacity:0.55}}
.nn-central-label{font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,0.42);font-family:var(--mono);}
.nn-svg{position:absolute;top:28px;left:0;width:100%;height:360px;pointer-events:none;overflow:visible;z-index:1;}
.nn-path{transition:opacity 260ms ease,filter 260ms ease,stroke-width 260ms ease;}
.nn-path.is-hover{opacity:1 !important;stroke-width:2.2 !important;filter:url(#nnGlow) brightness(1.18);}
.nn-cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(6,1fr);gap:var(--nn-gap);width:100%;margin-top:168px;padding:0 8px;}
.nn-card{height:var(--nn-card-h);border-radius:16px;background:linear-gradient(180deg,rgba(22,26,34,0.88) 0%,rgba(14,18,28,0.92) 100%);border:1px solid rgba(255,255,255,0.08);border-top:1px solid rgba(255,255,255,0.12);box-shadow:0 10px 28px rgba(0,0,0,0.36),0 2px 10px rgba(0,0,0,0.22),inset 0 1px 0 rgba(255,255,255,0.05);backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);transition:transform 260ms var(--ease-out),border-color 200ms ease,box-shadow 260ms ease,background 200ms ease;position:relative;overflow:hidden;cursor: var(--velard-cursor, pointer);}
.nn-card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(34,211,238,0.18),rgba(59,130,246,0.14) 42%,rgba(167,139,250,0.16));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity 260ms ease;pointer-events:none;}
.nn-card:hover,.nn-card:focus-visible{transform:translateY(-4px);border-color:rgba(125,211,252,0.22);box-shadow:0 16px 40px rgba(0,0,0,0.44),0 6px 18px rgba(59,130,246,0.18),inset 0 1px 0 rgba(255,255,255,0.08);outline:none;}
.nn-card:hover::before,.nn-card:focus-visible::before{opacity:1;}
.nn-card.is-hover{border-color:rgba(125,211,252,0.28);box-shadow:0 16px 40px rgba(0,0,0,0.44),0 0 24px rgba(59,130,246,0.22);}
@media(max-width:1100px){.neural-wrap{width:min(1100px,97vw)} .nn-cards{gap:12px} .nn-card{height:136px}}
@media(max-width:860px){.nn-svg{height:300px} .nn-cards{grid-template-columns:repeat(3,1fr);margin-top:138px} .nn-card{height:132px}}
@media(max-width:640px){.neural-wrap{width:98vw;padding:14px 0 6px} .nn-svg{height:420px;top:32px} .nn-cards{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:118px;padding:0 6px} .nn-card{height:124px;border-radius:14px} .nn-central-label{font-size:8.5px}}
@media(max-width:380px){.nn-cards{gap:10px} .nn-card{height:112px}}
@media(prefers-reduced-motion:reduce){.nn-pulse,.nn-lights circle{animation:none !important} .nn-card{transition:none}}

.eco-journey{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;padding:12px 0 24px;overflow:visible;}
.eco-top{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;z-index:3;margin:8px 0 0;}
.eco-top-node{position:relative;width:18px;height:18px;display:grid;place-items:center;}
.eco-top-dot{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f8fafc 0%,#e2e8f0 32%,#cbd5e1 68%,#94a3b8 100%);box-shadow:0 0 14px rgba(203,213,225,0.42),0 0 28px rgba(56,189,248,0.18),inset 0 1px 1px rgba(255,255,255,0.9);border:1px solid rgba(255,255,255,0.62);z-index:2;}
.eco-top-pulse{position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,0.16) 0%,rgba(59,130,246,0.08) 48%,transparent 72%);border:1px solid rgba(125,211,252,0.18);animation:ecoPulse 3.2s ease-in-out infinite;z-index:1;}
.eco-top-pulse2{inset:-14px;animation-delay:1s;opacity:0.52;}
@keyframes ecoPulse{0%,100%{transform:scale(0.92);opacity:0.85}50%{transform:scale(1.06);opacity:0.5}}
.eco-wrap{position:relative;width:min(1120px,94vw);margin:0 auto;padding:0 0 12px;overflow:visible;}
.eco-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1;}
.eco-spine{transition:stroke-dashoffset 120ms linear; will-change:stroke-dashoffset;}
.eco-branch{transition:opacity 280ms ease,filter 280ms ease,stroke-width 280ms ease;}
.eco-branch.is-hover{opacity:1 !important;stroke-width:1.95 !important;filter:url(#ecoBranchGlow) brightness(1.16);}
.eco-cards{position:relative;z-index:2;display:flex;flex-direction:column;gap:92px;padding:36px 0 28px;}
.eco-card{position:relative;width:min(44%, 460px);min-height:148px;height:148px;border-radius:16px;background:linear-gradient(180deg,rgba(22,26,34,0.86) 0%,rgba(14,18,28,0.90) 100%);border:1px solid rgba(255,255,255,0.07);border-top:1px solid rgba(255,255,255,0.11);box-shadow:0 10px 28px rgba(0,0,0,0.34),0 2px 10px rgba(0,0,0,0.20),inset 0 1px 0 rgba(255,255,255,0.04);backdrop-filter:blur(14px) saturate(1.14);-webkit-backdrop-filter:blur(14px) saturate(1.14);transition:transform 520ms cubic-bezier(0.16,1,0.3,1),opacity 520ms ease,border-color 260ms ease,box-shadow 260ms ease;opacity:0;transform:translateY(28px);cursor: var(--velard-cursor, pointer);overflow:hidden;}
.eco-card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(34,211,238,0.14),rgba(59,130,246,0.10) 46%,rgba(167,139,250,0.13));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity 260ms ease;pointer-events:none;}
.eco-card.is-visible{opacity:1;transform:translateY(0);}
.eco-card.is-active{border-color:rgba(125,211,252,0.20);box-shadow:0 14px 36px rgba(0,0,0,0.38),0 0 22px rgba(56,189,248,0.16),inset 0 1px 0 rgba(255,255,255,0.06);}
.eco-card:hover,.eco-card:focus-visible{transform:translateY(-3px);border-color:rgba(125,211,252,0.24);box-shadow:0 16px 40px rgba(0,0,0,0.44),0 6px 18px rgba(56,189,248,0.14),inset 0 1px 0 rgba(255,255,255,0.06);outline:none;}
.eco-card:hover::before,.eco-card:focus-visible::before{opacity:1;}
.eco-card.is-hover{border-color:rgba(125,211,252,0.26);}
.eco-card.eco-left{align-self:flex-start;margin-left:2.5%;}
.eco-card.eco-right{align-self:flex-end;margin-right:2.5%;}
.eco-card-num{position:absolute;top:10px;right:12px;font-family:var(--mono);font-size:10px;letter-spacing:0.14em;font-weight:700;color:rgba(255,255,255,0.28);}
.eco-card-ph{position:absolute;inset:14px;top:28px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));border:1px dashed rgba(255,255,255,0.06);}
.eco-end{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 0 18px;z-index:2;}
.eco-end-line{width:1.5px;height:28px;background:linear-gradient(180deg,rgba(203,213,225,0.32),transparent);opacity:0.7;}
.eco-end-dot{position:relative;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f1f5f9 0%,#cbd5e1 55%,#94a3b8 100%);box-shadow:0 0 12px rgba(203,213,225,0.32);border:1px solid rgba(255,255,255,0.5);}
.eco-end-pulse{position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(203,213,225,0.16);background:radial-gradient(circle,rgba(203,213,225,0.10),transparent 68%);animation:ecoPulse 3.4s ease-in-out infinite;}
.eco-end-label{font-size:9px;letter-spacing:0.18em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,0.32);font-family:var(--mono);}
@media(max-width:860px){.eco-wrap{width:min(980px,96vw)} .eco-cards{gap:78px;padding:30px 0 24px} .eco-card{width:min(46%, 440px);min-height:138px;height:138px}}
@media(max-width:640px){
  .eco-top{margin-top:6px}
  .eco-wrap{width:92vw}
  .eco-cards{gap:64px;padding:28px 0 20px}
  .eco-card{width:88%;min-height:132px;height:132px;align-self:center !important;margin-left:0 !important;margin-right:0 !important;margin-left:34px !important;}
  .eco-card.eco-left,.eco-card.eco-right{margin-left:34px !important;margin-right:0 !important;}
}
@media(max-width:380px){.eco-cards{gap:52px} .eco-card{width:86%;min-height:122px;height:122px}}
@media(prefers-reduced-motion:reduce){.eco-top-pulse,.eco-end-pulse{animation:none !important} .eco-card{transition:none}}

.funnel-tree{position:relative;width:min(1120px,96vw);margin:16px auto 0;padding:10px 0 18px;overflow:visible;}
.funnel-wrap{position:relative;width:100%;height:620px;overflow:visible;background:transparent;}
.funnel-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1;}
.funnel-branch{stroke-linecap:round;stroke-linejoin:round;stroke-width:2.15;filter:url(#funnelGlow);transition:filter 260ms ease,opacity 260ms ease;shape-rendering:geometricPrecision;}
.funnel-card{position:absolute;width:96px;height:96px;border-radius:10px;background:linear-gradient(180deg,rgba(22,26,34,0.92) 0%,rgba(14,18,28,0.96) 100%);border:1.6px solid #4a7cff;border-top:1.6px solid #5b8cff;box-shadow:0 0 0 1px rgba(74,124,255,0.18),0 10px 28px rgba(0,0,0,0.38),inset 0 1px 0 rgba(255,255,255,0.06);backdrop-filter:blur(10px) saturate(1.12);-webkit-backdrop-filter:blur(10px) saturate(1.12);transition:transform 260ms var(--ease-out),box-shadow 260ms ease,border-color 200ms ease;z-index:2;cursor: var(--velard-cursor, pointer);}
.funnel-card:hover,.funnel-card:focus-visible{transform:translateY(-3px) scale(1.02);box-shadow:0 0 0 1px rgba(74,124,255,0.32),0 16px 32px rgba(0,0,0,0.44),0 0 18px rgba(74,124,255,0.22);outline:none;}
.funnel-endpoint{pointer-events:none;}

.funnel-c1{left:12.2%;top:13.5%;width:92px;height:92px;}
.funnel-c2{right:13.2%;top:22.5%;width:96px;height:104px;}
.funnel-c3{left:18.8%;top:36.2%;width:88px;height:88px;}
.funnel-c4{right:16.2%;top:46.8%;width:92px;height:100px;}
.funnel-c5{left:21.5%;top:62.5%;width:90px;height:90px;}
.funnel-base{position:absolute;left:50%;bottom:3.2%;transform:translateX(-50%);width:260px;height:56px;border-radius:10px;background:linear-gradient(180deg,rgba(22,26,34,0.96) 0%,rgba(14,18,28,0.98) 100%);border:1.6px solid #4a7cff;box-shadow:0 0 0 1px rgba(74,124,255,0.18),0 10px 28px rgba(0,0,0,0.38),inset 0 1px 0 rgba(255,255,255,0.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:2;cursor: var(--velard-cursor, pointer);transition:transform 260ms var(--ease-out),box-shadow 260ms ease;}
.funnel-base:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 0 0 1px rgba(74,124,255,0.32),0 16px 32px rgba(0,0,0,0.44);}
@media(max-width:860px){.funnel-wrap{height:560px} .funnel-card{width:84px;height:84px} .funnel-base{width:220px;height:50px}}
@media(max-width:640px){
  .funnel-wrap{height:720px}
  .funnel-card{width:78px;height:78px}
  .funnel-c1{left:8%;top:11%}
  .funnel-c2{right:8%;top:21%;width:84px;height:88px}
  .funnel-c3{left:10%;top:35%}
  .funnel-c4{right:10%;top:48%}
  .funnel-c5{left:12%;top:63%}
  .funnel-base{width:72%;height:52px;bottom:4%}
}
@media(max-width:380px){.funnel-card{width:68px;height:68px} .funnel-base{width:78%}}

.qm-card{
  width:100%; max-width:560px;
  background: rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.07); border-top:1px solid rgba(255,255,255,0.09);
  border-radius: var(--md-radius); padding:16px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  position:relative; overflow:hidden;
}
.qm-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.07), transparent 42%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition: opacity 200ms ease; pointer-events:none;
}
.qm-card:hover::before{ opacity:1; }
.qm-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; position:relative; z-index:1; }
.qm-title-wrap{ display:flex; align-items:center; gap:12px; }
.qm-icon-badge{
  position:relative; width:42px; height:42px; border-radius:12px;
  background: rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.10);
  display:grid; place-items:center; color:var(--md-sys-color-primary); flex-shrink:0;
}
.qm-icon-badge .material-symbols-rounded{ font-size:20px; font-variation-settings:'FILL' 1; }
.qm-badge-ver{
  position:absolute; right:-6px; bottom:-6px;
  background:var(--md-sys-color-primary); color:#0a0e02; font-size:8px; font-weight:800; letter-spacing:0.04em;
  padding:2px 5px; border-radius:999px; line-height:1; border:1px solid var(--surface);
}
.qm-title{ font-size:15px; font-weight:800; letter-spacing:-0.02em; color:var(--text); line-height:1; }
.qm-subtitle{ font-size:11px; font-weight:600; color:var(--text-3); margin-top:2px; }
.qm-close{
  width:32px; height:32px; border-radius:50%;
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.07);
  display:grid; place-items:center; color:var(--text-3); flex-shrink:0;
  transition: background 160ms ease, color 160ms ease;
}
.qm-close:hover{ background: rgba(255,255,255,0.08); color:var(--text); }
.qm-close .material-symbols-rounded{ font-size:18px; }

.qm-drop{
  border:1.5px dashed rgba(255,255,255,0.12); border-radius: var(--md-radius);
  background: rgba(255,255,255,0.05); padding:22px 14px; text-align:center; cursor: var(--velard-cursor, pointer);
  transition: all 180ms var(--ease-out); user-select:none; position:relative; z-index:1;
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.qm-drop:hover, .qm-drop.dragging{
  border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.05);
  box-shadow: 0 8px 32px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.04);
}
.qm-drop:focus-visible{ outline:2px solid var(--md-sys-color-primary); outline-offset:2px; }
.qm-drop.disabled{ pointer-events:none; opacity:0.5; cursor:not-allowed; }
.qm-drop-icon{ font-size:32px; color:var(--md-sys-color-primary); margin-bottom:6px; display:block; }
.qm-drop-title{ font-size:13px; font-weight:700; color:var(--text); letter-spacing:-0.01em; }
.qm-drop-sub{ font-size:11.5px; color:var(--text-3); margin-top:4px; }

.qm-file-info{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:12px; position:relative; z-index:1;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.qm-file-icon{ color:var(--md-sys-color-primary); font-size:22px; }
.qm-file-meta-wrap{ min-width:0; flex:1; }
.qm-file-name{ font-size:12.5px; font-weight:700; color:var(--text); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qm-file-meta{ font-size:11px; color:var(--text-3); }
.qm-file-remove{
  width:28px; height:28px; border-radius:50%; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.07);
  display:grid; place-items:center; color:var(--text-3); flex-shrink:0; cursor: var(--velard-cursor, pointer);
}
.qm-file-remove:hover{ background: rgba(255,255,255,0.08); color:var(--text); }
.qm-file-remove .material-symbols-rounded{ font-size:16px; }

.qm-group{ display:flex; flex-direction:column; gap:8px; position:relative; z-index:1; }
.qm-label{ font-size:10.5px; font-weight:800; letter-spacing:0.08em; color:var(--text-3); text-transform:uppercase; }
.qm-segmented{
  display:grid; grid-template-columns: repeat(3,1fr); gap:6px;
  background: rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.07);
  border-radius:999px; padding:4px; backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.qm-seg-btn{
  padding:8px 6px; border-radius:999px; font-size:12px; font-weight:800;
  color: var(--text-3); transition: all 160ms var(--ease-out); min-height:36px; letter-spacing:0.02em; cursor: var(--velard-cursor, pointer); position:relative; z-index:2;
}
.qm-seg-btn.active,
.qm-seg-btn.active,
.tool-seg-btn.active,
.seg-btn.active { background:hsl(0 0% 88%) !important; color:#0a0e02 !important; box-shadow: 0 2px 10px hsla(0,0%,88%,0.18) !important; }
.qm-seg-btn:not(.active):hover{ color:var(--text); background: rgba(255,255,255,0.06); }

.qm-checkbox{
  display:flex; align-items:center; gap:8px; cursor: var(--velard-cursor, pointer); user-select:none;
  font-size:11.5px; font-weight:700; letter-spacing:0.02em; color:var(--text-3); position:relative; z-index:1;
}
.qm-checkbox input{ position:absolute; opacity:0; pointer-events:none; }
.qm-check{
  width:16px; height:16px; border-radius:4px; border:1.5px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
  display:grid; place-items:center; flex-shrink:0; transition: all 160ms ease;
}
.qm-checkbox input:checked + .qm-check{ background:var(--md-sys-color-primary); border-color:var(--md-sys-color-primary); }
.qm-checkbox input:checked + .qm-check::after{ content:'✓'; font-size:11px; font-weight:900; color:#0a0e02; line-height:1; }

.qm-info-box{
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.07); border-radius:12px;
  padding:12px; display:flex; flex-direction:column; gap:8px; position:relative; z-index:1;
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.qm-info-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; }
.qm-info-row .material-symbols-rounded{ font-size:16px; color:var(--md-sys-color-primary); }
.qm-info-k{ color: var(--text-3); font-weight:600; }
.qm-info-v{ color:var(--text); font-weight:800; margin-left:4px; }
.qm-info-desc{
  margin-top:4px; padding:10px 12px; border:1px solid rgba(255,255,255,0.06);
  font-size:11.5px; line-height:1.6; color:var(--text-3); background: rgba(255,255,255,0.05); border-radius:8px; display:block;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.qm-info-desc::before{ content:'ⓘ'; color:var(--md-sys-color-primary); font-weight:800; margin-right:6px; }
.qm-info-desc .tiktok-rec{ display:inline; white-space:normal; }
.qm-info-desc:empty{ display:none; }

.upload-card{ display:none !important; }
.upload-area{ border-color: rgba(224,242,140,0.22); }
.file-info{ display:none !important; }
.toggle-row{ display:none !important; }
.segmented{ display:none !important; }
.method-desc{ display:none !important; }

.qm-process-btn{
  width:100%; min-height:44px; border-radius: var(--radius-pill);
  background: hsl(0 0% 88%); color: #0a0e02;
  font-weight:800; font-size:13px; letter-spacing:0.04em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12); transition: transform 140ms ease, filter 160ms ease, opacity 160ms ease, background 160ms ease, border-color 160ms ease;
  position:relative; z-index:1; border: 1px solid transparent;
}
.qm-process-btn:disabled{
  background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.45) !important; border-color: rgba(255,255,255,0.07) !important;
  box-shadow: none !important; opacity:1; cursor:not-allowed; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.qm-process-btn:not(:disabled):hover{ transform: translateY(-1px); filter:brightness(0.97); }
.qm-process-btn:not(:disabled):active{ transform: scale(0.99); }

.tool-modal-card.is-quality .tool-modal-body{ gap:6px; padding:8px 10px 10px; }
#toolPanel-quality .qm-card{ padding:8px; gap:5px; }
#toolPanel-quality .qm-drop{ padding:8px; }
#toolPanel-quality .qm-drop-icon{ font-size:18px; margin-bottom:2px; }
#toolPanel-quality .qm-drop-title{ font-size:11px; }
#toolPanel-quality .qm-drop-sub{ font-size:10px; margin-top:2px; }
#toolPanel-quality .qm-group{ gap:4px; }
#toolPanel-quality .qm-label{ font-size:9.5px; }
#toolPanel-quality .qm-seg-btn{ padding:4px; min-height:26px; font-size:10.5px; }
#toolPanel-quality .qm-checkbox{ font-size:10px; }
#toolPanel-quality .qm-file-info{ padding:6px 10px; gap:8px; }
#toolPanel-quality .qm-file-icon{ font-size:18px; }
#toolPanel-quality .qm-file-name{ font-size:11.5px; }
#toolPanel-quality .qm-file-meta{ font-size:10.5px; }
#toolPanel-quality .qm-info-box{ padding:6px 8px; gap:4px; }
#toolPanel-quality .qm-info-row{ font-size:11px; }
#toolPanel-quality .qm-info-row .material-symbols-rounded{ font-size:14px; }
#toolPanel-quality .qm-info-desc{ margin-top:2px; padding:5px 8px; font-size:10px; line-height:1.35; }
#toolPanel-quality .qm-process-btn{ min-height:36px; font-size:11.5px; }

#toolPanel-quality .qm-card:has(.qm-file-info:not([hidden])) .qm-drop{ padding:5px 8px; }
#toolPanel-quality .qm-card:has(.qm-file-info:not([hidden])) .qm-drop-icon,
#toolPanel-quality .qm-card:has(.qm-file-info:not([hidden])) .qm-drop-sub{ display:none; }
#toolPanel-quality .qm-card:has(.qm-file-info:not([hidden])) .qm-drop-title{ font-size:10.5px; }
@media(max-width:640px){
  #toolPanel-quality .qm-card{ padding:8px; gap:5px; }
  #toolPanel-quality .qm-drop{ padding:8px 6px; }
}

.qm-progress-wrap{ display:flex; align-items:center; gap:10px; position:relative; z-index:1; }
.qm-progress-track{ flex:1; height:6px; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.06); border-radius:999px; overflow:hidden; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.qm-progress-bar{ height:100%; width:0%; background: linear-gradient(90deg, var(--md-sys-color-primary), #dfe4e9); border-radius:999px; transition: width 200ms ease; }
.qm-progress-label{ font-size:11.5px; font-weight:800; color:var(--md-sys-color-primary); min-width:34px; text-align:right; font-variant-numeric: tabular-nums; }

.qm-log-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; position:relative; z-index:1; }
.qm-log-title{ font-size:10.5px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-3); }
.qm-log-actions{ display:flex; align-items:center; gap:8px; }
.qm-icon-btn, .qm-copy-btn{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.04); color:var(--text);
  font-size:11.5px; font-weight:700; min-height:30px; transition: background 150ms ease, border-color 150ms ease;
}
.qm-icon-btn{ padding:6px 8px; }
.qm-icon-btn:hover, .qm-copy-btn:hover{ background: hsla(0,0%,92%,0.08); border-color: hsla(0,0%,92%,0.14); }
.qm-log-area{
  height:130px; overflow-y:auto; padding:10px 12px;
  background: rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.07); border-radius:12px;
  font-family: var(--mono); font-size:11.5px; line-height:1.6; position:relative; z-index:1;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.tiktok-rec { color: #e11d48; font-weight: 800; }

.process-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px;
  border-radius: var(--radius-pill); background: var(--text); color: var(--ink);
  font-weight: 800; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(0,0,0,0.36); transition: transform 140ms ease, box-shadow 200ms ease, filter 160ms ease, opacity 160ms ease;
  position: relative; overflow: hidden;
}
.process-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: translateX(-100%); transition: transform 620ms ease;
}
.process-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(0,0,0,0.48); filter: brightness(0.97); }
.process-btn:not(:disabled):hover::before { transform: translateX(100%); }
.process-btn:not(:disabled):active { transform: translateY(0) scale(0.99); }
.process-btn:disabled { opacity: 0.42; cursor: not-allowed; }

.progress-wrap { display: flex; align-items: center; gap: 12px; }
.progress-track { flex: 1; height: 7px; background: var(--surface-3); border-radius: var(--radius-pill); overflow: hidden; border: 1px solid rgba(255,255,255,0.04); }
.progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--md-sys-color-primary), #dfe4e9); border-radius: var(--radius-pill); transition: width 200ms ease; }
.progress-label { font-size: 12px; font-weight: 750; color: var(--md-sys-color-primary); min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.log-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.log-title { font-size: 11.5px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.log-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn, .copy-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface-3); color: var(--text);
  font-size: 12px; font-weight: 600; transition: background 150ms ease, border-color 150ms ease; min-height: 30px;
}
.icon-btn { padding: 6px 8px; }
.icon-btn:hover, .copy-btn:hover { background: hsla(0, 0%, 92%, 0.1); border-color: hsla(0, 0%, 92%, 0.18); }
.log-area {
  height: 130px; overflow-y: auto; padding: 10px 12px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 12px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.log-area::-webkit-scrollbar { width: 6px; display: block; }
.log-area::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: var(--radius-pill); }
.log-line { color: var(--text); white-space: pre-wrap; word-break: break-word; }
.log-time { color: var(--text-3); margin-right: 8px; user-select: none; }

.tools-grid-new { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media(min-width:1024px){ .tools-grid-new{ grid-template-columns: repeat(2, 1fr); } }
.tool-card-new {
  display: flex; align-items: center; gap: 14px; padding: 16px 16px;
  background: rgba(18,20,26,0.38);
  border: 1px solid rgba(255,255,255,0.07); border-top: 1px solid rgba(255,255,255,0.09);
  border-radius: 16px; cursor: var(--velard-cursor, pointer); transition: all 220ms var(--ease-out);
  user-select: none; position: relative; backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05); overflow: hidden;
  min-height: 84px;
}
.tool-card-new::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent 45%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 220ms ease; pointer-events: none;
}
.tool-card-new:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.36), 0 4px 14px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.06); }
.tool-card-new:hover::before { opacity: 1; }
.tool-card-new:active { transform: scale(0.985); }
.tool-icon-wrap {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06);
  display: grid; place-items: center; flex-shrink: 0; color: var(--md-sys-color-primary); transition: all 220ms ease;
}
.tool-card-new:hover .tool-icon-wrap { background: hsla(0, 0%, 92%, 0.12); border-color: hsla(0, 0%, 92%, 0.2); transform: scale(1.04); }

.tool-card-new:active .tool-icon-wrap,
.tool-card-new.is-processing .tool-icon-wrap,
.tool-modal-hero .tool-icon-wrap {
  background: var(--md-sys-color-primary) !important; color: #0a0e02 !important; border-color: transparent !important;
}
.tool-icon-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.tool-icon-wrap .material-symbols-rounded { font-size: 22px; }
.tool-ver { font-size: 10px; font-weight: 700; color: var(--text-3); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 999px; line-height: 1; letter-spacing: 0.02em; }
.tool-info-new { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tool-title-new { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-desc-new { font-size: 12.5px; color: var(--text-3); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tool-arrow {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  display: grid; place-items: center; flex-shrink: 0; color: var(--text-3); transition: transform 200ms ease, color 200ms ease, background 200ms ease;
}
.tool-card-new:hover .tool-arrow { transform: translateX(3px); color: var(--md-sys-color-primary); background: rgba(255,255,255,0.08); }
.tool-card-new.is-processing .tool-arrow {
  background: var(--md-sys-color-primary) !important; color: #0a0e02 !important; border-color: transparent;
  min-width: 46px; width: auto; padding: 0 8px; height: 28px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 800; transform: none !important;
}
.tool-card-new.is-processing .tool-arrow .material-symbols-rounded { display: none; }
.tool-card-progress-text { font-variant-numeric: tabular-nums; }

#panel-tutorial{ scroll-behavior:auto; overscroll-behavior:auto !important; overflow:visible !important; -webkit-overflow-scrolling:auto; pointer-events:auto !important; }
#panel-tutorial *{ scroll-behavior:auto !important; overscroll-behavior:auto !important; pointer-events:auto !important; }
body[data-view="tutorial"]{ overflow-y:auto !important; }
body[data-view="tutorial"] .app-container,
body[data-view="tutorial"] .app-main,
body[data-view="tutorial"] .slide-container.cube-viewport,
body[data-view="tutorial"] #panel-tutorial{ overflow:visible !important; }

.tutorial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.tutorial-grid .tutorial-card { height: 100%; }
@media (max-width: 860px) { .tutorial-grid { grid-template-columns: 1fr; } }
.tutorial-card { display: flex; flex-direction: column; gap: 16px; }

.tutorial-step { display: flex; gap: 12px; align-items: flex-start; }
.step-num {
  flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, #f2f4f6 0%, #d7dce2 100%); color: #0f1117; font-size: 13px; font-weight: 850; margin-top: 2px;
  box-shadow: 0 2px 8px rgba(255,255,255,0.12);
}
.tutorial-step h3 { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.tutorial-step p { font-size: 12.5px; color: var(--text-3); line-height: 1.62; }
.tutorial-step b { color: var(--md-sys-color-primary); }
.tut-section-title { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--md-sys-color-primary); padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }

.help-card { display: flex; align-items: flex-start; gap: 12px; }
.help-card-wide{
  grid-column: 1 / -1; margin-top: 2px;
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border: 1px dashed var(--line);
  min-height:72px;
  border-radius: var(--radius-l);
  background: rgba(255,255,255,0.02);
}
.help-card-wide > div:last-child{
  flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
}
.help-card-wide p{
  margin:0; line-height:1.5; font-size:13px;
  min-height:20px;
  display:block; width:100%;
}
@media (max-width: 860px) {
  .help-card-wide{ flex-direction:column; align-items:flex-start; gap:12px; padding:14px 16px; min-height:0; }
  .help-card-wide > div:last-child{ width:100%; }
  .help-card-wide .btn-main{ width:100%; justify-content:center; }
}
@media (max-width:640px){
  .help-card-wide{ padding:14px 16px; gap:12px; border-radius:14px; }
  .help-icon{ width:40px; height:40px; }
  .help-card p{ font-size:12.5px; }
  .help-card-wide .btn-main{ min-height:40px; font-size:12.5px; }
}
.help-icon { flex-shrink: 0; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.07); color: var(--md-sys-color-primary); }
.help-card p { font-size: 13px; color: var(--text-3); margin-bottom: 10px; line-height: 1.5; }
.btn-main {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px;
  border-radius: var(--radius-pill); background: var(--md-sys-color-primary); color: #0a0e02; font-size: 12.5px; font-weight: 750;
  transition: opacity 150ms ease, transform 150ms ease, box-shadow 200ms ease; position: relative; overflow: hidden;
  box-shadow: 0 4px 14px hsla(0, 0%, 92%, 0.18);
}
.btn-main::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent); transform: translateX(-100%); transition: transform 560ms ease; }
.btn-main:hover::before { transform: translateX(100%); }
.btn-main:hover { transform: translateY(-1px); box-shadow: 0 8px 20px hsla(0, 0%, 92%, 0.22); }
.btn-main:active { transform: translateY(0) scale(0.98); }
.btn-ghost {
  border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.05); color: var(--text-3);
  border-radius: var(--radius-pill); padding: 10px 18px; font-size: 12.5px; font-weight: 700; cursor: var(--velard-cursor, pointer);
  transition: all 200ms ease; backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
}
.btn-ghost:hover { color: var(--text); border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.08); }
#othersBack{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px 7px 10px; min-height:32px;
  font-size:12.5px; font-weight:700; letter-spacing:-0.01em;
  background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.07);
  border-radius:999px; color:var(--text);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
  margin-bottom:14px; line-height:1;
}
#othersBack:hover{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); transform: translateY(-1px); }
#othersBack:active{ transform: scale(0.98); }
#othersBack .material-symbols-rounded{ font-size:16px; line-height:1; color:var(--text); }
.help-btn { background: linear-gradient(135deg, #f2f4f6 0%, #d7dce2 100%); color: #0f1117; border: none; }

.donate-card { text-align: center; display: flex; flex-direction: column; gap: 18px; }
.donate-hero { padding: 6px 0; }
.donate-icon { width: 50px; height: 50px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 50%; background: rgba(255,255,255,0.06); color: var(--md-sys-color-primary); border: 1px solid rgba(255,255,255,0.1); }
.donate-hero h2 { font-size: 17px; font-weight: 760; margin-bottom: 6px; color: var(--text); letter-spacing: -0.015em; }
.donate-hero p { color: var(--text-3); font-size: 12.5px; line-height: 1.6; max-width: 460px; margin: 0 auto; }
.qris-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,0.02); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.qris-image { position: relative; width: 210px; height: 210px; border-radius: 12px; background: #fff; padding: 10px; overflow: hidden; display: grid; place-items: center; border: 1px solid transparent; background-clip: padding-box; isolation:isolate; transform:translateZ(0); backface-visibility:hidden; }
.qris-image img { width: 100%; height: 100%; object-fit: contain; display: block; transform:translateZ(0); backface-visibility:hidden; }
.qris-fallback { position: absolute; inset: 0; display: none; place-items: center; text-align: center; color: #64748b; font-size: 12px; line-height: 1.6; padding: 16px; background: #f8fafc; }
.qris-image.missing img { display: none; }
.qris-image.missing .qris-fallback { display: grid; }
.qris-tip { color: var(--text-3); font-size: 11.5px; line-height: 1.5; }
.official-note { color: var(--text-3); font-size: 11px; line-height: 1.5; text-align: center; margin: 0; }

.about-warning { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid rgba(245,158,11,0.32); border-radius: 12px; background: rgba(245,158,11,0.07); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.about-warning-icon { font-size: 18px; line-height: 1.4; flex-shrink: 0; }
.about-warning-body { display: flex; flex-direction: column; gap: 6px; }
.about-warning-body h2 { font-size: 13.5px; font-weight: 750; margin: 0; color: #f59e0b; }
.about-warning-body p { font-size: 12.5px; line-height: 1.6; margin: 0; color: var(--text-3); }
.about-card { display: flex; flex-direction: column; gap: 18px; }
.about-intro { display: flex; flex-direction: column; gap: 8px; }
.about-intro p { font-size: 13px; line-height: 1.7; color: var(--text-3); }
.about-intro b { color: var(--text); font-weight: 700; }
.about-features { display: flex; flex-direction: column; gap: 10px; }
.feature-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: 12px; transition: border-color 200ms ease, transform 200ms var(--ease-out); }
.feature-item:hover { border-color: rgba(255,255,255,0.1); transform: translateY(-1px); }
.feature-item svg { flex-shrink: 0; margin-top: 2px; color: var(--md-sys-color-primary); }
.feature-item h4 { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.feature-item p { font-size: 12.5px; line-height: 1.6; color: var(--text-3); }
.about-contact { border-top: 1px solid var(--line); padding-top: 16px; padding-bottom: 8px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
#panel-tentang{ padding-bottom: 28px; }
.about-contact h3 { font-size: 13px; font-weight: 700; color: var(--text); }
.about-contact p { font-size: 12.5px; line-height: 1.6; color: var(--text-3); }
.contact-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.contact-link { flex: none; width: auto; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-weight: 600; min-height: 34px; }

.handle { color: var(--md-sys-color-primary); font-weight: 600; text-decoration: none; transition: opacity 200ms; }
.handle:hover { opacity: 0.82; text-decoration: underline; }

.floating-nav-bar {
  display: inline-flex; position: fixed; bottom: max(44px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-top: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-pill); z-index: 44; align-items: center; padding: 6px; gap: 4px;
  max-width: min(94vw, 560px); width: max-content; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
  backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform 340ms var(--ease-spring), opacity 280ms ease; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.floating-nav-bar::-webkit-scrollbar { display: none; }
.floating-nav-indicator {
  position: absolute; top: 6px; bottom: 6px; left: 6px; width: 44px;
  background: var(--md-sys-color-primary); border-radius: var(--radius-pill); z-index: 1; pointer-events: none;
  transition: transform 420ms var(--ease-spring); will-change: transform;
  box-shadow: 0 2px 10px hsla(0, 0%, 92%, 0.35), inset 0 1px 0 rgba(255,255,255,0.4);
}
.floating-nav-item {
  position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 0.82rem; font-weight: 600; height: 38px; padding: 0 11px; border-radius: var(--radius-pill);
  white-space: nowrap; flex-shrink: 0; background: transparent; gap: 5px;
  transition: color 180ms ease, padding 320ms var(--ease-spring); user-select: none; -webkit-tap-highlight-color: transparent; min-width: 44px;
}
.floating-nav-item .nav-label { max-width: 0; opacity: 0; margin-left: 0; overflow: hidden; transition: opacity 180ms ease, margin-left 180ms ease; pointer-events: none; }
.floating-nav-item .material-symbols-rounded { font-size: 1.2rem; line-height: 1; flex-shrink: 0; }
.floating-nav-item.active { color: #000; font-weight: 800; padding: 0 15px 0 12px; }
.floating-nav-item.active .nav-label { max-width: 110px; opacity: 1; margin-left: 6px; pointer-events: auto; }
.floating-nav-item.active .material-symbols-rounded { font-variation-settings:'FILL' 1; }
.floating-nav-item:not(.active):hover { color: #fff; }
.floating-nav-item:active { transform: scale(0.96); }

.slide-container.cube-viewport {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden !important;
  overflow-anchor: none;
  transition: min-height 0.64s var(--ease-spring-soft);
  will-change: min-height;
}
@media(min-width:1280px){
  .slide-container.cube-viewport{ max-width:920px; }
}
.slide-track.cube-3d-box {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  transition: transform 680ms var(--ease-spring-soft);
  will-change: transform;
  transform: translateX(0);
}
.slide-track.cube-3d-box.is-sliding {

}
.slide-panel.cube-face {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.slide-panel.cube-face:not(.active-panel){
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.slide-panel.cube-face.active-panel{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}
.slide-panel.cube-face > * {
  width: 100%;
  max-width: 560px;
  will-change: transform, opacity;
}

.slide-panel.cube-face > * {
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 420ms ease, transform 640ms var(--ease-spring-soft);
}
.slide-panel.cube-face.active-panel > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.slide-panel.cube-face.active-panel > *:nth-child(1){ transition-delay: 68ms; }
.slide-panel.cube-face.active-panel > *:nth-child(2){ transition-delay: 128ms; }
.slide-panel.cube-face.active-panel > *:nth-child(3){ transition-delay: 188ms; }
.slide-panel.cube-face.active-panel > *:nth-child(4){ transition-delay: 246ms; }
.slide-panel.cube-face.active-panel > *:nth-child(5){ transition-delay: 304ms; }

#panel-tools .tool-card-new{
  opacity:0;
  transform: translateY(16px) scale(0.96);
  transition: opacity 380ms ease, transform 520ms var(--ease-spring-soft);
  will-change: transform, opacity;
}
#panel-tools.active-panel .tool-card-new{
  opacity:1;
  transform: translateY(0) scale(1);
}
#panel-tools.active-panel .tool-card-new:nth-child(1){ transition-delay: 70ms; }
#panel-tools.active-panel .tool-card-new:nth-child(2){ transition-delay: 130ms; }
#panel-tools.active-panel .tool-card-new:nth-child(3){ transition-delay: 190ms; }
#panel-tools.active-panel .tool-card-new:nth-child(4){ transition-delay: 250ms; }
#panel-tools.active-panel .tool-card-new:nth-child(5){ transition-delay: 310ms; }
#panel-tools.active-panel .tool-card-new:nth-child(6){ transition-delay: 370ms; }
#panel-tools.active-panel .tool-card-new:nth-child(7){ transition-delay: 430ms; }
#panel-tools.active-panel .tool-card-new:nth-child(8){ transition-delay: 490ms; }

.tool-modal-card.is-quality { overscroll-behavior: contain; }
.tool-modal-card.is-quality .tool-modal-hero { display: flex !important; }
.tool-modal-card.is-quality #toolPanel-quality .qm-header{ display:none !important; }
.tool-modal-card.is-quality .tool-modal-body { overscroll-behavior: contain; }
#toolPanel-quality { max-height: none; overflow: visible; overscroll-behavior: auto; }
#toolPanel-quality .qm-card { box-shadow: none; border: none; padding: 6px; background: transparent; margin: 0; gap: 4px; }
#toolPanel-quality .qm-header { padding-bottom: 2px !important; margin-bottom: 2px !important; }
#toolPanel-quality .qm-title { font-size: 13px !important; }
#toolPanel-quality .qm-subtitle { font-size: 10px !important; }
#toolPanel-quality .qm-drop { padding: 6px !important; min-height: 48px !important; gap: 4px !important; }
#toolPanel-quality .qm-drop-icon { font-size: 15px !important; }
#toolPanel-quality .qm-drop-title { font-size: 11px !important; }
#toolPanel-quality .qm-drop-sub { font-size: 9.5px !important; }
#toolPanel-quality .qm-file-info { padding: 4px 6px !important; gap: 3px !important; margin: 2px 0 !important; }
#toolPanel-quality .qm-file-name { font-size: 10.5px !important; }
#toolPanel-quality .qm-file-meta { font-size: 9.5px !important; }
#toolPanel-quality .qm-label { font-size: 9.5px !important; margin-bottom: 1px !important; }
#toolPanel-quality .qm-seg-btn { font-size: 10px !important; padding: 3px 6px !important; min-height: 24px !important; }
#toolPanel-quality .qm-checkbox { font-size: 10px !important; gap: 3px !important; padding: 2px 0 !important; }
#toolPanel-quality .qm-info-box { padding: 4px 6px !important; gap: 3px !important; margin: 2px 0 !important; }
#toolPanel-quality .qm-info-row { font-size: 9.5px !important; padding: 1px 0 !important; }
#toolPanel-quality .qm-info-desc { font-size: 10px !important; line-height: 1.35 !important; padding: 4px !important; }
#toolPanel-quality .qm-process-btn { font-size: 11.5px !important; min-height: 32px !important; padding: 0 10px !important; margin-top: 2px !important; }
#toolPanel-quality .qm-progress-wrap { gap: 3px !important; margin: 2px 0 !important; }
#toolPanel-quality .qm-progress-label { font-size: 9px !important; }
#toolPanel-quality .qm-log-head { padding: 3px 0 !important; margin: 2px 0 !important; flex-wrap: nowrap !important; }
#toolPanel-quality .qm-log-actions { flex-shrink: 0 !important; margin-left: auto !important; flex-wrap: nowrap !important; }
#toolPanel-quality .qm-log-actions .qm-icon-btn, #toolPanel-quality .qm-log-actions .qm-copy-btn { flex-shrink: 0 !important; white-space: nowrap !important; }
body.is-encoding #toolPanel-quality .qm-drop, body.is-encoding #toolPanel-quality .qm-file-info { display: none !important; }
#toolPanel-quality .qm-log-area { overscroll-behavior: contain !important; touch-action: pan-y !important; pointer-events: auto !important; }
#toolPanel-quality .qm-log-area { font-size: 8.5px !important; max-height: 112px !important; min-height: 64px !important; overflow-y: auto !important; line-height: 1.25 !important; padding: 4px !important; scrollbar-width: thin !important; }
#toolPanel-quality .qm-log-area::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
#toolPanel-quality .qm-log-area::-webkit-scrollbar-thumb { background: rgba(128,128,128,.45) !important; border-radius: 999px !important; }
#toolPanel-quality .qm-log-area::-webkit-scrollbar-track { background: transparent !important; }

@media(min-width:641px){
  .tool-modal-card.is-quality{ width:min(500px,94vw) !important; max-height:min(92vh,740px) !important; max-height:min(92dvh,740px) !important; }
  .tool-modal-card.is-quality .tool-modal-header{ padding:8px 12px !important; }
  .tool-modal-card.is-quality .tool-modal-body{ padding:8px 12px 10px !important; gap:6px !important; overflow-y:auto !important; }
  #toolPanel-quality .qm-card{ gap:6px !important; padding:2px !important; }
  #toolPanel-quality .qm-drop{ min-height:42px !important; padding:7px 8px !important; }
  #toolPanel-quality .qm-drop-icon{ font-size:17px !important; margin-bottom:0 !important; }
  #toolPanel-quality .qm-drop-title{ font-size:11px !important; line-height:1.3 !important; }
  #toolPanel-quality .qm-drop-sub{ display:none !important; }
  #toolPanel-quality .qm-card:has(.qm-file-info:not([hidden])) .qm-drop{ padding:5px 8px !important; min-height:28px !important; }
  #toolPanel-quality .qm-file-info{ padding:5px 8px !important; }
  #toolPanel-quality .qm-file-icon{ font-size:16px !important; }
  #toolPanel-quality .qm-file-remove{ width:22px !important; height:22px !important; }
  #toolPanel-quality .qm-file-name{ font-size:11px !important; }
  #toolPanel-quality .qm-file-meta{ font-size:10px !important; }
  #toolPanel-quality .qm-group{ gap:3px !important; }
  #toolPanel-quality .qm-label{ font-size:9px !important; text-align:center !important; letter-spacing:.07em !important; }
  #toolPanel-quality .qm-segmented{ padding:3px !important; gap:4px !important; }
  #toolPanel-quality .qm-seg-btn{ min-height:27px !important; font-size:10.5px !important; padding:3px 6px !important; }
  #toolPanel-quality .qm-checkbox{ font-size:9.5px !important; gap:5px !important; padding:0 !important; justify-content:center !important; }
  #toolPanel-quality .qm-check{ width:13px !important; height:13px !important; }

  #toolPanel-quality .qm-info-box{ display:grid !important; grid-template-columns:auto auto auto !important; justify-content:space-between !important; column-gap:10px !important; row-gap:4px !important; padding:6px 8px !important; align-items:center !important; }
  #toolPanel-quality .qm-info-row{ font-size:10px !important; gap:4px !important; padding:0 !important; white-space:nowrap !important; }
  #toolPanel-quality .qm-info-row .material-symbols-rounded{ font-size:13px !important; }
  #toolPanel-quality .qm-info-desc{ grid-column:1 / -1 !important; font-size:9.5px !important; line-height:1.4 !important; padding:5px 7px !important; margin-top:0 !important; display:block !important; }
  #toolPanel-quality .qm-info-desc .tiktok-rec{ display:inline !important; white-space:normal !important; }

  #toolPanel-quality .qm-process-btn{ position:sticky !important; bottom:0 !important; z-index:5 !important; min-height:37px !important; font-size:12px !important; margin:2px 0 0 !important; }
  #toolPanel-mp3:not([hidden]){ display:flex !important; flex-direction:column !important; min-height:100% !important; }
  #toolPanel-mp3 .tool-modal-footer{ margin-top:auto !important; position:sticky !important; bottom:0 !important; z-index:5 !important; padding-top:8px !important; }
}

#toolPanel-mp3:not([hidden]){ display:flex; flex-direction:column; min-height:100%; }
#toolPanel-mp3 .tool-modal-footer{ margin-top:auto; position:sticky; bottom:0; z-index:5; padding-top:8px; }

#panel-tools > *{ opacity:1 !important; transform:none !important; transition:none !important; }
#panel-tools .tools-grid-new{ opacity:1 !important; transform:none !important; }
@media(prefers-reduced-motion:reduce){
  #panel-tools .tool-card-new{ transition:none !important; opacity:1 !important; transform:none !important; }
}
.slide-panel.cube-face.active-panel {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}
@media(prefers-reduced-motion:reduce){
  .slide-track.cube-3d-box, .slide-panel.cube-face > *{ transition:none !important; }
}

.slide-container:not(.cube-viewport) { display: flex; flex-wrap: nowrap; width: 100%; overflow: hidden; position: relative; }
.slide-track:not(.cube-3d-box) { display: flex; flex-wrap: nowrap; transition: transform 520ms cubic-bezier(0.32,0.72,0,1); will-change: transform; width: 100%; }
@keyframes panelSlideIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }
.dot-indicator { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.18); cursor: var(--velard-cursor, pointer); transition: background 200ms ease, transform 200ms ease; }
.dot-indicator.active { background: var(--md-sys-color-primary); transform: scale(1.2); box-shadow: 0 0 10px hsla(0, 0%, 92%, 0.4); }

.modal-backdrop, #help-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.64); backdrop-filter: blur(8px) saturate(1.1); -webkit-backdrop-filter: blur(8px) saturate(1.1);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 100;
}
.modal-backdrop[hidden], #help-modal[hidden] { display: none; }

#donateModal{ z-index: 200 !important; }
#donateModal .modal{ z-index: 201; }

#mergeLimitModal{ z-index: 300 !important; }
#mergeLimitModal .modal{ z-index: 301 !important; }

#analysisModal{ z-index: 500 !important; }
#analysisModal .modal{ z-index: 501 !important; }
#cancelConfirmModal{ z-index: 600 !important; }
#cancelConfirmModal .modal{ z-index: 601 !important; }
#toolModalHero .qm-hero-trash{ margin-left:auto; width:32px; height:32px; flex:0 0 auto; border-radius:10px; border:1px solid #3a222b; background:#241419; color:#ffe8ef; cursor:pointer; display:grid; place-items:center; }
#toolModalHero .qm-hero-trash:hover{ background:#2e1a21; border-color:#5a3440; }
#toolModalHero .qm-hero-trash .material-symbols-rounded{ font-size:18px; }
#tiktokConfirmModal{ z-index: 400 !important; }
#tiktokConfirmModal .modal{ z-index: 401 !important; }
.modal {
  width: 100%; max-width: 420px; background: rgba(18,20,26,0.42); border: 1px solid rgba(255,255,255,0.07); border-top: 1px solid rgba(255,255,255,0.09);
  border-radius: 18px; padding: 22px; text-align: center;
  box-shadow: 0 24px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.modal-icon { font-size: 36px; color: var(--md-sys-color-primary); filter: drop-shadow(0 0 10px hsla(0, 0%, 92%, 0.24)); }
.modal-title { font-size: 18px; font-weight: 800; margin-top: 8px; letter-spacing: -0.015em; }
.modal-file { font-size: 12.5px; color: var(--text-3); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.donate-text { font-size: 12.5px; color: var(--text-3); margin-top: 8px; line-height: 1.55; }
.analysis-list { list-style: none; margin-top: 18px; }
.analysis-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.analysis-row:last-child { border-bottom: none; }
.analysis-label { font-size: 13px; font-weight: 600; color: var(--text-3); text-align: left; }
.analysis-value { font-size: 13px; font-weight: 700; flex: 1; text-align: right; }
.analysis-icon { display: none !important; }
.analysis-note { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin-top: 14px; text-align: left; }
.analysis-note .material-symbols-rounded { font-size: 16px; flex: none; color: var(--md-sys-color-primary); }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.btn-cancel, .btn-proceed { flex: 1; min-height: 42px; border-radius: 12px; font-weight: 700; font-size: 13px; transition: opacity 150ms ease, transform 120ms ease; }
.btn-cancel { border: 1px solid rgba(255,255,255,0.07); color: var(--text); background: rgba(255,255,255,0.04); }
.btn-proceed { background: var(--md-sys-color-primary); color: #0a0e02; box-shadow: 0 4px 14px hsla(0, 0%, 92%, 0.22); }
.btn-cancel:hover, .btn-proceed:hover { opacity: 0.88; }
.btn-cancel:active, .btn-proceed:active { transform: scale(0.98); }

.modal-card { width: 100%; max-width: 480px; background: rgba(18,20,26,0.42); border: 1px solid rgba(255,255,255,0.07); border-top: 1px solid rgba(255,255,255,0.09); border-radius: 18px; padding: 22px; box-shadow: 0 16px 40px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.05); backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.modal-header h2 { font-size: 17px; font-weight: 800; letter-spacing: -0.015em; }
.modal-close { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.06); color: var(--text); transition: opacity 150ms ease; }
.modal-close:hover { opacity: 0.82; }
.modal-subtitle { font-size: 12.5px; color: var(--text-3); line-height: 1.55; margin-bottom: 14px; }
.modal-subtitle b { color: var(--md-sys-color-primary); }
.help-label { display: block; font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
#help-msg { width: 100%; resize: vertical; min-height: 120px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.04); color: var(--text); font-family: var(--md-font); font-size: 13px; line-height: 1.5; transition: border-color 160ms ease, box-shadow 160ms ease; }
#help-msg:focus { outline: none; border-color: hsla(0, 0%, 92%, 0.42); box-shadow: 0 0 0 3px hsla(0, 0%, 92%, 0.14); }
.help-note { font-size: 11.5px; color: var(--text-3); margin-top: 8px; line-height: 1.5; }
.help-status { font-size: 12.5px; font-weight: 600; min-height: 18px; margin-top: 10px; color: var(--md-sys-color-primary); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; margin: 0; overflow: hidden; }

.tool-modal-backdrop { position: fixed; inset: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.58); backdrop-filter: blur(8px); z-index: 150; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 260ms var(--ease-out), visibility 260ms ease; }
.tool-modal-backdrop.active { opacity: 1; visibility: visible; pointer-events: auto; }
.tool-modal-backdrop[hidden] { display: none !important; }
.tool-modal-card {
  position: fixed; background: rgba(18,20,26,0.48); border: 1px solid rgba(255,255,255,0.07); border-top: 1px solid rgba(255,255,255,0.09); border-radius: 16px;
  display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; z-index: 151; opacity: 0; visibility: hidden; pointer-events: none;
  contain: content; will-change: left, top, width, height, border-radius; box-shadow: 0 16px 40px rgba(0,0,0,0.42), 0 8px 20px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25);
  max-height: min(90vh, 760px); max-height: min(90dvh, 760px); height: auto; overflow: hidden;
}
.tool-modal-card[hidden] { display: none !important; }
.tool-modal-card.expanded { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
.tool-modal-card.is-morphing * { transition: none !important; }
.tool-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid transparent; transition: border-color 260ms ease; position: sticky; top: 0; z-index: 3; background: rgba(18,20,26,0.82); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }
.tool-modal-card.expanded .tool-modal-header { border-bottom-color: var(--line); }
.tool-modal-hero { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.tool-modal-hero .tool-icon-wrap { width: 36px; height: 36px; border-radius: 10px; }
.tool-modal-hero .tool-info-new { gap: 2px; }
.tool-modal-hero .tool-title-new { font-size: 13px; }
.tool-modal-hero .tool-desc-new { font-size: 11px; -webkit-line-clamp: 1; }
.tool-modal-close { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.07); display: grid; place-items: center; color: var(--text-3); flex-shrink: 0; transition: background 160ms ease, transform 160ms ease; }
.tool-modal-close:hover { background: rgba(255,255,255,0.08); transform: scale(1.05); color: var(--text); }
.tool-modal-close .material-symbols-rounded { font-size: 16px; }
.tool-modal-close.is-processing { background: var(--md-sys-color-primary) !important; color: #0a0e02 !important; border-color: transparent; min-width: 42px; width: auto; padding: 0 8px; height: 26px; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 800; }
.tool-modal-body { padding: 16px 18px 18px; overflow: auto; display: flex; flex-direction: column; gap: 14px; max-height: none; scrollbar-width: none; -ms-overflow-style: none; flex:1; min-height:0; overscroll-behavior: contain; }
@media(max-width:640px){
  .tool-modal-card.is-quality .tool-modal-hero{ display:flex !important; }
  .tool-modal-card.is-quality #toolPanel-quality .qm-header{ display:none !important; }
  .tool-modal-card.is-quality .tool-modal-header{ padding: 10px 12px; }
  .tool-modal-card.is-quality .tool-modal-hero .tool-icon-wrap{ width:32px; height:32px; }
  .tool-modal-card.is-quality .tool-modal-hero .tool-title-new{ font-size:13px; }
  .tool-modal-card.is-quality .tool-modal-hero .tool-desc-new{ font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:38vw; }
}
.tool-modal-body::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

.tool-modal-card:has(#toolPanel-thumbnail:not([hidden])){ background:rgba(11,14,20,.78) !important; border:1px solid rgba(255,255,255,0.10) !important; backdrop-filter:blur(20px) saturate(1.25) !important; -webkit-backdrop-filter:blur(20px) saturate(1.25) !important; }
.tool-modal-card:has(#toolPanel-thumbnail:not([hidden])) .tool-modal-header{ display:none !important; }
.tool-modal-card:has(#toolPanel-thumbnail:not([hidden])) .tool-modal-body{ padding:12px 12px 24px !important; gap:0 !important; background:transparent !important; overflow-y:auto !important; overflow-x:hidden !important; flex:1 1 auto !important; min-height:0 !important; max-height:100% !important; scrollbar-width:thin !important; scrollbar-color:rgba(255,255,255,.28) transparent !important; touch-action:pan-y !important; -webkit-overflow-scrolling:touch !important; }
.tool-modal-card:has(#toolPanel-thumbnail:not([hidden])) .tool-modal-body::-webkit-scrollbar{ display:block !important; width:8px !important; height:8px !important; }
.tool-modal-card:has(#toolPanel-thumbnail:not([hidden])) .tool-modal-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25) !important; border-radius:9999px !important; }
.tool-modal-card:has(#toolPanel-thumbnail:not([hidden])) .tool-modal-body::-webkit-scrollbar-track{ background:transparent !important; }
.tool-modal-card:has(#toolPanel-thumbnail:not([hidden])) #toolPanel-thumbnail.vt-panel{ border-radius:0 !important; border:none !important; min-height:0 !important; }

.tool-drop-zone { border: 1.5px dashed var(--line); border-radius: 10px; padding: 14px 12px; background: rgba(255,255,255,0.02); display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: var(--velard-cursor, pointer); text-align: center; transition: border-color 160ms ease, background 160ms ease; }
.tool-drop-zone:hover, .tool-drop-zone.dragover { border-color: hsla(0, 0%, 92%, 0.42); background: hsla(0, 0%, 92%, 0.06); }
.tool-drop-zone .material-symbols-rounded { font-size: 24px; color: var(--md-sys-color-primary); }
.tool-drop-title { font-size: 12.5px; font-weight: 700; color: var(--text); }
.tool-drop-sub { font-size: 10.5px; color: var(--text-3); }
.tool-file-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--md-sys-color-primary); color: #0a0e02; padding: 6px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; max-width: 100%; }
.tool-file-badge .material-symbols-rounded{font-size:16px}
.tool-progress-section { display: flex; flex-direction: column; gap: 6px; }
.tool-progress-track { height: 6px; width: 100%; background: rgba(255,255,255,0.06); border-radius: var(--radius-pill); overflow: hidden; }
.tool-progress-fill { height: 100%; width: 0%; background: var(--md-sys-color-primary); border-radius: var(--radius-pill); transition: width 150ms ease; }
.tool-progress-labels { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--text); }
.tool-modal-footer { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.tool-process-btn { width: 100%; height: 44px; background: hsl(0 0% 88%); color: #0a0e02; border-radius: var(--radius-pill); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 18px hsla(0, 0%, 88%, 0.2); transition: transform 140ms ease, opacity 140ms ease; }
.tool-process-btn:disabled { opacity: 0.42; cursor: not-allowed; }
.tool-process-btn:not(:disabled):active { transform: scale(0.99); }
.tool-download-btn { width: 100%; height: 44px; background: var(--text); color: var(--ink); border-radius: var(--radius-pill); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; }

.tool-fill-table { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.tool-table-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 11px; line-height: 1.4; }
.tool-table-row:last-child { border-bottom: none; }
.tool-table-row span { color: var(--text-3); font-weight: 600; white-space: nowrap; }
.tool-table-row strong { color: var(--text); font-weight: 700; text-align: right; font-size: 11px; }

.tool-selected { display:block; font-size: 11.5px; color: var(--text); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 8px 12px; word-break: break-all; line-height: 1.4; min-height: 16px; }
.tool-selected:empty{ display:none; }
.tool-detected { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--text); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); padding: 7px 12px; border-radius: var(--radius-pill); width: fit-content; max-width:100%; word-break: break-all; }
.tool-detected[hidden] { display: none !important; }
.tool-label { font-size: 11.5px; font-weight: 700; color: var(--text-3); margin-top: 4px; padding-left: 2px; }
.tool-select { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.04); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; cursor: var(--velard-cursor, pointer); margin-top: 2px; }
.tool-select option { background: #171a22; color: #eceef2; }
.tool-select option:checked, .tool-select option:hover { background: #232735; color: #fff; }
select.tool-select { color-scheme: dark; }
.tool-input { flex: 1; min-width: 70px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.04); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; text-align: center; }
.tool-time-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.tool-time-grid[hidden] { display: none !important; }
.tool-time-field { display: flex; flex-direction: column; gap: 6px; cursor: var(--velard-cursor, pointer); }
.tool-time-head { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.tool-time-head .material-symbols-rounded { font-size: 16px; color: var(--md-sys-color-primary); flex: none; }
.tool-time-input { width: 100%; min-width: 0; padding: 12px 14px; font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-align: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease; }
.tool-time-input::placeholder { color: var(--text-3); opacity: 0.6; font-weight: 600; }
.tool-time-input:focus { border-color: var(--md-sys-color-primary); background: var(--surface); box-shadow: 0 0 0 3px hsla(0, 0%, 92%, 0.12); outline: none; }
.tool-time-sep { padding-bottom: 14px; color: var(--text-3); opacity: 0.5; font-weight: 700; font-size: 14px; line-height: 1; user-select: none; }
.tool-merge-list { display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow-y: auto; overflow-x: hidden; padding: 6px; width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 10px; scrollbar-width: none !important; -ms-overflow-style: none !important; }
.tool-merge-list::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.tool-merge-list[hidden] { display: none !important; }
.tool-merge-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; font-size: 11.5px; font-weight: 600; color: var(--text); flex-shrink: 0; cursor: grab; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.tool-merge-item.dragging { opacity: 0.5; transform: scale(0.97); border-color: var(--md-sys-color-primary); }
.tool-merge-item.drag-over { border-color: var(--md-sys-color-primary); background: rgba(232,230,226,0.06); transform: translateY(2px); }
.tool-merge-item .drag-handle { flex: none; width: 20px; height: 20px; display: grid; place-items: center; color: var(--text-3); cursor: grab; border-radius: 6px; }
.tool-merge-item .drag-handle:active { cursor: grabbing; }
.tool-merge-item .num { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--md-sys-color-primary); color: #0a0e02; font-size: 11px; font-weight: 800; }
.tool-merge-item .name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-merge-item .size { flex: none; color: var(--text-3); font-weight: 600; font-size: 11px; }
.tool-merge-item .remove { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: transparent; border: 1px solid transparent; color: var(--text-3); cursor: var(--velard-cursor, pointer); }
.tool-merge-item .remove:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.tool-merge-hint { font-size: 11px; color: var(--text-3); text-align: center; padding: 6px 8px; background: rgba(232,230,226,0.04); border: 1px dashed var(--line); border-radius: 8px; line-height: 1.5; }
.tool-merge-hint[hidden] { display: none !important; }
.others-detail { margin-top: 16px; animation: fadeIn 220ms ease; }
.others-detail[hidden] { display: none !important; }
@keyframes fadeIn { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }
#othersDetail .tiktok-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-top: 12px; width: 100% !important; opacity: 1 !important; }
#othersDetail .tiktok-card { display: flex !important; flex-direction: column; border-radius: 12px; overflow: hidden; opacity: 1 !important; transform: none !important; transition: none !important; }
#othersDetail .tiktok-thumb { aspect-ratio: 1 / 1; overflow: hidden; background: #0f1117; }
#othersDetail .tiktok-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#othersDetail .tiktok-like { padding: 8px 6px; font-size: 11px; gap: 6px; }
@media (max-width: 640px) {
  #othersDetail .tiktok-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  #othersDetail .tutorial-card { padding: 14px !important; }
  #othersDetail .tutorial-card h2 { font-size: 16px !important; }
  #othersDetail .tutorial-step h3 { font-size: 14px !important; }
  #othersDetail .tutorial-step p { font-size: 13px !important; line-height: 1.6 !important; }
  #othersDetail .tutorial-step .step-num { width: 26px !important; height: 26px !important; font-size: 12px !important; }
  #othersDetail .card h3 { font-size: 15px !important; }
  #othersDetail .card p { font-size: 13px !important; }
}
.merge-limit-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; padding: 4px 2px; margin-top: 12px; text-align: left; }
.tool-status { font-size: 11.5px; min-height: 16px; color: var(--text-3); }
.tool-status.ok { color: var(--success); }
.tool-status.err { color: var(--danger); }
.tool-tip { font-size: 11.5px; color: var(--text-3); line-height: 1.55; padding: 8px 10px; background: rgba(255,255,255,0.02); border: 1px dashed var(--line); border-radius: 8px; }

.toast { position: fixed !important; top: calc(10px + env(safe-area-inset-top, 0px)) !important; bottom: auto !important; left: 50% !important; transform: translateX(-50%) translateY(-12px) !important; background: rgba(18,20,26,0.42); color: var(--text); border: 1px solid rgba(255,255,255,0.07); padding: 10px 16px; border-radius: 12px; font-size: 12.5px; font-weight: 700; z-index: 2147483647 !important; opacity: 0; pointer-events: none; transition: opacity 220ms ease, transform 220ms ease; box-shadow: 0 12px 28px rgba(0,0,0,0.42); max-width: calc(100vw - 32px); text-align: center; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); will-change: transform, opacity; }
.toast.show { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; pointer-events: auto !important; }

.top-notif { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 2147483647 !important; background: #e11d48; color: #fff; font-size: 13px; font-weight: 800; text-align: center; padding: 10px 12px calc(10px + env(safe-area-inset-top, 0px)); padding-top: calc(10px + env(safe-area-inset-top, 0px)); line-height: 1.4; box-shadow: 0 4px 16px rgba(0,0,0,0.4); transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform 260ms cubic-bezier(0.34,1.24,0.5,1), opacity 200ms ease; letter-spacing: -0.01em; }
.top-notif.show { transform: translateY(0) !important; opacity: 1 !important; pointer-events: auto !important; }
.top-notif[hidden] { display: block !important; }

@media (max-width: 768px) {
  .app-main { padding: 44px 12px 112px; }
  .app-container { padding: 10px 10px; gap: 12px; }
  .tools-grid-new { grid-template-columns: 1fr; gap: 10px; }
  .tool-card-new { padding: 12px 14px; gap: 10px; min-height: 76px; }
  .tool-icon-wrap { width: 38px; height: 38px; }
  .tool-icon-wrap .material-symbols-rounded { font-size: 20px; }

  #panel-tools { padding-left: 0 !important; padding-right: 0 !important; }
  #panel-tools .panel-head-large { padding-left: 12px; padding-right: 12px; }
  #panel-tools .tools-grid-new { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 12px; box-sizing: border-box; }

  #toolPanel-quality .qm-title { font-size: 16px !important; }
  #toolPanel-quality .qm-subtitle { font-size: 12px !important; }
  #toolPanel-quality .qm-drop { padding: 10px !important; }
  #toolPanel-quality .qm-drop-icon { font-size: 20px !important; }
  #toolPanel-quality .qm-drop-title { font-size: 13px !important; }
  #toolPanel-quality .qm-seg-btn { font-size: 12px !important; padding: 6px 10px !important; min-height: 32px !important; }
  #toolPanel-quality .qm-info-row { font-size: 11px !important; }
  #toolPanel-quality .qm-process-btn { font-size: 13px !important; min-height: 40px !important; padding: 0 14px !important; }
  #toolPanel-quality .qm-progress-label { font-size: 11px !important; }
  .kinetic-hero { padding: 10px 0 4px; gap: 10px; margin-bottom: 2px; }
  .kinetic-greeting-line { font-size: clamp(1.3rem, 6vw, 1.7rem); }
  .kinetic-name-line { font-size: clamp(1.9rem, 10vw, 2.8rem); }
  .tool-modal-card { border-radius: 18px 18px 0 0 !important; }
  .floating-nav-bar {
    bottom: max(18px, env(safe-area-inset-bottom)); padding: 6px; gap: 2px; max-width: 98vw;
    background: rgba(18,20,26,0.84); border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35);
    box-shadow: 0 18px 44px rgba(0,0,0,0.56), 0 6px 16px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .floating-nav-indicator {
    top: 6px; bottom: 6px;
    box-shadow: 0 3px 14px rgba(255,255,255,0.28), inset 0 1px 0 rgba(255,255,255,0.42);
  }
  .floating-nav-item { height: 40px; padding: 0 11px; font-size: 0.78rem; min-width: 42px; gap: 6px; }
  .floating-nav-item .material-symbols-rounded { font-size: 1.25rem; }
  .floating-nav-item.active { padding: 0 16px 0 13px; font-weight: 800; }
  .floating-nav-item.active .material-symbols-rounded { font-size: 1.3rem; }
}
@media (max-width: 420px) {
  .floating-nav-bar { padding: 4px; gap: 1px; max-width: 99vw; bottom: max(14px, env(safe-area-inset-bottom)); }
  .floating-nav-item { min-width: 40px; padding: 0 9px; height: 38px; }
  .floating-nav-item .nav-label { font-size: 0.74rem; }
}
@media (min-width: 769px) {
  .app-main { padding: 28px 14px 72px; }
  .app-container { padding: 10px 12px 72px; gap: 10px; justify-content: center; }
  #panel-tools .panel-title-large { font-size: 1.45rem !important; line-height: 1.1 !important; }
  #panel-tools .head-sub { font-size: 11.5px !important; }
  #panel-tools .tool-card-new { padding: 11px 13px !important; min-height: 64px !important; gap: 10px !important; }
  #panel-tools .tool-title-new { font-size: 13.5px !important; }
  #panel-tools .tool-desc-new { font-size: 11px !important; }
  #panel-tools .tool-icon-wrap { width: 38px !important; height: 38px !important; }
  #panel-tools .tool-icon-wrap .material-symbols-rounded { font-size: 18px !important; }
  .floating-nav-bar { bottom: 28px !important; padding: 4px !important; gap: 2px !important; }
  .floating-nav-item { height: 34px !important; padding: 0 9px !important; font-size: 0.78rem !important; }
}
@media (max-width: 360px) {
  .app-container { padding: 12px 10px; gap: 14px; }
}

@media(max-width:640px){
  #panel-tools .tool-card-new,
  #panel-others .tool-card-new {
    padding: 16px 14px !important;
    min-height: 88px !important;
    gap: 14px !important;
  }
  #panel-tools .tool-title-new,
  #panel-others .tool-title-new { font-size: 15px !important; }
  #panel-tools .tool-desc-new,
  #panel-others .tool-desc-new { font-size: 12.5px !important; }
  #panel-tools .tool-icon-wrap,
  #panel-others .tool-icon-wrap { width: 48px !important; height: 48px !important; }
  #panel-tools .tool-icon-wrap .material-symbols-rounded,
  #panel-others .tool-icon-wrap .material-symbols-rounded { font-size: 22px !important; }
  #panel-tools .tools-grid-new,
  #panel-others .tools-grid-new { gap: 12px !important; }
  html, body{ overflow-x:hidden !important; max-width:100% !important; width:100% !important; }
  .slide-container.cube-viewport{
    width:100% !important; max-width:100% !important;
    margin-left:0 !important; margin-right:0 !important; left:0 !important; right:0 !important;
  }
  .slide-panel.cube-face{ width:100% !important; max-width:100% !important; flex:0 0 100% !important; }
  .slide-track.cube-3d-box{ width:100% !important; }
  .top-header{
    top:10px; right:10px; z-index:60 !important; display:flex !important; opacity:1 !important; visibility:visible !important;
  }
  .top-header .lang-toggle{ padding:2px; display:grid !important; min-height:30px; }
  .lang-btn{ font-size:10.5px; padding:0 10px; min-height:26px; min-width:36px; display:inline-flex !important; }

  .kinetic-hero{ gap:10px; padding:12px 4px 10px 6px; min-height:auto !important; }
  .kinetic-stacked-title{ padding-left:2px; }
  .kinetic-greeting-line{ font-size: clamp(1.45rem, 6vw, 1.75rem); line-height:1.08; white-space:normal; }
  .kinetic-name-line{ font-size: clamp(2.6rem, 11vw, 3.2rem); line-height:0.9; white-space:normal; letter-spacing:-0.04em; }
  .hero-bio-text{
    font-size:12px; line-height:1.62; max-width:100%; padding-left:2px;
    display:block; overflow:visible; white-space:pre-line;
  }
  .hero-action-row{ gap:7px; flex-direction:column; align-items:stretch; }
  .hero-action-row .btn-main, .hero-action-row .btn-ghost{ min-height:38px; padding:0 14px; font-size:12px; width:100%; justify-content:center; }

  .tiktok-title{ font-size:1.45rem; letter-spacing:-0.03em; }

  .upload-card{ border-radius:12px; padding:10px; gap:8px; }
  .upload-area{ padding:12px 10px; border-width:1.3px; }
  .upload-area .upload-text{ font-size:12px; }
  .upload-area .upload-subtext{ font-size:11px; }
  .file-info{ padding:8px 10px; gap:8px; }
  .file-meta-wrap .file-name{ font-size:12px; }
  .segmented{ padding:2px; gap:2px; }
  .seg-btn{ padding:5px 9px; font-size:10.5px; min-height:30px; }
  .process-btn{ min-height:40px; font-size:12px; width:100%; }
  .method-desc{ font-size:11px; padding:8px 10px; }
  .tool-card-new{ min-height:60px; border-radius:12px; padding:9px 10px; gap:8px; }
  .tool-card-new .tool-title-new{ font-size:11.5px; }
  .tool-card-new .tool-desc-new{ font-size:10.2px; }
  .tool-icon-wrap{ width:34px; height:34px; }
  .tutorial-card{ border-radius:12px; padding:10px; gap:10px; }
  .tutorial-card h3{ font-size:12px; }
  .tutorial-card p{ font-size:11px; line-height:1.5; }
  .help-card-wide{ padding:10px; }
  .donate-card, .about-card{ border-radius:12px; padding:10px; gap:8px; }
  .donate-hero h2{ font-size:15px; }
  .donate-hero p{ font-size:11.5px; }
  .qris-box{ padding:10px; gap:8px; border:none !important; background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  .qris-image{ width:150px; height:150px; border:none !important; outline:none !important; box-shadow:none !important; background-clip:border-box !important; isolation:auto !important; }
  .qris-image img{ width:calc(100% - 6px) !important; height:calc(100% - 6px) !important; margin:3px !important; border-radius:6px !important; }
  .feature-item{ padding:8px 9px; }
  .feature-item h4{ font-size:12px; }
  .feature-item p{ font-size:11px; }

  .comets, .edge-flashes, .galaxy-particles{ display:none !important; }
  .streak-bg .galaxy-stars, .streak-bg .galaxy-stars2{ animation:none !important; opacity:0.32 !important; }
  .streak-bg .bumi-img, .streak-bg .blackhole-img, .streak-bg .bumi-glow, .streak-bg .blackhole-glow{ animation:none !important; will-change:auto !important; }
  .streak-bg .bumi-img{ filter:brightness(1.05) saturate(1.05) !important; }
  .streak-bg .blackhole-img{ filter:brightness(1) saturate(1) !important; }
  .card, .upload-card, .tool-card-new, .tutorial-card, .donate-card, .about-card, .feature-item{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  .card::before, .upload-card::before{ display:none !important; }
  .floating-nav-bar{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow: 0 8px 20px rgba(0,0,0,0.32) !important; }
  body::after{ opacity:0.008 !important; }

  .floating-nav-bar{
    display:inline-flex !important; width:max-content !important; max-width:min(94vw,560px) !important;
    padding:6px !important; gap:4px !important;
    bottom: max(10px, env(safe-area-inset-bottom));
    background: rgba(14,16,20,0.76) !important; border:1px solid rgba(255,255,255,0.08) !important; border-top:1px solid rgba(255,255,255,0.11) !important;
    border-radius:999px !important; backdrop-filter: blur(20px) saturate(1.25) !important; -webkit-backdrop-filter: blur(20px) saturate(1.25) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  }
  .floating-nav-indicator{ display:block !important; }
  .floating-nav-item{
    flex-direction:row; justify-content:center; align-items:center;
    height:38px; min-width:44px; padding:0 11px; gap:5px;
    font-size:0.82rem; font-weight:600; line-height:1;
    border-radius:999px; background:transparent;
  }
  .floating-nav-item .material-symbols-rounded{ font-size:1.2rem; line-height:1; }
  .floating-nav-item .nav-label{
    max-width:0 !important; opacity:0 !important; margin-left:0 !important;
    font-size:0.82rem; font-weight:600; letter-spacing:0; line-height:1; pointer-events:none;
    display:inline; text-align:left; white-space:nowrap; overflow:hidden; transition: opacity 180ms ease, margin-left 180ms ease, max-width 180ms ease;
  }
  .floating-nav-item.active{
    background: transparent; color:#000; font-weight:800; padding:0 15px 0 12px;
    box-shadow: none;
  }
  .floating-nav-item.active .nav-label{
    max-width:110px !important; opacity:1 !important; margin-left:6px !important; pointer-events:auto;
  }
}

@media(min-width:641px) and (max-width:860px){
  html, body{ overflow-x:hidden !important; }
  .slide-container.cube-viewport{ width:100% !important; max-width:100% !important; margin:0 !important; }
  .top-header{ top:12px; right:12px; z-index:60 !important; }
  .kinetic-hero{ gap:10px; padding:14px 6px 10px; min-height:auto !important; }
  .kinetic-greeting-line{ font-size: clamp(1.25rem, 3.2vw, 1.55rem); }
  .kinetic-name-line{ font-size: clamp(2.2rem, 5.5vw, 2.8rem); }
  .hero-bio-text{ font-size:12.6px; max-width:560px; }
  .tiktok-grid{ grid-template-columns:repeat(3,1fr) !important; gap:10px !important; }
  .tutorial-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .floating-nav-bar{
    display:inline-flex !important; width:max-content !important; max-width:min(94vw,560px) !important; padding:6px !important; gap:4px !important;
    bottom:max(14px, env(safe-area-inset-bottom));
    background: rgba(14,16,20,0.76) !important; border:1px solid rgba(255,255,255,0.08) !important; border-top:1px solid rgba(255,255,255,0.11) !important;
    border-radius:999px !important; backdrop-filter: blur(20px) saturate(1.25) !important; -webkit-backdrop-filter: blur(20px) saturate(1.25) !important;
  }
  .floating-nav-indicator{ display:block !important; }
  .floating-nav-item{
    flex-direction:row; height:38px; padding:0 11px; gap:5px;
    font-size:0.82rem; border-radius:999px;
  }
  .floating-nav-item .material-symbols-rounded{ font-size:1.2rem; }
  .floating-nav-item .nav-label{
    max-width:0 !important; opacity:0 !important; margin-left:0 !important;
    font-size:0.82rem; display:inline; text-align:left; white-space:nowrap; overflow:hidden; transition: opacity 180ms ease, margin-left 180ms ease, max-width 180ms ease; pointer-events:none;
  }
  .floating-nav-item.active .nav-label{ max-width:110px !important; opacity:1 !important; margin-left:6px !important; pointer-events:auto; }
  .floating-nav-item.active{ background:transparent; color:#000; padding:0 15px 0 12px; }
  .comets, .edge-flashes{ display:none !important; }
  .card, .upload-card, .tool-card-new{ backdrop-filter:none !important; }
}

@media(max-width:768px){
  .bg-static{ background-attachment: scroll !important; background-size: cover !important; }
  .slide-track.cube-3d-box{ will-change: auto !important; transition: transform 280ms cubic-bezier(0.32,0.72,0,1) !important; }
  .slide-panel.cube-face > *,
  #panel-tools .tool-card-new{ will-change: auto !important; }
  .slide-panel.cube-face > *{ transform:none !important; opacity:1 !important; transition:none !important; }
  #panel-tools .tool-card-new{ transform:none !important; opacity:1 !important; transition: opacity 180ms ease !important; }
  .kinetic-hero .flip-char,
  .kinetic-hero .kinetic-flip-box,
  .slide-panel.cube-face,
  .floating-nav-bar{ will-change: auto !important; }
  .kinetic-name-line{ filter: drop-shadow(0 0 18px rgba(34,211,238,0.45)) drop-shadow(0 0 36px rgba(34,211,238,0.25)) drop-shadow(0 2px 14px rgba(0,0,0,0.5)) !important; text-shadow:none !important; }
  .name-box .flip-char{ filter: drop-shadow(0 0 14px rgba(34,211,238,0.6)) drop-shadow(0 0 28px rgba(34,211,238,0.4)) !important; text-shadow:none !important; }
  .tiktok-section{ will-change:auto !important; transform:none !important; transition: opacity 280ms ease !important; }
  .card, .qm-card, .about-card, .tutorial-card, .tool-card-new, .tool-modal-card, .modal{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
  .floating-nav-bar{ backdrop-filter:blur(24px) saturate(1.4) !important; -webkit-backdrop-filter:blur(24px) saturate(1.4) !important; background: rgba(255,255,255,0.08) !important; }
}

@media(max-width:640px){
  #panel-beranda .kinetic-hero{ align-items:center; text-align:center; padding:18px 12px 14px; gap:12px; }
  #panel-beranda .kinetic-stacked-title{ align-items:center; text-align:center; width:100%; }
  #panel-beranda .kinetic-greeting-line,
  #panel-beranda .kinetic-name-line{ justify-content:center; text-align:center; width:100%; }
  #panel-beranda .kinetic-flip-box{ justify-content:center; }
  #panel-beranda .hero-bio-text{ display:block !important; font-size:12px; line-height:1.6; max-width:92%; margin:4px auto 0; text-align:center; opacity:0.92; }
  #panel-beranda .hero-action-row{ display:flex !important; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:8px; }
  #panel-beranda .tiktok-section{ display:flex !important; }
  .streak-bg, .streak-bg .bumi-img, .streak-bg .blackhole-img, .streak-bg .bumi-glow, .streak-bg .blackhole-glow, .bg-glow{ display:none !important; }
  .streak-bg svg{ display:none !important; }
}

@media(min-width:1025px){
  #panel-tutorial{ padding-bottom:48px !important; }
  #panel-tutorial .help-card-wide{ margin-bottom:32px !important; }
  body:not([data-view="beranda"]) .app-container{ padding-bottom:140px !important; }
}
body.tool-modal-open { overflow: hidden !important; overscroll-behavior: none !important; touch-action: none !important; }
body.tool-modal-open .dash-panels,
body.tool-modal-open .slide-container,
body.tool-modal-open .slide-track,
body.tool-modal-open .app-main,
body.tool-modal-open .app-container { overflow: hidden !important; overscroll-behavior: none !important; touch-action: none !important; }
body.tool-modal-open .floating-nav-bar { transform: translateX(-50%) translateY(120px); opacity: 0; pointer-events: none; }

.tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 768px) { .tools-grid { grid-template-columns: 1fr; } }

.process-btn, .tool-process-btn, .floating-nav-item, .lang-btn, .seg-btn { min-height: 38px; }
@media (pointer: coarse) { .floating-nav-item { min-width: 44px; min-height: 44px; } }

.tools-search-wrap{
  margin-top:14px; position:relative; display:flex; align-items:center; gap:8px;
  background: rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14);
  border-radius: 999px; padding:8px 12px 8px 14px; backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.tools-search-wrap:focus-within{ border-color: rgba(200,190,255,0.22); box-shadow: 0 0 0 3px rgba(200,190,255,0.10); }
.tools-search-icon{ color: rgba(220,222,235,0.85); font-size:18px; flex:none; }
#toolsSearch{ flex:1; background:transparent; border:0; outline:0; color:#f1eef8; font-size:13px; font-weight:500; }
#toolsSearch::placeholder{ color: rgba(225,228,240,0.55); }
#toolsSearch::-webkit-search-cancel-button{ display:none; }
.tools-search-clear{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.10); color:#e8e6f0; flex:none; }
.tools-search-clear .material-symbols-rounded{ font-size:16px; }
.tools-search-empty{ margin-top:10px; font-size:12.5px; color: rgba(225,228,240,0.68); text-align:center; }
.tools-cat-wrap{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 2px; }
.tools-cat-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.07);
  color: rgba(225,228,240,0.72); font-size:12px; font-weight:700;
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.tools-cat-btn .material-symbols-rounded{ font-size:16px; }
.tools-cat-btn.active{ background:#eceef2; color:#0a0e14; border-color:transparent; }
.tools-cat-btn:hover{ border-color: rgba(255,255,255,0.14); }
@media(max-width:640px){
  .tools-cat-wrap{ gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
  .tools-cat-wrap::-webkit-scrollbar{ display:none; }
  .tools-cat-btn{ flex:0 0 auto; padding:5px 10px; font-size:11px; gap:4px; white-space:nowrap; }
  .tools-cat-btn .material-symbols-rounded{ font-size:14px; }
}

.slide-panel:not(#panel-beranda){
  --primary-h: 0;
  --primary-s: 0%;
  --primary-l: 88%;
  --md-sys-color-primary: hsl(0 0% 88%);
  --md-sys-color-primary-container: hsl(0 0% 16%);
  --lime: hsl(0 0% 88%);
  --lime-strong: hsl(0 0% 92%);
}
.slide-panel:not(#panel-beranda) .panel-head-large .panel-title-large{ color: #eceef2; text-shadow: none; }
.slide-panel:not(#panel-beranda) .head-sub{ color: rgba(220,222,230,0.62); }
.slide-panel:not(#panel-beranda) .card,
.slide-panel:not(#panel-beranda) .qm-card,
.slide-panel:not(#panel-beranda) .donate-card,
.slide-panel:not(#panel-beranda) .about-card{
  background: rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}
.slide-panel:not(#panel-beranda) .tool-card-new{
  background: rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}
.slide-panel:not(#panel-beranda) .tool-card-new:hover{
  border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.06);
  box-shadow: 0 12px 32px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.06);
}
.slide-panel:not(#panel-beranda) .tool-icon-wrap{
  background: rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.06);
  color: #d8dce6;
}
.slide-panel:not(#panel-beranda) .qm-segmented{ background: rgba(255,255,255,0.035); border-color: rgba(255,255,255,0.07); }
.slide-panel:not(#panel-beranda) .qm-seg-btn.active{ background: hsl(0 0% 88%); color:#0a0e14; }
.slide-panel:not(#panel-beranda) .qm-process-btn:not(:disabled){ background: hsl(0 0% 88%); color:#0a0e14; box-shadow: 0 4px 14px rgba(0,0,0,0.22); }
.slide-panel:not(#panel-beranda) .qm-info-box{ background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.07); }

body.is-tool-processing .tool-card-new:not(.is-processing){ pointer-events:none; opacity:0.35; }
body.is-tool-processing .floating-nav-bar{ pointer-events:none; opacity:0.45; }
body.is-tool-processing .qm-drop,
body.is-tool-processing .tool-drop-zone,
body.is-tool-processing .tool-select,
body.is-tool-processing .tool-input,
body.is-tool-processing .tool-time-input{ pointer-events:none; opacity:0.42; }

#panel-others .tool-card-new{ padding:12px 12px !important; min-height:68px !important; gap:10px !important; border-radius:13px !important; }
#panel-others .tool-icon-wrap{ width:38px !important; height:38px !important; }
#panel-others .tool-icon-wrap .material-symbols-rounded{ font-size:19px !important; }
#panel-others .tool-title-new{ font-size:13.5px !important; }
#panel-others .tool-arrow{ width:28px !important; height:28px !important; }
#panel-others .tool-arrow .material-symbols-rounded{ font-size:16px !important; }

@media(max-width:640px){
  .tiktok-section{ margin-top: 28px !important; padding-top: 28px !important; }
  .tiktok-grid{ margin-top: 4px !important; }
}

.icon-sm{font-size:18px;line-height:1}
.about-hero-row{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.about-hero-icon{width:42px;height:42px;border-radius:12px;background:var(--surface-3);border:1px solid var(--line);display:grid;place-items:center;color:var(--md-sys-color-primary);flex-shrink:0}
.about-hero-icon .material-symbols-rounded{font-size:22px}
.about-ver-badge{font-size:10px;font-weight:800;letter-spacing:.06em;background:var(--md-sys-color-primary);color:#0a0e02;padding:2px 7px;border-radius:999px}
.about-desc{font-size:11.5px;color:var(--text-3);margin-top:2px}
.social-card{text-align:center}
.social-title{font-size:22px;font-weight:900;letter-spacing:-.02em;margin-bottom:6px}
.social-desc{font-size:13px;color:var(--text-3);margin-bottom:18px}
.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.social-link{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:14px;text-decoration:none;color:var(--text);box-shadow:0 8px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04);transition:transform 200ms ease,box-shadow 200ms ease,border-color 200ms ease,background 200ms ease;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
.social-link--tiktok{border-top:1px solid rgba(37,242,238,.14)}
.social-link--instagram{border-top:1px solid rgba(225,48,108,.14)}
.social-link:hover{transform:translateY(-2px);background:rgba(255,255,255,.06);box-shadow:0 12px 32px rgba(0,0,0,.36),0 0 18px rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.social-link--tiktok:hover{box-shadow:0 12px 32px rgba(0,0,0,.36),0 0 18px rgba(37,242,238,.08);border-color:rgba(37,242,238,.18)}
.social-link--instagram:hover{box-shadow:0 12px 32px rgba(0,0,0,.36),0 0 18px rgba(225,48,108,.08);border-color:rgba(225,48,108,.18)}
.social-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.social-icon .material-symbols-rounded{font-size:26px;color:#fff}
.social-icon--tiktok .material-symbols-rounded{filter:drop-shadow(0 0 8px rgba(37,242,238,.45))}
.social-icon--instagram .material-symbols-rounded{filter:drop-shadow(0 0 8px rgba(225,48,108,.35))}
.social-name{font-weight:900;font-size:14px;letter-spacing:-.01em}
.social-handle{font-size:12px;color:rgba(255,255,255,.62);font-weight:600}
.social-foot{font-size:12px;color:var(--text-3);margin-top:14px;line-height:1.6}
.help-card-inner{flex-direction:column;align-items:stretch;gap:14px;padding:18px}
.help-card-head{display:flex;align-items:center;gap:12px}
.help-icon--lg{width:44px;height:44px;border-radius:13px}
.help-head-title{font-size:14.5px;font-weight:900;letter-spacing:-.02em;color:var(--text)}
.help-head-sub{font-size:11.5px;font-weight:600;color:var(--text-3);margin-top:1px}
.help-desc{font-size:13px;line-height:1.65;color:var(--text-3)}
.help-info-box{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:8px}
.help-info-kicker{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.help-info-list{list-style:none;display:grid;gap:6px;margin:0;padding:0}
.help-info-item{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.help-bullet{color:var(--md-sys-color-primary);margin-top:1px}
.help-note-box{display:flex;gap:8px;align-items:flex-start;background:linear-gradient(135deg,rgba(224,242,140,.08),rgba(224,242,140,.02));border:1px solid rgba(224,242,140,.18);border-radius:10px;padding:10px 11px}
.help-note-icon{font-size:16px;color:#e0f28c;flex-shrink:0;margin-top:1px}
.help-note-text{font-size:11.5px;line-height:1.5;color:var(--text-3);margin:0}
.help-btn-full{width:100%;justify-content:center;min-height:44px;font-size:13px}
.help-alt{font-size:11px;color:var(--text-3);text-align:center;line-height:1.5;margin:0}
.spec-head{font-size:15px;font-weight:800;margin-bottom:12px;text-align:center}
.spec-grid{display:grid;gap:12px;font-size:13px;line-height:1.6}
.faq-head{font-size:15px;font-weight:800;margin-bottom:12px;text-align:center}
.faq-sub{font-size:12px;color:var(--text-3);text-align:center;margin-bottom:14px;line-height:1.5}
.faq-list{display:grid;gap:8px}
.faq-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px 12px}
.faq-q{font-size:13px;font-weight:700;color:var(--text);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:8px}
.faq-q .material-symbols-rounded{font-size:18px;color:var(--text-3)}
.faq-a{font-size:12.5px;line-height:1.6;color:var(--text-3);margin-top:8px}
.changelog-list{display:grid;gap:14px}
.changelog-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:14px}
.changelog-ver{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.changelog-badge{font-size:11px;font-weight:800;padding:4px 8px;border-radius:999px;background:var(--md-sys-color-primary);color:#0a0e02}
.changelog-date{font-size:11px;color:var(--text-3);font-weight:600}
.changelog-tag{font-size:10px;font-weight:700;padding:3px 7px;border-radius:999px;background:rgba(74,222,128,.15);color:#4ade80;border:1px solid rgba(74,222,128,.25)}
.changelog-h{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:6px}
.changelog-ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:12.5px;color:var(--text-3);line-height:1.6}
.privacy-head{display:block;margin-bottom:4px;text-align:left}
.privacy-head .faq-head{margin:0 !important;text-align:left}
.privacy-top-stats{display:block;margin:0 0 12px;padding:0;background:none;border:none;box-shadow:none;text-align:left}
.others-above-privacy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:auto;max-width:none;margin:12px 0 4px;padding:0;background:none;background-image:none;border:none;box-shadow:none;text-align:left}
.privacy-text{min-width:0;width:100%}
.privacy-text .changelog-ul{width:100%}
.privacy-users-label{font-size:13px;font-weight:700;color:var(--text-3);line-height:1.2;text-align:left}
.privacy-users-row{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin-top:2px;flex-wrap:nowrap;text-align:left}
.privacy-users-row strong{font-size:30px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}
.privacy-top{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;line-height:1.4;text-align:left;min-width:0;gap:1px}
.privacy-top span{font-size:11px;color:var(--text-3);line-height:1.4}
.privacy-top b{font-size:13px;font-weight:800;color:var(--text);white-space:nowrap;line-height:1.4}
.home-stats{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:960px;margin:48px auto 0;padding:36px 24px 40px;box-sizing:border-box;background:none;border:none;text-align:center}
.home-stats-title{font-weight:800;font-size:clamp(1.5rem,0.9rem + 4.6vw,3.4rem);letter-spacing:-.04em;line-height:1.05;margin:0;color:var(--text);white-space:nowrap;max-width:100%}
.home-stats-desc{max-width:70ch;margin:0;font-size:15px;line-height:1.8;color:var(--text-3)}
.home-stats-desc .hl-red{color:#e11d48;font-weight:800}
.home-stats-row{display:flex;align-items:center;justify-content:center;gap:32px;margin-top:8px}
.home-stat{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;text-align:center}
.home-stat-label{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.home-stat-num{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.home-stat-tool{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--text)}
.home-stat-divider{width:1px;align-self:stretch;min-height:56px;background:currentColor;opacity:.14}
@media(max-width:640px){.home-stats{gap:20px;padding:20px 18px 4px}.home-stat-num{font-size:36px}.home-stat-tool{font-size:19px}}
.tut-head{font-size:18px;text-align:center}
.others-back{margin-bottom:10px}

#panel-others{ padding-bottom:90px !important; }
#panel-others .tools-grid-new{ padding-bottom:12px; }
@media(max-width:640px){ #panel-others{ padding-bottom:100px !important; } }
.about-hero-subrow{display:flex;align-items:center;gap:8px}
.about-hero-title{font-size:14px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.about-intro-title{font-size:15px;font-weight:800;color:var(--text);margin-bottom:8px}
.about-p{font-size:14px;line-height:1.7;color:var(--text);margin-bottom:10px}
.about-p.muted{color:var(--text-3)}
.about-p:last-child{margin-bottom:0}
.faq-icon{font-size:18px;color:var(--text-3)}

.thumb-source-toggle{ display:flex; gap:10px; margin:6px 0 4px; flex-wrap:wrap; }
.thumb-radio{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--text-3); cursor:pointer; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.04); transition:border-color 160ms ease, background 160ms ease; }
.thumb-radio:has(input:checked){ color:var(--text); border-color:rgba(255,255,255,0.18); background:rgba(255,255,255,0.08); }
.thumb-radio input{ accent-color:var(--text); width:14px; height:14px; }
.thumb-hint{ font-size:11px; color:var(--text-3); opacity:0.9; margin:2px 0 6px; }
.thumb-url-wrap{ display:flex; gap:8px; align-items:center; margin:6px 0; }
.thumb-url-wrap[hidden]{ display:none !important; }
.thumb-url-wrap input{ flex:1; min-height:40px; border-radius:999px; border:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.06); color:var(--text); padding:0 14px; font-size:12.5px; outline:none; }
.thumb-url-wrap input:focus{ border-color:rgba(255,255,255,0.18); background:rgba(255,255,255,0.08); }
.thumb-url-btn{ white-space:nowrap; min-height:40px; padding:0 14px; border-radius:999px; }
.thumb-video-info{ font-size:11.5px; line-height:1.6; color:var(--text-3); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:10px; padding:8px 10px; font-family:var(--mono); }
.thumb-video-info[hidden]{ display:none !important; }
.thumb-video-wrap{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.thumb-video-wrap[hidden]{ display:none !important; }
#toolThumbVideo{ width:100%; max-height:340px; border-radius:12px; background:#000; object-fit:contain; display:block; border:1px solid rgba(255,255,255,0.07); }
.thumb-time-row{ display:flex; align-items:center; gap:8px; }
.thumb-time{ font-size:11px; font-weight:700; color:var(--text-3); font-family:var(--mono); min-width:38px; text-align:center; }
#toolThumbSeek{ flex:1; -webkit-appearance:none; appearance:none; height:4px; background:rgba(255,255,255,0.12); border-radius:999px; outline:none; }
#toolThumbSeek::-webkit-slider-thumb{ -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--md-sys-color-primary); cursor:pointer; box-shadow:0 0 0 3px rgba(255,255,255,0.12); }
#toolThumbSeek::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--md-sys-color-primary); border:none; cursor:pointer; }
.thumb-controls{ display:flex; gap:4px; flex-wrap:wrap; justify-content:center; margin-top:2px; }
.thumb-controls button{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-width:40px; min-height:44px; padding:6px 6px; border-radius:10px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); color:var(--text); cursor:pointer; transition:background 160ms ease, border-color 160ms ease, transform 120ms ease; }
.thumb-controls button:hover{ background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.14); }
.thumb-controls button:active{ transform:scale(0.97); }
.thumb-controls .material-symbols-rounded{ font-size:20px; line-height:1; }
.thumb-controls small{ font-size:10px; font-weight:700; color:var(--text-3); font-family:var(--mono); }
#toolThumbPlayPause{ min-width:48px; background:var(--text); color:var(--ink); border-color:rgba(0,0,0,0.08); }
#toolThumbPlayPause .material-symbols-rounded{ font-size:22px; }
.thumb-snap-row{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.thumb-snap-field{ display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.07); border-radius:999px; padding:6px 10px; font-size:11px; font-weight:700; color:var(--text-3); }
.thumb-snap-field span{ white-space:nowrap; }
.thumb-snap-field input{ width:86px; background:transparent; border:none; color:var(--text); font-weight:800; font-family:var(--mono); font-size:12px; outline:none; text-align:center; }
.thumb-snap-field small{ color:var(--text-3); font-weight:700; }
.thumb-snap-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
#toolThumbCapture{ flex:0 0 auto; }
.thumb-auto-group{ display:flex; align-items:center; gap:0; }
.thumb-auto-btn{ border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; }
#toolThumbSnapEach{ min-height:36px; border-radius:0 999px 999px 0; border:1px solid rgba(255,255,255,0.10); border-left:none; background:rgba(255,255,255,0.08); color:var(--text); font-size:11.5px; font-weight:700; padding:0 8px; outline:none; }
#toolThumbCanvas[hidden]{ display:none !important; }
.thumb-preview-wrap{ display:flex; flex-direction:column; gap:6px; align-items:center; margin-top:8px; }
.thumb-preview-wrap[hidden]{ display:none !important; }
#toolThumbPreview{ width:100%; max-height:340px; object-fit:contain; border-radius:12px; border:1px solid rgba(255,255,255,0.07); background:#000; display:block; }
.thumb-preview-label{ font-size:11px; color:var(--text-3); text-align:center; }
.thumb-outputs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; max-height:420px; overflow:auto; padding:4px 2px; }
.thumb-outputs:empty{ display:none; }
.thumb-output-card{ position:relative; flex:0 1 calc(33.333% - 6px); min-width:98px; border-radius:10px; overflow:hidden; border:2px solid transparent; background:#0a0a0a; cursor:pointer; transition:border-color 160ms ease, transform 160ms ease; }
.thumb-output-card:hover{ transform:translateY(-1px); }
.thumb-output-card.is-selected{ border-color:var(--text); box-shadow:0 0 0 3px rgba(255,255,255,0.10); }
.thumb-output-card img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; background:#000; }
.thumb-output-card label{ position:absolute; right:4px; bottom:4px; font-size:10px; font-weight:700; font-family:var(--mono); background:rgba(0,0,0,0.68); color:#fff; padding:2px 6px; border-radius:999px; border:1px solid rgba(255,255,255,0.14); backdrop-filter:blur(6px); max-width:82%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.thumb-output-remove{ position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#7a0a0a; color:#fff; font-size:11px; font-weight:800; border:1px solid rgba(255,255,255,0.18); cursor:pointer; }
.thumb-footer{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.thumb-footer .tool-process-btn{ flex:1 1 auto; min-width:110px; }
.thumb-clear{ background:rgba(255,255,255,0.06) !important; color:var(--text) !important; border:1px solid rgba(255,255,255,0.10); }
.thumb-download[hidden]{ display:none !important; }
.thumb-download{ background:var(--text) !important; color:var(--ink) !important; }
@media(max-width:480px){ .thumb-output-card{ flex:0 1 calc(50% - 4px); } .thumb-controls button{ min-width:36px; min-height:42px; padding:5px 4px; } .thumb-controls .material-symbols-rounded{ font-size:18px; } }

@media(max-width:640px){
  #panel-beranda .kinetic-hero{ min-height:88dvh !important; min-height:88vh !important; justify-content:center !important; padding:32px 12px 24px !important; gap:14px !important; }
}

              #toolPanel-thumbnail.vt-panel{ background:transparent; border:none; border-radius:0; padding:0 2px 16px; color:var(--text,#eceef2); font-family:Inter,"Plus Jakarta Sans",system-ui,sans-serif; max-height:none; overflow:visible; isolation:isolate; }
              #toolPanel-thumbnail.vt-panel::-webkit-scrollbar{ width:8px; }
              #toolPanel-thumbnail.vt-panel::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:9999px; }
              #toolPanel-thumbnail.vt-panel::-webkit-scrollbar-track{ background:transparent; }
              #toolPanel-thumbnail .vt-header{ position:sticky; top:-12px; z-index:50; display:flex; align-items:center; gap:10px; margin:0 -14px 12px; padding:10px 14px; background:#0b0e14; border-bottom:1px solid rgba(255,255,255,.07); transform:translateZ(0); }
              #toolPanel-thumbnail .thumb-badge{ width:34px; height:34px; flex:0 0 34px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); color:var(--text,#eceef2); }
              #toolPanel-thumbnail .thumb-badge .material-symbols-rounded{ font-size:19px; }
              #toolPanel-thumbnail .thumb-title{ font-family:"Plus Jakarta Sans",Inter,sans-serif; font-weight:700; font-size:14px; letter-spacing:.01em; }
              #toolPanel-thumbnail .thumb-close{ margin-left:auto; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:9999px; border:1px solid rgba(255,255,255,.12); background:transparent; color:var(--text-2,#d6dae2); cursor:pointer; }
              #toolPanel-thumbnail .thumb-close:hover{ background:rgba(255,255,255,.08); color:#fff; }
              #toolPanel-thumbnail .thumb-close .material-symbols-rounded{ font-size:16px; }
              #toolPanel-thumbnail .thumb-icon-btn{ width:30px; height:30px; flex:0 0 30px; display:flex; align-items:center; justify-content:center; border-radius:9999px; border:1px solid rgba(255,255,255,.12); background:transparent; color:var(--text-3,#a7adba); cursor:pointer; }
              #toolPanel-thumbnail .thumb-icon-btn:hover{ background:rgba(255,255,255,.08); color:#fff; }
              #toolPanel-thumbnail #thumbCacheClear{ background:#7a0a0a; border-color:rgba(255,110,110,.45); color:#fff; }
              #toolPanel-thumbnail #thumbCacheClear:hover{ background:#a31313; color:#fff; }
              #toolPanel-thumbnail .thumb-icon-btn .material-symbols-rounded{ font-size:16px; }
              #toolPanel-thumbnail .vt-main{ display:flex; gap:12px; align-items:flex-start; }
              #toolPanel-thumbnail .vt-main > div{ margin:0; min-width:0; }
              #toolPanel-thumbnail .vt-card{ background:rgba(22,26,34,.55); border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:12px; color:var(--text,#eceef2); backdrop-filter:blur(16px) saturate(1.25); -webkit-backdrop-filter:blur(16px) saturate(1.25); box-shadow:0 10px 30px rgba(0,0,0,.35); }
              #toolPanel-thumbnail .vt-card + .vt-card{ margin-top:12px; }
              #toolPanel-thumbnail .video_data{ width:50%; display:flex; flex-direction:column; }
              #toolPanel-thumbnail .video_output{ flex:1; position:sticky; top:52px; max-height:calc(100dvh - 120px); overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent; }
              #toolPanel-thumbnail .video_output > .vt-card{ width:100%; box-sizing:border-box; }
              #toolPanel-thumbnail .thumb-label{ font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3,#a7adba); margin:0 0 8px; }
              #toolPanel-thumbnail .thumb-label:not(:first-child){ margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.07); }
              #toolPanel-thumbnail .thumb-warn{ margin-top:8px; font-size:12px; line-height:1.55; color:#ffb4b4; background:rgba(255,90,90,.09); border:1px solid rgba(255,90,90,.38); border-radius:9px; padding:8px 10px; }
              #toolPanel-thumbnail .thumb-warn[hidden]{ display:none; }
              #toolPanel-thumbnail #videofile{ width:100%; box-sizing:border-box; font-size:12px; color:var(--text-3,#a7adba); background:rgba(0,0,0,.28); border:1px dashed rgba(255,255,255,.18); border-radius:10px; padding:9px 10px; cursor:pointer; margin-top:8px; }
              #toolPanel-thumbnail #videofile::file-selector-button{ background:rgba(255,255,255,.10); color:var(--text,#eceef2); border:1px solid rgba(255,255,255,.14); border-radius:7px; padding:6px 12px; font-weight:600; font-size:12px; margin-right:10px; cursor:pointer; font-family:"Plus Jakarta Sans",Inter,sans-serif; }
              #toolPanel-thumbnail .tbtn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:9px; padding:9px 14px; font-family:"Plus Jakarta Sans",Inter,sans-serif; font-weight:700; font-size:12.5px; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:background .15s ease, border-color .15s ease, opacity .15s ease; }
              #toolPanel-thumbnail .tbtn .material-symbols-rounded{ font-size:16px; }
              #toolPanel-thumbnail .tbtn:disabled{ opacity:.32; cursor:not-allowed; }
              #toolPanel-thumbnail .tbtn-primary{ background:#eceef2; color:#111318; }
              #toolPanel-thumbnail .tbtn-primary:not(:disabled):hover{ background:#ffffff; }
              #toolPanel-thumbnail .tbtn-light{ background:#eceef2; color:#111318; }
              #toolPanel-thumbnail .tbtn-light:not(:disabled):hover{ background:#fff; }
              #toolPanel-thumbnail .tbtn-ghost{ background:transparent; border-color:rgba(255,255,255,.14); color:var(--text,#eceef2); }
              #toolPanel-thumbnail .tbtn-ghost:not(:disabled):hover{ background:rgba(255,255,255,.07); }
              #toolPanel-thumbnail .tbtn-text{ background:transparent; border:none; color:var(--text-3,#a7adba); padding:9px 8px; }
              #toolPanel-thumbnail .tbtn-text:not(:disabled):hover{ color:#ff8a8a; }
              #toolPanel-thumbnail .tbtn-block{ width:100%; }
              #toolPanel-thumbnail .tbtn-sm{ padding:7px 10px; font-size:12px; }
              #toolPanel-thumbnail .crow{ display:flex; align-items:center; gap:8px; }
              #toolPanel-thumbnail .crow + .crow{ margin-top:8px; }
              #toolPanel-thumbnail .crow-label{ font-size:12px; color:var(--text-2,#d6dae2); }
              #toolPanel-thumbnail .crow-sp{ flex:1; }
              #toolPanel-thumbnail #video{ position:relative; z-index:1; width:100%; max-width:100%; max-height:34vh; display:block; margin:0 auto 8px; background:#000; border-radius:10px; border:1px solid rgba(255,255,255,.09); }
              #toolPanel-thumbnail #canvas{ max-width:100%; border:1px solid rgba(255,255,255,.10); border-radius:10px; margin-bottom:10px; display:block; }
              #toolPanel-thumbnail #canvas.is-hidden{ display:none !important; }
              #toolPanel-thumbnail .instructions{ padding:0; font-size:11.5px; color:var(--text-3,#a7adba); }
              #toolPanel-thumbnail .video-preview{ text-align:center; }
              #toolPanel-thumbnail #slider{ width:100%; height:20px; accent-color:#eceef2; cursor:pointer; }
              #toolPanel-thumbnail #videoControls{ margin-top:6px; }
              #toolPanel-thumbnail #videoControls .button-container{ display:flex; border:1px solid rgba(255,255,255,.09); border-radius:10px; overflow:hidden; overflow-x:auto; background:rgba(0,0,0,.28); scrollbar-width:none; }
              #toolPanel-thumbnail #videoControls .button-container::-webkit-scrollbar{ display:none; }
              #toolPanel-thumbnail #videoControls button{ flex:1 1 0; min-width:0; background:transparent; border:none; border-left:1px solid rgba(255,255,255,.07); color:var(--text-2,#d6dae2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:5px 0 4px; cursor:pointer; font-family:Inter,sans-serif; overflow:hidden; }
              #toolPanel-thumbnail #videoControls button:first-child{ border-left:none; }
              #toolPanel-thumbnail #videoControls button:hover{ background:rgba(255,255,255,.06); }
              #toolPanel-thumbnail #videoControls button span:last-child{ font-size:9px; color:var(--text-3,#a7adba); font-family:"JetBrains Mono",monospace; }
              #toolPanel-thumbnail #videoControls button.tplay{ background:rgba(255,255,255,.10); }
              #toolPanel-thumbnail #videoControls button.tplay:hover{ background:rgba(255,255,255,.17); }
              #toolPanel-thumbnail .play-controls{ font-size:18px !important; font-family:'Material Symbols Rounded' !important; color:var(--text,#eceef2); }
              #toolPanel-thumbnail button.tplay .play-controls{ color:#ffffff; }
              #toolPanel-thumbnail #videow{ width:62px; padding:7px 8px; background:rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.11); border-radius:8px; color:var(--text,#eceef2); font-size:12.5px; font-family:"JetBrains Mono",monospace; outline:none; }
              #toolPanel-thumbnail #videow:focus, #toolPanel-thumbnail #snapd:focus{ border-color:rgba(255,255,255,.32); }
              #toolPanel-thumbnail .snap-auto{ display:flex; }
              #toolPanel-thumbnail #snap2{ border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; border-right:none !important; }
              #toolPanel-thumbnail #snap_each{ border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.32); color:var(--text,#eceef2); border-radius:0 9px 9px 0; padding:0 8px; font-size:12px; font-weight:600; outline:none; cursor:pointer; min-height:34px; }
              #toolPanel-thumbnail #snap_each option{ background:#14171f; color:#eceef2; }
              #toolPanel-thumbnail .canvas-container{ text-align:center; position:relative; padding-bottom:4px; max-height:46vh; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent; }
              #toolPanel-thumbnail #outputs{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
              #toolPanel-thumbnail .output-container{ position:relative; border-radius:9px; overflow:hidden; border:1px solid rgba(255,255,255,.09); background:#000; }
              #toolPanel-thumbnail .output{ object-fit:cover; width:100%; aspect-ratio:16/9; border:2px solid transparent; border-radius:7px; display:block; cursor:pointer; }
              #toolPanel-thumbnail .output.selected{ border-color:#ffffff; box-shadow:0 0 0 1px rgba(255,255,255,.55); }
              #toolPanel-thumbnail .output-container label{ font-size:9.5px; font-family:"JetBrains Mono",monospace; background:rgba(0,0,0,.72); color:var(--text-2,#d6dae2); padding:2px 6px; border-radius:6px; position:absolute; right:5px; bottom:5px; max-width:84%; border:1px solid rgba(255,255,255,.14); }
              #toolPanel-thumbnail .output-remove{ position:absolute; top:5px; right:5px; width:20px; height:20px; display:flex; align-items:center; justify-content:center; background:rgba(10,10,12,.78); color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:9999px; cursor:pointer; font-size:12px; font-weight:700; text-decoration:none; line-height:1; }
              #toolPanel-thumbnail .output-remove:hover{ background:#b33; border-color:#b33; }
              #toolPanel-thumbnail #preview{ width:100%; max-height:300px; object-fit:contain; display:none; margin-bottom:10px; border:1px solid rgba(255,255,255,.10); border-radius:10px; background:#000; }
              #toolPanel-thumbnail .save-row{ display:flex; gap:8px; margin-top:10px; align-items:center; }
              #toolPanel-thumbnail #snapsize{ font-size:10.5px; color:var(--text-3,#a7adba); font-family:"JetBrains Mono",monospace; }
              @media(max-width:1023px){ #toolPanel-thumbnail .vt-main{ flex-wrap:wrap; } #toolPanel-thumbnail .video_data{ width:100%; } #toolPanel-thumbnail .video_output{ width:100%; max-height:none; position:static; overflow:visible; } #toolPanel-thumbnail #video{ max-height:30vh; } }
              @media(max-width:640px){ #toolPanel-thumbnail .vt-card{ padding:10px; } #toolPanel-thumbnail #video{ max-height:24vh; } #toolPanel-thumbnail #videoControls button{ min-width:0; padding:4px 0 3px; } #toolPanel-thumbnail #videoControls button span:last-child{ font-size:8px; } #toolPanel-thumbnail .play-controls{ font-size:15px !important; } #toolPanel-thumbnail #outputs{ grid-template-columns:repeat(2,1fr); } #toolPanel-thumbnail .snap-auto{ width:100%; } #toolPanel-thumbnail #snap_each{ flex:1; } #toolPanel-thumbnail .save-row .tbtn{ flex:1 1 auto; } }
              @media(max-width:480px){ #toolPanel-thumbnail #outputs{ grid-template-columns:repeat(2,1fr); } }

              #toolModalCard .merge-trash-top{ width:34px; height:34px; margin-left:0; border-radius:10px; border:1px solid rgba(255,110,110,.45); background:#7a0a0a; color:#fff; cursor:pointer; display:grid; place-items:center; flex:0 0 auto; }
              #toolModalCard .merge-trash-top:hover{ background:#a31313; }
              #toolModalCard .merge-trash-top .material-symbols-rounded{ font-size:18px; }
              #toolPanel-merge .merge-warn{ margin-top:8px; font-size:12px; line-height:1.55; color:#ffb4b4; background:rgba(255,99,99,.08); border:1px solid rgba(255,99,99,.22); border-radius:10px; padding:8px 10px; }
              #toolPanel-merge .merge-warn[hidden]{ display:none; }
              #toolPanel-merge .merge-preview{ margin-top:10px; }
              #toolPanel-merge #toolMergePreview{ width:100%; max-height:300px; border-radius:12px; background:#000; object-fit:contain; display:block; border:1px solid rgba(255,255,255,.07); cursor:pointer; }
              #toolPanel-merge .merge-preview:fullscreen{ background:#000; padding:12px; }
              #toolPanel-merge .merge-preview:fullscreen #toolMergePreview{ max-height:calc(100vh - 130px); border:none; }
              #toolPanel-merge #toolMergePreviewName{ margin-top:6px; font-size:11.5px; color:var(--text-3,#b7bcc7); font-family:var(--mono,"JetBrains Mono",monospace); word-break:break-all; }

              #toolPanel-merge .merge-transport{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:8px; }
              #toolPanel-merge .merge-tbtn{ width:38px; height:38px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.05); color:var(--text,#eceef2); cursor:pointer; }
              #toolPanel-merge .merge-tbtn:hover{ background:rgba(255,255,255,.10); }
              #toolPanel-merge .merge-tbtn.play{ width:46px; height:46px; background:var(--text,#eceef2); color:#111318; border-color:transparent; }
              #toolPanel-merge .merge-tbtn.play:hover{ background:#fff; }
              #toolPanel-merge .merge-tbtn .material-symbols-rounded{ font-size:20px; }
              #toolPanel-merge #toolMergeTime{ margin-left:8px; font-size:11.5px; color:var(--text-3,#b7bcc7); font-family:var(--mono,"JetBrains Mono",monospace); }

              #toolPanel-merge .merge-timeline{ position:relative; margin-top:12px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:rgba(0,0,0,.35); overflow:hidden; }
              #toolPanel-merge .merge-timeline[hidden]{ display:none; }
              #toolPanel-merge .merge-ruler{ position:relative; height:26px; border-bottom:1px solid rgba(255,255,255,.08); overflow:hidden; cursor:pointer; }
              #toolPanel-merge .merge-tick{ position:absolute; top:0; bottom:0; padding:3px 0 0 4px; font-size:9px; color:var(--text-3,#b7bcc7); font-family:var(--mono,"JetBrains Mono",monospace); white-space:nowrap; pointer-events:none; }
              #toolPanel-merge .merge-playhead{ position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 8px rgba(255,255,255,.8); z-index:5; pointer-events:none; }
              #toolPanel-merge .merge-playhead::before{ content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top:7px solid #fff; }
              #toolPanel-merge .merge-playhead[hidden]{ display:none; }
              #toolPanel-merge .merge-track{ display:flex; gap:6px; padding:10px; overflow-x:auto; min-height:86px; }
              #toolPanel-merge .merge-clip{ position:relative; flex:0 0 auto; min-width:96px; border-radius:10px; overflow:hidden; border:2px solid rgba(255,255,255,.12); background:#0a0a0a; cursor:pointer; }
              #toolPanel-merge .merge-clip:hover{ border-color:rgba(255,255,255,.28); }
              #toolPanel-merge .merge-clip.active{ border-color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.55); }
              #toolPanel-merge .merge-clip.dragging{ opacity:.4; }
              #toolPanel-merge .merge-clip.dragover{ border-color:#4ade80; }
              #toolPanel-merge .merge-strip{ display:flex; height:52px; }
              #toolPanel-merge .merge-strip img{ flex:1; min-width:0; height:100%; object-fit:cover; pointer-events:none; }
              #toolPanel-merge .merge-strip .merge-strip-ph{ flex:1; background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); }
              #toolPanel-merge .merge-clip-label{ display:flex; align-items:center; gap:4px; padding:3px 6px; font-size:9.5px; font-weight:700; background:rgba(0,0,0,.72); color:#fff; white-space:nowrap; overflow:hidden; }
              #toolPanel-merge .merge-clip-label .material-symbols-rounded{ font-size:12px; }
              #toolPanel-merge .merge-clip-label span:last-child{ overflow:hidden; text-overflow:ellipsis; }
              #toolPanel-merge .merge-clip-dur{ position:absolute; right:4px; bottom:24px; font-size:9px; font-weight:700; font-family:var(--mono,"JetBrains Mono",monospace); background:rgba(0,0,0,.68); color:#fff; padding:1px 5px; border-radius:99px; pointer-events:none; }
              #toolPanel-merge .merge-clip-x{ position:absolute; top:4px; right:4px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.68); color:#fff; border:1px solid rgba(255,255,255,.25); font-size:12px; font-weight:800; cursor:pointer; line-height:1; padding:0; }
              #toolPanel-merge .merge-clip-x:hover{ background:#b33; border-color:#b33; }
              #toolPanel-merge .merge-clip-mute{ position:absolute; top:4px; left:4px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:rgba(0,0,0,.68); color:#fff; border:1px solid rgba(255,255,255,.35); cursor:pointer; padding:0; }
              #toolPanel-merge .merge-clip-mute:hover{ background:rgba(255,255,255,.22); }
              #toolPanel-merge .merge-clip-mute .material-symbols-rounded{ font-size:14px; }
              #toolPanel-merge .merge-clip.muted .merge-strip{ opacity:.55; }
              #toolPanel-merge .merge-clip.muted .merge-clip-mute{ background:#b33; border-color:#b33; }
              #toolPanel-merge .merge-total{ margin-top:8px; font-size:12px; font-weight:700; color:var(--text,#eceef2); }
              #toolPanel-merge .merge-footrow{ display:flex; gap:8px; margin-top:10px; }
              #toolPanel-merge #toolMergeClear{ flex:1; min-height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:var(--text,#eceef2); font-weight:700; font-size:13px; cursor:pointer; }
              #toolPanel-merge #toolMergeClear:hover:not(:disabled){ background:rgba(255,255,255,.09); }
              #toolPanel-merge #toolMergeClear:disabled{ opacity:.35; cursor:not-allowed; }

.is-hidden{display:none}
.form-hint{font-size:11px;color:var(--text-3);text-align:right;margin-top:4px;min-height:14px}
.site-footer{max-width:1120px;margin:28px auto 0;padding:20px 18px 90px;text-align:center}
.site-footer-copy{font-size:12px;color:var(--text-3);margin:0}

*,*::before,*::after{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.streak-bg,.streak-bg-dummy,.streak-bg-old,
.comets,.comet,.edge-flashes,.edge-flash,.galaxy-particles,
.bumi-glow,.blackhole-glow,.bumi-img,.blackhole-img,.bimasakti-img,
.galaxy-stars,.galaxy-stars2{display:none !important;animation:none !important;filter:none !important;opacity:0 !important;will-change:auto !important}
.tool-modal-backdrop{background:rgba(0,0,0,.72) !important}
.tool-modal-card,.modal-card,.modal,.card,.qm-card,.upload-card,
.about-card,.tutorial-card,.donate-card,.feature-item,.nn-card,.eco-card,
.ex-card,.funnel-card,.funnel-base,.tiktok-card,.social-link,
#toolPanel-thumbnail .vt-card{background:#1a0b10 !important;border-color:rgba(255,170,190,.10) !important;box-shadow:0 8px 20px rgba(0,0,0,.35) !important}
.tool-modal-header{background:#1a0b10 !important}

.tool-card-new{background:#161016 !important;border:1px solid rgba(255,170,190,.10) !important;box-shadow:0 8px 20px rgba(0,0,0,.35) !important;transition:border-color 160ms ease,background 160ms ease !important;transform:none !important;will-change:auto !important}
.tool-card-new::before{display:none !important}
.tool-card-new:hover{background:#22141a !important;border-color:rgba(255,170,190,.22) !important;transform:none !important;box-shadow:0 8px 20px rgba(0,0,0,.35) !important}
.tool-card-new:active{transform:scale(.99) !important}
.tool-card-new .tool-icon-wrap,.tool-card-new .tool-arrow{background:#241419 !important;border-color:rgba(255,170,190,.12) !important;transition:border-color 160ms ease,background 160ms ease !important;transform:none !important}
.tool-card-new:hover .tool-icon-wrap,.tool-card-new:hover .tool-arrow{transform:none !important}
.tools-search-wrap{background:#161016 !important;border-color:rgba(255,170,190,.14) !important;box-shadow:none !important}
.tools-search-wrap:focus-within{border-color:rgba(255,170,190,.35) !important;box-shadow:0 0 0 3px rgba(242,85,122,.12) !important}
.seg-btn:not(.active),.tool-seg-btn:not(.active),.qm-seg-btn:not(.active){background:#241419 !important;background-image:none !important;border:1px solid #3a222b !important;color:#d8c2c9 !important;box-shadow:none !important;opacity:1 !important}
.seg-btn.active,.tool-seg-btn.active,.qm-seg-btn.active{background:#ffe8ef !important;background-image:none !important;color:#2a0d15 !important;border:1px solid #ffe8ef !important;box-shadow:none !important;opacity:1 !important}
.seg-btn,.tool-seg-btn,.qm-seg-btn,.tools-cat-btn{text-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}

.tools-cat-wrap{background:transparent !important}
.tools-cat-btn{background:#241419 !important;background-image:none !important;border:1px solid #3a222b !important;color:#d8c2c9 !important;box-shadow:none !important;opacity:1 !important}
.tools-cat-btn:hover{background:#2e1a21 !important;border-color:#5a3440 !important;color:#ffe8ef !important}
.tools-cat-btn.active{background:#ffe8ef !important;background-image:none !important;border-color:#ffe8ef !important;color:#2a0d15 !important;box-shadow:none !important}
.qm-segmented{background:#1a0e13 !important;background-image:none !important;border:1px solid #3a222b !important;box-shadow:none !important}
.floating-nav-bar{background:#161016 !important;border-color:rgba(255,170,190,.12) !important;box-shadow:0 8px 20px rgba(0,0,0,.35) !important}
.top-header .lang-toggle{background:#1a0e13 !important;background-image:none !important;border:1px solid #3a222b !important;box-shadow:none !important}
.lang-btn{background:transparent !important;color:#d8c2c9 !important;box-shadow:none !important}
.lang-btn.active{background:#ffe8ef !important;background-image:none !important;color:#2a0d15 !important;box-shadow:none !important}
#othersBack.btn-ghost,#othersDetail .btn-ghost,#panel-beranda .btn-ghost{background:#241419 !important;background-image:none !important;border:1px solid #3a222b !important;color:#ffe8ef !important;box-shadow:none !important}
#video,#toolMergePreview{filter:none !important;transform:translateZ(0);background:#000 !important}

body.tool-modal-open .bg-static::before,body.tool-modal-open .bg-silk-sway{animation:none !important}
body.tool-modal-open .bg-static{will-change:auto !important}

.kinetic-name-line{color:#fff1f5 !important;-webkit-text-fill-color:#fff1f5 !important;filter:drop-shadow(0 0 16px rgba(255,110,140,.55)) drop-shadow(0 0 44px rgba(242,60,100,.35)) drop-shadow(0 2px 14px rgba(0,0,0,.5)) !important;text-shadow:none !important}
.name-box .flip-char{color:#fff1f5 !important;-webkit-text-fill-color:#fff1f5 !important;background:none !important;text-shadow:0 0 12px rgba(255,130,160,.90),0 0 32px rgba(242,60,100,.55),0 0 64px rgba(200,20,50,.40) !important;filter:drop-shadow(0 0 10px rgba(255,110,140,.50)) !important;will-change:transform,opacity !important}

.bg-static{background-color:#160409 !important;background-image:radial-gradient(ellipse 90% 46% at 18% -8%, rgba(255,170,190,.42) 0%, rgba(200,60,80,.16) 46%, transparent 70%),linear-gradient(115deg, rgba(255,150,170,.12) 0%, rgba(160,20,40,.32) 34%, rgba(120,10,30,.16) 52%, transparent 68%),radial-gradient(ellipse 52% 52% at 58% 44%, rgba(180,30,55,.40) 0%, rgba(120,10,30,.16) 52%, transparent 74%),radial-gradient(ellipse 44% 52% at 86% 54%, rgba(255,120,150,.26) 0%, rgba(140,15,35,.12) 48%, transparent 74%),radial-gradient(ellipse 70% 52% at 10% 98%, rgba(120,10,25,.70) 0%, rgba(60,5,15,.40) 52%, transparent 78%),linear-gradient(180deg, #1c060d 0%, #2b0a13 30%, #3a0e1a 50%, #200812 74%, #0d0307 100%) !important}
.bg-static::before{background:radial-gradient(ellipse 44% 34% at 30% 22%, rgba(255,170,190,.26) 0%, transparent 70%),radial-gradient(ellipse 38% 34% at 80% 52%, rgba(242,85,122,.20) 0%, transparent 70%),radial-gradient(ellipse 52% 30% at 52% 46%, rgba(180,30,55,.18) 0%, transparent 70%),radial-gradient(ellipse 58% 32% at 22% 94%, rgba(140,15,35,.28) 0%, transparent 72%) !important}
.flip-char,.char-flip-in,.char-flip-out{animation-duration:380ms !important}
.modal-icon,.social-icon--tiktok .material-symbols-rounded,.social-icon--instagram .material-symbols-rounded{filter:none !important}
.comet,.edge-flash,.galaxy-particles .gp,.streak-bg .galaxy-stars,.streak-bg .galaxy-stars2{animation:none !important;will-change:auto !important}

#panel-others .tool-card-new{background:#161016 !important;background-image:none !important;border:1px solid rgba(255,170,190,.10) !important;box-shadow:0 8px 20px rgba(0,0,0,.35) !important;border-radius:16px !important;min-height:68px !important;padding:12px !important;gap:10px !important;transition:border-color 160ms ease,background 160ms ease !important;transform:none !important}
#panel-others .tool-card-new:hover{background:#22141a !important;border-color:rgba(255,170,190,.22) !important;box-shadow:0 8px 20px rgba(0,0,0,.35) !important}
#panel-others .tool-card-new .tool-icon-wrap,#panel-others .tool-card-new .tool-arrow{background:#241419 !important;background-image:none !important;border:1px solid rgba(255,170,190,.12) !important;box-shadow:none !important}
#panel-others .tool-card-new .tool-icon-wrap{width:38px !important;height:38px !important;border-radius:12px !important;color:#ffe8ef !important}
#panel-others .tool-card-new .tool-icon-wrap .material-symbols-rounded{font-size:19px !important}
#panel-others .tool-card-new .tool-title-new{font-size:13.5px !important;font-weight:800 !important;color:var(--text,#eceef2) !important;text-shadow:none !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
#panel-others .tool-card-new .tool-arrow{width:28px !important;height:28px !important;border-radius:50% !important;color:var(--text-3,#b7bcc7) !important}
#othersDetail .card,#othersDetail .about-card,#othersDetail .tutorial-card,#othersDetail .social-card,#othersDetail .help-card,#othersDetail .donate-card,#othersDetail .feature-item{background:#161016 !important;background-image:none !important;border:1px solid rgba(255,170,190,.10) !important;box-shadow:0 8px 20px rgba(0,0,0,.35) !important}
#othersDetail .about-hero,#othersDetail .about-intro,#othersDetail .tutorial-step,#othersDetail .help-info-box,#othersDetail .help-note-box,#othersDetail .spec-grid>div,#othersDetail .faq-item,#othersDetail .changelog-item,#othersDetail .social-link{background:#1e1116 !important;background-image:none !important;border:1px solid rgba(255,170,190,.10) !important;box-shadow:none !important}
#othersDetail .step-num,#othersDetail .about-ver-badge,#othersDetail .changelog-badge{background:#2e1a21 !important;border:1px solid #5a3440 !important;color:#ffe8ef !important;box-shadow:none !important}

.floating-nav-indicator{display:none !important;animation:none !important;transition:none !important}
.floating-nav-item{transition:background-color 150ms ease,color 150ms ease !important}
.floating-nav-item .nav-label{transition:none !important}
.floating-nav-item:active{transform:none !important}

.floating-nav-item.active{background:#ffffff !important;color:#2a0d15 !important;border-radius:999px !important;box-shadow:none !important}
.floating-nav-item.active .material-symbols-rounded{color:#2a0d15 !important}
.floating-nav-item:not(.active){background:transparent !important}

#toolPanel-thumbnail .vt-main{gap:10px !important}
#toolPanel-thumbnail .vt-card{padding:10px !important}
#toolPanel-thumbnail .thumb-label{margin:0 0 6px !important}
#toolPanel-thumbnail .thumb-label:not(:first-child){margin-top:10px !important;padding-top:10px !important}
#toolPanel-thumbnail #video{max-height:28vh !important;margin:0 auto 6px !important}
#toolPanel-thumbnail #videoControls{margin-top:4px !important}
#toolPanel-thumbnail .video_output{max-height:none !important;overflow:visible !important}
#toolPanel-thumbnail .crow + .crow{margin-top:6px !important}
#toolPanel-thumbnail .canvas-container{max-height:30vh !important;overflow-y:auto !important;padding-bottom:4px !important}
#toolPanel-thumbnail .save-row{margin-top:8px !important}
#toolPanel-thumbnail select#videow,#toolPanel-thumbnail select#snap_each{background:#241419 !important;border:1px solid #3a222b !important;color:#ffe8ef !important;border-radius:9px !important;padding:7px 8px !important;font-size:12px !important;font-weight:600 !important;outline:none !important;cursor:pointer !important;box-shadow:none !important;min-height:34px !important}
#toolPanel-thumbnail select#videow{width:auto !important;max-width:100% !important}
#toolPanel-thumbnail select#videow option,#toolPanel-thumbnail select#snap_each option{background:#1a0e13 !important;color:#ffe8ef !important}
#toolPanel-thumbnail #snap2{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important;border-right:none !important}
#toolPanel-thumbnail .snap-auto{width:100% !important}
#toolPanel-thumbnail #snap_each{flex:1 !important;border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}

#toolPanel-thumbnail .canvas-container{max-height:60vh !important}
#toolPanel-thumbnail #thumbViewer{width:fit-content !important;max-width:100% !important;margin:0 auto 8px !important;background:#0a0a0c !important;border:1px solid rgba(255,255,255,.09) !important;border-radius:10px !important;padding:6px !important}
#toolPanel-thumbnail #thumbViewer.is-hidden{display:none !important}
#toolPanel-thumbnail .video-preview:fullscreen{background:#000 !important;padding:12px !important;overflow-y:auto !important}
#toolPanel-thumbnail .video-preview:fullscreen #video{max-height:calc(100vh - 170px) !important}
#toolPanel-thumbnail #thumbViewer #preview{display:block !important;width:auto !important;height:auto !important;max-width:100% !important;max-height:150px !important;margin:0 auto !important;object-fit:contain !important;border:none !important;background:#000 !important}
#toolPanel-thumbnail #outputs{display:grid !important;grid-template-columns:repeat(auto-fill,128px) !important;justify-content:start !important;gap:8px !important;overflow:visible !important;padding-bottom:6px !important}
#toolPanel-thumbnail .output-container{flex:0 0 128px !important;width:128px !important;max-width:128px !important;min-width:128px !important}
#toolPanel-thumbnail .output{aspect-ratio:4/3 !important;width:100% !important;height:auto !important}
#toolPanel-thumbnail .output-remove{background:#a31313 !important;border-color:#a31313 !important}

#toolPanel-thumbnail #snap2{background:#ff3b3b !important;border-color:#ff3b3b !important;color:#111318 !important}
#toolPanel-thumbnail #snap2:not(:disabled):hover{background:#e02525 !important;border-color:#e02525 !important;color:#111318 !important}
#toolPanel-thumbnail #snap2:disabled{opacity:.35 !important}

#panel-tools .head-sub{color:#ffd9e4 !important}

.tools-search-wrap{padding:11px 14px 11px 16px !important;gap:10px !important}
.tools-search-icon{font-size:20px !important}
#toolsSearch{font-size:14px !important}
.tools-search-clear{width:30px !important;height:30px !important}
.tools-cat-wrap{gap:10px !important;margin:14px 0 4px !important}
.tools-cat-btn{padding:9px 18px !important;font-size:13px !important;gap:7px !important}
.tools-cat-btn .material-symbols-rounded{font-size:18px !important}
@media(max-width:640px){
  .tools-search-wrap{padding:10px 12px 10px 14px !important}
  #toolsSearch{font-size:13.5px !important}
  .tools-cat-wrap{gap:8px !important}
  .tools-cat-btn{padding:7px 14px !important;font-size:12px !important;gap:5px !important}
  .tools-cat-btn .material-symbols-rounded{font-size:16px !important}
}

#toolPanel-thumbnail .video_output{overflow:visible !important;max-height:none !important;position:sticky !important;top:52px !important}
#toolPanel-thumbnail .video_output > .vt-card{display:flex !important;flex-direction:column !important}
#toolPanel-thumbnail .canvas-container{overflow:visible !important;max-height:none !important;min-height:0 !important}
#toolPanel-thumbnail #outputs{overflow-y:auto !important;overflow-x:hidden !important;max-height:216px !important;min-height:0 !important;overscroll-behavior:contain !important;scrollbar-width:thin !important;scrollbar-color:rgba(255,255,255,.22) transparent !important}
#toolPanel-thumbnail #outputs::-webkit-scrollbar{width:8px !important}
#toolPanel-thumbnail #outputs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25) !important;border-radius:9999px !important}
#toolPanel-thumbnail #outputs::-webkit-scrollbar-track{background:transparent !important}
#toolPanel-thumbnail .crow-split{flex-wrap:wrap !important;row-gap:6px !important}
#toolPanel-thumbnail .crow-split select#videow{flex:1 !important;min-width:110px !important}
#toolPanel-thumbnail .crow-split .snap-auto{flex:2 !important;min-width:210px !important;width:auto !important}
#toolPanel-thumbnail .save-row{flex:0 0 auto !important;margin-top:10px !important}

body.is-encoding .bg-silk-sway,body.is-preview .bg-silk-sway{animation-play-state:paused !important}
body.is-encoding .bg-static::before,body.is-preview .bg-static::before{animation-play-state:paused !important}
.slide-panel:not(.active-panel){content-visibility:hidden !important}
.slide-panel:not(.active-panel) video,.slide-panel:not(.active-panel) canvas{content-visibility:hidden !important}
#logArea{content-visibility:visible !important}

@media (max-width: 640px) {

  #othersDetail .tutorial-card,
  #othersDetail .card,
  #othersDetail .about-card,
  #othersDetail .social-card,
  #othersDetail .help-card,
  #othersDetail .donate-card,
  #othersDetail .report-saas {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    border-radius: 0 !important;
    padding: 20px 16px !important;
    box-sizing: border-box !important;
  }

  #othersDetail .tut-section-title,
  #othersDetail .tut-head {
    font-size: 18px !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    letter-spacing: 0.06em !important;
  }

  #othersDetail .tutorial-step h3,
  #othersDetail .tutorial-card h2,
  #othersDetail .tutorial-card h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
  }

  #othersDetail .tutorial-step p,
  #othersDetail .tutorial-card p {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }

  #othersDetail .tutorial-step .step-num {
    width: 30px !important;
    height: 30px !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
  }

  #othersDetail .card h3,
  #othersDetail .faq-head,
  #othersDetail .spec-head {
    font-size: 17px !important;
  }

  #othersDetail .card p,
  #othersDetail .faq-sub {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  #othersDetail .faq-q {
    font-size: 14.5px !important;
  }
  #othersDetail .faq-a {
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  #othersDetail .tutorial-card {
    gap: 18px !important;
  }
  #othersDetail .tutorial-step {
    gap: 12px !important;
    padding: 6px 0 !important;
  }
}

.qm-sample-btn { margin-top: 10px; background: transparent; border: 1px dashed #bbb; color: #333; border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; }
.qm-sample-btn:hover { border-color: #8e1e2e; color: #8e1e2e; }
.qm-sample-btn:disabled { opacity: 0.55; cursor: wait; }