:root {
  color-scheme: dark;
  --bg: #05060d;
  --panel: rgba(8, 12, 28, 0.76);
  --line: rgba(255, 220, 151, 0.28);
  --line-cold: rgba(129, 230, 255, 0.24);
  --gold: #f5c76b;
  --gold-2: #ffe4a3;
  --cyan: #73f0ff;
  --rose: #ff5f9f;
  --text: #f4f0e8;
  --muted: #aeb6cc;
  --danger: #ff6685;
  --shadow: 0 26px 80px rgba(0, 0, 0, 0.52);
  --radius: 8px;
  font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 16%, rgba(115, 240, 255, 0.14), transparent 27vw),
    radial-gradient(circle at 88% 22%, rgba(255, 95, 159, 0.12), transparent 25vw),
    linear-gradient(135deg, #05060d 0%, #0d1020 45%, #050712 100%);
  color: var(--text);
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nebula { position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(245, 199, 107, 0.035) 1px, transparent 1px), linear-gradient(rgba(115, 240, 255, 0.03) 1px, transparent 1px); background-size: 68px 68px; mask-image: radial-gradient(circle at 50% 45%, black 0 58%, transparent 82%); opacity: 0.85; }
#starfield { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.62; }
.app-shell { position: relative; z-index: 1; display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 100vh; }
.side-panel { position: sticky; top: 0; height: 100vh; padding: 26px 18px; border-right: 1px solid var(--line-cold); background: linear-gradient(180deg, rgba(6, 9, 22, 0.92), rgba(9, 12, 27, 0.68)), linear-gradient(90deg, rgba(245, 199, 107, 0.08), transparent); backdrop-filter: blur(20px); }
.brand-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.sigil { position: relative; display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(245, 199, 107, 0.55); border-radius: 50%; box-shadow: inset 0 0 18px rgba(245, 199, 107, 0.22), 0 0 26px rgba(115, 240, 255, 0.18); }
.sigil::before, .sigil::after { position: absolute; content: ""; inset: 8px; border: 1px solid rgba(115, 240, 255, 0.38); transform: rotate(45deg); }
.sigil span { width: 11px; height: 11px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 22px var(--gold); }
.eyebrow { margin: 0 0 6px; color: var(--cyan); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 24px; }
h3 { margin-bottom: 0; font-size: 24px; }
.category-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 13px; }
.category-list { display: grid; gap: 8px; margin: 12px 0 28px; }
.category-button { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 42px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--radius); color: var(--muted); background: rgba(255,255,255,0.035); text-align: left; }
.category-button.active, .category-button:hover { border-color: var(--line); color: var(--text); background: linear-gradient(90deg, rgba(245,199,107,0.16), rgba(115,240,255,0.07)); box-shadow: inset 0 0 20px rgba(245,199,107,0.08); }
.category-button small { color: var(--gold); }
.category-button[data-sortable="true"] { touch-action: none; user-select: none; }
.category-button.dragging { opacity: 0.55; transform: scale(0.985); border-color: rgba(115,240,255,0.56); }
.category-button.drop-before, .category-button.drop-after { position: relative; border-color: rgba(115,240,255,0.42); }
.category-button.drop-before::before, .category-button.drop-after::after { position: absolute; left: 10px; right: 10px; height: 2px; content: ""; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 14px rgba(115,240,255,0.75); }
.category-button.drop-before::before { top: -5px; }
.category-button.drop-after::after { bottom: -5px; }
.category-rename { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 42px; padding: 0 12px; border: 1px solid var(--cyan); border-radius: var(--radius); background: rgba(2,4,12,0.86); box-shadow: inset 0 0 20px rgba(115,240,255,0.12); }
.category-rename input { min-width: 0; border: 0; outline: none; color: var(--text); background: transparent; }
.category-rename small { color: var(--gold); }
.is-category-dragging, .is-category-dragging * { cursor: grabbing !important; }
.workspace { min-width: 0; padding: 24px clamp(16px, 3vw, 38px) 44px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.search-box { display: flex; align-items: center; gap: 10px; width: min(560px, 100%); min-height: 46px; padding: 0 14px; border: 1px solid var(--line-cold); border-radius: var(--radius); background: rgba(6,9,22,0.62); box-shadow: inset 0 0 30px rgba(115,240,255,0.04); }
.search-box input, .form-grid input, .form-grid textarea, .form-grid select, .category-add input, .category-row input { width: 100%; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); outline: none; color: var(--text); background: rgba(2,4,12,0.72); }
.search-box input { height: 42px; border: 0; background: transparent; }
.top-actions { display: flex; gap: 10px; }
.primary-button, .ghost-button, .icon-button, .segment { border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius); color: var(--text); background: rgba(255,255,255,0.055); }
.primary-button, .ghost-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 14px; white-space: nowrap; }
.primary-button { border-color: rgba(245,199,107,0.5); color: #140c02; background: linear-gradient(135deg, var(--gold-2), var(--gold) 56%, #ff9fb9); box-shadow: 0 14px 34px rgba(245,199,107,0.22); font-weight: 800; }
.ghost-button:hover, .icon-button:hover, .segment.active { border-color: var(--line); background: rgba(245,199,107,0.14); }
.ghost-button.danger { color: var(--danger); }
.icon-button { display: inline-grid; width: 38px; height: 38px; place-items: center; }
.oracle-stage { position: relative; min-height: calc(100vh - 112px); padding: clamp(18px, 3vw, 32px); border: 1px solid rgba(245,199,107,0.22); border-radius: var(--radius); background: linear-gradient(rgba(255,255,255,0.035), transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.026), transparent 1px), radial-gradient(circle at 50% -20%, rgba(245,199,107,0.11), transparent 36%), rgba(6,9,20,0.72); background-size: 42px 42px, 42px 42px, auto, auto; box-shadow: var(--shadow); overflow: hidden; }
.oracle-stage::before { position: absolute; inset: 18px; content: ""; border: 1px solid rgba(245,199,107,0.16); border-radius: var(--radius); pointer-events: none; }
.stage-header { position: relative; z-index: 1; display: flex; align-items: center; min-height: 20px; margin-bottom: 20px; }
.segmented { display: inline-flex; padding: 4px; border: 1px solid var(--line-cold); border-radius: var(--radius); background: rgba(3,5,14,0.72); }
.segment { min-height: 34px; padding: 0 12px; }
.tool-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); gap: 22px; }
.tool-card { position: relative; aspect-ratio: 0.68; min-height: 318px; perspective: 1100px; }
.card-link { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.card-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 360ms cubic-bezier(0.2,0.9,0.2,1), filter 360ms ease; }
.tool-card:hover .card-inner, .card-link:focus-visible .card-inner { transform: translateY(-7px) rotateX(4deg); filter: drop-shadow(0 18px 26px rgba(115, 240, 255, 0.13)); }
.tool-card.is-opening .card-inner { animation: drawCard 520ms cubic-bezier(0.17,0.84,0.44,1); }
@keyframes drawCard { 0% { transform: translateY(0) scale(1); } 42% { transform: translateY(-18px) scale(1.035); } 100% { transform: translateY(0) scale(1); } }
.card-face { position: absolute; inset: 0; display: grid; grid-template-rows: 38px 1fr 116px; backface-visibility: hidden; border: 1px solid rgba(245,199,107,0.58); border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 50px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.07), inset 0 0 44px rgba(245,199,107,0.08); }
.card-front { padding: 16px; background: radial-gradient(circle at 50% 31%, rgba(245,199,107,0.14), transparent 25%), linear-gradient(160deg, rgba(17,22,49,0.96), rgba(7,7,19,0.98) 52%, rgba(22,12,34,0.98)); }
.card-front::before, .card-front::after { position: absolute; content: ""; pointer-events: none; }
.card-front::before { inset: 10px; border: 1px solid rgba(245,199,107,0.28); border-radius: calc(var(--radius) - 2px); }
.card-front::after { inset: 22px; border-top: 1px solid rgba(115,240,255,0.23); border-bottom: 1px solid rgba(115,240,255,0.23); background: linear-gradient(90deg, transparent 0 16%, rgba(245,199,107,0.28) 16% 17%, transparent 17% 83%, rgba(245,199,107,0.28) 83% 84%, transparent 84%), radial-gradient(circle at 50% 0, rgba(255,255,255,0.11), transparent 18%); opacity: 0.88; }
.electric-border {
  position: absolute;
  inset: -2px;
  z-index: 2;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
  overflow: visible;
  opacity: 0.62;
  mix-blend-mode: screen;
}
.electric-border__glow,
.electric-border__bolt {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.electric-border__glow {
  stroke: rgba(115, 240, 255, 0.62);
  stroke-width: 1.15;
  filter: drop-shadow(0 0 8px rgba(115, 240, 255, 0.65));
  animation: electricFlicker 2.4s steps(4, end) infinite;
}
.electric-border__bolt {
  stroke: rgba(142, 253, 255, 0.95);
  stroke-width: 0.58;
  stroke-dasharray: 18 82;
  filter: drop-shadow(0 0 5px rgba(115, 240, 255, 0.85));
}
.electric-border__bolt--a { animation: electricTravel 3.8s linear infinite, electricFlicker 1.8s steps(5, end) infinite; }
.electric-border__bolt--b { animation: electricTravel 5.1s linear reverse infinite, electricFlicker 2.2s steps(4, end) infinite; opacity: 0.76; }
.tool-card:hover .electric-border,
.tool-card.is-opening .electric-border {
  opacity: 1;
}
.tool-card:hover .electric-border__glow,
.tool-card.is-opening .electric-border__glow {
  stroke: rgba(159, 254, 255, 0.9);
  stroke-width: 1.35;
}
.tool-card:hover .electric-border__bolt,
.tool-card.is-opening .electric-border__bolt {
  stroke-width: 0.82;
  stroke-dasharray: 26 58;
  animation-duration: 1.35s, 0.72s;
}
@keyframes electricTravel {
  to { stroke-dashoffset: -220; }
}
@keyframes electricFlicker {
  0%, 100% { opacity: 0.58; }
  18% { opacity: 1; }
  32% { opacity: 0.72; }
  51% { opacity: 0.95; }
  68% { opacity: 0.5; }
  82% { opacity: 0.88; }
}
.card-top { position: relative; z-index: 3; display: flex; align-items: flex-start; min-width: 0; }
.card-category { overflow: hidden; color: var(--cyan); font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.card-actions { position: absolute; z-index: 3; top: 16px; right: 16px; display: flex; gap: 6px; }
.mini-action { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; color: var(--muted); background: rgba(0,0,0,0.36); padding: 0; }
.mini-action:hover { color: var(--gold-2); border-color: var(--line); }
.card-center { position: relative; z-index: 3; display: grid; place-items: center; min-height: 0; }
.logo-orb { display: grid; width: min(48%, 104px); aspect-ratio: 1; place-items: center; border: 1px solid rgba(245,199,107,0.42); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 62%), rgba(255,255,255,0.05); box-shadow: 0 0 34px rgba(245,199,107,0.16), inset 0 0 22px rgba(115,240,255,0.12); overflow: hidden; }
.logo-orb img, .logo-preview img { width: 58%; height: 58%; object-fit: contain; }
.logo-orb.symbol-logo span, .logo-preview.symbol-logo span { display: grid; place-items: center; width: 100%; height: 100%; font-size: 42px; line-height: 1; }
.logo-orb.image-logo img[src^="data:"] { width: 72%; height: 72%; border-radius: 8px; }
.card-bottom { position: relative; z-index: 3; display: grid; align-content: end; justify-items: center; gap: 10px; min-width: 0; text-align: center; }
.tool-title { display: block; width: 100%; margin: 0; overflow-wrap: anywhere; font-size: clamp(20px, 2.4vw, 25px); font-weight: 900; line-height: 1.08; }
.tool-description { display: -webkit-box; width: 100%; min-height: 42px; margin: 0; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.modal { width: min(760px, calc(100vw - 24px)); padding: 0; border: 0; color: var(--text); background: transparent; }
.modal.is-open { position: fixed; inset: 50% auto auto 50%; display: block; transform: translate(-50%, -50%); z-index: 20; }
.modal.is-open::before { position: fixed; inset: -100vh -100vw; content: ""; background: rgba(0,0,0,0.68); backdrop-filter: blur(10px); }
.modal::backdrop { background: rgba(0,0,0,0.68); backdrop-filter: blur(10px); }
.modal-panel { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: radial-gradient(circle at 80% 0, rgba(115,240,255,0.13), transparent 36%), rgba(8,11,25,0.96); box-shadow: var(--shadow); }
.modal-panel.slim { width: min(520px, calc(100vw - 24px)); }
.modal-header, .modal-actions { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.modal-actions { grid-template-columns: auto 1fr auto auto; margin-top: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.form-grid label, .logo-controls { display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid input, .form-grid textarea, .form-grid select, .category-add input, .category-row input { min-height: 42px; padding: 10px 12px; }
.form-grid textarea { resize: vertical; }
.logo-zone { display: grid; grid-template-columns: 118px 1fr; gap: 16px; margin-top: 18px; }
.logo-preview { display: grid; width: 118px; aspect-ratio: 1; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 62%), rgba(255,255,255,0.05); overflow: hidden; }
.default-logo-list { display: grid; grid-template-columns: repeat(11, 42px); grid-auto-rows: 42px; gap: 8px; align-items: center; overflow-x: auto; padding-bottom: 2px; }
.default-logo-button { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); background: rgba(255,255,255,0.05); overflow: hidden; }
.default-logo-button span { display: grid; place-items: center; width: 100%; height: 100%; font-size: 25px; line-height: 1; }
.default-logo-button.active { border-color: var(--gold); box-shadow: 0 0 22px rgba(245,199,107,0.22); background: rgba(245,199,107,0.12); }
.auth-body { display: grid; gap: 12px; margin-top: 18px; }
.auth-body label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
.auth-body input { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); outline: none; color: var(--text); background: rgba(2,4,12,0.72); }
.auth-message { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.auth-actions { grid-template-columns: auto 1fr auto auto; }
#syncStatus { min-width: 92px; }
.hidden { display: none !important; }
.category-editor, .category-editor-list { display: grid; gap: 12px; margin-top: 18px; }
.category-add, .category-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .side-panel { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--line-cold); }
  .category-list { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
  .topbar { align-items: stretch; flex-direction: column; }
  .top-actions { width: 100%; }
  .top-actions > * { flex: 1; }
}
@media (max-width: 560px) {
  .workspace { padding: 16px 12px 30px; }
  .oracle-stage { padding: 16px; }
  .tool-grid { grid-template-columns: repeat(auto-fill, minmax(154px, 1fr)); gap: 14px; }
  .tool-card { min-height: 236px; }
  .card-face { grid-template-rows: 32px 1fr 92px; padding: 14px; }
  .tool-title { font-size: 18px; }
  .logo-zone, .form-grid, .modal-actions { grid-template-columns: 1fr; }
  .logo-preview { width: 96px; }
  .modal-actions span { display: none; }
  .category-add, .category-row { grid-template-columns: 1fr; }
  .default-logo-list { grid-template-columns: repeat(6, 42px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
}






.fate-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 420ms ease; overflow: hidden; }
.fate-layer::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 74% 18%, rgba(245,199,107,0.22), transparent 24vw), radial-gradient(circle at 58% 56%, rgba(47,99,255,0.18), transparent 28vw), linear-gradient(90deg, rgba(2,4,12,0.78), rgba(2,4,12,0.2)); }
.fate-splash { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(3,5,14,0.9) 0%, rgba(3,5,14,0.5) 48%, rgba(3,5,14,0.92) 100%), url("https://ddragon.leagueoflegends.com/cdn/img/champion/splash/TwistedFate_0.jpg"); background-position: center top; background-size: cover; filter: saturate(1.05) contrast(1.05); transform: scale(1.03); opacity: 0.74; }
.fate-card { position: absolute; width: 84px; height: 124px; border: 1px solid rgba(255,255,255,0.32); border-radius: 7px; opacity: 0; transform: rotate(var(--tilt)) translateY(28px); animation: fateFloat 7s ease-in-out infinite; box-shadow: 0 0 28px rgba(245,199,107,0.18); }
.fate-card::before { position: absolute; inset: 9px; content: ""; border: 1px solid currentColor; border-radius: 5px; opacity: 0.62; }
.fate-card-red { --tilt: -18deg; left: 58%; top: 19%; color: #ff596f; background: linear-gradient(145deg, rgba(255,89,111,0.34), rgba(30,4,12,0.32)); animation-delay: 0s; }
.fate-card-blue { --tilt: 14deg; left: 74%; top: 38%; color: #59b8ff; background: linear-gradient(145deg, rgba(89,184,255,0.34), rgba(4,12,30,0.32)); animation-delay: 1.6s; }
.fate-card-gold { --tilt: 7deg; left: 46%; top: 54%; color: #ffd76d; background: linear-gradient(145deg, rgba(255,215,109,0.36), rgba(35,22,4,0.36)); animation-delay: 3.2s; }
body.fate-mode .fate-layer { opacity: 1; }
body.fate-mode .nebula { opacity: 0.42; }
body.fate-mode .side-panel { background: linear-gradient(180deg, rgba(4,6,14,0.94), rgba(7,9,18,0.72)), linear-gradient(90deg, rgba(245,199,107,0.15), transparent); }
body.fate-mode .oracle-stage { border-color: rgba(245,199,107,0.38); background: linear-gradient(rgba(255,255,255,0.035), transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.024), transparent 1px), radial-gradient(circle at 54% -18%, rgba(245,199,107,0.18), transparent 34%), rgba(5,7,17,0.78); }
body.fate-mode .card-front { background: radial-gradient(circle at 50% 30%, rgba(245,199,107,0.19), transparent 25%), linear-gradient(160deg, rgba(18,21,47,0.97), rgba(6,6,17,0.99) 52%, rgba(31,12,28,0.98)); }
body.fate-mode .fate-toggle { border-color: rgba(245,199,107,0.58); color: #130b02; background: linear-gradient(135deg, #ffe4a3, #f5c76b 58%, #a9e9ff); font-weight: 800; }
.fate-toggle { min-width: 94px; }
.riot-disclaimer { display: none; position: relative; z-index: 1; margin: 18px 0 0; max-width: 860px; color: rgba(174,182,204,0.72); font-size: 11px; line-height: 1.6; }
body.fate-mode .riot-disclaimer { display: block; }
.fate-burst { position: fixed; z-index: 30; width: 34px; height: 48px; pointer-events: none; border-radius: 5px; border: 1px solid rgba(255,255,255,0.42); background: linear-gradient(145deg, var(--burst-color), rgba(255,255,255,0.08)); box-shadow: 0 0 24px var(--burst-glow); animation: fateBurst 760ms cubic-bezier(0.17,0.84,0.44,1) forwards; }
.fate-burst::before { position: absolute; inset: 6px; content: ""; border: 1px solid rgba(255,255,255,0.42); border-radius: 4px; }
.fate-burst--gold { --burst-color: rgba(255,214,91,0.92); --burst-glow: rgba(255,214,91,0.78); }
.fate-burst--blue { --burst-color: rgba(76,177,255,0.9); --burst-glow: rgba(76,177,255,0.72); }
.fate-burst--red { --burst-color: rgba(255,86,112,0.9); --burst-glow: rgba(255,86,112,0.72); }
@keyframes fateFloat { 0%, 100% { opacity: 0.08; transform: rotate(var(--tilt)) translateY(26px); } 42% { opacity: 0.34; transform: rotate(calc(var(--tilt) + 5deg)) translateY(-10px); } }
@keyframes fateBurst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(var(--angle)); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(calc(var(--angle) + 95deg)); } }

@media (max-width: 760px) {
  body.fate-mode .fate-splash { opacity: 0.42; }
  .fate-card { display: none; }
  .fate-toggle { min-width: 0; }
}