:root {
        color-scheme: dark;
        --bg: #0a0e16; --bg-raised: #121a26; --bg-inset: #060a10; --border: #1e2a3a;
        --bone: #e4ecf5; --bone-dim: #7c8ba1;
        --cyan: #4fc3f7; --cyan-bright: #7fdbff; --cyan-dim: #1a4a5e;
        --deep-blue: #1e4d91;
        --good: #5cc98c; --bad: #f0654f; --warn: #f0b429;
        --surface-glass: rgba(18, 26, 38, 0.86);
        --shadow-panel: 0 14px 34px rgba(0,0,0,0.18);
        --glow: 0 0 0 1px rgba(79, 195, 247, 0.15), 0 0 20px rgba(79, 195, 247, 0.08);
    }
    * { box-sizing: border-box; }
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background:
            radial-gradient(ellipse 900px 500px at 10% -10%, rgba(79,195,247,0.075), transparent 68%),
            radial-gradient(ellipse 700px 440px at 92% 12%, rgba(30,77,145,0.055), transparent 70%),
            var(--bg);
        color: var(--bone); margin: 0; min-height: 100vh;
    }
    ::selection { background: rgba(79,195,247,0.24); color: var(--bone); }
    * { scrollbar-width: thin; scrollbar-color: #26384c var(--bg-inset); }
    *::-webkit-scrollbar { width: 9px; height: 9px; }
    *::-webkit-scrollbar-track { background: var(--bg-inset); }
    *::-webkit-scrollbar-thumb { background: #26384c; border: 2px solid var(--bg-inset); border-radius: 999px; }
    *::-webkit-scrollbar-thumb:hover { background: #35506d; }
    h1, .brand, .nav-item, button { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
    .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
    .layout { display: flex; min-height: 100vh; }
    aside { width: 220px; flex-shrink: 0; background: linear-gradient(180deg, #070b12 0%, var(--bg-inset) 58%); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 24px 0 0; box-shadow: 8px 0 30px rgba(0,0,0,0.12); }
    .brand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 20px 20px; border-bottom: 1px solid var(--border); margin-bottom: 16px; text-decoration: none; }
    .brand img { width: 44px; height: 44px; filter: drop-shadow(0 0 10px rgba(79,195,247,0.5)); }
    .brand span { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--cyan-bright); text-shadow: 0 0 12px rgba(127,219,255,0.4); }
    .nav-group-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--bone-dim); padding: 4px 20px 8px; opacity: 0.7; }
    nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; margin-bottom: 18px; }
    .nav-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 7px; color: var(--bone-dim); text-decoration: none; font-size: 14px; font-weight: 500; border-left: 2px solid transparent; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.12s ease; }
    .nav-item svg { width: 17px; height: 17px; flex-shrink: 0; stroke: currentColor; }
    .nav-item:hover { background: rgba(18,26,38,0.92); color: var(--bone); transform: translateX(1px); }
    .nav-item.active { background: linear-gradient(90deg, rgba(79,195,247,0.14), rgba(79,195,247,0.035)); color: var(--cyan-bright); border-left-color: var(--cyan); box-shadow: inset 0 0 18px rgba(79,195,247,0.035); }
    .nav-item.active svg { filter: drop-shadow(0 0 5px rgba(79,195,247,0.3)); }
    .nav-footer { margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
    .nav-footer img { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; }
    .nav-footer .user-info { flex: 1; min-width: 0; }
    .nav-footer .username { font-size: 13px; font-weight: 600; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .nav-footer .tier { font-size: 11px; font-weight: 600; }
    .nav-footer .tier.owner { color: var(--cyan-bright); }
    .nav-footer .tier.authorized { color: var(--good); }
    .nav-footer a.logout { color: var(--bone-dim); flex-shrink: 0; display: flex; transition: color 0.15s ease; }
    .nav-footer a.logout:hover { color: var(--bad); }
    .nav-footer a.logout svg { width: 16px; height: 16px; stroke: currentColor; }
    main { flex: 1; padding: 38px 46px 52px; max-width: 820px; }
    main.wide { max-width: none; }
    main.nav-loading { opacity: 0.82; pointer-events: none; }
    .nav-item.nav-pending { color: var(--cyan-bright); background: rgba(79,195,247,0.05); }
    .app-section[hidden] { display: none !important; }
    .app-section { display: block; }
    h1 { font-size: 27px; margin: 0 0 6px; font-weight: 720; letter-spacing: -0.025em; }
    .subtitle { color: var(--bone-dim); font-size: 14px; margin: 0 0 26px; line-height: 1.55; }
    .card { background: linear-gradient(180deg, rgba(20,29,42,0.96), rgba(16,24,35,0.96)); border: 1px solid var(--border); border-radius: 10px; padding: 19px 21px; margin-bottom: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.10); }
    .list-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: rgba(18,26,38,0.78); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; transition: border-color .12s ease, background .12s ease; }
    .list-item:hover { border-color: #2b3e55; background: rgba(18,26,38,0.98); }
    .list-item-label { font-size: 14px; font-weight: 500; }
    .list-item-desc { color: var(--bone-dim); font-size: 13px; margin-top: 2px; }
    label { display: block; font-size: 13px; color: var(--bone-dim); margin-bottom: 6px; margin-top: 16px; font-weight: 500; }
    label:first-of-type { margin-top: 0; }
    select, input[type=text], input[type=number] { width: 100%; padding: 10px 12px; background: linear-gradient(180deg, #080d14, var(--bg-inset)); border: 1px solid var(--border); border-radius: 7px; color: var(--bone); font-size: 14px; transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; }
    select:focus, input:focus { outline: none; border-color: var(--cyan); box-shadow: var(--glow); }
    select:hover, input[type=text]:hover, input[type=number]:hover { border-color: #2a3c52; }
    select option[value=""][disabled] { color: var(--bone-dim); }
    button { background: linear-gradient(180deg, var(--cyan-bright), var(--cyan)); color: #061019; border: 1px solid rgba(127,219,255,0.45); border-radius: 7px; padding: 10px 20px; font-size: 14px; font-weight: 650; cursor: pointer; margin-top: 18px; box-shadow: 0 5px 16px rgba(79,195,247,0.10); transition: filter 0.12s ease, opacity 0.12s ease, transform 0.08s ease, box-shadow 0.12s ease; }
    button:hover { filter: brightness(1.07); box-shadow: 0 7px 20px rgba(79,195,247,0.16); }
    button:active { transform: scale(0.98); }
    button.secondary { background: rgba(6,10,16,0.45); border: 1px solid var(--border); color: var(--bone-dim); padding: 6px 12px; margin-top: 0; box-shadow: none; }
    button.secondary:hover { border-color: #36506c; color: var(--bone); background: rgba(18,26,38,0.85); box-shadow: none; }
    form[action*="remove-"] button.secondary:hover, form[action*="remove-"] .icon-btn:hover { border-color: rgba(240,101,79,0.72); color: #ff907d; background: rgba(240,101,79,0.07); }
    .rate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .rate-grid label { margin-top: 0; }
    .command-box { position: relative; background: linear-gradient(180deg, #05090e, #07101a); border: 1px solid #1d3042; border-radius: 8px; padding: 15px 17px; font-size: 12px; word-break: break-all; color: #91e2ff; margin-top: 12px; line-height: 1.65; box-shadow: inset 0 1px 0 rgba(255,255,255,0.018); }
    .error { background: #2a1610; border: 1px solid var(--cyan-dim); color: #e8a082; padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; }
    .success { background: #0f251c; border: 1px solid #235c42; color: #7fe8b5; padding: 12px 16px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; }
    .login-wrap {
        display: flex; align-items: center; justify-content: center; min-height: 100vh;
        background:
            linear-gradient(rgba(79,195,247,0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(79,195,247,0.05) 1px, transparent 1px),
            linear-gradient(180deg, rgba(10,14,22,0.88), rgba(10,14,22,0.96) 60%, var(--bg)),
            url('/assets/banner.jpg') center 30% / cover no-repeat;
        background-size: 32px 32px, 32px 32px, 100% 100%, cover;
    }
    .login-card {
        width: 100%; max-width: 340px; padding: 40px 32px; text-align: center;
        background: linear-gradient(180deg, rgba(24,34,48,0.9), rgba(14,20,30,0.9));
        border: 1px solid var(--border); border-radius: 18px;
        box-shadow: 0 0 60px rgba(79,195,247,0.08), 0 20px 50px rgba(0,0,0,0.4);
    }
    .login-skull { width: 96px; height: 96px; margin: 0 auto 20px; filter: drop-shadow(0 0 22px rgba(79,195,247,0.55)) drop-shadow(0 0 40px rgba(30,77,145,0.35)); }
    .login-title { font-size: 15px; font-weight: 700; letter-spacing: 0.32em; color: var(--cyan-bright); margin: 0 0 18px; text-shadow: 0 0 16px rgba(127,219,255,0.4); }
    .login-divider { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; }
    .login-divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border)); }
    .login-divider span:last-child { background: linear-gradient(90deg, var(--border), transparent); }
    .login-divider i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); flex-shrink: 0; }
    .login-footer { font-size: 11px; letter-spacing: 0.15em; color: var(--bone-dim); margin: 22px 0 0; text-transform: uppercase; }
    .discord-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: #5865F2; color: white; border: none; border-radius: 10px; padding: 13px 24px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
    .discord-btn:hover { background: #4752c4; }
    .badge { font-size: 11px; padding: 3px 8px; border-radius: 4px; font-weight: 600; text-transform: uppercase; }
    .badge.owner { background: #3a2a0e; color: #f0b429; }
    .badge.authorized { background: #0f2a25; color: #4fd1a5; }

    .panel-section { background: linear-gradient(180deg, rgba(19,28,41,0.96), rgba(15,23,34,0.96)); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-panel); }
    .panel-section-title { font-size: 17px; font-weight: 700; }
    .panel-section-desc { color: var(--bone-dim); font-size: 13px; margin: 2px 0 18px; }
    .inline-add-form { display: flex; gap: 10px; margin-top: 14px; }
    .inline-add-form input { flex: 1; }
    .inline-add-form button { margin-top: 0; white-space: nowrap; }

    .preset-card { background: rgba(6,10,16,0.72); border: 1px solid var(--border); border-radius: 9px; padding: 14px 18px; margin-bottom: 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; transition: border-color .12s ease, transform .12s ease; }
    .preset-card:hover { border-color: #2a3f56; transform: translateY(-1px); }
    .preset-card-name { font-size: 15px; font-weight: 600; }
    .preset-card-sub { color: var(--bone-dim); font-size: 12px; margin-top: 2px; }
    .preset-card-stats { color: var(--cyan-bright); font-size: 12px; margin-top: 8px; }
    .preset-card-colors { color: var(--bone-dim); font-size: 12px; margin-top: 2px; }
    .preset-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
    .icon-btn { background: var(--bg-raised); border: 1px solid var(--border); border-radius: 5px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--bone-dim); font-size: 13px; margin-top: 0; padding: 0; }
    .icon-btn:hover { border-color: var(--cyan); color: var(--cyan-bright); }

    .crumb { color: var(--bone-dim); font-size: 13px; margin: 0 0 24px; }
    .crumb-active { color: var(--cyan-bright); }
    .tames-layout { display: flex; gap: 20px; align-items: flex-start; }
    .tames-sidebar { width: 300px; flex-shrink: 0; background: linear-gradient(180deg, rgba(19,28,41,0.97), rgba(15,23,34,0.97)); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: var(--shadow-panel); }
    .tames-filters { display: flex; gap: 8px; margin-bottom: 12px; }
    .tames-filters input, .tames-filters select { font-size: 13px; padding: 8px 10px; }
    .dino-count { color: var(--bone-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
    .dino-list { max-height: 560px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; padding: 0 6px; }
    .dino-item { display: block; padding: 9px 12px; border-radius: 7px; color: var(--bone-dim); text-decoration: none; font-size: 14px; border-left: 2px solid transparent; transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease, transform 0.1s ease; }
    .dino-item:hover { background: rgba(6,10,16,0.78); color: var(--bone); transform: translateX(1px); }
    .dino-item.active { background: linear-gradient(90deg, rgba(79,195,247,0.15), rgba(79,195,247,0.035)); color: var(--cyan-bright); border-left-color: var(--cyan); font-weight: 650; box-shadow: inset 0 0 16px rgba(79,195,247,0.025); }
    .tames-content { flex: 1; background: linear-gradient(180deg, rgba(19,28,41,0.97), rgba(15,23,34,0.97)); border: 1px solid var(--border); border-radius: 12px; padding: 26px 28px; min-height: 400px; box-shadow: var(--shadow-panel); }
    .dino-title { font-size: 22px; margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--border); font-weight: 700; }
    .upper-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bone-dim); margin-bottom: 8px; font-weight: 600; }
    .control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
    .mode-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
    .mode-btn { background: var(--bg-inset); border: 1px solid var(--border); border-radius: 6px; padding: 11px; color: var(--bone-dim); font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 0; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
    .mode-btn:hover { border-color: #2a3c52; }
    .mode-btn.active { background: rgba(79,195,247,0.1); border-color: var(--cyan); color: var(--cyan-bright); }
    .add-btn { width: 100%; background: linear-gradient(90deg, var(--cyan), var(--deep-blue)); color: white; margin-top: 20px; padding: 12px 20px; box-shadow: 0 2px 12px rgba(79,195,247,0.15); }
    .add-btn:hover { opacity: 0.92; }
    .add-btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }
    .command-panel { margin-top: 26px; }
    .command-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .command-panel-header .upper-label { margin-bottom: 0; }
    .command-panel-header .copy-btn { margin-top: 0; }
    .copy-btn { background: rgba(6,10,16,0.5); border: 1px solid #26384c; color: var(--bone-dim); font-size: 12px; padding: 5px 12px; margin-top: 8px; box-shadow: none; }
    .copy-btn:hover { border-color: var(--cyan); color: var(--cyan-bright); background: rgba(79,195,247,0.055); box-shadow: 0 0 14px rgba(79,195,247,0.06); }
    .spawn-list-section { margin-top: 22px; background: linear-gradient(180deg, rgba(19,28,41,0.96), rgba(15,23,34,0.96)); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; box-shadow: var(--shadow-panel); }
    .spawn-list-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
    .spawn-list-header strong { font-size: 14px; }
    .spawn-list-header .secondary { margin-top: 0; padding: 6px 14px; font-size: 13px; }
    .spawn-list-item { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; background: var(--bg-inset); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; font-size: 14px; transition: border-color 0.15s ease; }
    .spawn-list-item:hover { border-color: #2a3c52; }
    .spawn-list-item:last-child { margin-bottom: 0; }

    .modal-overlay { position: fixed; inset: 0; background: rgba(2,5,9,0.72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); z-index: 100; align-items: center; justify-content: center; }
    .modal { background: linear-gradient(180deg, #152032, #101823); border: 1px solid #26384c; border-radius: 12px; padding: 24px 28px; width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto; box-shadow: 0 24px 70px rgba(0,0,0,0.48), 0 0 0 1px rgba(79,195,247,0.035); }
    .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
    .modal-header h2 { font-size: 18px; margin: 0; }
    .modal-close { background: none; border: none; color: var(--bone-dim); font-size: 16px; cursor: pointer; margin: 0; padding: 4px; }
    .modal-close:hover { color: var(--bone); }
    .modal-col-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cyan-bright); margin-bottom: 12px; font-weight: 600; }
    .modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
    .modal-footer button.secondary { margin-top: 0; }
    .pack-entry-row { display: grid; grid-template-columns: 1fr 1.6fr 1.3fr 0.7fr auto; gap: 8px; align-items: center; margin-top: 18px; }
    .pack-entry-row select, .pack-entry-row input { margin-top: 0; }
    .pack-entries-list { border: 1px dashed var(--border); border-radius: 6px; padding: 6px; margin-top: 14px; min-height: 50px; }
    .pack-entries-list .spawn-list-item { margin-bottom: 4px; }
    .pack-entries-list .spawn-list-item:last-child { margin-bottom: 0; }

    /* TEK EVOLUTION VISUAL PASS */
    :root {
        --bg: #030811; --bg-raised: #071522; --bg-inset: #02070d; --border: #12344c;
        --bone: #edfaff; --bone-dim: #7f99aa; --cyan: #00d7ff; --cyan-bright: #7beeff;
        --cyan-dim: #0b4d67; --deep-blue: #075d9e;
        --surface-glass: rgba(6,18,29,.91);
        --shadow-panel: 0 18px 42px rgba(0,0,0,.28), 0 0 0 1px rgba(0,215,255,.025);
        --glow: 0 0 0 1px rgba(0,215,255,.22), 0 0 22px rgba(0,215,255,.12);
    }
    body { background: radial-gradient(circle at 78% 12%, rgba(0,215,255,.085), transparent 28%), radial-gradient(circle at 15% 82%, rgba(0,99,177,.06), transparent 32%), linear-gradient(rgba(0,215,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(0,215,255,.018) 1px, transparent 1px), var(--bg); background-size:auto,auto,34px 34px,34px 34px,auto; }
    aside { width:232px; background:linear-gradient(180deg,rgba(3,11,19,.99),rgba(2,7,13,.99)); border-right-color:rgba(0,215,255,.25); box-shadow:12px 0 46px rgba(0,0,0,.26),1px 0 0 rgba(0,215,255,.08); position:relative; }
    aside::after { content:''; position:absolute; top:0; right:-1px; width:1px; height:100%; background:linear-gradient(transparent 4%,var(--cyan) 38%,rgba(0,215,255,.08) 78%,transparent); opacity:.68; pointer-events:none; }
    .brand { padding-bottom:22px; border-bottom-color:#0d3148; }
    .brand img { width:50px; height:50px; filter:drop-shadow(0 0 15px rgba(0,215,255,.62)); }
    .brand span { color:var(--cyan-bright); letter-spacing:.2em; }
    .nav-item { border:1px solid transparent; border-left-width:2px; border-radius:8px; }
    .nav-item:hover { background:#071827; border-color:#103b55; color:#dffbff; }
    .nav-item.active { background:linear-gradient(90deg,rgba(0,215,255,.22),rgba(0,215,255,.045)); border-color:rgba(0,215,255,.44); border-left-color:var(--cyan); color:#e8fdff; box-shadow:inset 3px 0 0 var(--cyan),0 0 22px rgba(0,215,255,.08); }
    main { padding-top:30px; }
    h1 { font-size:29px; text-shadow:0 0 22px rgba(0,215,255,.08); }
    .crumb { margin-bottom:20px; }
    .card,.panel-section,.tames-sidebar,.tames-content,.spawn-list-section,.modal { background:linear-gradient(180deg,rgba(7,20,33,.97),rgba(3,11,19,.98)); border-color:#123b55; box-shadow:var(--shadow-panel),inset 0 0 35px rgba(0,215,255,.012); }
    .tames-layout { gap:16px; }
    .tames-sidebar { width:340px; padding:14px; border-radius:10px; }
    .tames-content { padding:18px; border-radius:10px; min-height:430px; }
    .tames-filters { gap:8px; }
    .tames-filters input,.tames-filters select,select,input[type=text],input[type=number] { background:linear-gradient(180deg,#04101a,#020911); border-color:#18425c; }
    .dino-list { gap:6px; max-height:610px; }
    .dino-item { border:1px solid #102f45; border-left:2px solid transparent; background:rgba(5,16,27,.75); }
    .dino-item:hover { background:#081a29; border-color:#1b5876; color:var(--bone); }
    .dino-item.active { border-color:var(--cyan); border-left-color:var(--cyan); color:var(--bone); box-shadow:inset 3px 0 0 var(--cyan),0 0 16px rgba(0,215,255,.08); }
    .dino-item.has-thumb { display:grid; grid-template-columns:48px minmax(0,1fr) 14px; gap:10px; align-items:center; padding:7px 9px; min-height:62px; }
    .dino-thumb { width:48px; height:48px; border-radius:7px; border:1px solid #1a506c; background:radial-gradient(circle,rgba(0,215,255,.11),#06111d 68%); display:grid; place-items:center; overflow:hidden; }
    .dino-thumb img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 7px rgba(0,0,0,.42)); }
    .dino-item-copy { min-width:0; display:block; }
    .dino-item-copy strong { display:block; color:inherit; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .dino-item-copy small { display:block; color:var(--bone-dim); font-size:10px; margin-top:3px; text-transform:capitalize; }
    .dino-chevron { color:#426f87; font-size:18px; transition:transform .12s ease,color .12s ease; }
    .dino-item:hover .dino-chevron,.dino-item.active .dino-chevron { color:var(--cyan-bright); transform:translateX(1px); }
    .dino-count { border-bottom-color:#12354c; color:#6e94a8; }
    .dino-hero-card { display:grid; grid-template-columns:minmax(190px,35%) minmax(0,1fr); border:1px solid #17445f; border-radius:10px; overflow:hidden; background:radial-gradient(circle at 20% 42%,rgba(0,215,255,.11),transparent 33%),linear-gradient(135deg,#071725,#04101a); margin-bottom:18px; min-height:222px; }
    .dino-hero-art { position:relative; display:grid; place-items:center; min-height:222px; overflow:hidden; border-right:1px solid #123b55; }
    .dino-hero-art img { position:relative; z-index:2; width:88%; height:88%; object-fit:contain; filter:drop-shadow(0 12px 20px rgba(0,0,0,.55)); }
    .tek-ring { position:absolute; width:145px; height:145px; border:1px solid rgba(0,215,255,.35); border-radius:50%; box-shadow:0 0 30px rgba(0,215,255,.08),inset 0 0 24px rgba(0,215,255,.06); }
    .tek-ring::before,.tek-ring::after { content:''; position:absolute; inset:14px; border-radius:50%; border:1px dashed rgba(123,238,255,.2); }
    .tek-ring::after { inset:34px; border-style:solid; opacity:.45; }
    .tek-scan { position:absolute; inset:0; z-index:3; pointer-events:none; background:repeating-linear-gradient(180deg,transparent 0 7px,rgba(0,215,255,.017) 8px 9px); }
    .dino-hero-copy { padding:26px 24px; align-self:center; }
    .tek-kicker { color:var(--cyan-bright); font-size:10px; text-transform:uppercase; letter-spacing:.18em; font-weight:700; margin-bottom:7px; }
    .dino-title { font-size:27px; border:0; padding:0; margin:0 0 10px; }
    .dino-tags { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:13px; }
    .tek-tag { display:inline-flex; align-items:center; border:1px solid #17617f; background:rgba(0,215,255,.07); color:#8beeff; border-radius:999px; padding:4px 8px; font-size:10px; text-transform:capitalize; }
    .tek-tag.muted { color:#93a8b4; border-color:#2b4050; background:rgba(255,255,255,.02); }
    .dino-hero-note { margin:0; color:#8ca3b2; font-size:12px; line-height:1.55; max-width:590px; }
    .tek-controls { margin-top:4px; padding:16px; border:1px solid #11364e; border-radius:9px; background:rgba(2,9,15,.5); }
    .mode-btn { background:#04101a; border-color:#173c54; }
    .mode-btn.active { background:rgba(0,215,255,.12); border-color:var(--cyan); color:#baf6ff; box-shadow:0 0 14px rgba(0,215,255,.07); }
    .add-btn { background:linear-gradient(180deg,#2ce7ff,#00bde9); border-color:rgba(123,238,255,.6); color:#00131a; }
    .command-box { border-color:#143e58; background:#02080e; box-shadow:inset 0 0 22px rgba(0,215,255,.018); }
    .copy-btn { border-color:#1b5673; background:#071b29; color:#87eaff; }
    .copy-btn:hover { background:rgba(0,215,255,.08); }
    @media (max-width:930px) { .dino-hero-card { grid-template-columns:1fr; } .dino-hero-art { min-height:190px; border-right:0; border-bottom:1px solid #123b55; } .dino-hero-art img { max-height:185px; } }

    /* Mobile: collapse the left rail to icons-only (like Google's compact nav rail) so the
       whole sidebar — brand, every section, and the account footer — fits on screen without
       scrolling, and labels move to a tooltip via the title attribute instead. */
    /* Toast notifications — small confirmation popups for Copy / Add to List actions, since those
       previously gave no feedback beyond a list quietly updating. Stack bottom-right, slide up
       and fade in, then fade back out and get removed after a couple seconds. */
    #toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; align-items: flex-end; }
    .toast {
        --toast-accent: var(--cyan);
        display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; gap: 10px;
        background: rgba(14,21,31,0.96); border: 1px solid #2a3b50; color: var(--bone);
        padding: 11px 14px 11px 12px; border-radius: 10px; font-size: 13px; font-weight: 560;
        box-shadow: 0 12px 34px rgba(0,0,0,0.34), inset 3px 0 0 var(--toast-accent);
        opacity: 0; transform: translateY(8px) scale(0.985); transition: opacity 0.16s ease, transform 0.16s ease;
        width: max-content; max-width: min(360px, calc(100vw - 32px)); line-height: 1.4;
    }
    .toast.toast-in { opacity: 1; transform: translateY(0) scale(1); }
    .toast-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--toast-accent); background: rgba(79,195,247,0.08); font-size: 12px; font-weight: 800; }
    .toast-success { --toast-accent: var(--good); }
    .toast-success .toast-icon { background: rgba(92,201,140,0.10); }
    .toast-info { --toast-accent: var(--cyan); }
    .toast-error { --toast-accent: var(--bad); }
    .toast-error .toast-icon { background: rgba(240,101,79,0.10); }
    .toast-warn { --toast-accent: var(--warn); }
    .toast-warn .toast-icon { background: rgba(240,180,41,0.10); }
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    }

    @media (max-width: 640px) {
        aside { width: 64px; padding: 20px 0 0; }
        .brand { padding: 0 0 16px; gap: 0; }
        .brand span, .nav-group-label, .nav-label, .nav-footer .user-info { display: none; }
        .nav-item { justify-content: center; padding: 12px 0; gap: 0; }
        .nav-footer { flex-direction: column; gap: 12px; padding: 16px 8px; }
        .nav-footer img { width: 30px; height: 30px; }
        main { padding: 20px 16px; }
        .tames-layout { flex-direction: column; }
        .tames-sidebar { width: 100%; }
        .control-grid { grid-template-columns: 1fr; gap: 16px; }
        #toast-container { left: 16px; right: 16px; bottom: 16px; align-items: stretch; }
        .toast { max-width: none; }
        /* The list box was inheriting the desktop 560px scroll height, which on a phone
           viewport is nearly the whole screen — you had to page-scroll past most of the list
           before ever reaching the detail box below it. A shorter box keeps both visible
           together, matching the compact list+detail layout of the reference panel. */
        .dino-list { max-height: 280px; }
    }

/* 2026 quality-of-life pass */
.favorite-toggle {
    width: 28px; height: 28px; display: inline-grid; place-items: center; flex: 0 0 28px;
    color: #607d92; font-size: 18px; border-radius: 6px; cursor: pointer; user-select: none;
    transition: color .12s ease, background .12s ease, transform .12s ease;
}
.favorite-toggle:hover, .favorite-toggle:focus-visible { color: var(--warn); background: rgba(240,180,41,.08); outline: none; }
.dino-item.is-favorite .favorite-toggle { color: var(--warn); text-shadow: 0 0 10px rgba(240,180,41,.35); }
.history-toolbar { display:flex; align-items:center; gap:12px; margin: 0 0 14px; }
.history-toolbar .secondary { margin:0 0 0 auto; }
.history-entry { background: var(--surface-glass); border:1px solid var(--border); border-radius:10px; padding:15px; margin-bottom:10px; box-shadow:var(--shadow-panel); }
.history-meta { display:flex; justify-content:space-between; gap:16px; margin-bottom:9px; font-size:12px; }
.history-meta span { color:var(--bone-dim); }
.history-entry .copy-btn { margin-top:9px; }
.empty-state { border:1px dashed #294059; border-radius:10px; padding:32px 20px; text-align:center; color:var(--bone-dim); background:rgba(7,13,22,.55); }
.empty-state strong { display:block; color:var(--bone); margin-bottom:6px; }
.status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:12px; }
.status-card { border:1px solid var(--border); background:var(--bg-inset); border-radius:9px; padding:12px; }
.status-card span { display:block; color:var(--bone-dim); font-size:10px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; }
.status-card strong { font-size:17px; color:var(--cyan-bright); }
.status-table { width:100%; border-collapse:collapse; font-size:12px; margin-top:12px; }
.status-table th,.status-table td { text-align:left; padding:8px 7px; border-bottom:1px solid var(--border); }
.status-ok { color:var(--good); }.status-bad { color:var(--bad); }
.preset-card-actions { flex-wrap:wrap; }
.preset-card-actions form { margin:0; }
.mini-action { margin:0; padding:7px 9px; min-width:34px; }
.import-box { display:grid; grid-template-columns:1fr auto; gap:9px; align-items:end; margin-top:12px; }
textarea { width:100%; min-height:110px; resize:vertical; padding:10px 12px; background:linear-gradient(180deg,#080d14,var(--bg-inset)); border:1px solid var(--border); border-radius:7px; color:var(--bone); font:12px/1.45 'JetBrains Mono',ui-monospace,monospace; }
textarea:focus { outline:none; border-color:var(--cyan); box-shadow:var(--glow); }
.pack-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:5px; }
.pack-tag { border:1px solid var(--cyan-dim); color:var(--cyan-bright); background:rgba(79,195,247,.05); border-radius:999px; padding:3px 7px; font-size:10px; }
.pack-preview { margin-top:12px; border-top:1px solid var(--border); padding-top:10px; }
.bulk-row { display:flex; align-items:end; gap:8px; margin-top:9px; }
.bulk-row input { max-width:140px; }
.default-preset-btn { width:100%; }
.shortcut-hint { color:var(--bone-dim); font-size:11px; margin-top:8px; }

@media (max-width: 900px) {
    .layout { display:block; }
    aside { width:100%; min-height:auto; height:auto; position:sticky; top:0; z-index:100; padding:8px 8px 7px; flex-direction:row; align-items:center; gap:8px; border-right:0; border-bottom:1px solid var(--border); overflow-x:auto; }
    .brand { flex:0 0 auto; flex-direction:row; border:0; margin:0; padding:2px 7px; }
    .brand img { width:30px; height:30px; }.brand span { display:none; }
    .nav-group-label { display:none; }
    aside nav { flex-direction:row; margin:0; padding:0; gap:5px; flex:0 0 auto; }
    .nav-item { border-left:0; border-bottom:2px solid transparent; padding:8px 10px; white-space:nowrap; }
    .nav-item.active { border-left-color:transparent; border-bottom-color:var(--cyan); }
    .nav-footer { margin:0 0 0 auto; padding:0 4px 0 8px; border:0; flex:0 0 auto; }
    .nav-footer .user-info { display:none; }
    main, main.wide { max-width:none; width:100%; padding:22px 16px 38px; }
    .tames-layout { grid-template-columns:1fr !important; }
    .tames-sidebar { position:static !important; max-height:none !important; }
    .dino-list { max-height:390px !important; }
    .dino-hero-card { grid-template-columns:minmax(150px, 34%) 1fr !important; }
    .status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px) {
    .nav-label { display:none; }
    .nav-item { padding:9px; }
    .nav-item svg { width:18px; height:18px; }
    .nav-footer img { display:none; }
    main, main.wide { padding:16px 10px 30px; }
    h1 { font-size:23px; }
    .tames-filters, .control-grid, .pack-entry-row { grid-template-columns:1fr !important; }
    .dino-hero-card { grid-template-columns:1fr !important; }
    .dino-hero-art { min-height:190px !important; }
    .status-grid { grid-template-columns:1fr; }
    .modal { width:calc(100vw - 18px) !important; max-height:90vh; overflow:auto; }
    .history-meta { display:block; }.history-meta span { display:block; margin-top:4px; }
}

/* TEK SELECT / DROPDOWN POLISH */
select {
    color-scheme: dark;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 38px !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237beeff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #06131f 0%, #020911 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: right 12px center, 0 0 !important;
    background-size: 14px 14px, 100% 100% !important;
    border-color: #18506c !important;
    color: #eafcff !important;
    font-weight: 550;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
select:hover {
    border-color: #2380a3 !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a4f4ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, #081a28 0%, #03101a 100%) !important;
}
select:focus {
    border-color: var(--cyan) !important;
    box-shadow: 0 0 0 1px rgba(0,215,255,.26), 0 0 20px rgba(0,215,255,.12) !important;
}
select option,
select optgroup {
    background-color: #06131f !important;
    color: #eafcff !important;
}
select option:checked {
    background-color: #0a4961 !important;
    color: #ffffff !important;
}
select option:disabled,
select option[value=""][disabled] {
    background-color: #06131f !important;
    color: #688497 !important;
}
select::-ms-expand { display: none; }

/* Creature artwork cache status in Owner Panel */
.artwork-status-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding:14px 16px;border:1px solid var(--border, #16445e);border-radius:10px;background:rgba(4,17,27,.58)}
.artwork-status-row strong{display:block;margin-bottom:4px;color:#e8faff}
@media(max-width:700px){.artwork-status-row{align-items:stretch;flex-direction:column}.artwork-status-row form,.artwork-status-row button{width:100%}}

/* Owner-only Nitrado Tribelog relay */
.tribelog-status-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin:18px 0 20px; }
.tribelog-status-grid .status-card { min-width:0; }
.tribelog-status-grid .status-card strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.small-status { font-size:12px !important; }
.tribelog-notice { border:1px solid var(--border); border-radius:9px; padding:11px 13px; margin:12px 0 18px; font-size:13px; }
.tribelog-notice.success { border-color:rgba(47,214,161,.45); background:rgba(47,214,161,.08); color:#8ff0cf; }
.tribelog-notice.info { border-color:rgba(0,215,255,.35); background:rgba(0,215,255,.07); color:var(--cyan-bright); }
.tribelog-notice.error { border-color:rgba(255,92,112,.45); background:rgba(255,92,112,.08); color:#ff9baa; }
.tribelog-form-row { display:flex; gap:12px; align-items:end; }
.tribelog-form-row .field-grow { flex:1; min-width:0; }
.tribelog-settings-grid { display:grid; grid-template-columns:minmax(220px,1fr) minmax(220px,1fr); gap:14px; align-items:end; }
.tribelog-webhook-field { grid-column:1 / -1; }
.secret-state { color:var(--bone-dim); font-size:11px; margin-top:7px; }
.relay-toggle { display:flex; align-items:center; gap:9px; min-height:42px; color:var(--bone); font-size:13px; }
.relay-toggle input { width:18px; height:18px; accent-color:var(--cyan); }
.tribelog-actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:15px; }
.tribelog-actions form { margin:0; }
.tribelog-diagnostics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.tribelog-diagnostics > div { background:var(--bg-inset); border:1px solid var(--border); border-radius:9px; padding:11px; min-width:0; }
.tribelog-diagnostics span { display:block; color:var(--bone-dim); font-size:10px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:5px; }
.tribelog-diagnostics strong { display:block; font-size:12px; overflow-wrap:anywhere; }
.tribelog-diagnostics .diagnostic-wide { grid-column:1 / -1; }
button.danger, .danger { border-color:rgba(255,92,112,.45); color:#ff9baa; background:rgba(255,92,112,.08); }
button.danger:hover { border-color:#ff667c; background:rgba(255,92,112,.14); }
@media (max-width:1050px) {
    .tribelog-status-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .tribelog-diagnostics { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
    .tribelog-status-grid, .tribelog-settings-grid, .tribelog-diagnostics { grid-template-columns:1fr; }
    .tribelog-form-row { flex-direction:column; align-items:stretch; }
    .tribelog-webhook-field, .tribelog-diagnostics .diagnostic-wide { grid-column:auto; }
}