/* Layout: 左に絞り込みパネル、右に試合カードのグリッド。狭い画面ではパネルを折りたたんで上に置く */
:root {
  --bg: #f2f4f8;
  --surface: #ffffff;
  --ink: #1a2132;
  --muted: #5b6479;
  --line: #d8dde7;
  --accent: #2c51a0;
  --accent-soft: #e4eaf7;
  --ally: #2c51a0;
  --enemy: #b03645;
  --win: #1d7449;
  --win-soft: #e0f1e7;
  --lose: #6c7385;
  --lose-soft: #eceef2;
  /* ランク区分の色（ゲーム内バッジに合わせる） */
  --t-bronze: #9a5a2b;
  --t-silver: #8a95a4;
  --t-gold: #b58c10;
  --t-diamond: #7b4cc4;
  --t-omega: #c4372a;
  --t-ultima: #1f6fd1;
  --f-display: "Dela Gothic One", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e131e; --surface: #161d2b; --ink: #e5e9f2; --muted: #98a1b6; --line: #29324a;
    --accent: #8eabee; --accent-soft: #1f2b47; --ally: #8eabee; --enemy: #ec8592;
    --win: #62c896; --win-soft: #173528; --lose: #9aa1b3; --lose-soft: #222a3a;
    --t-bronze: #d69a6c; --t-silver: #e4e9f0; --t-gold: #ebc74c; --t-diamond: #bc96f2; --t-omega: #f27a6c; --t-ultima: #6fb0ff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e131e; --surface: #161d2b; --ink: #e5e9f2; --muted: #98a1b6; --line: #29324a;
  --accent: #8eabee; --accent-soft: #1f2b47; --ally: #8eabee; --enemy: #ec8592;
  --win: #62c896; --win-soft: #173528; --lose: #9aa1b3; --lose-soft: #222a3a;
  --t-bronze: #d69a6c; --t-silver: #e4e9f0; --t-gold: #ebc74c; --t-diamond: #bc96f2; --t-omega: #f27a6c; --t-ultima: #6fb0ff;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.6; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 28px 16px 64px; display: grid; gap: 20px; }

header.top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.15; margin: 0; letter-spacing: 0.02em; text-wrap: balance; }
h1 small { display: block; font-family: var(--f-body); font-weight: 500; font-size: 0.8rem; color: var(--muted); letter-spacing: 0.12em; margin-bottom: 6px; }
.auth { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 0.85rem; }
.auth input { width: auto; min-width: 0; flex: 1 1 14em; }
.auth .who { color: var(--muted); overflow-wrap: anywhere; }
.auth .role { color: var(--accent); font-weight: 700; }
.pill.pending { background: var(--lose-soft); color: var(--t-gold); }
.login-needed { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 20px; color: var(--muted); max-width: 60ch; }
.notice { font-size: 0.85rem; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: 8px; padding: 8px 12px; max-width: 46ch; margin: 0; }

.layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .layout { grid-template-columns: minmax(0, 1fr); } }

