:root {
      color-scheme: dark;
      --bg: #0e0917;
      --side: #140d22;
      --panel: rgba(28, 20, 44, .92);
      --panel-2: rgba(42, 29, 64, .92);
      --ink: #f6f1ff;
      --muted: #b8abc9;
      --line: rgba(197, 155, 255, .2);
      --accent: #a855f7;
      --accent-2: #d946ef;
      --accent-dark: #7e22ce;
      --blue: #38bdf8;
      --orange: #fb923c;
      --danger: #fb7185;
      --good: #e9d5ff;
      --shadow: 0 18px 48px rgba(0, 0, 0, .35);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      height: 100vh;
      overflow: hidden;
      color: var(--ink);
      background:
        radial-gradient(circle at 82% 8%, rgba(168, 85, 247, .28), transparent 32%),
        radial-gradient(circle at 18% 18%, rgba(56, 189, 248, .14), transparent 27%),
        linear-gradient(135deg, #090612 0%, #150b24 48%, #06030b 100%);
    }

    body.theme-football-light {
      color-scheme: light;
      --bg: #f5fbef;
      --side: rgba(238, 249, 228, .9);
      --panel: rgba(255, 255, 255, .88);
      --panel-2: rgba(234, 247, 224, .92);
      --ink: #17301d;
      --muted: #5b705e;
      --line: rgba(48, 128, 65, .22);
      --accent: #2f9e44;
      --accent-2: #86c232;
      --accent-dark: #226b36;
      --blue: #1479a8;
      --orange: #d97706;
      --danger: #b42335;
      --good: #276749;
      --shadow: 0 18px 42px rgba(32, 74, 38, .16);
      color: var(--ink);
      background:
        radial-gradient(circle at 20% 18%, rgba(255,255,255,.32), transparent 28%),
        radial-gradient(circle at 82% 78%, rgba(47,158,68,.16), transparent 34%),
        linear-gradient(135deg, #f8fff2 0%, #edf9e5 45%, #d9f0cf 100%);
    }

    button, input, select, textarea { font: inherit; }

    button {
      border: 0;
      border-radius: 8px;
      padding: 10px 12px;
      color: #fff;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(168, 85, 247, .2);
    }

    button:hover { filter: brightness(1.08); }
    button.secondary { color: var(--ink); background: rgba(255,255,255,.06); border: 1px solid var(--line); box-shadow: none; }
    button.danger { background: var(--danger); }
    button.mini { padding: 7px 9px; font-size: 12px; }

    input, select, textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px 11px;
      color: var(--ink);
      background: rgba(255,255,255,.07);
      outline: none;
    }

    textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
    input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(168, 85, 247, .18); }

    .app {
      height: 100vh;
      display: grid;
      grid-template-columns: 246px minmax(0, 1fr) 370px;
      min-width: 0;
    }

    aside {
      min-height: 0;
      border-right: 1px solid var(--line);
      background: rgba(12, 8, 20, .78);
      backdrop-filter: blur(18px);
      padding: 16px;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      gap: 14px;
    }

    main {
      min-width: 0;
      height: 100vh;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;
    }

    .assistant {
      min-height: 0;
      border-left: 1px solid var(--line);
      background: rgba(14, 9, 23, .7);
      backdrop-filter: blur(18px);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
    }

    body.theme-football-light aside,
    body.theme-football-light .assistant,
    body.theme-football-light .topbar {
      background: rgba(249, 255, 244, .78);
    }

    body.theme-football-light .content {
      position: relative;
      background:
        radial-gradient(circle at 15% 22%, rgba(255,255,255,.38), transparent 30%),
        radial-gradient(circle at 85% 74%, rgba(33,111,49,.16), transparent 34%),
        linear-gradient(135deg, rgba(92, 181, 77, .2), rgba(177, 221, 118, .26)),
        #dff3d8;
      overflow: hidden;
    }

    body.theme-football-light .content::before,
    body.theme-football-light .content::after {
      content: "";
      position: absolute;
      pointer-events: none;
      z-index: 0;
    }

    body.theme-football-light .content::before {
      inset: 18px;
      border: 3px solid rgba(255,255,255,.74);
      border-radius: 14px;
      opacity: .72;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.9) 0 4px, transparent 5px),
        radial-gradient(circle at 50% 50%, transparent 0 92px, rgba(255,255,255,.76) 93px 96px, transparent 97px),
        linear-gradient(90deg, transparent calc(50% - 1.5px), rgba(255,255,255,.78) calc(50% - 1.5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)),
        linear-gradient(135deg, rgba(42,142,60,.18), rgba(151,207,88,.12));
    }

    body.theme-football-light .content::after {
      top: 33%;
      bottom: 33%;
      left: 18px;
      right: 18px;
      opacity: .68;
      background:
        linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)) left top / 15% 3px no-repeat,
        linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)) left bottom / 15% 3px no-repeat,
        linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)) 15% top / 3px 100% no-repeat,
        linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)) right top / 15% 3px no-repeat,
        linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)) right bottom / 15% 3px no-repeat,
        linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)) 85% top / 3px 100% no-repeat;
    }

    body.theme-football-light .view {
      position: relative;
      z-index: 1;
    }

    body.theme-football-light .panel,
    body.theme-football-light .card,
    body.theme-football-light .bubble,
    body.theme-football-light .login-card {
      background: var(--panel);
    }

    body.theme-football-light .visual {
      background:
        linear-gradient(90deg, transparent 48.5%, rgba(255,255,255,.76) 48.5% 51.5%, transparent 51.5%),
        radial-gradient(circle at 50% 50%, transparent 0 43px, rgba(255,255,255,.76) 44px 47px, transparent 48px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 26px),
        linear-gradient(135deg, #2f9e44, #7fcb43);
    }

    body.theme-football-light .mark {
      background: linear-gradient(135deg, #2f9e44, #b7e46b);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.48), 0 0 28px rgba(47,158,68,.18);
    }

    body.theme-football-light button {
      box-shadow: 0 12px 24px rgba(47,158,68,.16);
    }

    body.theme-football-light input:focus,
    body.theme-football-light select:focus,
    body.theme-football-light textarea:focus {
      box-shadow: 0 0 0 3px rgba(47,158,68,.16);
    }

    body.theme-football-light .mark svg path {
      stroke: #f7fff2;
    }

    body.theme-football-light .nav button.active,
    body.theme-football-light .mood-btn.active,
    body.theme-football-light .check-btn.active {
      background: rgba(134,194,50,.16);
      border-color: rgba(47,158,68,.48);
    }

    body.theme-football-light .nav span:first-child {
      background: rgba(47,158,68,.14);
      color: #2f7d3f;
    }

    body.theme-football-light .tag {
      background: rgba(47,158,68,.12);
      color: #245b2f;
    }

    body.theme-football-light .scale-value,
    body.theme-football-light .entry-text {
      color: #2f7d3f;
    }

    body.theme-football-light .row.done {
      border-color: rgba(47,158,68,.38);
      background: rgba(47,158,68,.1);
    }

    body.theme-football-light .football-ball {
      display: block;
    }

    body.theme-football-light .fitness-player {
      display: none;
    }

    body.theme-cyber-night {
      --bg: #080b14;
      --side: #0d1320;
      --panel: rgba(14, 21, 34, .9);
      --panel-2: rgba(20, 31, 50, .92);
      --ink: #eef7ff;
      --muted: #a9bdd1;
      --line: rgba(91, 192, 255, .22);
      --accent: #06b6d4;
      --accent-2: #8b5cf6;
      --accent-dark: #0e7490;
      color: var(--ink);
      background:
        radial-gradient(circle at 78% 14%, rgba(139,92,246,.22), transparent 30%),
        radial-gradient(circle at 20% 72%, rgba(6,182,212,.18), transparent 34%),
        linear-gradient(135deg, #050712 0%, #0c1422 48%, #050812 100%);
    }

    body.theme-ocean {
      --bg: #e9fbff;
      --side: rgba(238, 252, 255, .88);
      --panel: rgba(255, 255, 255, .88);
      --panel-2: rgba(226, 247, 252, .92);
      --ink: #092d36;
      --muted: #4e6d76;
      --line: rgba(14, 116, 144, .2);
      --accent: #0891b2;
      --accent-2: #22c55e;
      --accent-dark: #0e7490;
      --shadow: 0 18px 42px rgba(8, 91, 112, .14);
      color: var(--ink);
      background:
        radial-gradient(circle at 82% 16%, rgba(34,197,94,.18), transparent 30%),
        radial-gradient(circle at 18% 78%, rgba(8,145,178,.16), transparent 32%),
        linear-gradient(135deg, #f2fdff, #e4f8fc 52%, #d5f4ed);
    }

    body.theme-sunset-gym {
      --bg: #fff7ed;
      --side: rgba(255, 247, 237, .9);
      --panel: rgba(255, 255, 255, .88);
      --panel-2: rgba(255, 237, 213, .92);
      --ink: #3b2010;
      --muted: #7a5b46;
      --line: rgba(234, 88, 12, .2);
      --accent: #ea580c;
      --accent-2: #f59e0b;
      --accent-dark: #c2410c;
      --shadow: 0 18px 42px rgba(124, 45, 18, .14);
      color: var(--ink);
      background:
        radial-gradient(circle at 78% 16%, rgba(245,158,11,.24), transparent 30%),
        radial-gradient(circle at 20% 76%, rgba(234,88,12,.14), transparent 34%),
        linear-gradient(135deg, #fffaf2, #fff1d8 45%, #ffe4c4);
    }

    body.theme-cyber-night aside,
    body.theme-cyber-night .assistant,
    body.theme-cyber-night .topbar,
    body.theme-ocean aside,
    body.theme-ocean .assistant,
    body.theme-ocean .topbar,
    body.theme-sunset-gym aside,
    body.theme-sunset-gym .assistant,
    body.theme-sunset-gym .topbar {
      background: color-mix(in srgb, var(--panel) 78%, transparent);
    }

    body.theme-cyber-night .panel,
    body.theme-cyber-night .card,
    body.theme-cyber-night .bubble,
    body.theme-ocean .panel,
    body.theme-ocean .card,
    body.theme-ocean .bubble,
    body.theme-sunset-gym .panel,
    body.theme-sunset-gym .card,
    body.theme-sunset-gym .bubble {
      background: var(--panel);
    }

    .brand { display: grid; gap: 10px; }
    .brand-top { display: flex; align-items: center; gap: 10px; }
    .mark {
      width: 44px; height: 44px; border-radius: 12px;
      display: grid; place-items: center;
      background: linear-gradient(135deg, #211331, #3b1767);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 30px rgba(168,85,247,.25);
    }
    .mark svg { width: 32px; height: 32px; }

    h1, h2, h3, p { margin: 0; letter-spacing: 0; }
    h1 { font-size: 22px; line-height: 1.08; }
    h2 { font-size: 23px; }
    h3 { font-size: 16px; }
    .muted { color: var(--muted); font-size: 13px; line-height: 1.4; }

    .nav { min-height: 0; overflow: auto; display: grid; align-content: start; gap: 6px; }
    .nav button {
      width: 100%;
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      text-align: left;
      color: var(--ink);
      background: transparent;
      border: 1px solid transparent;
      box-shadow: none;
      padding: 10px;
    }
    .nav button.active { background: rgba(255,255,255,.08); border-color: var(--line); }
    .nav span:first-child {
      width: 28px; height: 28px; border-radius: 8px;
      display: grid; place-items: center;
      background: rgba(168,85,247,.17);
      color: #e9d5ff; font-weight: 900;
    }

    .side-foot { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }

    .topbar {
      padding: 16px 18px;
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      background: rgba(14, 9, 23, .55);
      backdrop-filter: blur(14px);
    }

    .topbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 8px 10px; border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.06);
      color: var(--muted);
      font-size: 13px; font-weight: 800; white-space: nowrap;
    }
    .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 16px var(--accent-2); }

    .content { min-height: 0; overflow: hidden; padding: 16px; }
    .view { height: 100%; display: none; min-height: 0; overflow: auto; align-content: start; gap: 14px; }
    .view.active { display: grid; }

    .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
    .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .grid-2 { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(0, 1.1fr); gap: 12px; align-items: start; }

    .panel, .card {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }
    .panel { padding: 14px; }
    .card { padding: 13px; display: grid; gap: 8px; }
    .stat strong { font-size: 25px; }

    .hero { min-height: 282px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; }
    .visual {
      border-radius: 10px;
      background:
        radial-gradient(circle at 50% 30%, rgba(216,180,254,.28), transparent 31%),
        linear-gradient(145deg, #201033, #090612);
      display: grid; place-items: center; overflow: hidden;
    }
    .visual svg { width: 108px; height: 174px; filter: drop-shadow(0 0 18px rgba(216,180,254,.32)); }
    .football-ball { display: none; width: 112px; height: 112px; filter: drop-shadow(0 10px 18px rgba(34,107,54,.18)); }

    .list { display: grid; gap: 8px; }
    .row {
      display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
      padding: 10px; border: 1px solid var(--line); border-radius: 9px;
      background: rgba(255,255,255,.06);
    }
    .row.done { border-color: rgba(216,180,254,.48); background: rgba(168,85,247,.12); }
    .row-actions { display: flex; gap: 6px; align-items: center; }

    .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .full { grid-column: 1 / -1; }
    label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }

    .tagline { display: flex; flex-wrap: wrap; gap: 6px; }
    .tag { border-radius: 999px; background: rgba(168,85,247,.18); color: #f0dbff; padding: 5px 8px; font-size: 12px; font-weight: 850; }
    .meter { height: 10px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
    .meter div { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

    .mood-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0; }
    .mood-btn {
      min-height: 70px; background: rgba(255,255,255,.06); border: 1px solid var(--line); box-shadow: none;
      display: grid; place-items: center; gap: 4px; padding: 8px; color: var(--ink);
    }
    .mood-btn strong { font-size: 22px; }
    .mood-btn.active { border-color: var(--accent-2); background: rgba(168,85,247,.2); }

    .diary-layout { display: grid; grid-template-columns: minmax(380px, .92fr) minmax(0, 1.08fr); gap: 12px; align-items: start; }
    .check-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .check-btn {
      min-height: 68px; background: rgba(255,255,255,.055); border: 1px solid var(--line);
      box-shadow: none; color: var(--ink); display: grid; gap: 3px; place-items: center; text-align: center;
      padding: 8px 6px;
    }
    .check-btn strong { font-size: 18px; }
    .check-btn span { font-size: 14px; line-height: 1.08; overflow-wrap: anywhere; }
    .check-btn.active { border-color: var(--accent-2); background: rgba(168,85,247,.22); }
    .scale-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 38px; gap: 9px; align-items: center; }
    .scale-row input { padding: 0; accent-color: var(--accent-2); }
    .scale-value { text-align: center; font-weight: 900; color: #f5d0fe; }
    .diary-chart {
      min-height: 320px; border: 1px solid var(--line); border-radius: 10px;
      background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
      padding: 12px; display: grid; gap: 10px;
    }
    .chart-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .chart-stat { border: 1px solid var(--line); border-radius: 9px; padding: 9px; background: rgba(255,255,255,.05); }
    .chart-stat strong { display: block; font-size: 22px; color: #f5d0fe; }
    .chart-svg { width: 100%; height: 230px; display: block; overflow: visible; }
    .legend { display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 12px; font-weight: 800; }
    .legend span { display: inline-flex; align-items: center; gap: 6px; }
    .legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
    .diary-entry { align-items: start; }
    .diary-entry .tagline { margin-top: 8px; }
    .diary-entry p { margin: 6px 0 0; }
    .entry-text { color: #e9d5ff; }

    .video-frame { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 9px; background: #05030a; overflow: hidden; }
    .video-frame iframe, .video-frame video { width: 100%; height: 100%; border: 0; display: block; }

    .chat-head { padding: 15px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
    .chat-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .assistant.collapsed { height: 68px !important; min-height: 0; overflow: hidden; }
    .assistant.collapsed .chat-log,
    .assistant.collapsed .chat-form { display: none; }
    .chat-log { min-height: 0; overflow: auto; padding: 14px; display: grid; align-content: start; gap: 9px; }
    .bubble { max-width: 92%; border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; background: rgba(255,255,255,.06); white-space: pre-wrap; line-height: 1.42; font-size: 14px; }
    .bubble.user { justify-self: end; background: rgba(56,189,248,.14); border-color: rgba(56,189,248,.25); }
    .chat-form { border-top: 1px solid var(--line); padding: 12px; display: grid; gap: 8px; }
    .quick { display: flex; gap: 6px; flex-wrap: wrap; }
    .input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
    .input-row textarea { min-height: 48px; max-height: 130px; }

    .login {
      position: fixed; inset: 0; z-index: 20;
      background:
        radial-gradient(circle at 75% 18%, rgba(217,70,239,.22), transparent 30%),
        linear-gradient(135deg, #080511, #160a27 55%, #05030a);
      display: grid; place-items: center; padding: 20px;
    }
    .login.hidden { display: none; }
    .hidden { display: none !important; }
    .login-card { width: min(460px, 100%); border: 1px solid var(--line); border-radius: 12px; background: rgba(20,12,33,.92); box-shadow: var(--shadow); padding: 18px; display: grid; gap: 12px; }
    .login-card .mark { margin-bottom: 4px; }
    .login-actions { display: grid; gap: 8px; }
    .login-actions button { min-height: 44px; }
    .auth-field.hidden { display: none; }
    .admin-login { display: grid; gap: 8px; }
    .login-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; }
    .login-switch button { min-height: 40px; background: rgba(255,255,255,.05); color: var(--muted); border: 1px solid var(--line); }
    .login-switch button.active { color: var(--text); background: rgba(217,70,239,.16); border-color: var(--accent); }
    .link-button {
      background: transparent;
      border: 0;
      box-shadow: none;
      color: var(--accent-2);
      padding: 0;
      justify-self: start;
      min-height: auto;
    }
    .forgot-box {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: rgba(255,255,255,.045);
      padding: 12px;
      display: grid;
      gap: 9px;
    }

    .empty { border: 1px dashed var(--line); border-radius: 9px; padding: 14px; color: var(--muted); background: rgba(255,255,255,.04); }

    @media (max-width: 1180px) {
      .app { grid-template-columns: 218px minmax(0, 1fr); }
      .assistant { position: fixed; right: 12px; bottom: 12px; width: min(380px, calc(100vw - 24px)); height: min(640px, calc(100vh - 24px)); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); z-index: 10; }
    }
    @media (max-width: 820px) {
      body { overflow: auto; height: auto; }
      .app { display: block; height: auto; min-height: 100vh; }
      aside { position: sticky; top: 0; z-index: 5; display: block; border-right: 0; border-bottom: 1px solid var(--line); }
      .brand, .side-foot { display: none; }
      .nav { display: flex; overflow-x: auto; }
      .nav button { min-width: 145px; }
      main { height: auto; min-height: 760px; display: block; }
      .content { overflow: visible; }
      .view { height: auto; min-height: 600px; overflow: visible; }
      .assistant { position: static; width: auto; height: 620px; border-radius: 0; border-left: 0; }
      .grid-4, .grid-3, .grid-2, .hero, .form-grid, .diary-layout, .check-grid, .chart-stats { grid-template-columns: 1fr; }
      .full { grid-column: auto; }
    }