:root{
  --bg:#080c17;--panel:#101728;--panel2:#151e31;--line:#27334b;--text:#eef3ff;--muted:#91a0bb;
  --gold:#e9b85b;--gold2:#ffd98b;--cyan:#65d7ff;--green:#55d39a;--red:#ff6b79;--shadow:0 20px 60px #0008;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-text-size-adjust:100%;text-size-adjust:100%
}
*{box-sizing:border-box}html,body{overflow-x:hidden}button,input,textarea,select{max-width:100%}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}body{margin:0;background:radial-gradient(circle at 70% -10%,#1a2848 0,#080c17 45%);color:var(--text);min-height:100vh}
button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit}.topbar{height:76px;border-bottom:1px solid #ffffff10;background:#080c17e8;backdrop-filter:blur(18px);display:flex;align-items:center;padding:0 28px;gap:28px;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:11px;min-width:235px}.brand-mark{width:40px;height:40px;border:1px solid #e9b85b66;border-radius:12px;display:grid;place-items:center;color:var(--gold2);font-weight:900;background:#e9b85b12}.brand b{display:block}.brand small{display:block;color:var(--muted);font-size:10px;margin-top:2px;letter-spacing:.7px}
.topnav{display:flex;gap:5px;flex:1}.nav-btn,.tab,.ghost{background:transparent;border:1px solid transparent;padding:10px 13px;border-radius:10px;color:var(--muted)}.nav-btn.active,.nav-btn:hover,.tab.active{background:#ffffff08;color:var(--text);border-color:#ffffff10}.sync{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px}.sync span:first-child{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
.shell{max-width:1280px;margin:auto;padding:32px 24px 80px}.view{display:none}.view.active{display:block}.hero{min-height:410px;display:grid;grid-template-columns:1.4fr .6fr;gap:30px;align-items:center}.eyebrow{color:var(--gold);font-size:11px;letter-spacing:2px;font-weight:800}.hero h1{font-size:clamp(38px,6vw,68px);line-height:1.02;margin:13px 0}.hero h1 em{font-style:normal;color:#91a0bb}.hero p{color:var(--muted);max-width:670px;line-height:1.7}.hero-actions{display:flex;gap:10px;margin-top:24px}.primary{background:linear-gradient(135deg,#e9b85b,#bd7d2d);border:0;color:#17100a;padding:11px 16px;border-radius:10px;font-weight:800;box-shadow:0 8px 24px #e9b85b1e}.hero-card{height:270px;border:1px solid #ffffff10;background:linear-gradient(145deg,#151f34,#0d1321);border-radius:26px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow)}.orb{font-size:70px;margin-bottom:15px;filter:drop-shadow(0 0 25px #e9b85b88)}.hero-card span{color:var(--muted);font-size:12px;margin-top:5px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat-card{background:#ffffff05;border:1px solid #ffffff0b;border-radius:16px;padding:18px}.stat-card span{color:var(--muted);font-size:12px}.stat-card strong{display:block;font-size:30px;margin-top:7px}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin:48px 0 18px}.section-head h2{margin:4px 0;font-size:28px}.section-head p{color:var(--muted);font-size:13px}.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.workflow>div{padding:20px;border:1px solid #ffffff0b;border-radius:16px;background:#ffffff04}.workflow b{color:var(--gold);font-size:12px}.workflow h3{margin:12px 0 4px}.workflow p{color:var(--muted);font-size:12px;margin:0}
.defense-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.def-card,.group-card{border:1px solid #ffffff10;background:#101728;border-radius:18px;padding:18px}.def-head,.group-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.badge{font-size:10px;border:1px solid #ffffff12;color:var(--muted);padding:5px 8px;border-radius:99px}.team-strip{display:flex;gap:8px;margin:15px 0}.unit-chip{width:76px;height:86px;border-radius:12px;background:#080d18;border:1px solid #ffffff0c;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.unit-chip .portrait{width:52px;height:52px;border-radius:10px;background:linear-gradient(135deg,#273655,#10182b);display:grid;place-items:center;font-size:22px}.unit-chip small{font-size:9px;color:var(--muted);margin-top:4px;max-width:65px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-actions{display:flex;gap:8px}.small-btn{border:1px solid #ffffff12;background:#ffffff06;border-radius:9px;padding:8px 10px;font-size:11px}.small-btn:hover{background:#ffffff10}
.attack-groups{display:grid;gap:14px}.group-head h3{margin:0}.group-meta{color:var(--muted);font-size:11px}.attack-row{border-top:1px solid #ffffff0a;margin-top:13px;padding-top:13px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.attack-name{font-weight:700}.attack-name small{display:block;color:var(--muted);font-weight:400;margin-top:4px}.library-tabs{display:flex;gap:6px;border-bottom:1px solid #ffffff0b;margin-bottom:14px}.search-row{display:flex;gap:8px;margin-bottom:15px}.search-row input,.field input,.field textarea,.field select{width:100%;background:#080d18;border:1px solid #ffffff12;border-radius:10px;padding:11px;color:var(--text);outline:none}.library-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.library-item{border:1px solid #ffffff0b;background:#ffffff04;border-radius:13px;padding:10px}.library-item .portrait{height:100px;border-radius:10px;background:linear-gradient(145deg,#263655,#0e1423);display:grid;place-items:center;font-size:30px}.library-item b{display:block;font-size:11px;margin-top:8px}.library-item small{color:var(--muted);font-size:9px}
.modal-bg{position:fixed;inset:0;background:#000b;backdrop-filter:blur(8px);z-index:50;display:grid;place-items:center;padding:20px}.modal{width:min(1100px,100%);max-height:92vh;overflow:auto;background:#0e1524;border:1px solid #ffffff12;border-radius:22px;box-shadow:var(--shadow)}.modal-top{padding:18px 20px;border-bottom:1px solid #ffffff0b;display:flex;justify-content:space-between;align-items:center}.modal-body{padding:20px}.close{border:0;background:#ffffff08;border-radius:9px;padding:8px 11px}.builder-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.builder-panel{background:#ffffff03;border:1px solid #ffffff0b;border-radius:15px;padding:16px}.builder-panel h3{margin-top:0}.unit-builder{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.builder-unit{border:1px solid #ffffff0b;background:#080d18;border-radius:12px;padding:10px}.portrait.big{height:120px;font-size:42px}.skill-row{display:flex;gap:5px;margin-top:8px}.skill-btn{flex:1;border:1px solid #ffffff14;background:#ffffff05;border-radius:7px;padding:6px;font-size:10px}.skill-btn.selected{border-color:var(--gold);color:var(--gold2);background:#e9b85b12}.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0}.slot{height:58px;border:1px dashed #ffffff18;border-radius:10px;display:grid;place-items:center;color:#64718a;font-size:11px}.slot.filled{border-style:solid;color:var(--text);background:#ffffff05}.pet-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field{margin-bottom:11px}.field label{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}.stat-keys{display:flex;flex-wrap:wrap;gap:5px;margin:8px 0}.key{border:1px solid #ffffff12;background:#ffffff05;color:#b9c5da;border-radius:99px;padding:5px 7px;font-size:9px}.key:hover{border-color:var(--cyan);color:var(--cyan)}.save-row{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
#toast{position:fixed;bottom:22px;right:22px;background:#141d2e;border:1px solid #ffffff12;padding:11px 15px;border-radius:10px;transform:translateY(100px);opacity:0;transition:.2s;z-index:100;font-size:12px}.toast-show{transform:none!important;opacity:1!important}
@media(max-width:900px){.topbar{padding:0 14px}.topnav{overflow:auto}.brand{min-width:auto}.brand div{display:none}.hero{grid-template-columns:1fr}.hero-card{display:none}.workflow{grid-template-columns:1fr 1fr}.defense-list{grid-template-columns:1fr}.library-grid{grid-template-columns:repeat(3,1fr)}.builder-grid{grid-template-columns:1fr}.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.shell{padding:20px 12px 60px}.topbar{height:auto;min-height:64px;flex-wrap:wrap}.topnav{order:3;flex-basis:100%;padding-bottom:7px}.hero h1{font-size:40px}.workflow{grid-template-columns:1fr}.library-grid{grid-template-columns:repeat(2,1fr)}.unit-builder{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}}