.play-style-form { display: grid; gap: 14px; }
.play-style-main-grid { display: grid; grid-template-columns: minmax(320px, 1.35fr) minmax(270px, 1fr); gap: 14px; align-items: stretch; }
.play-style-preference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.availability-card { display: flex; flex-direction: column; }
.availability-slot-list { display: grid; gap: 10px; }
.availability-slot { display: grid; grid-template-columns: minmax(75px, .55fr) minmax(120px, 1fr) auto; gap: 7px; }
.availability-slot input { min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; }
.availability-slot button { width: 36px; border: 1px solid #ead0d0; border-radius: 7px; color: #a96d6d; background: #fff8f8; }
.availability-note { margin-top: 18px; }
.availability-note textarea { flex: 1; }
.play-style-card { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #fcfefe; }
.play-style-card h3 { margin: 0 0 17px; padding-left: 10px; border-left: 4px solid var(--mint); font: 700 18px/1.5 var(--font-serif); }
.play-style-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.play-style-card-heading h3 { margin-bottom: 0; }
.rulebook-editor-list { display: grid; gap: 10px; margin-top: 17px; }
.rulebook-editor { border: 1px solid var(--line); border-radius: 9px; background: white; }
.rulebook-editor summary { display: flex; justify-content: space-between; gap: 12px; padding: 13px 15px; color: var(--ink); cursor: pointer; font-weight: 700; }
.rulebook-editor summary small { color: var(--muted); font-size: var(--font-small); font-weight: 400; }
.rulebook-editor-body { padding: 4px 15px 15px; border-top: 1px solid var(--line); }
.supplement-list { display: grid; gap: 7px; margin: 10px 0; }
.supplement-row { display: grid; grid-template-columns: 1fr 34px; gap: 7px; }
.supplement-row input { min-width: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; }
.supplement-row button { border: 1px solid #ead0d0; border-radius: 7px; color: #a96d6d; background: #fff8f8; }
.rulebook-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.rulebook-actions button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.play-choice-card { display: grid; gap: 15px; }
.play-choice-card h3 { margin-bottom: 0; }
.play-choice-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: start; gap: 12px; }
.play-choice-row > strong { padding-top: 8px; font-size: var(--font-body); }
.toggle-chip-list, .editable-tag-list { display: flex; flex-wrap: wrap; gap: 9px; }
.toggle-chip { padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: white; font-size: var(--font-body); cursor: pointer; }
.toggle-chip.selected { border-color: var(--mint); color: #387d70; background: var(--mint-soft); box-shadow: inset 0 0 0 1px var(--mint); }
.tool-choice-content { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 9px; min-width: 0; }
.other-tool-field { flex: 1 1 250px; max-width: 440px; margin: 0; }
.other-tool-display { padding-right: 13px; }
.editable-tag { display: inline-flex; align-items: center; gap: 5px; padding: 7px 8px 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: white; font-size: var(--font-body); }
.editable-tag { border-color: var(--mint); color: #387d70; background: var(--mint-soft); box-shadow: inset 0 0 0 1px var(--mint); }
.editable-tag button { display: grid; place-items: center; width: 23px; height: 23px; padding: 0; border: 0; border-radius: 50%; color: var(--muted); background: #f1f4f3; }
.tag-add-row { display: flex; gap: 8px; max-width: 520px; margin-top: 14px; }
.tag-add-row input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; }
.tag-add-row button { padding: 8px 13px; border: 1px solid var(--mint); border-radius: 8px; color: #387d70; background: var(--mint-soft); }
.play-style-save { position: sticky; bottom: 10px; display: flex; justify-content: flex-end; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); }
.play-style-form.view-mode .edit-only, .play-style-form.view-mode .play-style-save, .play-style-form.view-mode .editable-tag button { display: none; }
.play-style-form.view-mode input[readonly], .play-style-form.view-mode textarea[readonly] { border-color: transparent; background: transparent; resize: none; cursor: default; }
.play-style-form.view-mode .toggle-chip { pointer-events: none; }
.play-style-form.view-mode .toggle-chip:not(.selected) { display: none; }
.rulebook-view-body { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 15px; border-top: 1px solid var(--line); }
.rulebook-view-body span { padding: 6px 11px; border-radius: 999px; color: #387d70; background: var(--mint-soft); }
@media (max-width: 850px) { .play-style-main-grid, .play-style-preference-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .play-style-card { padding: 16px; }.play-choice-row { grid-template-columns: 1fr; }.play-choice-row > strong { padding: 0; }.other-tool-field { margin-left: 0; }.tag-add-row { flex-direction: column; } }