.attribute-workbench { --attribute-gold:#d5b579; position:relative; overflow:hidden; margin:0 0 26px; border:1px solid #695039; border-radius:9px; background:radial-gradient(ellipse at 0 0,#48324d55,transparent 58%),linear-gradient(125deg,#1c151f,#130f18 70%); color:#e4d8c8; box-shadow:inset 0 0 0 4px #100d1444,0 12px 26px #0002; }
.attribute-workbench::before { content:""; position:absolute; pointer-events:none; inset:5px; border:1px solid #9d79532b; border-radius:5px; }
.attribute-workbench header { height:auto; }
.attribute-heading { position:relative; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; padding:24px 28px 20px; border-bottom:1px solid #70553844; }
.attribute-eyebrow { color:#9d8263; font-size:9px; letter-spacing:3px; }
.attribute-heading h3 { margin:5px 0 2px; color:#f1d7a5; font-size:24px; font-weight:600; letter-spacing:1px; }
.attribute-heading p { margin:0; color:#b6a7b5; font-size:12px; }
.attribute-step { display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:#b3a6ad; font-size:12px; }
.attribute-step > div { display:flex; gap:3px; padding:4px; border:1px solid #55424c; border-radius:5px; background:#100c13; }
.attribute-step button { min-width:35px; padding:5px 8px; border:1px solid transparent; border-radius:3px; background:transparent; color:#b7a6af; font-size:12px; }
.attribute-step button[aria-pressed="true"] { color:#f9dda5; background:#473525; border-color:#84623e; box-shadow:inset 0 0 8px #b5945330; }
.attribute-step button:hover { color:#ffe9ba; border-color:#a48056; }
.attribute-body { display:grid; grid-template-columns:200px minmax(0,1fr); gap:26px; padding:26px 28px 24px; align-items:center; }
.attribute-overview { text-align:center; min-width:0; }
.attribute-ring { position:relative; margin:0 auto 14px; width:190px; height:190px; }
.attribute-ring svg { width:100%; height:100%; fill:none; }
.attribute-ring-outer { stroke:#76533e; stroke-width:.6; }
.attribute-ring-track { stroke:#382932; stroke-width:8; }
.attribute-ring-segment { stroke-width:7; transform:rotate(-90deg); transform-origin:center; }
.attribute-ring-runes { fill:#ad8b57; stroke:none; }
.attribute-ring-center { position:absolute; inset:22px; display:flex; flex-direction:column; justify-content:center; gap:1px; pointer-events:none; }
.attribute-ring-center span { color:#c5b4bf; font-size:11px; }
.attribute-ring-center strong { color:#f1dbad; font-size:32px; font-weight:500; font-variant-numeric:tabular-nums; line-height:1.45; overflow-wrap:anywhere; }
.attribute-ring-center small { font-size:8px; color:#8f768b; letter-spacing:3px; }
.attribute-overview-delta { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; font-size:10px; color:#a794a1; }
.attribute-overview-delta strong { color:#ddc69d; font-weight:500; }
.attribute-overview p { font-size:11px; line-height:1.8; margin:14px 0; color:#938293; }
.attribute-legend { display:grid; grid-template-columns:repeat(3,1fr); gap:7px 5px; color:#b4a3b0; font-size:9px; }
.attribute-legend span { white-space:nowrap; }
.attribute-legend i { display:inline-block; width:4px; height:4px; margin:0 5px 2px 0; background:var(--attribute-color); transform:rotate(45deg); }
.attribute-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.attribute-strength { --attribute-color:#e79a83; --attribute-shade:#e79a8318; }
.attribute-dexterity { --attribute-color:#b6ce7d; --attribute-shade:#b6ce7d18; }
.attribute-intelligence { --attribute-color:#ac9bdf; --attribute-shade:#ac9bdf18; }
.attribute-energy { --attribute-color:#7ac5dd; --attribute-shade:#7ac5dd18; }
.attribute-armor { --attribute-color:#d5b579; --attribute-shade:#d5b57918; }
.attribute-vitality { --attribute-color:#dc8ca9; --attribute-shade:#dc8ca918; }
.attribute-card { min-width:0; padding:17px 16px 13px; border:1px solid #4d3b46; border-radius:5px; background:linear-gradient(145deg,var(--attribute-shade),transparent 80%),#1a131e; position:relative; transition:border-color .15s,box-shadow .15s; }
.attribute-card:hover,.attribute-card:focus-within { border-color:var(--attribute-color); box-shadow:0 0 18px var(--attribute-shade); }
.attribute-card.is-changed { border-color:#b19660; }
.attribute-card-heading { display:flex; align-items:center; gap:11px; min-width:0; margin-bottom:15px; }
.attribute-emblem { display:grid; place-items:center; width:42px; height:46px; flex:0 0 42px; color:var(--attribute-color); border:1px solid var(--attribute-color); border-radius:9px 9px 16px 16px; background:radial-gradient(circle,var(--attribute-shade),#110d16 75%); box-shadow:inset 0 0 0 3px #120d17,0 3px 10px #0004; }
.attribute-emblem svg { width:33px; height:33px; }
.attribute-card-heading h4 { font-size:17px; color:var(--attribute-color); font-weight:550; margin:0; }
.attribute-card-heading small { display:block; color:#9e8b99; letter-spacing:1.2px; font-size:7px; }
.attribute-changed { font-size:8px; color:#e1c790; margin-left:auto; white-space:nowrap; }
.attribute-control { display:grid; grid-template-columns:29px minmax(0,1fr) 29px; align-items:center; gap:5px; }
.attribute-control > button { display:grid; place-items:center; width:29px; height:30px; padding:0; background:#130e19; border-color:#604952; color:#c5b0ba; font-size:19px; line-height:1; border-radius:4px; }
.attribute-control > button:hover:enabled { border-color:var(--attribute-color); color:var(--attribute-color); background:var(--attribute-shade); }
.attribute-control > button:disabled { opacity:.25; }
.attribute-control .field { display:block; margin:0; min-width:0; }
.attribute-control .field label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.attribute-control .field input { width:100%; padding:3px 0 4px; border:0; border-bottom:1px solid #674e474f; border-radius:0; background:transparent; text-align:center; color:#f3e3d0; font-size:27px; line-height:1.3; font-variant-numeric:tabular-nums; appearance:textfield; -moz-appearance:textfield; box-shadow:none; }
.attribute-control input::-webkit-inner-spin-button,.attribute-control input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.attribute-control input:focus { border-bottom-color:var(--attribute-color); }
.attribute-control .field small:empty { display:none; }
.attribute-missing { text-align:center; font-size:11px; color:#9f8b96; }
.attribute-card-meta { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px; margin:9px 0 11px; font-size:9px; color:#9f8d9c; }
.attribute-card-meta [data-attribute-delta] { color:#b9a8b2; }
.attribute-card.is-changed [data-attribute-delta] { color:#ead1a0; }
.attribute-share-track { height:3px; overflow:hidden; background:#3b2c38; }
.attribute-share-track span { display:block; width:0; height:100%; background:var(--attribute-color); transition:width .15s ease; }
.attribute-share-label { display:flex; justify-content:space-between; align-items:center; font-size:8px; color:#8d7989; margin-top:5px; }
.attribute-share-label b { color:#b09aa9; font-weight:500; }
.attribute-footer { display:flex; flex-direction:column; gap:4px; padding:15px 28px 18px; border-top:1px solid #6b4e443b; background:#100d1560; color:#bba8b5; font-size:11px; }
.attribute-footer b { color:#ebd0a0; font-weight:500; }
.attribute-footer small { font-size:10px; color:#8d7c8b; }
@media(max-width:1250px) { .attribute-body { grid-template-columns:165px minmax(0,1fr); gap:18px; padding:22px; } .attribute-ring { width:160px; height:160px; } .attribute-ring-center strong { font-size:26px; } .attribute-cards { gap:9px; } .attribute-card { padding:13px 10px 10px; } .attribute-emblem { width:34px; height:39px; flex-basis:34px; } .attribute-card-heading { gap:7px; } .attribute-card-heading h4 { font-size:16px; } }
@media(max-width:1100px) { .attribute-body { grid-template-columns:1fr; } .attribute-overview { display:grid; grid-template-columns:145px 1fr; gap:8px 22px; align-items:center; text-align:left; } .attribute-ring { grid-row:1 / 4; width:145px; height:145px; margin:0; } .attribute-overview-delta { justify-content:start; align-self:end; font-size:12px; } .attribute-overview p { margin:0; font-size:11px; } .attribute-overview p br { display:none; } .attribute-legend { max-width:280px; align-self:start; font-size:10px; } .attribute-ring-center { text-align:center; } }
@media(max-width:900px) and (min-width:761px) { .attribute-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .attribute-heading { padding:20px; } .attribute-body { padding:20px 16px; gap:20px; } .attribute-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .attribute-card { padding:14px 11px 10px; } .attribute-card-heading h4 { font-size:15px; } .attribute-card-heading small { font-size:6px; } .attribute-control .field input { font-size:24px; } .attribute-footer { padding:16px; } .attribute-changed { position:absolute; top:4px; right:6px; font-size:7px; } }
@media(max-width:370px) { .attribute-cards { grid-template-columns:1fr; } .attribute-overview { grid-template-columns:120px 1fr; gap:8px 12px; } .attribute-ring { width:120px; height:120px; } .attribute-ring-center strong { font-size:22px; } .attribute-legend { grid-template-columns:repeat(2,1fr); } }
@media(prefers-reduced-motion:reduce) { .attribute-card,.attribute-share-track span { transition:none; } }