:root{
  --bg:#12121a;
  --bg-1:rgba(176,146,250,0.12);
  --bg-2:rgba(248,174,207,0.12);
  --bg-3:rgba(142,224,190,0.12);
  --card:#1c1c26;
  --card-soft:#23232f;
  --pink:#f2aecf;
  --pink-deep:#e65a9c;
  --lav:#c9b5ef;
  --lav-deep:#8867c2;
  --mint-deep:#3fa47d;
  --peach:#ffd9b6;
  
  --text:#ededf2;
  --text-soft:#a09bac;
  --text-faint:#7a7380;
  --accent:#d2619f;
  --accent-deep:#a43a7b;
  --danger:#e08c8c;
  --danger-deep:#c15656;
  --ring:rgba(201,181,239,0.6);
  --border:1px solid #f0e2f5;
  --solid:1px solid #f0e2f5;
  --white:var(--text);
  --white-08:rgba(255,255,255,0.08);
  --white-25:rgba(255,255,255,0.25);
  --radius-sm:14px;
  --radius-md:18px;
  --radius-lg:24px;
  --radius-xl:32px;
  --shadow-sm:0 2px 10px rgba(82,56,110,0.08);
  --shadow-md:0 12px 28px rgba(82,56,110,0.13);
  --shadow-lg:0 26px 54px rgba(70,46,98,0.2);
  --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(--bg-2);
  --bg-tertiary:var(--bg-3);
  --surface:var(--card);
  --surface-soft:var(--card-soft);
  --surface-hover:#f1e8f7;
  --surface-raised:#ffffff;
  --text-primary:var(--text);
  --text-secondary:var(--text-soft);
  --text-muted:var(--text-faint);
  --border-color:#f0e2f5;
  --border:1px solid var(--border-color);
  --solid:1px solid var(--border-color);
  --promo-text:#3f2f72;
  --code-text:#6b3b16;
  --on-accent:#ffffff;
  --grad-soft:linear-gradient(135deg, var(--lav), var(--pink));
  --grad-strong:linear-gradient(135deg, var(--lav-deep), var(--accent));
  --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:var(--surface-hover);
  --button-danger-bg:var(--danger);
  --button-danger-hover:var(--danger-deep);
  --button-danger-text:#ffffff;
  --overlay:rgba(66,42,88,0.5);
  --slider-track:rgba(201,181,239,0.3);
  --slider-thumb:var(--lav-deep);
  }
  [data-theme="dark"]{
  --bg:#0a0a0f;
  --bg-1:rgba(176,146,250,0.12);
  --bg-2:rgba(248,174,207,0.12);
  --bg-3:rgba(142,224,190,0.12);
  --card:#12121a;
  --card-soft:#1a1a22;
  --pink:#e65a9c;
  --pink-deep:#c94182;
  --lav:#b09cff;
  --lav-deep:#8867c2;
  --mint-deep:#3fa47d;
  --peach:#ffa06b;
  --text:#ededf2;
  --text-soft:#a09bac;
  --text-faint:#7a7380;
  --accent:#d2619f;
  --accent-deep:#a43a7b;
  --danger:#e08c8c;
  --danger-deep:#c15656;
  --ring:rgba(201,181,239,0.4);
  --border:1px solid #2a2a36;
  --solid:1px solid #2a2a36;
  --white:var(--text);
  --white-08:rgba(255,255,255,0.08);
  --white-25:rgba(255,255,255,0.25);
  --shadow-sm:0 2px 10px rgba(82,56,110,0.2);
  --shadow-md:0 12px 28px rgba(82,56,110,0.3);
  --shadow-lg:0 26px 54px rgba(70,46,98,0.4);
  --surface-hover:#23232f;
  --surface-raised:#1c1c26;
  --border-color:#2a2a36;
  --border:1px solid var(--border-color);
  --solid:1px solid var(--border-color);
  --slider-track:rgba(201,181,239,0.24);
  --slider-thumb:var(--lav);
  }
  *{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:var(--lav);color:var(--text);}
  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("/lirio.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:var(--accent);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, #c9b5ef 0%, #f2aecf 50%, #e65a9c 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:var(--text-soft);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, #c9b5ef 0%, #f2aecf 55%, #e65a9c 100%);color:#44324d;box-shadow:0 10px 22px rgba(210,97,159,0.4);}
.pill.code{background:linear-gradient(135deg, #c9b5ef 0%, #f2aecf 55%, #e65a9c 100%);color:#44324d;box-shadow:0 10px 22px rgba(210,97,159,0.4);}
.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:var(--accent-deep);transform:translateY(-1px);filter:none;background:color-mix(in srgb, var(--surface-hover) 45%, transparent);}
.pill.danger{background:#e08c8c;color:#fff;box-shadow:0 6px 16px rgba(224,140,140,0.35);}
.pill.danger:hover{background:#d47878;}
.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, #fdf7fc 0%, #fdf0f7 65%);
  border:var(--solid);
  border-radius:var(--radius-xl);
  padding:clamp(24px, 4vw, 34px);
  box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;gap:var(--sp-4);
  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:var(--shadow-lg);}
input, textarea{
  font-family:'Quicksand', sans-serif;
  border:var(--border);background:var(--surface-soft);
  border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-4);
  font-size:0.96rem;color:var(--text-primary);
  width:100%;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
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:#c9b5ef;
  box-shadow:0 0 0 4px rgba(201,181,239,0.25);
  background:var(--surface);
}
.hint{font-size:0.78rem;color:var(--text-soft);margin-top:-8px;}
.status{font-size:0.85rem;color:var(--accent);min-height:1.2em;font-weight:500;display:flex;align-items:center;gap:var(--sp-2);}
.error{color:var(--danger-deep);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:var(--sp-2);font-size:0.9rem;color:var(--text-soft);cursor:pointer;user-select:none;}
.toggle-row input{
  width:18px;height:18px;accent-color:var(--accent);
  cursor:pointer;
}
.btn-row{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center;}
.empty{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  text-align:center;color:var(--text-soft);font-style:italic;
  padding:var(--sp-8);
  grid-column:1/-1;
}
.empty .ico{width:38px;height:38px;color:var(--text-faint);}
.fab{
  position:fixed;right:clamp(16px, 3vw, 28px);bottom:clamp(16px, 3vw, 28px);z-index:100;
  display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(135deg, #c9b5ef 0%, #f2aecf 50%, #e65a9c 100%);
  color:#44324d;border:none;cursor:pointer;
  box-shadow:0 10px 26px rgba(210,97,159,0.45);
  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 #c9b5ef;
  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:var(--sp-2);justify-content:center;margin-block:var(--sp-5) var(--sp-7);
}
.view-btn{
  position:relative;
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-5);
  background:linear-gradient(180deg, var(--card-soft) 0%, var(--card) 100%);
  border:var(--solid);
  border-radius:var(--r-pill);
  color:var(--text-soft);
  font-family:'Baloo 2', cursive;
  font-size:0.9rem;font-weight:600;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:all var(--dur-base) var(--ease-out);
}
.view-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:var(--text);}
.view-btn.active{background:var(--grad-soft);color:var(--promo-text);border-color:transparent;box-shadow:0 8px 20px rgba(210,97,159,0.3);}
#themeToggle{justify-content:center;padding:var(--sp-2) var(--sp-3);min-width:48px}
.theme-toggle-fixed{
  position:fixed;top:16px;right:16px;z-index:100;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface, #1c1c22);border:var(--border);
  cursor:pointer;color:var(--text-soft);
}
.theme-toggle-fixed:hover{background:var(--surface-hover);}
.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:var(--surface, #1c1c22);border:var(--border);
  border-radius:10px;padding:6px;opacity:0;pointer-events:none;
  transform:translateY(-6px);transition:opacity .15s ease, transform .15s ease;
  z-index:50;
}
.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:var(--surface-hover);}
.view-option.active{color:var(--accent);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:200;display:flex;flex-direction:column;gap:8px;}
.toast{background:var(--surface,#1c1c22);border:1px solid var(--border-color);border-radius:10px;padding:10px 16px;font-size:14px;color:var(--text-primary);box-shadow:0 4px 16px rgba(0,0,0,.3);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:var(--accent,inherit);}
@keyframes toast-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes toast-out{to{opacity:0;transform:translateY(-8px);}}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:120ms !important;
    animation-iteration-count:1 !important;
    transition-duration:120ms !important;
    scroll-behavior:auto !important;
  }
}