/* Filters */
details.filters { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); max-height: calc(100vh - 24px); overflow: auto; }
@media (max-width: 860px) { details.filters { position: static; max-height: none; } }
details.filters > summary { list-style: none; cursor: pointer; padding: 12px 16px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
details.filters > summary::-webkit-details-marker { display: none; }
details.filters > summary .hint { font-weight: 500; font-size: 0.8rem; color: var(--muted); }
.fbody { padding: 14px 16px 18px; display: grid; gap: 18px; }
.fgroup { display: grid; gap: 8px; }
.flabel { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.flabel .rule { font-weight: 500; letter-spacing: 0; }
.fsection { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; color: var(--accent); border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: -8px; }
.row2 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.row2 span { color: var(--muted); font-size: 0.85rem; }
select, input[type="search"] { width: 100%; font: inherit; font-size: 0.9rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { font: inherit; font-size: 0.82rem; border: 0; background: var(--bg); color: var(--ink); padding: 6px 4px; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--surface); font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: 0.82rem; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.chips.enemy .chip[aria-pressed="true"] { border-color: var(--enemy); color: var(--enemy); background: transparent; }
details.sub > summary { cursor: pointer; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
details.sub > summary .count { color: var(--accent); letter-spacing: 0; }
details.sub[open] > summary { margin-bottom: 8px; }
.reset { font: inherit; font-size: 0.85rem; border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 6px; padding: 6px; cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ランク区分の凡例 */
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.75rem; color: var(--muted); }

/* Results */
.results { display: grid; gap: 14px; min-width: 0; }
.rhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.count-line { font-size: 0.95rem; }
.count-line b { font-family: var(--f-mono); font-size: 1.2rem; }
.rhead select { width: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.empty { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 28px; text-align: center; color: var(--muted); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; display: grid; gap: 10px; min-width: 0; }
.card-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pill { font-size: 0.75rem; font-weight: 700; border-radius: 4px; padding: 1px 8px; }
.pill.win { background: var(--win-soft); color: var(--win); }
.pill.lose { background: var(--lose-soft); color: var(--lose); }
.pill.boss { background: var(--lose-soft); color: var(--t-omega); }
.pill.tag { border: 1px solid var(--line); color: var(--muted); font-weight: 500; }
/* シーズンと日付はタグの数に関係なく、常にタグの上の1行に出す */
.card .date { font-family: var(--f-mono); font-size: 0.78rem; color: var(--muted); margin-bottom: -4px; }
.stage { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; }
.stage .map { font-weight: 700; font-size: 1.02rem; line-height: 1.35; }
/* BOSS名は「BOSS」と書かず、マップ名と区別できる枠付きのラベルにする */
.stage .boss { color: var(--ink); font-size: 0.8rem; font-weight: 500; border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 1px 10px; white-space: nowrap; }

.team { display: grid; gap: 4px; }
.team-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; }
.team.ally .team-head { color: var(--ally); }
.team.enemy .team-head { color: var(--enemy); }
.team-head .power { font-family: var(--f-mono); font-weight: 500; letter-spacing: 0; color: var(--muted); }
.team-head .power b { color: var(--ink); font-weight: 500; }
.members { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
/* カードごとの高さのばらつきを抑えるため、キャラ欄は高さを固定する（ランク1行・名前2行・スタイル2行・pt 1行ぶん）。
   名前とスタイルは2行を超えたら … で切り、全文は title で見せる。pt はいちばん下にそろえる */
.member { background: var(--bg); border-radius: 6px; padding: 5px 7px; display: flex; flex-direction: column; gap: 1px; min-width: 0; height: 7rem; overflow: hidden; }
.member .nm { font-size: 0.84rem; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.6em; flex-shrink: 0; }
.member .mhead { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; min-width: 0; }
.member .mhead .rank { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.member .mfoot { margin-top: auto; display: flex; align-items: center; gap: 4px; }
.member .mfoot .pt { margin-top: 0; }
.member .rank { line-height: 1.4; }
.member .pt { margin-top: auto; }
.team-empty { height: 7rem; display: flex; align-items: center; justify-content: center; background: var(--bg); border-radius: 6px; }
.member.op { box-shadow: inset 0 0 0 1.5px var(--ally); }
.member.op .nm { font-weight: 700; }
.member .you { font-size: 0.68rem; font-weight: 700; color: var(--ally); }
.member .bp { font-family: var(--f-mono); font-size: 0.62rem; font-weight: 500; color: var(--t-gold); border: 1px solid var(--t-gold); border-radius: 3px; padding: 0 3px; line-height: 1.3; }
.member .pt { font-family: var(--f-mono); font-size: 0.7rem; color: var(--muted); }
.firsts { font-size: 0.78rem; color: var(--muted); }
.firsts b { color: var(--t-gold); font-weight: 700; }
/* ゲームのバトルスコア画面に合わせて、pt を1段目、BOSS DAMAGE・BRAVE・KILL を2段目に並べる */
.score-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.score-grid > label { grid-column: 1 / -1; max-width: 14em; }
.score-grid label { display: grid; gap: 2px; font-size: 0.7rem; color: var(--muted); font-family: var(--f-mono); }
.member.empty .nm, .team-empty { color: var(--muted); font-size: 0.8rem; }
.card-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; font-size: 0.8rem; }
.card-actions button { font: inherit; font-size: 0.78rem; background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 5px; padding: 2px 10px; cursor: pointer; }
.card-actions button.danger { border-color: var(--enemy); color: var(--enemy); }
.card-actions .ask { color: var(--enemy); }
.status-line { font-size: 0.85rem; color: var(--win); }
.edit-banner { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; background: var(--accent-soft); color: var(--accent); border-radius: 8px; padding: 10px 14px; font-size: 0.88rem; font-weight: 700; }
.pill.mark { background: var(--accent-soft); color: var(--accent); }
.src .bgm { overflow-wrap: anywhere; }

.rank { font-size: 0.76rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.rank::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; background: var(--tier); transform: rotate(45deg) translateY(-1px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tier) 60%, var(--ink) 15%); }
.rank.big { font-size: 0.85rem; }
.rank.unknown { font-weight: 500; color: var(--muted); }
.rank.unknown::before { display: none; }

.summary-row { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.8rem; color: var(--muted); align-items: baseline; }
.summary-row .auto { font-size: 0.7rem; }
.src { font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 2px; min-width: 0; }
.src .title { color: var(--ink); overflow-wrap: anywhere; }
.play-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.play { font: inherit; font-size: 0.85rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 6px 12px; text-decoration: none; background: var(--accent); color: var(--surface); }
.play .t { font-family: var(--f-mono); }
.play.is-sample { background: var(--accent-soft); color: var(--accent); cursor: not-allowed; }
.part { font-size: 0.78rem; color: var(--muted); }

.datafmt { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; }
.datafmt summary { cursor: pointer; font-weight: 700; }
.datafmt p { color: var(--muted); font-size: 0.88rem; max-width: 70ch; }
.datafmt pre { overflow-x: auto; font-family: var(--f-mono); font-size: 0.78rem; line-height: 1.5; background: var(--bg); border-radius: 6px; padding: 12px; margin: 0; }
.code { overflow-x: auto; font-family: var(--f-mono); font-size: 0.78rem; line-height: 1.5; background: var(--bg); border-radius: 6px; padding: 12px; margin: 0; max-height: 420px; }

/* タブ */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tabs button { font: inherit; font-weight: 700; background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 8px 14px; color: var(--muted); cursor: pointer; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

/* アビリティ（絞り込み・カード） */
.abil-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.abil-add button { font: inherit; font-size: 0.85rem; border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 6px; padding: 0 12px; cursor: pointer; }
.abil-add input.bad { border-color: var(--enemy); }
.chip.removable::after { content: " ×"; }
details.abil { font-size: 0.8rem; }
details.abil summary { cursor: pointer; color: var(--muted); }
.abil-none { font-size: 0.78rem; color: var(--muted); }
.abil-list { display: grid; gap: 5px; margin-top: 6px; }
.abil-row { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 6px; align-items: start; }
.abil-row .who { font-weight: 700; overflow-wrap: anywhere; }
.abil-row.ally .who { color: var(--ally); }
.abil-row.enemy .who { color: var(--enemy); }
.abil-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.abil-tags span { background: var(--bg); border-radius: 4px; padding: 0 6px; }
.abil-tags span.hit { background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* 登録フォーム */
.form { display: grid; gap: 18px; max-width: 940px; }
.form-note { font-size: 0.85rem; color: var(--muted); margin: 0; max-width: 72ch; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; display: grid; gap: 14px; min-width: 0; }
.panel h2 { font-size: 1rem; margin: 0; display: flex; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; align-items: baseline; }
.panel h2 .req-note { font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.req { color: var(--enemy); margin-left: 2px; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.field label { font-size: 0.75rem; font-weight: 700; color: var(--muted); letter-spacing: 0.06em; }
.field.wide { grid-column: 1 / -1; }
input[type="text"], input[type="url"], input[type="date"], input[type="number"] { width: 100%; font: inherit; font-size: 0.9rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }
.players { display: grid; gap: 10px; }
.prow { display: grid; grid-template-columns: 6.5em minmax(0, 1.3fr) minmax(0, 1fr); gap: 6px 8px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.prow:last-child { border-bottom: 0; padding-bottom: 0; }
.prow .slot { font-size: 0.78rem; font-weight: 700; }
.prow.ally .slot { color: var(--ally); }
.prow.enemy .slot { color: var(--enemy); }
.prow details { grid-column: 2 / -1; }
.prow details summary { font-size: 0.78rem; color: var(--muted); cursor: pointer; }
/* ゲーム画面のアビリティ枠に合わせて、上段に2つ・下段に3つ並べる */
.abil-slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.abil-slots > :nth-child(-n+2) { grid-column: span 3; }
.abil-slots > :nth-child(n+3) { grid-column: span 2; }
@media (max-width: 560px) {
  .abil-slots, .score-grid { grid-template-columns: minmax(0, 1fr); }
  .abil-slots > :nth-child(n) { grid-column: auto; }
}
@media (max-width: 560px) { .prow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .prow .slot, .prow details { grid-column: 1 / -1; } }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.primary { font: inherit; font-weight: 700; background: var(--accent); color: var(--surface); border: 0; border-radius: 6px; padding: 9px 18px; cursor: pointer; }
.secondary { font: inherit; font-size: 0.85rem; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; padding: 4px 12px; cursor: pointer; }
.msg { font-size: 0.88rem; }
.msg.err { color: var(--enemy); }
.msg.ok { color: var(--win); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* 単独のページとして配信するときの土台（claude.ai の試作ページでは外側が用意していた分） */
body { margin: 0; }
[hidden] { display: none !important; }
.head-side { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: flex-end; }
.lang { white-space: nowrap; }
.site-foot { border-top: 1px solid var(--line); padding-top: 16px; font-size: 0.78rem; color: var(--muted); display: grid; gap: 6px; max-width: 80ch; }
.site-foot p { margin: 0; }
.site-foot .copy { font-family: var(--f-mono); font-size: 0.72rem; }
.site-foot a { color: inherit; }
/* プライバシーポリシーなどの文章のページ */
.doc { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 20px clamp(16px, 4vw, 32px); max-width: 80ch; }
.doc h2 { font-size: 1.3rem; margin: 0 0 12px; }
.doc h3 { font-size: 1rem; margin: 22px 0 6px; }
.doc p, .doc ul { margin: 0 0 8px; }
.doc ul { padding-left: 1.3em; }
.doc li { margin-bottom: 4px; }
.doc a { color: var(--accent); }
.doc-nav, .doc-date { font-size: 0.85rem; color: var(--muted); }
.thumb { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 200px; border-radius: 6px; overflow: hidden; background: var(--bg); }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; }
.thumb:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .thumb img { transition: none; } .thumb:hover img { transform: none; } }
.op-pos { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.78rem; color: var(--muted); }
.op-pos select { width: auto; }
.abil-sets { display: grid; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.abil-sets .sets-head { font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.sets-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sets-row select { flex: 1 1 14em; width: auto; min-width: 0; }
.sets-row input { flex: 1 1 10em; width: auto; min-width: 0; }
.member .costume { font-size: 0.7rem; color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.date .season { font-weight: 500; color: var(--accent); margin-right: 6px; }
.field-hint { font-size: 0.75rem; color: var(--muted); }
.field-hint.warn { color: var(--enemy); font-weight: 700; }
.prow .costume-in { grid-column: 2 / -1; }
.score-cat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 6px; align-items: center; font-size: 0.7rem; color: var(--muted); font-family: var(--f-mono); }
.score-cat span { grid-column: 1 / -1; }
.pill.mode { background: var(--accent-soft); color: var(--accent); }
.field-hint.ok { color: var(--win); overflow-wrap: anywhere; }
.creator-link { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line); }
.creator-link:hover { text-decoration-color: var(--accent); }
.creator-list { display: grid; gap: 10px; max-width: 940px; }
.creator-item { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; display: grid; gap: 4px; }
.creator-item p { margin: 0; color: var(--muted); font-size: 0.88rem; white-space: pre-wrap; }
.creator-item a { color: var(--accent); font-size: 0.85rem; overflow-wrap: anywhere; }
.creator-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.creator-head .muted { color: var(--muted); font-size: 0.8rem; }
.creator-form { max-width: 940px; margin-top: 16px; }
textarea { width: 100%; font: inherit; font-size: 0.9rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; resize: vertical; }