:root{
  --bg:#0a0402;
  --bg-1:rgba(255,69,0,0.18);
  --bg-2:rgba(255,140,0,0.14);
  --bg-3:rgba(255,185,0,0.08);
  --card:#1a0a00;
  --card-soft:#241000;
  --fire:#ff4500;
  --fire-deep:#cc3300;
  --ember:#ff8c00;
  --ember-deep:#cc5500;
  --glow:#ffcc88;
  --glow-deep:#ff8c00;
  --ash:#33101d;
  --ash-deep:#200a12;

  --text:#ffe9ee;
  --text-soft:#d190a2;
  --text-faint:#96566a;
  --accent:#ff4500;
  --accent-deep:#cc3300;
  --danger:#ff2340;
  --danger-deep:#cc0f2e;
  --ring:rgba(255,100,0,0.55);
  --border:1px solid rgba(255,100,0,0.18);
  --solid:1px solid rgba(255,100,0,0.22);
  --white:var(--text);
  --white-08:rgba(255,255,255,0.06);
  --white-25:rgba(255,255,255,0.18);
  --radius-sm:14px;
  --radius-md:18px;
  --radius-lg:24px;
  --radius-xl:32px;
  --shadow-sm:0 2px 10px rgba(0,0,0,0.4);
  --shadow-md:0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg:0 20px 48px rgba(0,0,0,0.6);
  --dur-fast:180ms;
  --dur-base:250ms;
  --dur-slow:350ms;
  --dur-slower:500ms;
  --ease-out:ease-out;
  --ease-inout:ease-in-out;
  --ease-bounce:cubic-bezier(0.34, 1.56, 0.64, 1);
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-7:32px;
  --sp-8:40px;
  --sp-9:48px;
  --page-pad:clamp(16px, 4vw, 28px);
  --page-gap:clamp(20px, 4vw, 40px);
  --r-sm:14px;
  --r-md:18px;
  --r-lg:24px;
  --r-xl:32px;
  --r-pill:999px;

  --bg-primary:var(--bg);
  --bg-secondary:var(--ash);
  --bg-tertiary:var(--ash-deep);
  --surface:var(--card);
  --surface-soft:var(--card-soft);
  --surface-hover:#2a0b16;
  --surface-raised:#260b15;
  --text-primary:var(--text);
  --text-secondary:var(--text-soft);
  --text-muted:var(--text-faint);
  --border-color:rgba(255,100,0,0.18);
  --border:1px solid var(--border-color);
  --solid:1px solid var(--border-color);
  --promo-text:#fff;
  --code-text:#ff4500;
  --on-accent:#ffffff;
  --grad-soft:linear-gradient(135deg, #ff8c00 0%, #ff4500 50%, #ffcc88 100%);
  --grad-strong:linear-gradient(135deg, #cc3300 0%, #ff4500 50%, #ff8c00 100%);
  --button-primary-bg:var(--grad-strong);
  --button-primary-text:#ffffff;
  --button-secondary-bg:var(--card);
  --button-secondary-text:var(--text-primary);
  --button-secondary-border:var(--border);
  --button-secondary-hover:#2a0b16;
  --button-danger-bg:#ff2340;
  --button-danger-hover:#cc0f2e;
  --button-danger-text:#fff;
  --overlay:rgba(10,0,5,0.7);
  --slider-track:rgba(255,100,0,0.22);
  --slider-thumb:#ff8c00;
  --z-views:10; --z-admin:90; --z-fab:100; --z-dropdown:200;
  --z-modal:600; --z-login:620; --z-confirm:640; --z-special:650;
  --z-export:700; --z-toast:800; --z-banner:850;

  --lav:#ff8c00;
  --pink:#ff4500;
  --peach:#ffcc88;
  --lav-deep:#cc3300;
}
[data-theme="light"]{
  --bg:#fff1f4;
  --bg-1:rgba(255,85,119,0.15);
  --bg-2:rgba(255,120,150,0.12);
  --bg-3:rgba(200,16,58,0.1);
  --card:#fff;
  --card-soft:#fff6f8;
  --fire:#d90f3d;
  --fire-deep:#cc3300;
  --ember:#ef4066;
  --ember-deep:#d62e54;
  --glow:#cc5c7c;
  --glow-deep:#b34464;
  --ash:#ffe9ee;
  --ash-deep:#ffd6de;
  --text:#43091a;
  --text-soft:#94495e;
  --text-faint:#bb7585;
  --accent:#d90f3d;
  --accent-deep:#cc3300;
  --danger:#cc0f2e;
  --danger-deep:#a00a24;
  --ring:rgba(255,85,119,0.5);
  --border:1px solid #ffc3cf;
  --solid:1px solid #ffc3cf;
  --surface-hover:#ffd6de;
  --surface-raised:#fff;
  --text-primary:var(--text);
  --text-secondary:var(--text-soft);
  --text-muted:var(--text-faint);
  --border-color:#ffc3cf;
  --border:1px solid var(--border-color);
  --solid:1px solid var(--border-color);
  --promo-text:#8f0f30;
  --code-text:#b52045;
  --on-accent:#fff;
  --grad-soft:linear-gradient(135deg, #ff8c00 0%, #ff4500 50%, #ffcc88 100%);
  --grad-strong:linear-gradient(135deg, #d90f3d 0%, #ff4500 50%, #ff8c00 100%);
  --button-primary-bg:var(--grad-strong);
  --button-primary-text:#fff;
  --button-secondary-bg:var(--card);
  --button-secondary-text:var(--text-primary);
  --button-secondary-border:var(--border);
  --button-secondary-hover:#ffd6de;
  --button-danger-bg:#cc0f2e;
  --button-danger-hover:#a00a24;
  --button-danger-text:#fff;
  --overlay:rgba(67,9,26,0.1);
  --slider-track:rgba(255,100,0,0.18);
  --slider-thumb:#ef4066;

  --lav:#ef4066;
  --pink:#d90f3d;
  --peach:#ffcc88;
  --lav-deep:#cc3300;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;transition:background-color var(--dur-slow) var(--ease-out),color var(--dur-slow) var(--ease-out);}
::selection{background:#ff4500;color:#fff;}
body{
  margin:0;min-height:100vh;
  background:
    radial-gradient(circle at 12% 8%, var(--bg-1) 0%, transparent 44%),
    radial-gradient(circle at 88% 10%, var(--bg-2) 0%, transparent 42%),
    radial-gradient(circle at 50% 104%, var(--bg-3) 0%, transparent 50%),
    var(--bg);
  font-family:'Quicksand', sans-serif;
  color:var(--text);
  padding:clamp(32px, 6vw, 56px) var(--page-pad);
  display:flex;justify-content:center;
  background-attachment:fixed;
  transition:background-color var(--dur-slow) var(--ease-out),color var(--dur-slow) var(--ease-out);
}
.wrap{width:min(100%, 1040px);margin-inline:auto;}
[data-theme="dark"] body::before{
  opacity:0.12;
  filter:blur(18px) saturate(0.7);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:url('../assets/background.jpg') center/cover no-repeat;
  z-index:-1;
  opacity:0.28;
  filter:blur(12px) saturate(0.9);
}
.ico{
  width:1.15em;height:1.15em;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  flex:none;display:inline-block;vertical-align:-0.16em;
}
.sprite{display:none;}
.hero{
  display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-2);
  margin-block:0 clamp(28px, 7vw, 52px);
  text-align:center;
}
.hero-mark{width:36px;height:36px;color:#ff4500;margin-bottom:var(--sp-1);animation:heroIn var(--dur-slower) var(--ease-out) both;}
h1{
  font-family:'Baloo 2', cursive;
  font-size:clamp(2.2rem, 6vw, 3rem);
  line-height:1.1;
  margin:0;
  background:linear-gradient(115deg, #ffcc88 0%, #ff8c00 45%, #ff4500 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transform-origin:center;
  animation:heroIn var(--dur-slower) var(--ease-out) both;
}
@keyframes heroIn{
  from{opacity:0;transform:translateY(-14px) scale(0.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.sub{
  color:#d190a2;font-size:0.95rem;
  letter-spacing:0.02em;
  margin:0;
  animation:subIn var(--dur-base) var(--ease-out) 120ms both;
}
@keyframes subIn{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
.pill{
  font-family:'Baloo 2', cursive;
  font-size:1rem;
  padding:var(--sp-3) var(--sp-7);
  border-radius:999px;
  border:none;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  color:var(--text-primary);
  transition:transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-base) var(--ease-out), filter var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  box-shadow:var(--shadow-sm);
}
.pill:hover{transform:translateY(-3px);filter:saturate(1.1) brightness(1.02);}
.pill:active{transform:translateY(0) scale(0.96);}
.pill:focus-visible{outline:3px solid var(--ring);outline-offset:2px;}
.pill:disabled{opacity:0.55;cursor:not-allowed;transform:none;filter:grayscale(0.15);box-shadow:none;}
.pill:disabled:hover{transform:none;filter:grayscale(0.15);}
.pill.login{background:linear-gradient(135deg, #ff8c00 0%, #ff4500 45%, #cc3300 100%);color:#fff;box-shadow:0 10px 22px rgba(255,36,80,0.5);}
.pill.code{background:linear-gradient(135deg, #ff8c00 0%, #ff4500 100%);color:#fff;box-shadow:0 10px 22px rgba(255,36,80,0.5);}
.pill.ghost{background:transparent;color:var(--text-secondary);box-shadow:none;text-decoration:none;font-size:0.9rem;padding:var(--sp-2) var(--sp-3);border-bottom:2px solid transparent;border-radius:var(--radius-sm);transition:color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);}
.pill.ghost:hover{color:var(--text-primary);border-bottom-color:#ff8c00;transform:translateY(-1px);filter:none;background:color-mix(in srgb, var(--surface-hover) 45%, transparent);}
.pill.danger{background:#ff2340;color:#fff;box-shadow:0 6px 16px rgba(255,35,64,0.35);}
.pill.danger:hover{background:#cc0f2e;}
.pill.small{padding:var(--sp-2) var(--sp-5);font-size:0.92rem;}
.gate{
  max-width:420px;margin:0 auto var(--sp-9);
  animation:cardIn var(--dur-slower) var(--ease-bounce) both;
}
form.box{
  background:linear-gradient(180deg, #260b15 0%, #1e070f 65%);
  border:1px solid rgba(255,100,0,0.18);
  border-radius:32px;
  padding:clamp(24px, 4vw, 34px);
  box-shadow:0 12px 32px rgba(0,0,0,0.5);
  display:flex;flex-direction:column;gap:16px;
  position:relative;
  transition:background var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
form.box:focus-within{box-shadow:0 0 0 4px rgba(255,100,0,0.28), 0 20px 48px rgba(0,0,0,0.6);}
input, textarea{
  font-family:'Quicksand', sans-serif;
  border:1px solid rgba(255,100,0,0.18);
  background:#160309;
  border-radius:18px;
  padding:12px 16px;
  font-size:0.96rem;color:#ffe9ee;
  width:100%;
  transition:border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
textarea{min-height:220px;resize:vertical;font-family:'Courier New',monospace;font-size:0.89rem;line-height:1.55;}
input:focus, textarea:focus{
  outline:none;
  border-color:#ff8c00;
  box-shadow:0 0 0 4px rgba(255,100,0,0.22);
  background:#1e070f;
}
.hint{font-size:0.78rem;color:#96566a;margin-top:-8px;}
.status{font-size:0.85rem;color:#ff8c00;min-height:1.2em;font-weight:500;display:flex;align-items:center;gap:8px;}
.error{color:#ff2340;animation:shakeX var(--dur-base) var(--ease-inout);}
@keyframes shakeX{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-4px);}
  75%{transform:translateX(4px);}
}
.toggle-row{display:flex;align-items:center;gap:8px;font-size:0.9rem;color:#96566a;cursor:pointer;user-select:none;}
.toggle-row input{
  width:18px;height:18px;accent-color:#ff4500;
  cursor:pointer;
}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.empty{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;color:#96566a;font-style:italic;
  padding:32px;
  grid-column:1/-1;
}
.empty .ico{width:38px;height:38px;color:#7a3346;}
.fab{
  position:fixed;right:clamp(16px, 3vw, 28px);bottom:clamp(16px, 3vw, 28px);z-index:var(--z-fab);
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg, #cc3300 0%, #ff4500 50%, #ff8c00 100%);
  color:#fff;border:none;cursor:pointer;
  box-shadow:0 10px 26px rgba(255,36,80,0.5);
  transition:transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-base) var(--ease-out), filter var(--dur-fast) var(--ease-out);
  animation:fabIn var(--dur-slower) var(--ease-bounce) both;
}
.fab .ico{width:26px;height:26px;}
@keyframes fabIn{
  from{opacity:0;transform:scale(0.4) rotate(-16deg);}
  to{opacity:1;transform:scale(1) rotate(0deg);}
}
.fab::before{
  content:'';
  position:absolute;inset:-4px;border-radius:50%;
  border:2px solid #ff8c00;
  opacity:0.35;
  animation:fabRing 2s var(--ease-inout) infinite;
}
@keyframes fabRing{
  0%{transform:scale(0.9);opacity:0.45;}
  70%,100%{transform:scale(1.35);opacity:0;}
}
.fab:hover{transform:translateY(-4px) scale(1.06);filter:saturate(1.1);}
.fab:active{transform:translateY(0) scale(0.94);}
.view-controls{
  display:flex;gap:8px;justify-content:center;margin-block:20px 40px;
}
.view-btn{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 20px;
  background:linear-gradient(180deg, #260b15 0%, #1e070f 100%);
  border:1px solid rgba(255,100,0,0.18);
  border-radius:999px;
  color:#d190a2;
  font-family:'Baloo 2', cursive;
  font-size:0.9rem;font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
  transition:all 250ms ease-out;
}
.view-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.4);color:#fff;}
.view-btn.active{background:linear-gradient(135deg, #ff8c00 0%, #ff4500 50%, #cc3300 100%);color:#fff;border-color:transparent;box-shadow:0 8px 24px rgba(255,36,80,0.5);}
#themeToggle{justify-content:center;padding:8px 12px;min-width:48px}
#themeToggle .icon-moon{display:inline-flex}
#themeToggle .icon-sun{display:none}
[data-theme="light"] #themeToggle .icon-moon{display:none}
[data-theme="light"] #themeToggle .icon-sun{display:inline-flex}
.theme-toggle-fixed{
  position:fixed;top:16px;right:16px;z-index:var(--z-fab);
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#1e070f;border:1px solid rgba(255,100,0,0.18);
  cursor:pointer;color:#d190a2;
}
.theme-toggle-fixed:hover{background:#2a0b16;}
.view-dropdown{position:relative;}
.view-dropdown-menu{
  position:absolute;top:100%;left:0;margin-top:6px;
  display:flex;flex-direction:column;min-width:160px;
  background:#1e070f;border:1px solid rgba(255,100,0,0.18);
  border-radius:10px;padding:6px;opacity:0;pointer-events:none;
  transform:translateY(-6px);transition:opacity .15s ease, transform .15s ease;
  z-index:var(--z-dropdown);
}
.view-dropdown-menu.open{opacity:1;pointer-events:auto;transform:translateY(0);}
.view-option{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  border-radius:8px;background:none;border:none;cursor:pointer;
  text-align:left;width:100%;
}
.view-option:hover{background:#2a0b16;}
.view-option.active{color:#ff8c00;font-weight:600;}
.ico-chevron{transform:rotate(-90deg);width:14px;height:14px;margin-left:auto;}
.view-dropdown-menu.open ~ .view-btn .ico-chevron,
#viewDropdownBtn[aria-expanded="true"] .ico-chevron{transform:rotate(90deg);}
.toast-holder{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;gap:8px;}
.toast{background:#1e070f;border:1px solid rgba(255,100,0,0.18);border-radius:10px;padding:10px 16px;font-size:14px;color:#ffe9ee;box-shadow:0 4px 16px rgba(0,0,0,.4);animation:toast-in .2s ease, toast-out .2s ease 2.3s forwards;display:inline-flex;align-items:center;gap:7px;}
.toast .ico{width:1.05em;height:1.05em;color:#ff8c00;}
@keyframes toast-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes toast-out{to{opacity:0;transform:translateY(-8px);}}
#particle-container{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;overflow:hidden;z-index:0;
}
.fire-particle{
  position:absolute;top:-20px;display:block;
  animation:fireFall linear infinite;
  will-change:transform,opacity;
}
@keyframes fireFall{
  0%{transform:translateY(-20px) rotate(0deg);opacity:1}
  15%{opacity:1}
  100%{transform:translateY(110vh) rotate(720deg);opacity:0}
}
.fire-particle.tiny{width:10px;height:14px}
.fire-particle.small{width:14px;height:18px}
.fire-particle.medium{width:16px;height:18px}
.fire-particle.large{width:18px;height:24px}
.fire-particle.huge{width:22px;height:24px}
.fire-particle.flame-1{background:linear-gradient(135deg,#fff8d0 0%,#ffcc00 15%,#ff6600 35%,#ff3300 65%,#ff3300 100%)}
.fire-particle.flame-2{background:linear-gradient(135deg,#fffbe0 0%,#ffdd00 20%,#ff8800 40%,#ff2200 75%,#ff2200 100%)}
.fire-particle.flame-3{background:linear-gradient(135deg,#fff8c0 0%,#ffaa00 20%,#ff6600 30%,#cc2200 60%,#cc2200 100%)}
@media (max-width:640px){
  #particle-container{opacity:0.6}
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:120ms !important;
    animation-iteration-count:1 !important;
    transition-duration:120ms !important;
    scroll-behavior:auto !important;
  }
}