:root{
    --bg:#fbf3fb;
    --bg-1:rgba(248,174,207,0.2);
    --bg-2:rgba(176,146,250,0.16);
    --bg-3:rgba(142,224,190,0.16);
    --card:#ffffff;
    --card-soft:#fdf7fc;
    --pink:#f2aecf;
    --pink-deep:#e65a9c;
    --lav:#c9b5ef;
    --lav-deep:#8867c2;
    --mint-deep:#3fa47d;
    --peach:#ffd9b6;
    
    --text:#44324d;
    --text-soft:#8d7593;
    --text-faint:#b7a5bd;
    --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;}

  .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, var(--lav-deep) 0%, var(--pink-deep) 45%, var(--mint-deep) 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:var(--grad-soft);color:var(--promo-text);box-shadow:0 10px 22px rgba(161,139,214,0.45);}
  .pill.code{background:linear-gradient(135deg, var(--peach) 0%, var(--peach) 100%);color:var(--code-text);box-shadow:0 10px 22px rgba(255,184,133,0.45);}
  .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(--lav-deep);transform:translateY(-1px);filter:none;background:color-mix(in srgb, var(--surface-hover) 45%, transparent);}
  .pill.danger{background:var(--button-danger-bg);color:var(--button-danger-text);box-shadow:0 6px 16px rgba(193,86,86,0.28);}
  .pill.danger:hover{background:var(--button-danger-hover);}
  .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, var(--card-soft) 0%, var(--card) 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:var(--lav);
    box-shadow:0 0 0 4px var(--ring);
    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:var(--grad-soft);
    color:var(--promo-text);border:none;cursor:pointer;
    box-shadow:0 10px 26px rgba(158,139,214,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 var(--lav);
    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{
    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(161,139,214,0.4);}
  #themeToggle{justify-content:center;padding:var(--sp-2) var(--sp-3);min-width:48px}
  #themeToggle .icon-moon{display:inline-flex}
  #themeToggle .icon-sun{display:none}
  [data-theme="dark"] #themeToggle .icon-moon{display:none}
  [data-theme="dark"] #themeToggle .icon-sun{display:inline-flex}
  [data-theme="light"] #themeToggle .icon-moon{display:inline-flex}
  [data-theme="light"] #themeToggle .icon-sun{display:none}
  .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);}
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration:120ms !important;
      animation-iteration-count:1 !important;
      transition-duration:120ms !important;
      scroll-behavior:auto !important;
    }
  }