:root{--bg-primary: #0f0e17;--bg-secondary: #1a1a2e;--bg-card: #16213e;--bg-card-hover: #1c2a4a;--border-gold: #c9a84c;--border-dim: #2a2a4a;--text-primary: #e8dcc8;--text-secondary: #9b8e7e;--text-gold: #d4a84b;--text-muted: #5a5a7a;--accent-red: #8b2500;--accent-blue: #1e3a5f;--accent-green: #2d5a27;--font-display: "MedievalSharp", cursive;--font-body: "Inter", -apple-system, sans-serif;--navbar-height: 64px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}body{background-image:radial-gradient(ellipse at 20% 50%,rgba(30,58,95,.15) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(139,37,0,.08) 0%,transparent 50%)}#root{height:100%}.app{display:flex;flex-direction:column;min-height:100%}.app-content{flex:1;padding-bottom:var(--navbar-height);overflow-y:auto}.page{padding:20px 16px;max-width:480px;margin:0 auto}.page-center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh}.page-header{text-align:center;margin-bottom:24px}.logo{font-family:var(--font-display);font-size:42px;color:var(--text-gold);letter-spacing:3px;text-shadow:0 0 20px rgba(212,168,75,.3);margin-bottom:2px}.subtitle{font-size:12px;text-transform:uppercase;letter-spacing:4px;color:var(--text-secondary)}.page-title{font-family:var(--font-display);font-size:26px;color:var(--text-gold)}.greeting{text-align:center;margin-bottom:28px;padding:12px;border:1px solid var(--border-dim);border-radius:8px;background:var(--bg-secondary)}.greeting-text{color:var(--text-secondary);font-size:14px}.greeting-text strong{color:var(--text-primary)}.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:24px}.menu-card{display:flex;flex-direction:column;align-items:center;padding:20px 12px;background:var(--bg-card);border:1px solid var(--border-dim);border-radius:10px;text-decoration:none;color:inherit;transition:all .2s ease;cursor:pointer}.menu-card:hover,.menu-card:active{background:var(--bg-card-hover);border-color:var(--border-gold);transform:translateY(-1px);box-shadow:0 4px 16px #c9a84c1a}.menu-icon{font-size:28px;margin-bottom:8px;filter:grayscale(.3)}.menu-title{font-family:var(--font-display);font-size:16px;color:var(--text-gold);margin-bottom:4px}.menu-desc{font-size:11px;color:var(--text-secondary);text-align:center}.loading-orb{width:48px;height:48px;border:3px solid var(--border-dim);border-top-color:var(--border-gold);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:var(--text-secondary);font-style:italic}.empty-state{text-align:center;padding:40px 20px;border:1px dashed var(--border-dim);border-radius:12px;background:var(--bg-secondary)}.empty-icon{font-size:48px;margin-bottom:16px;opacity:.6}.empty-state h3{font-family:var(--font-display);color:var(--text-gold);margin-bottom:8px}.empty-state p{color:var(--text-secondary);font-size:14px;margin-bottom:16px}.btn{display:inline-block;padding:10px 24px;border:1px solid var(--border-gold);border-radius:6px;font-family:var(--font-display);font-size:15px;cursor:pointer;transition:all .2s;text-decoration:none}.btn-primary{background:linear-gradient(135deg,var(--accent-red),#6b1d00);color:var(--text-gold);border-color:var(--border-gold)}.btn-primary:hover:not(:disabled){box-shadow:0 0 12px #c9a84c4d}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border-color:var(--border-dim)}.btn:disabled{opacity:.4;cursor:not-allowed}.hint{font-size:11px;color:var(--text-muted);margin-top:8px}.settings-section{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:10px;padding:16px;margin-bottom:16px}.section-title{font-family:var(--font-display);font-size:18px;color:var(--text-gold);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border-dim)}.info-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.info-row+.info-row{border-top:1px solid rgba(42,42,74,.5)}.info-label{font-size:13px;color:var(--text-secondary)}.info-value{font-size:14px;color:var(--text-primary)}.badge-free{background:var(--accent-blue);padding:2px 8px;border-radius:4px;font-size:12px}.navbar{position:fixed;bottom:0;left:0;right:0;height:var(--navbar-height);background:var(--bg-secondary);border-top:1px solid var(--border-dim);display:flex;align-items:center;justify-content:space-around;z-index:100;padding-bottom:env(safe-area-inset-bottom,0)}.nav-tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 16px;background:none;border:none;color:var(--text-muted);font-size:10px;cursor:pointer;transition:color .2s}.nav-tab.active{color:var(--text-gold)}.nav-tab:hover{color:var(--text-secondary)}.nav-icon{font-size:20px}.nav-label{font-family:var(--font-body);text-transform:uppercase;letter-spacing:1px}.version-info{text-align:center;font-size:11px;color:var(--text-muted);padding:20px 0;letter-spacing:2px;text-transform:uppercase}.btn-full{display:block;width:100%;text-align:center;margin-top:16px}.btn-danger{background:linear-gradient(135deg,#4a1010,#2a0808);color:#c66;border-color:#5a2020;margin-bottom:24px}.text-red{color:#c44}.char-counter{font-size:12px;color:var(--text-muted);margin-top:4px}.char-list{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.char-card{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:var(--bg-card);border:1px solid var(--border-dim);border-radius:10px;cursor:pointer;transition:all .2s;text-align:left;color:inherit;width:100%}.char-card:hover{border-color:var(--border-gold);background:var(--bg-card-hover)}.char-card-left{display:flex;flex-direction:column;gap:2px}.char-card-name{font-family:var(--font-display);font-size:17px;color:var(--text-gold)}.char-card-info{font-size:12px;color:var(--text-secondary)}.char-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.char-card-hp{font-size:13px;color:var(--accent-green);font-weight:600}.char-card-ac{font-size:12px;color:var(--text-secondary)}.lang-switch{display:flex;gap:8px}.lang-btn{flex:1;padding:10px;background:var(--bg-secondary);border:1px solid var(--border-dim);border-radius:6px;color:var(--text-secondary);font-size:14px;cursor:pointer;transition:all .2s;font-family:var(--font-body)}.lang-btn.active{border-color:var(--border-gold);color:var(--text-gold);background:var(--bg-card-hover)}.cc-page{padding-bottom:100px}.cc-progress{display:flex;justify-content:center;gap:8px;margin-bottom:20px}.cc-dot{width:10px;height:10px;border-radius:50%;background:var(--border-dim);transition:background .3s}.cc-dot.active{background:var(--text-gold);box-shadow:0 0 6px #d4a84b66}.cc-step{margin-bottom:20px}.cc-step-title{font-family:var(--font-display);font-size:20px;color:var(--text-gold);margin-bottom:16px;text-align:center}.cc-sub-title{font-family:var(--font-display);font-size:15px;color:var(--text-secondary);margin-bottom:10px}.cc-input{width:100%;padding:14px 16px;background:var(--bg-card);border:1px solid var(--border-dim);border-radius:8px;color:var(--text-primary);font-size:16px;font-family:var(--font-body);outline:none;transition:border-color .2s}.cc-input:focus{border-color:var(--border-gold)}.cc-input::placeholder{color:var(--text-muted)}.cc-options{display:flex;flex-direction:column;gap:10px}.cc-option{display:flex;flex-direction:column;padding:14px 16px;background:var(--bg-card);border:1px solid var(--border-dim);border-radius:10px;cursor:pointer;transition:all .2s;text-align:left;color:inherit;width:100%}.cc-option:hover{background:var(--bg-card-hover)}.cc-option.selected{border-color:var(--border-gold);background:var(--bg-card-hover);box-shadow:0 0 8px #c9a84c26}.cc-option-name{font-family:var(--font-display);font-size:17px;color:var(--text-gold);margin-bottom:4px}.cc-option-desc{font-size:12px;color:var(--text-secondary);line-height:1.4}.cc-points{text-align:center;font-size:14px;color:var(--text-secondary);margin-bottom:16px}.cc-points strong{color:var(--text-gold);font-size:18px}.cc-stats{display:flex;flex-direction:column;gap:8px}.cc-stat-row{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-card);border:1px solid var(--border-dim);border-radius:8px}.cc-stat-label{width:36px;font-weight:600;font-size:13px;color:var(--text-secondary)}.cc-stat-controls{display:flex;align-items:center;gap:8px;flex:1;justify-content:center}.cc-stat-btn{width:32px;height:32px;background:var(--bg-secondary);border:1px solid var(--border-dim);border-radius:6px;color:var(--text-gold);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}.cc-stat-btn:hover{background:var(--bg-card-hover)}.cc-stat-value{width:48px;text-align:center;font-size:18px;font-weight:600;color:var(--text-primary)}.cc-stat-bonus{font-size:12px;color:var(--accent-green);margin-left:2px}.cc-stat-final{width:60px;text-align:right;font-size:14px;color:var(--text-primary)}.cc-stat-mod{font-size:12px;color:var(--text-secondary)}.cc-spell-list{display:flex;flex-direction:column;gap:8px}.cc-spell{display:flex;flex-direction:column;padding:10px 14px;background:var(--bg-card);border:1px solid var(--border-dim);border-radius:8px;cursor:pointer;transition:all .2s;text-align:left;color:inherit;width:100%}.cc-spell.selected{border-color:var(--accent-blue);background:#1e3a5f4d}.cc-spell-name{font-family:var(--font-display);font-size:15px;color:var(--text-gold);margin-bottom:2px}.cc-spell-desc{font-size:11px;color:var(--text-secondary);line-height:1.3}.cc-review{background:var(--bg-card);border:1px solid var(--border-gold);border-radius:10px;padding:16px}.cc-review-header{text-align:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-dim)}.cc-review-name{font-family:var(--font-display);font-size:24px;color:var(--text-gold);display:block}.cc-review-info{font-size:13px;color:var(--text-secondary)}.cc-review-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.cc-review-stat{text-align:center;padding:8px;background:var(--bg-secondary);border-radius:6px}.cc-review-stat-label{display:block;font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.cc-review-stat-value{display:block;font-size:20px;font-weight:700;color:var(--text-primary)}.cc-review-stat-mod{display:block;font-size:12px;color:var(--text-secondary)}.cc-review-spells{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-dim)}.cc-review-spell-tag{display:inline-block;padding:3px 10px;margin:3px;background:#1e3a5f4d;border:1px solid var(--accent-blue);border-radius:4px;font-size:12px;color:var(--text-primary)}.cc-error{color:#c44;text-align:center;margin-top:12px;font-size:13px}.cc-nav{position:fixed;bottom:0;left:0;right:0;display:flex;gap:10px;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg-secondary);border-top:1px solid var(--border-dim);z-index:100}.cc-nav .btn{flex:1;text-align:center}.cs-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}.cs-back{background:none;border:1px solid var(--border-dim);border-radius:8px;color:var(--text-gold);font-size:20px;width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center}.cs-name{font-family:var(--font-display);font-size:24px;color:var(--text-gold)}.cs-subtitle{font-size:13px;color:var(--text-secondary)}.cs-section{background:var(--bg-card);border:1px solid var(--border-dim);border-radius:10px;padding:14px;margin-bottom:12px}.cs-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cs-stat-box{text-align:center;padding:10px 4px;background:var(--bg-secondary);border:1px solid var(--border-dim);border-radius:8px}.cs-stat-label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:2px}.cs-stat-value{display:block;font-size:22px;font-weight:700;color:var(--text-primary)}.cs-stat-mod{display:block;font-size:13px;color:var(--text-gold)}.cs-combat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cs-combat-box{text-align:center;padding:8px 4px;background:var(--bg-secondary);border-radius:6px}.cs-combat-label{display:block;font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:2px}.cs-combat-value{display:block;font-size:16px;font-weight:600;color:var(--text-primary)}.cs-features{display:flex;flex-direction:column;gap:8px}.cs-feature{padding:8px 10px;background:var(--bg-secondary);border-radius:6px}.cs-feature-name{display:block;font-family:var(--font-display);font-size:14px;color:var(--text-gold);margin-bottom:2px}.cs-feature-desc{display:block;font-size:11px;color:var(--text-secondary);line-height:1.3}.cs-spell-slots{font-size:12px;color:var(--text-secondary);margin-bottom:8px}.cs-inventory{display:flex;flex-wrap:wrap;gap:6px}.cs-inv-tag{padding:4px 10px;background:var(--bg-secondary);border:1px solid var(--border-dim);border-radius:4px;font-size:12px;color:var(--text-primary);text-transform:capitalize}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:var(--bg-primary)}::-webkit-scrollbar-thumb{background:var(--border-dim);border-radius:2px}