:root{
  --bg:#0d0f14;--ink:#eef1f7;--mut:#9aa3b2;--stroke:#ffffff18;--pri:#ffb56b;--pri2:#7ee8fa;--card:#ffffff0b
}
*{box-sizing:border-box}
body{margin:0;background:
 radial-gradient(1200px 800px at -10% -10%, #7ee8fa14 0,#0000 60%),
 radial-gradient(1200px 800px at 110% 110%, #ffb56b14 0,#0000 60%), var(--bg);
 color:var(--ink); font:16px/1.4 Inter, system-ui}
.hero{padding:26px 20px 10px; text-align:center}
.hero h1{margin:0}
.layout{
  max-width:1200px; margin:auto; padding:16px; display:grid; gap:16px;
  grid-template-columns:1.1fr 1fr; grid-template-areas:"A B" "C B";
}
.card{
  background:var(--card); border:1px solid var(--stroke); border-radius:20px;
  padding:14px; backdrop-filter:blur(8px); box-shadow:0 20px 80px #0008
}
/* A */
.A{grid-area:A}
.A input{display:none}
.subtabs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:8px}
.subtabs label{padding:10px; border:1px solid var(--stroke); border-radius:12px; text-align:center; background:#ffffff0e; cursor:pointer}
#a1:checked ~ .subtabs label[for=a1], #a2:checked ~ .subtabs label[for=a2], #a3:checked ~ .subtabs label[for=a3]{box-shadow:inset 0 0 0 2px #fff2}
.area{display:none; animation:fade .25s ease}
#a1:checked ~ .a1, #a2:checked ~ .a2, #a3:checked ~ .a3{display:grid}
@keyframes fade{from{opacity:0; transform:translateY(6px)}}
.A .a1{grid-template-columns:auto 1fr; gap:12px; align-items:center}
.avatar{width:110px; height:110px; border-radius:22px; background:radial-gradient(60px 60px at 70% 35%, #fff2 0,#0000 60%), linear-gradient(135deg,#2a2e35,#1a1d22); border:2px solid #ffffff22}
.stats{display:grid; gap:8px}
.stats div{display:grid; grid-template-columns:110px 1fr; gap:8px; color:var(--mut)}
.stats i{--v:55%; display:block; height:8px; border-radius:999px; background:#ffffff18; position:relative}
.stats i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--v); border-radius:inherit; background:linear-gradient(90deg,var(--pri2),#a0f)}
.pills{grid-column:1/-1; display:flex; gap:8px; flex-wrap:wrap}
.pills b{padding:6px 10px; border:1px solid var(--stroke); border-radius:999px; background:#ffffff10}
.A .a2 .list{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.A .a2 .list li{padding:10px 12px; border:1px solid var(--stroke); border-radius:12px; background:#ffffff10}
.A .a3 .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.A .a3 figure{aspect-ratio:1/1; border:1px dashed #ffffff33; border-radius:14px}
.A .a3 .ghost{display:grid; place-items:center; color:var(--mut)}

/* B */
.B{grid-area:B}
.B h3{margin:6px 0}
.B textarea{
  width:100%; min-height:90px; border-radius:12px; border:1px solid var(--stroke);
  background:#ffffff0f; color:var(--ink); padding:10px 12px; outline:none
}
.B details{margin:6px 0}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips span{padding:6px 10px; border:1px solid var(--stroke); border-radius:999px; background:#ffffff10}
.toggles{display:flex; flex-wrap:wrap; gap:8px}
.toggles label{display:block}
.toggles input{display:none}
.toggles span{display:inline-block; padding:8px 10px; border:1px solid var(--stroke); border-radius:10px; background:#ffffff10}
.toggles input:checked + span{box-shadow:0 0 0 2px #7ee8fa55}
.row{display:flex; gap:8px; margin-top:8px}
.tag{flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--stroke); background:#ffffff10; color:var(--ink)}
.btn{padding:10px 12px; border-radius:10px; border:1px solid var(--stroke); background:#ffffff12; color:var(--ink); cursor:pointer}

/* C */
.C{grid-area:C}
.C header{display:flex; justify-content:space-between; align-items:center}
.C .total{padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); background:#ffffff10}
.rows{list-style:none; padding:0; margin:10px 0 0; display:grid; gap:10px}
.rows li{display:grid; grid-template-columns:140px 1fr; gap:10px; align-items:center}
.rows label{color:var(--mut)}
input[type=range]{appearance:none; height:10px; border-radius:999px; background:#ffffff18}
input[type=range]::-webkit-slider-thumb{appearance:none; width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,var(--pri2),var(--pri))}
input[type=range]::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,var(--pri2),var(--pri))}
.foot{color:var(--mut); text-align:center; padding:16px}

@media (max-width:980px){
  .layout{grid-template-columns:1fr; grid-template-areas:"A" "B" "C"}
  .A .a3 .grid{grid-template-columns:repeat(2,1fr)}
}