:root { --bg:#12151a; --card:#1a1f27; --line:#2a313c; --ink:#e7ecf3; --dim:#93a0b3; --accent:#c0392b; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 -apple-system,Segoe UI,Roboto,sans-serif; }
header { display:flex; align-items:center; gap:18px; padding:12px 20px; background:#0e1116; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { font-weight:700; color:var(--ink); text-decoration:none; }
nav a { color:var(--dim); text-decoration:none; margin-right:14px; }
nav a:hover, .brand:hover { color:#fff; }
.who { margin-left:auto; color:var(--dim); font-size:13px; }
.who a { color:var(--dim); }
main { padding:20px; max-width:1200px; margin:0 auto; }
h1 { font-size:22px; margin:0 0 16px; }
h1 small { color:var(--dim); font-weight:400; font-size:15px; }
h2 { font-size:16px; margin:24px 0 10px; }
.muted { color:var(--dim); }
.ok { color:#43c07a; } .err { color:#e2574c; }
.search { margin-bottom:16px; display:flex; gap:8px; }
input, select { background:#0e1116; border:1px solid var(--line); color:var(--ink); padding:8px 10px; border-radius:6px; }
button { background:var(--accent); border:0; color:#fff; padding:8px 16px; border-radius:6px; cursor:pointer; }
button:hover { filter:brightness(1.1); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px; text-align:center; text-decoration:none; color:var(--ink); display:block; }
.card:hover { border-color:var(--accent); }
.card img { width:100%; height:120px; object-fit:contain; background:#0e1116; border-radius:6px; }
.card .name { display:block; font-size:13px; margin-top:8px; }
.card .model { display:block; font-size:11px; color:var(--dim); }
.clips { display:flex; flex-wrap:wrap; gap:14px; }
.clips figure { margin:0; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px; text-align:center; }
.clips img { height:160px; background:#0e1116; border-radius:6px; display:block; }
.clips figcaption { color:var(--dim); font-size:12px; margin-top:6px; }
.skills { padding-left:18px; }
form.login { max-width:320px; margin:12vh auto; background:var(--card); padding:24px; border:1px solid var(--line); border-radius:12px; }
form label { display:block; margin:10px 0; color:var(--dim); font-size:13px; }
form label input, form label select { display:block; width:100%; margin-top:4px; color:var(--ink); }
form.import { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; max-width:420px; margin-top:20px; }
table { width:100%; border-collapse:collapse; margin-bottom:20px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); font-size:14px; }
th { color:var(--dim); font-weight:600; }
pre { background:#0e1116; border:1px solid var(--line); border-radius:8px; padding:12px; overflow:auto; font-size:12px; white-space:pre-wrap; }
@media (max-width:600px){ main{padding:12px} .clips img{height:120px} }
.cap { display:block; margin:6px 0 4px; border:1px solid var(--line); border-radius:6px; }
.noart { height:120px; display:flex; align-items:center; justify-content:center; background:#0e1116; border-radius:6px; color:var(--dim); font-size:12px; }
.credits { background:#1f2a1f; border:1px solid #2f4030; color:#8fd39a; padding:2px 8px; border-radius:20px; font-size:12px; }
.credits.zero { background:#2a1f1f; border-color:#472e2e; color:#e2857c; }
.pages { display:flex; flex-wrap:wrap; gap:6px; margin:20px 0; }
.pages a, .pages .here { padding:6px 11px; border:1px solid var(--line); border-radius:6px; text-decoration:none; color:var(--dim); font-size:13px; }
.pages a:hover { border-color:var(--accent); color:var(--ink); }
.pages .here { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---- the guide ---- */
main h2 { margin: 28px 0 8px; font-size: 17px; }
main p, main ul { max-width: 780px; line-height: 1.55; }
main ul { padding-left: 18px; }
main li { margin: 4px 0; }
figure.shot { margin: 14px 0 22px; max-width: 900px; }
figure.shot img { width: 100%; border: 1px solid #2a2f3a; border-radius: 6px; display: block; }
figure.shot figcaption { color: #8b93a3; font-size: 12px; margin-top: 6px; }

/* ---- the size slider ---- */
form.tuner { max-width: 620px; margin: 10px 0 18px; }
form.tuner label { display: block; font-weight: 600; margin-bottom: 6px; }
form.tuner output { color: #7ad18f; font-variant-numeric: tabular-nums; }
form.tuner input[type=range] { width: 100%; accent-color: #c0392b; }
form.tuner .small { font-size: 12px; margin: 6px 0 14px; }
figure.tune-shot { margin: 0 0 16px; height: 260px; display: flex;
                   align-items: center; justify-content: center; flex-direction: column; }
figure.tune-shot img { max-height: 200px; transform-origin: center bottom; transition: transform .1s; }
a.btn { display: inline-block; background: #c0392b; color: #fff; text-decoration: none;
        padding: 7px 14px; border-radius: 5px; font-size: 14px; }

/* ---- the tuning sliders ---- */
form.tuner .row { margin-bottom: 18px; }
figure.tune-shot { position: relative; }
figure.tune-shot .ground { position: absolute; left: 50%; bottom: 28px; width: 220px;
    margin-left: -110px; border-top: 1px dashed #3a4050; }

/* ---- the porting tracker ---- */
.card .rank { position: absolute; top: 6px; left: 6px; background: #c0392b; color: #fff;
    font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 3px; }
.card { position: relative; }
.badge { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 9px;
    margin-top: 4px; border: 1px solid #333a47; color: #99a1b0; }
.badge.s-ported { border-color: #2e6b3f; color: #7ad18f; }
.badge.s-in_progress { border-color: #7a5d1f; color: #e0b64c; }
.badge.s-blocked { border-color: #7a2f2f; color: #e07070; }
form.filters { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
form.filters input, form.filters select { padding: 6px 8px; }
section.track { border-top: 1px solid #262b36; margin-top: 26px; padding-top: 10px; }
section.track h3 { margin: 16px 0 6px; font-size: 14px; color: #aab2c0; }
ul.sheets { list-style: none; padding: 0; max-width: 760px; }
ul.sheets li { padding: 3px 0; border-bottom: 1px solid #1e2330; font-size: 13px; }
ul.sheets audio { height: 28px; vertical-align: middle; }
form.statusform { margin-top: 18px; max-width: 620px; }
form.statusform label { display: block; margin-bottom: 10px; }
form.statusform textarea { width: 100%; background: #12151d; color: #dfe3ea;
    border: 1px solid #2a2f3a; border-radius: 4px; padding: 6px; }
table td audio { height: 28px; }

/* ---- owned characters, and the unit chips ---- */
.badge.paid { border-color: #2e5a6b; color: #6fc3e0; }
p.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
button.chip { background: #1a1f2b; border: 1px solid #2a3140; color: #cfd6e2;
    border-radius: 14px; padding: 4px 11px; font-size: 12px; cursor: pointer; }
button.chip:hover { border-color: #c0392b; }

/* ---- voices ---- */
form.voiceform { max-width: 680px; }
form.voiceform label { display: block; margin: 14px 0 4px; font-weight: 600; }
form.voiceform input, form.voiceform select { width: 100%; padding: 7px 8px;
    background: #12151d; color: #dfe3ea; border: 1px solid #2a2f3a; border-radius: 4px; }
button.plainbtn { background: none; border: 1px solid #2a3140; color: #9aa2b1;
    border-radius: 4px; padding: 3px 9px; font-size: 12px; cursor: pointer; }
button.plainbtn:hover { border-color: #c0392b; color: #dfe3ea; }

/* ---- tabs on the missing page ---- */
nav.tabs { display: flex; gap: 14px; margin: 12px 0 16px; border-bottom: 1px solid #262b36; }
nav.tabs a { padding: 6px 2px 9px; color: #9aa2b1; text-decoration: none; font-size: 14px; }
nav.tabs a.here { color: #dfe3ea; border-bottom: 2px solid #c0392b; }

/* ---- the More menu ---- */
details.more { position: relative; display: inline-block; }
details.more summary { cursor: pointer; list-style: none; color: #9aa2b1;
    padding: 0 10px; font-size: 14px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary:after { content: " \25be"; }
details.more > div { position: absolute; top: 24px; left: 0; z-index: 30;
    background: #161a22; border: 1px solid #2a2f3a; border-radius: 6px;
    padding: 6px 0; min-width: 170px; display: flex; flex-direction: column; }
details.more > div a { padding: 7px 14px; }
form.inline-swap { display: flex; flex-direction: column; gap: 5px; }
form.inline-swap select { max-width: 260px; }
form.inline-swap audio { height: 28px; max-width: 260px; }

/* ---------------------------------------------------------------- phones
   He works from a phone as often as a desk, and the tracker pages are wide.
   Tables scroll inside their own box rather than stretching the page, and
   the nav wraps instead of pushing the account off the edge. */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 20px; }
.tablewrap table { margin-bottom: 0; min-width: 520px; }
td.nowrap, th.nowrap { white-space: nowrap; }

@media (max-width: 720px) {
  header { gap: 10px; padding: 10px 14px; }
  nav a { margin-right: 10px; font-size: 14px; }
  .who { margin-left: 0; width: 100%; order: 3; font-size: 12px; }
  h1 { font-size: 19px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  .card img { height: 104px; }
  form.filters, form.search { flex-direction: column; align-items: stretch; }
  form.filters input, form.filters select, form.filters button,
  form.search input, form.search select, form.search button { width: 100%; }
  form.import, form.tuner, form.voiceform { max-width: none; }
  figure.shot { margin-bottom: 16px; }
  figure.tune-shot { height: 210px; }
  .clips figure { flex: 1 1 140px; }
  .clips img { height: 108px; }
  details.more > div { left: auto; right: 0; }
  audio { max-width: 190px; }
}

/* a table that is only pretending to be a table on a narrow screen */
@media (max-width: 480px) {
  .tablewrap table { min-width: 440px; }
  th, td { padding: 7px 8px; font-size: 13px; }
}

/* The voice table is the one people actually work in, and side-scrolling to
 reach the control is miserable on a phone, so there it stops being a table
 and each sound becomes its own block. Two players plus a list never fit
 four columns in the page width either, so it stacks everywhere. */
.tablewrap:has(.voicetable) { overflow-x: visible; }
table.voicetable { min-width: 0; }
table.voicetable tr:first-child { display: none; }
table.voicetable tr { display: block; background: var(--card); border: 1px solid var(--line);
    border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
table.voicetable td { display: block; border: 0; padding: 4px 0; }
table.voicetable audio { width: 100%; max-width: none; }
table.voicetable select { width: 100%; }
table.voicetable button { width: 100%; margin-top: 4px; }

/* the owner may keep a copy of a preview; a viewer sees no such link */
.clips figcaption a.save { color: #7f8b9e; text-decoration: none; font-size: 11px;
    border: 1px solid #2a3140; border-radius: 4px; padding: 0 5px; margin-left: 4px; }
.clips figcaption a.save:hover { color: #dfe3ea; border-color: var(--accent); }

/* ---- the character page: what you can do, first ---- */
section.actions { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    padding: 16px 18px; margin: 22px 0; max-width: 760px; }
.action-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.action-head h2 { margin: 0; }
.cost { font-size: 12px; color: #e0b64c; border: 1px solid #5a4a1c; border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.cost.free { color: #7ad18f; border-color: #2e6b3f; }
form.use { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 6px; }
form.use select, form.use input { flex: 1 1 260px; }
.also { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
a.tile { flex: 1 1 220px; background: #12151d; border: 1px solid var(--line); border-radius: 8px;
    padding: 10px 12px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
a.tile:hover { border-color: var(--accent); }
a.tile b { font-size: 14px; }
a.tile small { color: var(--dim); }
a.tile .cost { align-self: flex-start; }
details.team { margin: 26px 0; border-top: 1px solid var(--line); padding-top: 8px; max-width: 760px; }
details.team summary { cursor: pointer; color: var(--dim); font-size: 14px; padding: 6px 0; }
details.team h3 { margin: 14px 0 6px; font-size: 14px; color: #aab2c0; }
a.credits { text-decoration: none; }

/* the skill editor */
section.skill { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 14px 16px; margin: 0 0 18px; }
section.skill h2 { margin: 0; }
section.skill .chip.ok { background: #1f6b3a; color: #fff; }
.strip { margin: 12px 0; }
.strip .stage { max-width: 100%; background-repeat: no-repeat; background-color: #0e1117;
    border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background-size: auto 100%; }
.scrub { position: relative; padding: 4px 0 26px; max-width: 480px; }
.scrub input[type=range] { width: 100%; }
.ticks { position: relative; height: 18px; }
.ticks .tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; color: #8b97ab;
    border-left: 1px solid #55627a; padding-left: 3px; white-space: nowrap; }
.ticks .tick.hit { color: #ff6b6b; border-left-color: #ff6b6b; font-weight: 600; }
.knobs label { display: block; margin: 10px 0; }
.knobs label output { float: right; color: #8b97ab; font-variant-numeric: tabular-nums; }
.knobs input[type=range] { width: 100%; display: block; margin: 4px 0 2px; }
.knobs small { display: block; }
.knobs select, .knobs input[type=text], .knobs input:not([type]) { display: block; margin-top: 4px; }
fieldset.fx { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px 10px; margin: 12px 0; }
fieldset.fx legend { padding: 0 6px; font-weight: 600; }
details.runin { margin: 12px 0; }
details.runin summary { cursor: pointer; font-weight: 600; }
.skill-actions { margin-top: 12px; }
.skill-actions button.quiet { background: transparent; border: 1px solid var(--line); color: inherit; }
@media (min-width: 700px) {
  section.skill .strip { float: left; margin-right: 20px; }
  section.skill .knobs { overflow: hidden; }
  section.skill .skill-actions { clear: both; }
}

/* the pictures a body is made of */
section.clipparts { margin: 0 0 22px; }
.stripline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0 10px; }
.stripline a.button { background: var(--accent, #2f6fed); color: #fff; padding: 6px 12px; border-radius: 6px; text-decoration: none; }
form.upload { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
form.upload input[type=file] { max-width: 220px; font-size: 12px; }
.partgrid { display: flex; flex-wrap: wrap; gap: 10px; }
figure.part { margin: 0; width: 150px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
figure.part.changed { border-color: #1f6b3a; }
figure.part img { width: 100%; height: 110px; object-fit: contain; background: #0e1117; border-radius: 6px;
    background-image: linear-gradient(45deg, #161a22 25%, transparent 25%, transparent 75%, #161a22 75%),
                      linear-gradient(45deg, #161a22 25%, transparent 25%, transparent 75%, #161a22 75%);
    background-size: 16px 16px; background-position: 0 0, 8px 8px; }
figure.part figcaption { font-size: 12px; margin: 4px 0; }
form.upload.one { display: block; }
form.upload.one input[type=file] { width: 100%; max-width: none; }
button.small { padding: 3px 8px; font-size: 12px; }
button.quiet { background: transparent; border: 1px solid var(--line); color: inherit; }
form.tile.plain { text-align: left; }
form.tile.plain button { margin-top: 8px; }
form.inline { display: inline; }
form.newbody label { display: block; margin: 10px 0; }
form.newbody input[type=text], form.newbody input:not([type]), form.newbody select { display: block; margin-top: 4px; }
form.newbody input[type=number] { width: 90px; margin-left: 6px; }
fieldset.clipin { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px 10px; margin: 12px 0; }
fieldset.clipin legend { padding: 0 6px; font-weight: 600; }

/* the stats editor */
.statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; }
.statgrid label { display: block; font-size: 13px; }
.statgrid input[type=number] { display: block; width: 100%; margin-top: 3px; }
table.starstable input[type=number] { width: 84px; }
table.starstable th, table.starstable td { padding: 4px 5px; font-size: 12px; white-space: nowrap; }
form.statsform details { margin: 10px 0 0; }
form.statsform summary { cursor: pointer; }

/* the rules builder */
form.rulesform label { display: block; margin: 8px 0; }
form.rulesform input[type=text], form.rulesform input:not([type]), form.rulesform textarea { display: block; width: 100%; max-width: 520px; margin-top: 3px; }
.slotpick { display: flex; flex-wrap: wrap; gap: 10px; }
label.slotcard { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; cursor: pointer; margin: 0; }
label.slotcard.taken { opacity: .55; }
.rule { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; background: rgba(255,255,255,.02); }
.rulehead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rulebody { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: flex-end; margin-top: 8px; }
.rulebody label { margin: 4px 0; }
.rulebody label.wide { flex-basis: 100%; }
.rulebody .params { display: contents; }
.rulebody input[type=number] { width: 90px; margin-left: 6px; }
.rulebody select.buffsel { max-width: 420px; }
.rulebody .bufffind { width: 160px; margin: 0 6px; }
img.buffprev { width: 40px; height: 40px; vertical-align: middle; margin-left: 8px; border-radius: 6px; background: #0e1117; }

/* keyword blocks on the Text tab */
.kw { margin: 6px 0 6px 12px; padding-left: 10px; border-left: 3px solid #c9a15c; }
.skill details { margin-top: 6px; }

.slotcard .slotnow { margin: 6px 0 0; font-size: 12px; line-height: 1.35; color: #b9b3a8; max-width: 260px; white-space: normal; }

.rule .levels { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #3a3a3a; }

.levelpreview { margin-top: 12px; overflow-x: auto; }
.levelpreview table { border-collapse: collapse; font-size: 13px; }
.levelpreview th, .levelpreview td { border: 1px solid #333; padding: 4px 8px; vertical-align: top; text-align: left; }

.stepbox { font-size: 11px; color: #9a9a9a; white-space: nowrap; }
.stepbox input { width: 60px; }

.icongrid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow-y: auto; padding: 8px; margin: 6px 0; background: #0e1117; border-radius: 8px; }
.icongrid img { width: 40px; height: 40px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; background: #171b24; }
.icongrid img:hover { border-color: #4b5563; }
.icongrid img.on { border-color: #f59e0b; }

select.prio-high { color: #f87171; font-weight: 600; } select.prio-medium { color: #fbbf24; } select.prio-low { color: #4ade80; }

textarea.todonote { width: 380px; min-height: 64px; max-width: 100%; resize: vertical; font: inherit; font-size: 13px; line-height: 1.35; background: #0e1117; color: inherit; border: 1px solid #2a3140; border-radius: 6px; padding: 6px 8px; }
textarea.todonote:focus { border-color: #f59e0b; outline: none; min-height: 120px; }

/* Our characters / Nindo library split (Oct 3 2026) */
.badge.fx { border-color: #2e5a6b; color: #6fc3e0; }
.ucard .acts { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:8px; font-size:11px; }
.ucard .acts a { color: var(--accent); text-decoration:none; border:1px solid var(--line); border-radius:8px; padding:1px 7px; }
.ucard .acts form { display:inline; }
.ucard .acts button.small { font-size:11px; padding:1px 7px; }
.pick-for { background: var(--card); border:1px solid var(--accent); border-radius:10px; padding:10px 14px; }
.summary { background: var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:10px 0; }
.summary ul { margin:6px 0 0 18px; } .summary .pairs { margin-top:4px; } .summary .warn { color:#e0b64c; }
.fxstrip { margin-top:14px; } .fxstrip .thumbs { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.fxstrip figure { margin:0; width:96px; text-align:center; font-size:11px; } .fxstrip img { width:96px; height:72px; object-fit:contain; background:#0e1116; border-radius:6px; }
.fxstrip figure.dim { opacity:.45; }

/* own characters: heads, unit page (Oct 3 2026) */
.ucard { position:relative; } .ucard img.head { position:absolute; top:8px; right:8px; width:40px; height:40px; border-radius:8px; border:1px solid var(--line); background:#0e1116; object-fit:cover; }
.ucard a.name { display:block; font-size:13px; margin-top:8px; color:var(--ink); text-decoration:none; }
.unit-head { display:flex; gap:16px; align-items:flex-start; margin-bottom:12px; } .unit-head img.bighead { width:96px; height:96px; border-radius:12px; border:1px solid var(--line); background:#0e1116; object-fit:cover; }
.unit-head h1 { margin:0 0 6px; } .unit-head .acts a.tile.small { display:inline-block; padding:4px 10px; margin:2px 4px 2px 0; }
.skillgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.skillcard { display:flex; gap:10px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px; }
.skillcard img, .skillcard .noicon { width:56px; height:56px; border-radius:8px; background:#0e1116; object-fit:contain; flex:none; }

.fxstrip .nothumb { width:96px; height:72px; border-radius:6px; background:#0e1116; color:var(--dim); font-size:10px; display:flex; align-items:center; justify-content:center; }

.skillcard.v2 { align-items:flex-start; } .skillcard.v2 .body { flex:1; min-width:0; }
.skillcard.v2 .kind { font-size:11px; color:var(--dim); margin-bottom:4px; } .skillcard.v2 .kind em { font-style:normal; color:#e0b64c; }
.skillcard.v2 input.title { width:100%; font-weight:600; font-size:14px; } .skillcard.v2 textarea { width:100%; margin-top:4px; }
.skillcard.v2 .fxline { font-size:12px; margin-top:6px; } .skillcard.v2 .fxline a { margin-left:6px; }
.skillcard.v2 details.meta { font-size:11px; color:var(--dim); margin-top:4px; } .skillcard.v2 details.meta summary { cursor:pointer; }

.skillcard.v3 { align-items:flex-start; position:relative; padding:12px; } .skillcard.v3 img:first-child, .skillcard.v3 .noicon { width:64px; height:64px; }
.skillcard.v3 .body { flex:1; min-width:0; padding-right:56px; } .skillcard.v3 .kind { font-size:11px; color:var(--dim); }
.skillcard.v3 .title { display:block; font-size:15px; margin:2px 0 4px; } .skillcard.v3 .des { font-size:12px; color:var(--ink); opacity:.85; }
.skillcard.v3 .chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; } .skillcard.v3 .chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; border:1px solid var(--line); border-radius:8px; padding:2px 6px; }
.skillcard.v3 .chip img { width:28px; height:21px; object-fit:contain; border-radius:3px; background:#0e1116; } .skillcard.v3 .chip small { color:var(--dim); }
.skillcard.v3 a.edit { position:absolute; top:12px; right:12px; border:1px solid var(--accent); color:var(--accent); border-radius:8px; padding:3px 10px; text-decoration:none; font-size:12px; }

/* Oct 5 UI pass */
.ucard a.open { display:block; color:inherit; text-decoration:none; } .ucard a.open .name { display:block; font-size:13px; margin-top:8px; }
.ucard .acts { margin-top:6px; font-size:11px; } .ucard .acts a { border:none; padding:0; color:var(--dim); }
.unit-head p.look { margin:0 0 8px; } .unit-head details.meta { font-size:11px; color:var(--dim); margin-top:6px; } .unit-head details.meta summary { cursor:pointer; }
.unit-head .acts form.inline { display:inline; } .unit-head .acts button.tile.small { padding:4px 10px; font:inherit; font-size:12px; }
section.actions textarea, section.actions input { font: inherit; font-size:14px; }

/* Oct 5 UI pass 3 */
.card img { background: var(--card); }
.ucard .badge.wearing { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
a.minor { display:inline-block; border:1px solid var(--line); border-radius:8px; padding:3px 10px; color:var(--ink); text-decoration:none; font-size:12px; background:transparent; margin-left:6px; vertical-align:middle; }
a.minor:hover { border-color: var(--accent); }
.ucard .acts a.minor { margin-left:0; }
.unit-head .acts { display:flex; flex-wrap:wrap; align-items:center; gap:6px; } .unit-head .acts .grp { font-size:11px; color:var(--dim); text-transform:uppercase; letter-spacing:.04em; margin-left:10px; } .unit-head .acts .grp:first-child { margin-left:0; }
.unit-head .acts form.danger { margin-left:auto; } button.tile.small.danger { border-color:#7a2f2f; color:#e07070; background:transparent; }
a.back { color: var(--dim); text-decoration:none; } a.back:hover { color: var(--ink); }
.skillcard.v3.noic .body { padding-left:4px; } .skillcard.v3 .chip img { width:36px; height:27px; }
.skill-actions.sticky { position: sticky; bottom: 0; background: var(--paper, #14171c); padding: 10px 0; border-top: 1px solid var(--line); }
.fxslot small { color: var(--dim); margin-left:6px; }

.fxgrid figure { margin:0; } .fxgrid figure img { width:100%; height:90px; object-fit:contain; background:#1e2128; border-radius:6px; display:block; } .fxgrid figcaption { font-size:11px; margin-top:3px; text-align:center; min-height:1.3em; }

.lockbox { background: var(--card); border:1px solid #7a5d1f; border-radius:10px; padding:10px 14px; margin:8px 0; } .lockbox form.inline { display:inline; }

/* picture slots (Oct 9 2026) */
.picslots{display:flex;flex-wrap:wrap;gap:16px;margin:8px 0 18px}
.picslot{display:flex;gap:12px;align-items:flex-start;background:var(--card,#1c1f26);border:1px solid #2a2e37;border-radius:8px;padding:10px;max-width:520px}
.picnow{width:105px;min-height:105px;display:flex;align-items:center;justify-content:center;background:#14161b;border-radius:6px;text-align:center}
.picnow img{max-width:105px;max-height:170px}
.picslot form.inline{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}