@font-face { font-family: "Tobi"; font-display: swap; font-weight: 400;
  src: url("../fonts/Tobi.woff2") format("woff2"), url("../fonts/Tobi.ttf") format("truetype"), url("../fonts/Tobi.otf") format("opentype"); }
@font-face { font-family: "Tobi Light"; font-display: swap; font-weight: 400;
  src: url("../fonts/Tobi-Light.woff2") format("woff2"), url("../fonts/Tobi-Light.ttf") format("truetype"), url("../fonts/Tobi-Light.otf") format("opentype"); }

:root {
  --ink: #111111; --muted: #3a3a42; --accent: #6f37a9; --danger: #b3124f;
  --card: rgba(158,123,194,.47);                       --btn: linear-gradient(90deg, rgba(111,55,169,.53), rgba(255,0,140,.53));   --btn-text: #111111;
  --panel: #f1e9f9; --line: rgba(111,55,169,.2); --inset: rgba(255,255,255,.35);
  --input-bg: rgba(255,255,255,.75); --input-line: rgba(111,55,169,.35);
  --bar: rgba(247,242,252,.85); --star-off: rgba(110,90,140,.3);
  --shadow: 0 6px 14px rgba(70,30,110,.25);
}
html.dark {
  --ink: #f6f1ff; --muted: #d8cdea; --accent: #c9a6ff; --danger: #ff7aa8;
  --card: rgba(158,123,194,.24);
  --btn: linear-gradient(90deg, rgba(111,55,169,.8), rgba(255,0,140,.65));
  --btn-text: #ffffff;
  --panel: #1f1633; --line: rgba(201,166,255,.2); --inset: rgba(255,255,255,.07);
  --input-bg: rgba(255,255,255,.08); --input-line: rgba(201,166,255,.35);
  --bar: rgba(16,10,30,.85); --star-off: rgba(201,166,255,.25);
  --shadow: 0 6px 14px rgba(0,0,0,.5);
}
html { color-scheme: light; } html.dark { color-scheme: dark; }

body { margin: 0; min-height: 100dvh; background: #fff; color: var(--ink);
  font-family: "Tobi Light", system-ui, sans-serif; font-weight: 400; font-synthesis: none; }
html.dark body { background: #0e091a; }

body::before { content: ""; position: fixed; inset: -8%; z-index: -1; pointer-events: none;
  background: url("../img/bg.jpg") center / cover no-repeat;
  animation: drift 30s ease-in-out infinite alternate; will-change: transform; }
html.dark body::before { background-image: url("../img/bg-dark.jpg"); }
@keyframes drift {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1.02); }
  to   { transform: translate3d(2.5%, 1.5%, 0) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

.f-title { font-family: "Tobi", system-ui, sans-serif; font-weight: 400; }
.accent, .link { color: var(--accent); }
.muted { color: var(--muted); }
.link { cursor: pointer; }

.btn { font-family: "Tobi", system-ui, sans-serif; font-weight: 400; background: var(--btn); color: var(--btn-text);
  font-size: 1.3rem; line-height: 1.2; padding: .85rem 1.3rem; border-radius: 1rem; border: 0; cursor: pointer; }
.btn:active { transform: scale(.98); } .btn:disabled { opacity: .5; }
.btn-sm { font-size: 1rem; padding: .7rem 1rem; }
.btn2 { font-family: "Tobi", system-ui, sans-serif; background: var(--inset); color: var(--ink); border: 1px solid var(--line);
  border-radius: .8rem; padding: .5rem .9rem; font-size: .95rem; cursor: pointer; }
.btn2:disabled { opacity: .5; }

.card { background: var(--card); border-radius: 1.1rem; box-shadow: var(--shadow); color: var(--ink); }
.inset { background: var(--inset); }
.panel { background: var(--panel); color: var(--ink); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.panel-head { border-bottom: 1px solid var(--line); }
.overlay { background: rgba(20,10,35,.55); }
.sticky-bar { background: var(--bar); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }

.label { display: block; margin-bottom: .25rem; font-size: .95rem; color: var(--muted); }
.input { width: 100%; box-sizing: border-box; background: var(--input-bg); color: var(--ink); border: 1px solid var(--input-line);
  border-radius: .8rem; padding: .7rem .85rem; font-size: 1rem; font-family: "Tobi Light", system-ui, sans-serif; }
.input::placeholder { color: var(--muted); opacity: .6; }
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.input:disabled { opacity: .6; }

.opt { border: 1px solid var(--input-line); background: var(--input-bg); color: var(--ink); border-radius: .8rem; padding: .65rem .8rem; font-family: "Tobi", system-ui, sans-serif; cursor: pointer; }
.opt-on { background: var(--accent); border-color: var(--accent); color: #fff; }
html.dark .opt-on { color: #1a0f2e; }

.tabs { display: flex; gap: .4rem; overflow-x: auto; padding: .5rem 0 .1rem; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; padding: .45rem .9rem; border-radius: 999px; background: var(--inset); color: var(--ink);
  font-family: "Tobi", system-ui, sans-serif; cursor: pointer; border: 1px solid var(--line); }
.tab-on { background: var(--accent); border-color: var(--accent); color: #fff; }
html.dark .tab-on { color: #1a0f2e; }

.chip { display: inline-block; border-radius: 999px; padding: .2rem .8rem; font-size: .95rem; color: var(--ink); font-family: "Tobi", system-ui, sans-serif; }
.tag { display: inline-block; border-radius: 999px; padding: .1rem .6rem; font-size: .85rem; background: var(--inset); color: var(--ink); }
.star-on { color: #f5a300; } .star-off { color: var(--star-off); }
.note { background: rgba(255,190,0,.2); border-radius: .7rem; }
.err { background: rgba(255,0,70,.15); color: var(--danger); border-radius: .8rem; }
.banner { background: rgba(255,190,0,.22); border-radius: .8rem; padding: .5rem .8rem; font-size: .95rem; }
.ghost-btn { color: var(--muted); border-radius: .6rem; padding: .25rem .6rem; cursor: pointer; }
.ghost-btn:hover { background: var(--inset); }
.ghost-btn.danger { color: var(--danger); }
.icon-btn { font-size: 1.75rem; line-height: 1; padding: .1rem .6rem; border-radius: .6rem; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: var(--inset); }
.fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; width: 3rem; height: 3rem; border-radius: 999px; font-size: 1.4rem;
  background: var(--panel); box-shadow: var(--shadow); border: 1px solid var(--line); cursor: pointer; }

.t-red { background: rgba(255,0,70,.2); } .t-blue { background: rgba(50,110,255,.2); }
.scroll-x { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tbl th { font-family: "Tobi", system-ui, sans-serif; font-weight: 400; text-align: left; padding: .5rem .6rem; color: var(--muted); white-space: nowrap; cursor: pointer; user-select: none; }
.tbl td { padding: .45rem .6rem; border-top: 1px solid var(--line); white-space: nowrap; }
.tbl tr.sel td { background: var(--inset); }
.grip { cursor: grab; touch-action: none; user-select: none; padding: .2rem .5rem; color: var(--muted); font-size: 1.2rem; }
.drop-over { outline: 2px solid var(--accent); }
.code-box { font-family: "Tobi", system-ui, sans-serif; letter-spacing: .08em; word-break: break-all; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }