@layer base {
  :root {
    --c-abyss: 5 9 16;
    --c-amber: 252 211 77;
    --c-black: 0 0 0;
    --c-blue: 59 130 246;
    --c-blue-deep: 30 58 138;
    --c-blue-mid: 96 165 250;
    --c-blue-wash: 219 234 254;
    --c-body: 11 18 34;
    --c-crimson: 239 68 68;
    --c-cyan: 56 189 248;
    --c-cyan-deep: 14 165 233;
    --c-deep: 2 6 23;
    --c-emerald: 22 163 74;
    --c-gray: 71 85 105;
    --c-green: 34 197 94;
    --c-green-dark: 22 101 52;
    --c-green-deep: 6 95 70;
    --c-ice: 241 245 249;
    --c-mint: 52 211 153;
    --c-mint-pale: 167 243 208;
    --c-mint-wash: 220 252 231;
    --c-navy: 15 23 42;
    --c-navy-mid: 30 41 59;
    --c-notice-bg: 10 15 25;
    --c-ocean: 2 132 199;
    --c-ocean-deep: 3 105 161;
    --c-orange: 251 146 60;
    --c-red: 248 113 113;
    --c-red-dark: 127 29 29;
    --c-red-deep: 153 27 27;
    --c-rose: 251 113 133;
    --c-rose-hot: 244 63 94;
    --c-rose-wash: 254 226 226;
    --c-scarlet: 220 38 38;
    --c-shadow: 8 15 35;
    --c-shadow-blue: 8 47 73;
    --c-silver: 203 213 225;
    --c-slate: 148 163 184;
    --c-slate-dark: 100 116 139;
    --c-slate-light: 226 232 240;
    --c-snow: 248 250 252;
    --c-teal: 6 182 212;
    --c-white: 255 255 255;
    --black-8: rgb(var(--c-black) / 8%);
    --black-10: rgb(var(--c-black) / 10%);
    --black-25: rgb(var(--c-black) / 25%);
    --black-90: rgb(var(--c-black) / 90%);
    --blue-20: rgb(var(--c-blue) / 20%);
    --blue-55: rgb(var(--c-blue) / 55%);
    --blue-deep-85: rgb(var(--c-blue-deep) / 85%);
    --blue-mid-35: rgb(var(--c-blue-mid) / 35%);
    --blue-wash-95: rgb(var(--c-blue-wash) / 95%);
    --crimson-12: rgb(var(--c-crimson) / 12%);
    --crimson-35: rgb(var(--c-crimson) / 35%);
    --cyan-10: rgb(var(--c-cyan) / 10%);
    --cyan-15: rgb(var(--c-cyan) / 15%);
    --cyan-25: rgb(var(--c-cyan) / 25%);
    --cyan-30: rgb(var(--c-cyan) / 30%);
    --cyan-35: rgb(var(--c-cyan) / 35%);
    --cyan-45: rgb(var(--c-cyan) / 45%);
    --cyan-60: rgb(var(--c-cyan) / 60%);
    --cyan-deep-15: rgb(var(--c-cyan-deep) / 15%);
    --cyan-deep-25: rgb(var(--c-cyan-deep) / 25%);
    --deep-70: rgb(var(--c-deep) / 70%);
    --gray-85: rgb(var(--c-gray) / 85%);
    --green-8: rgb(var(--c-green) / 8%);
    --green-12: rgb(var(--c-green) / 12%);
    --green-18: rgb(var(--c-green) / 18%);
    --green-25: rgb(var(--c-green) / 25%);
    --green-30: rgb(var(--c-green) / 30%);
    --green-35: rgb(var(--c-green) / 35%);
    --green-dark-85: rgb(var(--c-green-dark) / 85%);
    --ice-80: rgb(var(--c-ice) / 80%);
    --ice-90: rgb(var(--c-ice) / 90%);
    --ice-95: rgb(var(--c-ice) / 95%);
    --mint-wash-95: rgb(var(--c-mint-wash) / 95%);
    --navy-35: rgb(var(--c-navy) / 35%);
    --navy-55: rgb(var(--c-navy) / 55%);
    --navy-65: rgb(var(--c-navy) / 65%);
    --navy-80: rgb(var(--c-navy) / 80%);
    --navy-88: rgb(var(--c-navy) / 88%);
    --navy-92: rgb(var(--c-navy) / 92%);
    --navy-95: rgb(var(--c-navy) / 95%);
    --navy-98: rgb(var(--c-navy) / 98%);
    --navy-mid-78: rgb(var(--c-navy-mid) / 78%);
    --ocean-8: rgb(var(--c-ocean) / 8%);
    --ocean-12: rgb(var(--c-ocean) / 12%);
    --ocean-15: rgb(var(--c-ocean) / 15%);
    --ocean-25: rgb(var(--c-ocean) / 25%);
    --ocean-35: rgb(var(--c-ocean) / 35%);
    --ocean-50: rgb(var(--c-ocean) / 50%);
    --red-12: rgb(var(--c-red) / 12%);
    --red-25: rgb(var(--c-red) / 25%);
    --red-30: rgb(var(--c-red) / 30%);
    --red-35: rgb(var(--c-red) / 35%);
    --red-dark-85: rgb(var(--c-red-dark) / 85%);
    --rose-wash-95: rgb(var(--c-rose-wash) / 95%);
    --shadow-45: rgb(var(--c-shadow) / 45%);
    --shadow-blue-28: rgb(var(--c-shadow-blue) / 28%);
    --shadow-blue-45: rgb(var(--c-shadow-blue) / 45%);
    --silver-45: rgb(var(--c-silver) / 45%);
    --silver-50: rgb(var(--c-silver) / 50%);
    --silver-60: rgb(var(--c-silver) / 60%);
    --slate-18: rgb(var(--c-slate) / 18%);
    --slate-25: rgb(var(--c-slate) / 25%);
    --slate-35: rgb(var(--c-slate) / 35%);
    --slate-50: rgb(var(--c-slate) / 50%);
    --slate-75: rgb(var(--c-slate) / 75%);
    --slate-dark-75: rgb(var(--c-slate-dark) / 75%);
    --slate-light-75: rgb(var(--c-slate-light) / 75%);
    --snow-70: rgb(var(--c-snow) / 70%);
    --snow-95: rgb(var(--c-snow) / 95%);
    --teal-15: rgb(var(--c-teal) / 15%);
    --teal-40: rgb(var(--c-teal) / 40%);
    --white-10: rgb(var(--c-white) / 10%);
    --white-35: rgb(var(--c-white) / 35%);
    --white-60: rgb(var(--c-white) / 60%);
    --white-80: rgb(var(--c-white) / 80%);
    --white-85: rgb(var(--c-white) / 85%);
    --white-90: rgb(var(--c-white) / 90%);
    --white-98: rgb(var(--c-white) / 98%);
    --abyss: rgb(var(--c-abyss));
    --blue: rgb(var(--c-blue));
    --blue-deep: rgb(var(--c-blue-deep));
    --blue-wash: rgb(var(--c-blue-wash));
    --body: rgb(var(--c-body));
    --cyan: rgb(var(--c-cyan));
    --cyan-deep: rgb(var(--c-cyan-deep));
    --emerald: rgb(var(--c-emerald));
    --green-deep: rgb(var(--c-green-deep));
    --ice: rgb(var(--c-ice));
    --mint-wash: rgb(var(--c-mint-wash));
    --navy: rgb(var(--c-navy));
    --navy-mid: rgb(var(--c-navy-mid));
    --notice-bg: rgb(var(--c-notice-bg));
    --ocean: rgb(var(--c-ocean));
    --ocean-deep: rgb(var(--c-ocean-deep));
    --red-deep: rgb(var(--c-red-deep));
    --rose-wash: rgb(var(--c-rose-wash));
    --scarlet: rgb(var(--c-scarlet));
    --slate-light: rgb(var(--c-slate-light));
    --snow: rgb(var(--c-snow));
    --white: rgb(var(--c-white));
    --accent: var(--cyan);
    --accent-strong: var(--cyan-deep);
    --amber: rgb(var(--c-amber));
    --border: var(--cyan-25);
    --border-glow: var(--cyan-25);
    --color-accent: var(--blue);
    --color-danger: var(--scarlet);
    --color-success: var(--emerald);
    --glass-border: var(--slate-18);
    --mint: rgb(var(--c-mint));
    --mint-soft: rgb(var(--c-mint-pale));
    --orange: rgb(var(--c-orange));
    --red: rgb(var(--c-crimson));
    --rose: rgb(var(--c-rose));
    --rose-light: rgb(var(--c-red));
    --rose-strong: rgb(var(--c-rose-hot));
    --shadow-card: 0 12px 40px var(--shadow-45);
    --shadow-soft: 0 20px 70px var(--shadow-45);
    --sky: rgb(var(--c-blue-mid));
    --surface: var(--navy-88);
    --surface-card: var(--navy-92);
    --text-muted: var(--slate-75);
    --text-primary: var(--snow);
    --text-secondary: var(--slate-light-75);
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    min-height: 100vh;
    font-family: Manrope, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text-primary);
    background-color: var(--body);
    overscroll-behavior-y: none;
    transition: color 0.3s ease, background-color 0.3s ease;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at top left, var(--navy-mid), var(--body) 55%, var(--abyss) 100%);
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background: radial-gradient(circle at top left, var(--ice), var(--slate-light) 55%, var(--snow) 100%);
    pointer-events: none;
  }

  [data-theme="light"] body::before {
    opacity: 0;
  }

  html {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

  html::-webkit-scrollbar {
    width: 8px;
  }

  html::-webkit-scrollbar-track {
    background: transparent;
  }

  html::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
  }

  html::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  .page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .main {
    flex: 1;
    width: min(1100px, 90vw);
    margin: 0 auto;
    padding-bottom: 4rem;
  }

  .main-centered {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav {
    width: min(1100px, 90vw);
    margin: 2.5rem auto 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 2.1rem;
    border-radius: 18px;
    backdrop-filter: blur(24px);
    background: linear-gradient(120deg, var(--navy-mid-78), var(--navy-92));
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .nav-brand {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
  }

  .nav-accent {
    width: 12px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--accent), var(--accent-strong));
    box-shadow: 0 0 18px var(--cyan-60);
  }

  .nav-title {
    font-size: clamp(1.45rem, 2.5vw, 1.8rem);
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .nav-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .nav-link {
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.2s ease, background 0.2s ease;
  }

  .nav-link:hover,
  .nav-link:focus-visible {
    color: var(--text-primary);
    background: var(--cyan-15);
  }

  .section-header {
    margin: 3.5rem 0 2rem;
  }

  .section-header h2 {
    margin: 0 0 0.5rem;
    font-size: clamp(1.7rem, 2.8vw, 2.1rem);
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
  }

  .section-header h2::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    box-shadow: 0 0 18px var(--cyan-45);
    border: 1px solid var(--white-35);
  }

  .section-header p {
    margin: 0;
    color: var(--text-secondary);
    max-width: 640px;
    line-height: 1.6;
    font-size: 1.05rem;
  }

  input,
  textarea,
  select {
    font-family: inherit;
    border-radius: 12px;
    border: 1px solid var(--slate-25);
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    background: var(--navy-65);
    color: var(--text-primary);
  }

  textarea {
    resize: vertical;
    min-height: 2.75rem;
    max-height: 60vh;
    field-sizing: content;
    overflow-y: auto;
  }

  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .form-group {
    margin-bottom: 0.8rem;
    display: flex;
    flex-direction: column;
  }

  .form-group label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-secondary);
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    width: 100%;
  }

  .form-submit {
    align-self: flex-end;
  }

  .dialog-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
  }

  .toggle {
    position: relative;
    display: inline-block;
    width: 2.75rem;
    height: 1.5rem;
    flex-shrink: 0;
  }

  .toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
  }

  .toggle-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--red-12);
    border: 1px solid var(--red-35);
    transition: background 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
  }

  .toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: var(--rose-light);
    transition: transform 0.2s ease, background 0.2s ease;
  }

  .toggle input:checked+.toggle-track {
    background: var(--green-12);
    border-color: var(--green-35);
  }

  .toggle input:checked+.toggle-track::after {
    transform: translateX(1.25rem);
    background: var(--mint);
  }

  .section-search {
    margin: 0.5rem 0 0;
  }

  .section-search input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
    color: var(--text-primary);
    font-size: 0.95rem;
    width: 260px;
    max-width: 100%;
    outline: none;
    transition: border-color 0.15s;
  }

  .section-search input:focus {
    border-color: var(--accent);
  }

  .sections {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
  }

  .hero {
    position: relative;
    padding: 4rem 0 3rem;
  }

  .hero-background {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background:
      radial-gradient(circle at 20% 20%, var(--cyan-30), transparent 50%),
      radial-gradient(circle at 80% 0%, var(--cyan-deep-25), transparent 45%),
      linear-gradient(160deg, var(--navy-88), var(--navy-65));
    border: 1px solid var(--cyan-15);
    box-shadow: 0 24px 80px var(--cyan-deep-25);
    z-index: 0;
  }

  .hero-content {
    position: relative;
    z-index: 1;
    padding: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.6rem;
    flex-wrap: wrap;
  }

  .hero-copy {
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .hero-eyebrow {
    margin: 0;
    font-size: 0.95rem;
    letter-spacing: 0.12em;
    color: var(--slate-75);
  }

  .hero-greeting {
    margin: 0;
    font-size: clamp(3.1rem, 6vw, 3.9rem);
    line-height: 1.05;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .hero-subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
  }

  .hero-media {
    flex: 0 0 auto;
    width: clamp(140px, 18vw, 190px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 6px;
    background:
      radial-gradient(circle at 35% 25%, var(--blue-55), transparent 65%),
      radial-gradient(circle at 70% 70%, var(--teal-40), transparent 60%),
      var(--navy-92);
    border: 1px solid var(--cyan-35);
    box-shadow: 0 25px 60px var(--ocean-35);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .hero-media::after {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    border: 1px solid var(--slate-25);
    pointer-events: none;
  }

  .hero-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 12px 30px var(--navy-35);
  }

  .list {
    margin: 2.8rem auto 0;
  }

  .list-empty {
    margin: 1.6rem 0 0;
    color: var(--text-muted);
    font-size: 0.95rem;
  }

  .list-items-spaced {
    margin-bottom: 1rem;
  }

  .list-items {
    list-style: none;
    margin: 1.8rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .list-item {
    display: grid;
    grid-template-columns: minmax(0, 20%) 1fr auto;
    align-items: center;
    gap: 0 0.6rem;
    padding: 1.1rem 1.35rem;
    border-radius: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-soft);
    transition: background 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
  }

  .list-item.has-icon {
    grid-template-columns: auto minmax(0, 20%) 1fr auto;
  }

  .list-item.has-check {
    grid-template-columns: auto minmax(0, 20%) 1fr auto;
  }

  .list-item.has-check.has-icon {
    grid-template-columns: auto auto minmax(0, 20%) 1fr auto;
  }

  .list-item.table-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .list-item.selected {
    border-color: var(--cyan-45);
    background: var(--cyan-10);
    box-shadow: 0 0 0 1px var(--cyan-25), var(--shadow-soft);
  }

  .list-item.focused {
    border-color: var(--cyan-60);
    box-shadow: 0 0 0 2px var(--cyan-35), var(--shadow-soft);
  }

  .list-check {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid var(--slate-35);
    background: transparent;
    flex: 0 0 auto;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    position: relative;
  }

  .list-check:hover {
    border-color: var(--accent);
  }

  .list-item.selected .list-check {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
  }

  .list-item.selected .list-check::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .list-stacked .list-item {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .list-stacked .list-items {
    width: 100%;
  }

  .list-dot {
    position: relative;
    padding-left: 2.6rem;
  }

  .list-dot::before {
    content: "";
    position: absolute;
    left: 1.2rem;
    top: 1.2rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    box-shadow: 0 0 18px var(--cyan-45);
    border: 1px solid var(--white-35);
  }

  .list-route {
    font-weight: 600;
    letter-spacing: 0.02em;
    font-size: 1rem;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  .list-main {
    min-width: 0;
  }

  .list-item [data-toggle-section-visible] {
    margin-left: auto;
  }

  .list-icon {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--navy-65);
    border: 1px solid var(--slate-25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 1.1rem;
    flex: 0 0 auto;
  }

  .list-icon-img {
    transition: opacity 0.2s ease;
  }

  .list-icon-img svg,
  .list-icon-img img {
    width: 28px;
    height: 28px;
    display: block;
  }

  .list-icon.has-thumb .list-icon-img {
    opacity: 0;
  }

  .list-icon > img,
  .list-icon > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .list-buttons {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .list-item.list-item-info .list-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(90px, max-content));
    justify-content: end;
    gap: 0.5rem;
  }

  .list-item.list-item-info .list-buttons .action-label {
    visibility: hidden;
    pointer-events: none;
    min-width: 90px;
  }

  .list-col-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .list-preview {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--navy-65);
    border: 1px solid var(--slate-25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 1.1rem;
    flex: 0 0 auto;
  }

  .list-preview-icon {
    transition: opacity 0.2s ease;
  }

  .list-preview-icon svg,
  .list-preview-icon img {
    width: 28px;
    height: 28px;
    display: block;
  }

  .list-preview.has-thumb .list-preview-icon {
    opacity: 0;
  }

  .list-preview > img,
  .list-preview > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .media-viewer {
    width: 100%;
    margin-top: 0.6rem;
    display: flex;
    justify-content: center;
  }

  .media-viewer img,
  .media-viewer video {
    max-width: 100%;
    border-radius: 16px;
    border: 1px solid var(--slate-25);
    box-shadow: var(--shadow-soft);
  }

  .media-viewer audio {
    width: min(520px, 100%);
  }

  .media-viewer img {
    cursor: pointer;
  }

  .lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--black-90);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .lightbox img {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    border-radius: 8px;
  }

  .list-status {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.95rem;
  }

  .cards-grid {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .cards-item {
    position: relative;
    background: var(--surface-card);
    border-radius: 20px;
    padding: 2.1rem 2rem 2rem;
    border: 1px solid var(--cyan-10);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    transition: box-shadow 0.25s ease;
    color: var(--text-primary);
  }

  .cards-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 1px solid var(--border-glow);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }

  .cards-item:hover::before {
    opacity: 1;
  }

  .dialog::before {
    display: none;
  }

  .cards-body {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }

  .cards-header {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .cards-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--navy-65);
    border: 1px solid var(--slate-25);
    box-shadow: 0 6px 20px var(--navy-35);
  }

  .cards-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 600;
  }

  .cards-description {
    margin: 0.6rem 0 0;
    color: var(--text-secondary);
    line-height: 1.65;
  }

  .cards-subtitle {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.65;
  }

  .label-large {
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
  }

  .cards-controls {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 1rem;
  }

  .list-stacked .cards-controls {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 1rem;
  }

  .cards-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    flex-wrap: wrap;
    justify-self: end;
  }

  .control-row>.cards-actions,
  .control-row>.control-group.cards-actions {
    margin-left: 0;
    flex-grow: 1;
    justify-content: flex-end;
  }

  .control-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .control-row h2 {
    margin-bottom: 0;
  }

  .control-group {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    min-width: 0;
  }

  .control-row>.control-group:last-child {
    flex-shrink: 0;
  }

  .control-group .section-search {
    margin: 0;
  }

  .share-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }

  .share-owner {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sky);
    background: var(--ocean-12);
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
  }

  .list-meta {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
  }

  .status-badge {
    font-size: 0.75rem;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  }

  .status-ready {
    color: var(--color-success);
    background: color-mix(in srgb, var(--color-success) 12%, transparent);
    cursor: pointer;
  }

  .status-ready:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--color-success) 25%, transparent);
    border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-success) 30%, transparent);
  }

  .status-pending {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-secondary) 10%, transparent);
    cursor: default;
    opacity: 0.5;
  }

  .status-building {
    color: var(--amber);
    background: color-mix(in srgb, var(--amber) 12%, transparent);
    cursor: default;
  }

  .status-error {
    color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
    cursor: pointer;
  }

  .status-error:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--color-danger) 25%, transparent);
    border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
    box-shadow: 0 14px 36px color-mix(in srgb, var(--color-danger) 30%, transparent);
  }

  .day-control {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
  }

  .foul-count {
    font-size: 1.15rem;
    vertical-align: middle;
  }

  .cards-item:hover {
    box-shadow: 0 16px 50px var(--ocean-25);
  }

  .cards-pending {
    cursor: default;
    opacity: 0.85;
    filter: grayscale(0.3);
    pointer-events: none;
  }

  .cards-pending::before {
    opacity: 0;
  }

  .cards-badge {
    display: inline-block;
    align-self: flex-start;
    margin-top: 0.5rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--amber);
    border: 1px solid var(--amber);
    border-radius: 1rem;
    opacity: 0.85;
  }

  .cards-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .config-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .config-textarea {
    width: 100%;
    min-height: 900px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    field-sizing: fixed;
    overflow-y: auto;
  }

  .notice-textarea {
    min-height: 3rem;
    field-sizing: content;
  }

  .composer {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }

  .line-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .line-row {
    display: grid;
    grid-template-columns: minmax(6rem, 1fr) minmax(0, 5fr) auto;
    gap: 0.6rem;
    align-items: stretch;
  }

  .button,
  button,
  .action-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 999px;
    border: 1px solid transparent;
    padding: 0.4rem 0.95rem;
    background: var(--cyan-10);
    color: var(--accent);
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }

  [hidden] {
    display: none;
  }

  .action-select {
    appearance: none;
    display: inline-block;
    outline: none;
    height: auto;
    line-height: normal;
    text-align: center;
  }

  .action-select:focus,
  .action-select:focus-visible {
    outline: none;
  }

  .button:hover,
  .button:focus-visible,
  button:hover,
  button:focus-visible,
  .action-select:hover {
    transform: translateY(-1px);
    color: var(--text-primary);
    background: var(--cyan-25);
    border-color: var(--cyan-35);
    box-shadow: 0 14px 36px var(--cyan-30);
  }

  .button:disabled,
  button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
    transform: none;
  }

  a:focus-visible,
  button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  button.line-add {
    margin-right: auto;
  }

  button.line-remove {
    background: var(--red-12);
    color: var(--rose-light);
  }

  button.line-remove:hover,
  button.line-remove:focus-visible {
    background: var(--red-25);
    border-color: var(--red-35);
    color: var(--rose-wash);
    box-shadow: 0 14px 36px var(--red-30);
  }

  .button-success {
    background: var(--green-12);
    color: var(--mint);
  }

  .button-success:hover,
  .button-success:focus-visible {
    background: var(--green-25);
    border-color: var(--green-35);
    color: var(--mint-wash);
    box-shadow: 0 14px 36px var(--green-30);
  }

  .list-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
  }

  .notice {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    z-index: 1200;
    width: min(560px, calc(100vw - 2rem));
    padding: 1rem 1.4rem;
    border-radius: 18px;
    border: 1px solid var(--slate-18);
    background: var(--notice-bg);
    color: var(--text-primary);
    box-shadow: 0 12px 40px var(--shadow-blue-28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .notice>span {
    flex: 1;
    min-width: 0;
  }

  .notice[hidden] {
    display: none;
  }

  .notice-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    animation: notice-slide 0.25s ease;
  }

  @keyframes notice-slide {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }

  .notice-error {
    background: var(--red-dark-85);
    border-color: var(--red-35);
    color: var(--rose-wash);
  }

  .notice-success {
    background: var(--green-dark-85);
    border-color: var(--green-30);
    color: var(--mint-wash);
  }

  .notice-info {
    background: var(--blue-deep-85);
    border-color: var(--blue-mid-35);
    color: var(--blue-wash);
  }

  .notice-progress {
    padding-top: calc(1rem + 4px);
  }

  .notice-cancel {
    flex-shrink: 0;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.5;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1;
  }

  .notice-cancel:hover {
    opacity: 1;
    background: none;
  }

  .notice-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 18px 18px 0 0;
    overflow: hidden;
  }

  .notice-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width 0.15s;
    border-radius: 18px 0 0;
  }

  .notice-progress-fill.indeterminate {
    width: 30%;
    animation: indeterminate-progress 1.5s ease-in-out infinite;
  }

  @keyframes indeterminate-progress {
    0% {
      transform: translateX(-100%);
    }

    100% {
      transform: translateX(400%);
    }
  }

  .notice-stack {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    width: min(560px, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
  }

  .notice-stack>.notice {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    z-index: auto;
    pointer-events: auto;
  }

  .notice-stack>.notice-visible {
    transform: none;
    animation: notice-stack-slide 0.25s ease;
  }

  @keyframes notice-stack-slide {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  .global-notice {
    padding: 0.75rem 1.4rem;
    border-radius: 18px;
    border: 1px solid var(--slate-18);
    background: var(--notice-bg);
    color: var(--text-primary);
    margin: 0 auto 1rem;
    max-width: min(1100px, 90vw);
    width: calc(100% - 3rem);
    text-align: center;
  }

  .global-notice-error {
    background: var(--red-dark-85);
    border-color: var(--red-35);
    color: var(--rose-wash);
  }

  .global-notice-success {
    background: var(--green-dark-85);
    border-color: var(--green-30);
    color: var(--mint-wash);
  }

  .global-notice-info {
    background: var(--blue-deep-85);
    border-color: var(--blue-mid-35);
    color: var(--blue-wash);
  }

  .dialog-overlay {
    position: fixed;
    inset: 0;
    background: var(--deep-70);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1000;
  }

  .dialog-overlay[hidden] {
    display: none;
  }

  .dropdown {
    position: relative;
    display: inline-flex;
  }

  .dropdown-trigger {
    cursor: pointer;
  }

  .color-error {
    background: var(--red-12);
    color: var(--rose-light);
  }

  .color-success {
    background: var(--green-12);
    color: var(--mint);
  }

  .color-info {
    background: var(--cyan-10);
    color: var(--accent);
  }

  .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.35rem;
    min-width: 9rem;
    border-radius: 12px;
    background: var(--navy-98);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-card);
    padding: 0.35rem;
    z-index: 200;
    display: none;
  }

  .dropdown-menu.dropdown-open {
    display: block;
  }

  .dropdown-menu.dropdown-above {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.35rem;
  }

  .dropdown-menu.dropdown-open.dropdown-split {
    display: flex;
    padding: 0;
  }

  .dropdown-clipboard,
  .dropdown-actions {
    padding: 0.35rem;
  }

  .dropdown-clipboard {
    border-right: 1px solid var(--glass-border);
    min-width: 13.5rem;
  }

  .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .dropdown-item:hover {
    background: var(--cyan-10);
    color: var(--text-primary);
  }

  .dropdown-item.dropdown-active {
    font-weight: 600;
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  }

  .dropdown-success .dropdown-menu {
    background: var(--green-12);
    border-color: var(--green-35);
  }

  .dropdown-success .dropdown-item:hover {
    background: var(--green-25);
    color: var(--mint);
  }

  .styled-select {
    position: relative;
    width: 100%;
  }

  .styled-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    border-radius: 12px;
    border: 1px solid var(--slate-25);
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    background: var(--navy-65);
    color: var(--text-primary);
  }

  .styled-select-trigger::after {
    content: "\25BE";
    opacity: 0.5;
    font-size: 0.8em;
    margin-left: 0.5rem;
  }

  .styled-select .dropdown-menu {
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

  .clipboard-remove {
    flex-shrink: 0;
    opacity: 0.5;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.15s ease;
  }

  .clipboard-remove:hover {
    opacity: 1;
  }

  .dialog {
    width: min(520px, 92vw);
    margin: auto;
    box-shadow: 0 24px 80px var(--shadow-blue-45);
  }

  .dialog-wide {
    width: min(600px, 92vw);
  }

  .dialog-message {
    white-space: pre-line;
    max-height: 60vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

  .dialog-message::-webkit-scrollbar {
    width: 6px;
  }

  .dialog-message::-webkit-scrollbar-track {
    background: transparent;
  }

  .dialog-message::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }

  .dialog-input {
    width: 100%;
    margin-top: 0.75rem;
  }

  .control-row>.dialog-input {
    margin-top: 0;
  }

  .dialog-input[type="number"] {
    appearance: textfield;
  }

  .dialog-input[type="number"]::-webkit-inner-spin-button,
  .dialog-input[type="number"]::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
  }

  .dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
  }

  .details-dialog {
    max-width: 380px;
  }

  .details-preview {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0 0.25rem;
    overflow: hidden;
  }

  .details-preview img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 12px;
    image-orientation: from-image;
  }

  .details-stats {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 1rem 0 0.25rem;
  }

  .details-row {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    font-size: 0.92rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border);
  }

  .details-row:last-child {
    border-bottom: none;
  }

  .details-label {
    color: var(--text-muted);
    font-weight: 500;
    flex-shrink: 0;
  }

  .details-value {
    text-align: right;
    word-break: break-all;
    color: var(--text-primary);
  }

  .dialog-body {
    margin: 1rem 0;
    padding: 0 4px;
  }

  .dialog-field {
    margin-bottom: 1rem;
  }

  .dialog-field label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 500;
  }

  .dialog-field textarea {
    width: 100%;
    min-height: 3rem;
    box-sizing: border-box;
  }

  .dialog-field textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .dialog-required {
    color: var(--red);
  }

  .search-field {
    position: relative;
  }

  .search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--navy);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-top: 4px;
    z-index: 10;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }

  .search-results::-webkit-scrollbar {
    width: 6px;
  }

  .search-results::-webkit-scrollbar-track {
    background: transparent;
  }

  .search-results::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
  }

  .search-result-item {
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    font-size: 0.95rem;
  }

  .search-result-item:hover,
  .search-result-item.search-result-active {
    background: var(--cyan-10);
  }

  .search-result-item.selected {
    background: var(--cyan-15);
    color: var(--accent);
  }

  .search-results-empty {
    padding: 0.5rem 0.85rem;
    color: var(--text-muted);
    font-size: 0.9rem;
  }

  .datetime-field {
    position: relative;
  }

  .datetime-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    margin-top: 4px;
    width: 280px;
    padding: 0.75rem;
    background: var(--navy);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
  }

  .datetime-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }

  .datetime-nav-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.2rem;
    border-radius: 8px;
    background: var(--cyan-10);
    color: var(--accent);
    border: none;
    cursor: pointer;
  }

  .datetime-nav-btn:hover {
    background: var(--cyan-25);
    color: var(--text-primary);
  }

  .datetime-nav-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
  }

  .datetime-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
  }

  .datetime-day-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 0.25rem 0;
  }

  .datetime-day {
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0;
    background: none;
    color: var(--text-primary);
    border: none;
    cursor: pointer;
  }

  .datetime-day:hover {
    background: var(--cyan-10);
  }

  .datetime-today {
    border: 1px solid var(--slate-25);
  }

  .datetime-selected {
    background: var(--accent);
    color: var(--white);
  }

  .datetime-selected:hover {
    background: var(--accent-strong);
  }

  .datetime-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--slate-25);
  }

  .datetime-time-input {
    width: 3rem;
    text-align: center;
    padding: 0.35rem 0.25rem;
    font-size: 0.95rem;
    border-radius: 8px;
  }

  .datetime-time-sep {
    font-weight: 600;
    color: var(--text-secondary);
  }

  .section-actions-bar {
    display: flex;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
    flex-wrap: wrap;
  }

  .list-item:not(.selected, .list-item-info, :has(.dropdown-open)):hover {
    background: var(--cyan-10);
    border-color: var(--cyan-35);
  }

  .list-item-info {
    cursor: default;
  }

  .list-value {
    color: var(--text-secondary);
    font-size: 0.95rem;
    text-align: right;
  }

  .list-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
  }

  .tree-node {
    position: relative;
  }

  .tree-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    width: 1.5rem;
    text-align: center;
    color: var(--text-secondary);
    transition: transform 0.15s;
    padding: 0;
    line-height: 1;
  }

  .tree-toggle.expanded {
    transform: rotate(90deg);
  }

  .tree-item {
    display: flex;
    gap: 0 0.6rem;
    justify-content: flex-start;
  }

  .tree-item .tree-toggle {
    flex: 0 0 auto;
    margin-right: 0.15rem;
  }

  .tree-item .list-route {
    flex: 0 1 auto;
  }

  .tree-item .list-description {
    margin-left: auto;
    text-align: right;
  }

  .tree-children {
    margin-top: 1rem;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .tree-children[hidden] {
    display: none;
  }

  .tree-children>.list-empty {
    padding-left: 1.5rem;
  }

  .tree-children>.list-empty:only-child {
    margin: 0;
  }

  .tree-ancestor .list-route {
    opacity: 0.5;
  }

  .search-selected::placeholder {
    color: var(--text-primary);
    opacity: 1;
  }

  .multi-search-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    min-height: 38px;
    cursor: text;
    background: inherit;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 0.75rem;
  }

  .multi-search-container:focus-within {
    outline: none;
  }

  .multi-search-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--white-10);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    user-select: none;
  }

  .multi-search-chip-remove {
    cursor: pointer;
    opacity: 0.6;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    padding: 0 2px;
  }

  .multi-search-chip-remove:hover {
    opacity: 1;
  }

  .multi-search-input {
    flex: 1;
    min-width: 80px;
    border: none;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
    padding: 2px 0;
  }

  .multi-search-input:focus-visible {
    outline: none;
  }

  .identity-form {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .identity-form button[type="submit"] {
    margin-top: auto;
    align-self: flex-end;
  }

  .status {
    text-align: center;
    background: var(--navy-80);
    padding: 3rem;
    border-radius: 24px;
    border: 1px solid var(--cyan-15);
    box-shadow: var(--shadow-card);
    max-width: 460px;
  }

  .status-label {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--text-muted);
    font-size: 0.8rem;
  }

  .status-title {
    margin: 1rem 0;
    font-size: 2rem;
    letter-spacing: 0.015em;
  }

  .status-message {
    margin: 0 0 2rem;
    color: var(--text-secondary);
    line-height: 1.7;
  }

  .status-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .footer {
    margin-top: auto;
    padding: 2.5rem 0 3rem;
  }

  .footer-content {
    width: min(1100px, 90vw);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-muted);
    flex-wrap: wrap;
  }

  .footer-copy {
    margin: 0;
  }

  .main-centered .cards-item::before,
  .cards-static .cards-item::before {
    opacity: 0;
  }

  .main-centered .section-header {
    margin: 0;
  }

  .main-centered .cards-actions {
    width: 100%;
    margin-top: 0.6rem;
  }

  .main-centered .cards-item .button {
    width: 100%;
    justify-content: center;
  }

  .login-form {
    margin-top: 0.6rem;
  }

  .login-field {
    margin-bottom: 0.75rem;
  }

  .login-field .dialog-input {
    width: 100%;
  }

  .login-error {
    color: var(--red);
    font-size: 0.9rem;
    margin: 0 0 0.75rem;
  }

  .login-submit {
    width: 100%;
    justify-content: center;
  }

  .table-wrap {
    overflow-x: auto;
    margin-top: 1.2rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    max-width: 100%;
  }

  .table-wrap::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
  }

  .data-table th,
  .data-table td {
    text-align: center;
    padding: 0.65rem 0.5rem;
    border-bottom: 1px solid var(--slate-18);
    font-size: 0.95rem;
  }

  .data-table th {
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78rem;
  }

  .data-table td {
    color: var(--text-primary);
    background: var(--navy-55);
  }

  .standing-table th,
  .standing-table td {
    white-space: nowrap;
  }

  .members-table th:nth-child(3) {
    text-align: center;
  }

  .members-table td:nth-child(4),
  .members-table th:nth-child(4) {
    text-align: center;
    width: 1%;
    white-space: nowrap;
  }

  .members-table td:last-child {
    width: 1%;
    white-space: nowrap;
    padding-left: 0.5rem;
  }

  .data-table tr:last-child td,
  .data-table tr:last-child th {
    border-bottom: none;
  }

  .data-table .standing-col-name {
    text-align: left;
    min-width: 140px;
  }

  .standing-col-meta {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--text-muted);
  }

  .standing-rank {
    font-weight: 700;
    color: var(--accent);
  }

  .standing-score {
    font-variant-numeric: tabular-nums;
  }

  .standing-total {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .standing-manual {
    color: var(--accent-strong);
    text-shadow: 0 0 12px var(--cyan-deep-25);
  }

  [data-theme="light"] .standing-manual {
    text-shadow: none;
  }

  .theme-toggle {
    background: none;
    border: none;
    padding: 0.4rem;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 0;
    line-height: 0;
  }

  .theme-toggle:hover,
  .theme-toggle:focus-visible {
    color: var(--text-primary);
    background: var(--cyan-15);
    transform: none;
    box-shadow: none;
    border-color: transparent;
  }

  .theme-icon-moon {
    display: none;
  }

  [data-theme="light"] .theme-icon-sun {
    display: none;
  }

  [data-theme="light"] .theme-icon-moon {
    display: block;
  }

  [data-theme="light"] {
    --accent: var(--ocean);
    --accent-strong: var(--ocean-deep);
    --surface: var(--white-85);
    --surface-card: var(--white-90);
    --border: var(--silver-50);
    --border-glow: var(--cyan-deep-15);
    --glass-border: var(--silver-45);
    --text-primary: var(--navy-mid);
    --text-secondary: var(--gray-85);
    --text-muted: var(--slate-dark-75);
    --shadow-soft: 0 20px 70px var(--black-8);
    --shadow-card: 0 12px 40px var(--black-8);
  }

  [data-theme="light"] body {
    background-color: var(--ice);
  }

  [data-theme="light"] .nav {
    background: linear-gradient(120deg, var(--white-85), var(--snow-95));
  }

  [data-theme="light"] .nav-accent {
    box-shadow: 0 0 14px var(--ocean-35);
  }

  [data-theme="light"] .nav-link:hover,
  [data-theme="light"] .nav-link:focus-visible {
    background: var(--ocean-12);
  }

  [data-theme="light"] .section-header h2::before {
    box-shadow: 0 0 12px var(--ocean-25);
    border-color: var(--white-60);
  }

  [data-theme="light"] .hero-background {
    background:
      radial-gradient(circle at 20% 20%, var(--cyan-deep-15), transparent 50%),
      radial-gradient(circle at 80% 0%, var(--ocean-12), transparent 45%),
      linear-gradient(160deg, var(--white-85), var(--ice-90));
    border-color: var(--silver-50);
    box-shadow: 0 24px 80px var(--black-8);
  }

  [data-theme="light"] .hero-eyebrow {
    color: var(--slate-dark-75);
  }

  [data-theme="light"] .hero-media {
    background:
      radial-gradient(circle at 35% 25%, var(--blue-20), transparent 65%),
      radial-gradient(circle at 70% 70%, var(--teal-15), transparent 60%),
      var(--ice-90);
    border-color: var(--silver-50);
    box-shadow: 0 25px 60px var(--black-8);
  }

  [data-theme="light"] .hero-media::after {
    border-color: var(--silver-45);
  }

  [data-theme="light"] .hero-avatar {
    box-shadow: 0 12px 30px var(--black-10);
  }

  [data-theme="light"] .list-item.selected {
    border-color: var(--ocean-35);
    background: var(--ocean-8);
    box-shadow: 0 0 0 1px var(--ocean-25), var(--shadow-soft);
  }

  [data-theme="light"] .list-item.focused {
    border-color: var(--ocean-50);
    box-shadow: 0 0 0 2px var(--ocean-25), var(--shadow-soft);
  }

  [data-theme="light"] .list-item .list-check {
    border-color: var(--slate-50);
  }

  [data-theme="light"] .list-preview {
    background: var(--ice-80);
    border-color: var(--silver-45);
  }

  [data-theme="light"] .list-dot::before {
    box-shadow: 0 0 12px var(--ocean-25);
    border-color: var(--white-60);
  }

  [data-theme="light"] .cards-item {
    border-color: var(--silver-50);
  }

  [data-theme="light"] .search-results {
    background: var(--white);
  }

  [data-theme="light"] .multi-search-chip {
    background: var(--black-8);
  }

  [data-theme="light"] .cards-avatar {
    background: var(--ice-80);
    border-color: var(--silver-45);
    box-shadow: 0 6px 20px var(--black-8);
  }

  [data-theme="light"] .cards-item:hover {
    box-shadow: 0 16px 50px var(--ocean-12);
  }

  [data-theme="light"] input:not(:disabled),
  [data-theme="light"] textarea:not(:disabled),
  [data-theme="light"] select:not(:disabled) {
    background: var(--white-80);
    border-color: var(--silver-60);
  }

  [data-theme="light"] .page .button,
  [data-theme="light"] .page button,
  [data-theme="light"] .page .action-select {
    background: var(--ocean-8);
  }

  [data-theme="light"] .page .theme-toggle {
    background: none;
  }

  [data-theme="light"] .page .theme-toggle:hover,
  [data-theme="light"] .page .theme-toggle:focus-visible {
    background: var(--ocean-12);
    border-color: transparent;
    box-shadow: none;
  }

  [data-theme="light"] .button:hover,
  [data-theme="light"] .button:focus-visible,
  [data-theme="light"] button:hover,
  [data-theme="light"] button:focus-visible,
  [data-theme="light"] .action-select:hover {
    background: var(--ocean-15);
    border-color: var(--ocean-35);
    box-shadow: 0 14px 36px var(--ocean-12);
  }

  [data-theme="light"] .button-success {
    color: var(--color-success);
  }

  [data-theme="light"] .button-success:hover,
  [data-theme="light"] .button-success:focus-visible {
    background: var(--green-18);
    border-color: var(--green-30);
    color: var(--green-deep);
    box-shadow: 0 14px 36px var(--green-12);
  }

  [data-theme="light"] button.line-remove {
    color: var(--color-danger);
  }

  [data-theme="light"] button.line-remove:hover,
  [data-theme="light"] button.line-remove:focus-visible {
    background: var(--crimson-12);
    border-color: var(--crimson-35);
    color: var(--red-deep);
    box-shadow: 0 14px 36px var(--crimson-12);
  }

  [data-theme="light"] .notice {
    background: var(--white-98);
    border-color: var(--silver-50);
    box-shadow: 0 12px 40px var(--black-10);
  }

  [data-theme="light"] .notice-error {
    background: var(--rose-wash-95);
    border-color: var(--crimson-35);
    color: var(--red-deep);
  }

  [data-theme="light"] .notice-info {
    background: var(--blue-wash-95);
    border-color: var(--blue-mid-35);
    color: var(--blue-deep);
  }

  [data-theme="light"] .notice-success,
  [data-theme="light"] .global-notice-success {
    background: var(--mint-wash-95);
    border-color: var(--green-35);
    color: var(--green-deep);
  }

  [data-theme="light"] .global-notice {
    background: var(--ice-95);
    border-color: var(--slate-25);
  }

  [data-theme="light"] .global-notice-error {
    background: var(--rose-wash-95);
    border-color: var(--red-35);
    color: var(--red-deep);
  }

  [data-theme="light"] .global-notice-info {
    background: var(--blue-wash-95);
    border-color: var(--blue-mid-35);
    color: var(--blue-deep);
  }

  [data-theme="light"] .color-error {
    background: var(--red-12);
    color: var(--color-danger);
  }

  [data-theme="light"] .color-success {
    background: var(--green-12);
    color: var(--color-success);
  }

  [data-theme="light"] .color-info {
    background: var(--cyan-15);
    color: var(--accent);
  }

  [data-theme="light"] .dialog-overlay {
    background: var(--black-25);
  }

  [data-theme="light"] .dropdown-menu {
    background: var(--white-98);
  }

  [data-theme="light"] .dropdown-item:hover {
    background: var(--ocean-8);
  }

  [data-theme="light"] .dropdown-success .dropdown-menu {
    background: var(--green-8);
    border-color: var(--green-30);
  }

  [data-theme="light"] .dropdown-success .dropdown-item:hover {
    background: var(--green-18);
    color: var(--green-deep);
  }

  [data-theme="light"] .styled-select-trigger {
    background: var(--white-80);
    border-color: var(--silver-60);
  }

  [data-theme="light"] .status {
    background: var(--white-85);
    border-color: var(--silver-50);
  }

  [data-theme="light"] .data-table tr th,
  [data-theme="light"] .data-table tr td {
    border-bottom-color: var(--silver-50);
  }

  [data-theme="light"] .data-table tr td {
    background: var(--snow-70);
  }

  [data-theme="light"] .list-item:not(.selected, .list-item-info, :has(.dropdown-open)):hover {
    background: var(--ocean-8);
    border-color: var(--ocean-25);
  }

  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.35rem;
    margin: 2.5rem 0 1rem;
    flex-wrap: wrap;
  }

  .pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 2.4rem;
    padding: 0 0.6rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
  }

  a.pagination-btn:hover,
  a.pagination-btn:focus-visible {
    color: var(--text-primary);
    background: var(--cyan-10);
    border-color: var(--cyan-25);
  }

  .pagination-current {
    background: var(--accent);
    color: var(--white);
    border-color: var(--accent);
    cursor: default;
  }

  .pagination-disabled {
    opacity: 0.35;
    cursor: default;
  }

  .pagination-ellipsis {
    color: var(--text-muted);
    padding: 0 0.25rem;
    font-size: 0.9rem;
    user-select: none;
  }

  [data-theme="light"] .pagination-current {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
  }

  @media (width <=900px) {
    .nav {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
    }

    .nav-links {
      width: 100%;
      justify-content: space-between;
    }

    .hero-content {
      padding: 2.4rem;
      justify-content: center;
      text-align: center;
    }

    .hero-copy {
      align-items: center;
    }

    .hero-greeting {
      font-size: clamp(2.4rem, 7vw, 3rem);
    }
  }

  @media (width <=600px) {
    .nav {
      padding: 1.5rem;
    }

    .hero-content {
      padding: 2rem 1.6rem;
    }

    .hero-media {
      width: clamp(120px, 28vw, 160px);
    }

    .section-header {
      margin: 3.2rem 0 1.4rem;
    }

    .status {
      padding: 2.4rem 1.6rem;
    }
  }
}

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  transition-delay: 0s;
}