:root{--bg: #0d0f14;--surface: #151820;--surface2: #1c2030;--border: #2a3050;--gold: #c9a84c;--gold-light: #e8c96a;--gold-dim: #7a6228;--blue: #4a8fc1;--text: #d4cfc4;--text-dim: #a7a098;--green: #5cb88a;--red: #c05050;--purple: #8a6fc1;--orange: #c87840;--fs-11px: 11px;--fs-15px: 15px;--fs-18px: 18px;--fs-28px: 28px;--fs-52px: 52px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:"Noto Serif TC",serif;font-weight:300;min-height:100vh}body:before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 20% 20%,rgba(74,143,193,.06) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,rgba(201,168,76,.06) 0%,transparent 50%);pointer-events:none;z-index:0}.container{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:24px 16px}header{text-align:center;margin-bottom:32px;position:relative}header h1{font-family:Cinzel,serif;font-size:var(--fs-28px);font-weight:700;color:var(--gold);letter-spacing:4px;text-shadow:0 0 30px rgba(201,168,76,.3)}header p{color:var(--text-dim);font-size:var(--fs-18px);margin-top:6px;letter-spacing:2px}.gold-line{width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:12px auto}.lang-toggle{position:absolute;top:0;right:0;display:flex;border:1px solid var(--border);border-radius:4px;overflow:hidden}.lang-btn{padding:6px 12px;font-family:Cinzel,serif;font-size:var(--fs-15px);letter-spacing:1px;cursor:pointer;background:var(--surface2);color:var(--text-dim);border:none;transition:all .2s}.lang-btn:first-child{border-right:1px solid var(--border)}.lang-btn.active{background:var(--gold-dim);color:#fff}.lang-btn:hover:not(.active){color:var(--text)}.layout{display:grid;grid-template-columns:280px 1fr 260px;gap:16px;align-items:stretch}@media(max-width:900px){.layout{grid-template-columns:1fr}}@media(max-width:600px){.lang-toggle{position:static;margin:8px auto 0;width:fit-content}}.layout>div{display:flex;flex-direction:column}.result-card{flex:1}.card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:20px;margin-bottom:16px;flex:1}.card:last-child{margin-bottom:0}.card-title{font-family:Cinzel,serif;font-size:var(--fs-18px);font-weight:600;color:var(--gold);letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:8px}.card-title:before{content:"";width:3px;height:14px;background:var(--gold);display:inline-block;flex-shrink:0}label{display:block;font-size:var(--fs-15px);color:var(--text-dim);margin-bottom:8px;letter-spacing:1px}select,input[type=number]{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--text);padding:8px 10px;font-size:var(--fs-15px);font-family:"Noto Serif TC",serif;outline:none;transition:border-color .2s}select:focus,input:focus{border-color:var(--gold-dim)}select option{background:var(--surface2)}.field{margin-bottom:12px}.ap-display{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:12px 14px;margin-bottom:12px}.ap-display .ap-row{display:flex;justify-content:space-between;font-size:var(--fs-15px);padding:3px 0}.ap-display .ap-label{color:var(--text-dim)}.ap-display .ap-val{font-family:Cinzel,serif}.ap-display .ap-val.ok{color:var(--green)}.ap-display .ap-val.warn{color:var(--red)}.ap-display .ap-val.neutral{color:var(--gold)}.ap-divider{height:1px;background:var(--border);margin:6px 0}.stat-grid-wrap{margin-bottom:20px}.stat-grid{display:grid;grid-template-columns:1fr;gap:6px}.stat-input-row{display:flex;align-items:center;gap:10px}.stat-badge{font-family:Cinzel,serif;font-size:var(--fs-15px);font-weight:600;width:36px;flex-shrink:0;text-align:left}.badge-str{color:var(--red)}.badge-dex{color:var(--green)}.badge-int{color:var(--blue)}.badge-luk{color:var(--purple)}.badge-matk{color:var(--gold)}.stat-input-row input{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:8px 10px;font-size:var(--fs-15px);color:var(--text);font-family:Cinzel,serif;outline:none;transition:border-color .2s}.stat-input-row input:focus{border-color:var(--gold-dim)}.class-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}.class-btn{padding:8px 4px;border:1px solid var(--border);border-radius:4px;background:var(--surface2);color:var(--text-dim);font-size:var(--fs-15px);font-family:"Noto Serif TC",serif;cursor:pointer;text-align:center;transition:all .2s;line-height:1.4}.class-btn:hover{border-color:var(--gold-dim);color:var(--text)}.class-btn.active{background:var(--gold-dim);border-color:var(--gold);color:#fff;font-weight:500}.wip-banner{display:none;position:absolute;inset:0;background:#0d0f14b3;border-radius:8px;z-index:10;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--purple);font-size:var(--fs-15px);gap:8px;padding:24px}.wip-banner.show{display:flex}.equip-header{display:flex;gap:12px;margin-bottom:20px;align-items:flex-end}.equip-header .field{flex:1;margin-bottom:5px}.equip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}@media(max-width:600px){.equip-grid{grid-template-columns:1fr}}.equip-slot{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:12px;transition:border-color .2s}.equip-slot:hover{border-color:var(--gold-dim)}.slot-name{font-size:var(--fs-15px);color:var(--text);letter-spacing:1px;margin-bottom:8px;font-family:Cinzel,serif}.slot-stats{display:flex;gap:6px}.slot-stats .mini-field{flex:1}.slot-stats label{font-size:var(--fs-15px);text-align:center;margin-bottom:4px}.slot-stats input{padding:5px 4px;text-align:center;font-size:var(--fs-15px)}.result-card{background:linear-gradient(135deg,#151820,#1a1e2e);border:1px solid var(--gold-dim);border-radius:8px;padding:24px;flex:1}.result-label{font-size:var(--fs-15px);color:var(--text-dim);letter-spacing:3px;text-transform:uppercase;font-family:Cinzel,serif;text-align:center}.result-main{font-family:Cinzel,serif;font-size:var(--fs-52px);font-weight:700;color:var(--gold-light);text-shadow:0 0 40px rgba(201,168,76,.4);line-height:1;margin:10px 0 4px;transition:transform .2s;text-align:center}.result-breakdown{margin-top:20px}.breakdown-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);font-size:var(--fs-15px)}.breakdown-row:last-child{border-bottom:none}.breakdown-row span:first-child{color:var(--text-dim)}.breakdown-row span:last-child{color:var(--text);font-family:Cinzel,serif}.breakdown-row.total span{color:var(--gold);font-size:var(--fs-15px);font-weight:600}.breakdown-row.col{flex-direction:column;align-items:flex-start;gap:2px}.breakdown-row.col span:last-child{text-align:left;font-size:var(--fs-xs);color:var(--text-dim)}.formula-block .formula-hint{margin-top:4px;padding:6px}.formula-hint{margin-top:16px;padding:10px;background:var(--surface);border-radius:4px;font-size:var(--fs-11px);color:var(--text-dim);text-align:left;line-height:1.8}.formula-hint em{color:var(--blue);font-style:normal}.formula-hint b{color:var(--text-dim)}.breakdown-section-label{font-size:var(--fs-15px);color:var(--gold-dim);letter-spacing:1.5px;text-transform:uppercase;font-family:Cinzel,serif;margin:12px 0 4px}.save-dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;margin-left:6px;opacity:0;transition:opacity .3s;flex-shrink:0}.save-dot.flash{opacity:1}.reset-btn{width:100%;margin-top:12px;padding:8px;background:transparent;border:1px solid var(--border);border-radius:4px;color:var(--text-dim);font-size:var(--fs-15px);font-family:"Noto Serif TC",serif;cursor:pointer;letter-spacing:1px;transition:all .2s}.reset-btn:hover{border-color:var(--red);color:var(--red)}.skill-bonus-section{margin-top:18px}.skill-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}.skill-name{font-size:var(--fs-15px);color:var(--text-dim);flex:1}.skill-lv-label{font-size:var(--fs-15px);color:var(--text-dim);white-space:nowrap}.skill-lv-input{width:52px!important;padding:5px 6px!important;text-align:center!important;font-family:Cinzel,serif!important;font-size:var(--fs-15px)!important;border-color:var(--purple)!important;color:var(--gold-light)!important}.skill-stat-row{display:flex;gap:6px;margin-top:4px}.skill-stat-badge{font-size:var(--fs-15px);color:var(--text-dim);background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:3px 8px;flex:1;text-align:center}.skill-stat-badge span{color:var(--gold-light);font-family:Cinzel,serif}.site-footer{flex-wrap:wrap;display:flex;justify-content:center;align-items:center;gap:4px;margin-top:24px;padding:16px 0;border-top:1px solid var(--border);font-size:var(--fs-15px);color:var(--text-dim);letter-spacing:1px}.site-footer a{color:var(--gold-dim);text-decoration:none}.site-footer a:hover{color:var(--gold)}.site-footer .footer-version{width:100%;text-align:center;margin-top:4px}.mastery-card{flex:0 0 auto}.field-hint{font-size:var(--fs-15px);color:var(--text-dim);margin-top:6px}
