.house-rules-app {
  --house-rules-accent: var(--ui2-brand-secondary);
  --house-rules-soft: color-mix(in srgb, var(--house-rules-accent) 10%, var(--ui2-surface));
  color: var(--ui2-text);
  padding-bottom: var(--ui2-space-2xl);
}

.house-rules-breadcrumb { margin-bottom: var(--ui2-space-lg); }
.house-rules-hero { display:flex; gap:var(--ui2-space-lg); align-items:center; max-width:var(--ui2-reading-width); margin:0 auto var(--ui2-space-xl); }
.house-rules-hero img { flex:0 0 64px; }
.house-rules-hero h1 { margin:.15rem 0 var(--ui2-space-sm); }
.house-rules-hero p:last-child { margin:0; color:var(--ui2-text-muted); line-height:var(--ui2-line-body); }
.house-rules-eyebrow,.house-rules-step-kicker { color:var(--house-rules-accent); font-weight:var(--ui2-weight-bold); letter-spacing:.04em; text-transform:none; }

.house-rules-steps { position:sticky; top:calc(var(--ui2-header-height) + 8px); z-index:6; margin-bottom:var(--ui2-space-xl); background:color-mix(in srgb,var(--ui2-surface) 94%,transparent); border:1px solid var(--ui2-border); border-radius:var(--ui2-radius-lg); box-shadow:var(--ui2-shadow-card); backdrop-filter:blur(8px); }
.house-rules-steps ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; padding:var(--ui2-space-xs); margin:0; }
.house-rules-steps a { display:flex; align-items:center; gap:var(--ui2-space-sm); min-height:44px; padding:var(--ui2-space-sm); border-radius:var(--ui2-radius-md); color:var(--ui2-text); font-weight:var(--ui2-weight-semibold); text-decoration:none; }
.house-rules-steps a:hover { background:var(--house-rules-soft); }
.house-rules-steps span { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:var(--house-rules-accent); color:#fff; }

.house-rules-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,360px); gap:var(--ui2-space-xl); align-items:start; }
.house-rules-workspace { min-width:0; }
.house-rules-section,.house-rules-my-panel,.house-rules-preview-section { scroll-margin-top:calc(var(--ui2-header-height) + 84px); background:var(--ui2-surface); border:1px solid var(--ui2-border); border-radius:var(--ui2-radius-lg); box-shadow:var(--ui2-shadow-card); }
.house-rules-section { padding:var(--ui2-space-xl); margin-bottom:var(--ui2-space-xl); }
.house-rules-section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--ui2-space-lg); margin-bottom:var(--ui2-space-lg); }
.house-rules-section-heading h2,.house-rules-panel-heading h2 { margin:.1rem 0 var(--ui2-space-xs); }
.house-rules-section-heading p { margin:0; color:var(--ui2-text-muted); }
.house-rules-count { display:grid; place-items:center; min-width:46px; min-height:36px; padding:0 var(--ui2-space-sm); border-radius:var(--ui2-radius-pill); background:var(--house-rules-soft); color:var(--house-rules-accent); font-weight:var(--ui2-weight-bold); }

.house-rules-filter-group,.house-rules-category-tabs { display:flex; gap:var(--ui2-space-sm); overflow-x:auto; overscroll-behavior-inline:contain; padding:.2rem .1rem var(--ui2-space-sm); scrollbar-width:thin; }
.house-rules-filter-group { margin-bottom:var(--ui2-space-sm); }
.house-rules-filter-group button,.house-rules-category-tabs button { min-height:44px; flex:0 0 auto; padding:0 var(--ui2-space-md); border:1px solid var(--ui2-border); border-radius:var(--ui2-radius-pill); background:var(--ui2-surface); color:var(--ui2-text); font:inherit; font-weight:var(--ui2-weight-semibold); cursor:pointer; }
.house-rules-filter-group button[aria-pressed="true"],.house-rules-category-tabs button[aria-pressed="true"] { border-color:var(--house-rules-accent); background:var(--house-rules-accent); color:#fff; }

.house-rules-sample-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ui2-space-md); margin-top:var(--ui2-space-md); }
.house-rules-sample-card { display:flex; flex-direction:column; min-width:0; padding:var(--ui2-space-lg); border:1px solid var(--ui2-border); border-radius:var(--ui2-radius-md); background:var(--ui2-surface); }
.house-rules-sample-card[data-added="true"] { border-color:var(--ui2-success); background:color-mix(in srgb,var(--ui2-success) 5%,var(--ui2-surface)); }
.house-rules-sample-card__category { display:flex; align-items:center; gap:var(--ui2-space-xs); margin-bottom:var(--ui2-space-sm); color:var(--house-rules-accent); font-size:var(--ui2-font-meta); font-weight:var(--ui2-weight-bold); }
.house-rules-sample-card__category svg { width:20px; height:20px; }
.house-rules-sample-card__text { flex:1; margin:0 0 var(--ui2-space-md); line-height:var(--ui2-line-body); overflow-wrap:anywhere; }
.house-rules-sample-card__actions { display:flex; flex-wrap:wrap; gap:var(--ui2-space-sm); }
.house-rules-card-button,.house-rules-text-button { min-height:44px; border:0; background:transparent; color:var(--house-rules-accent); font:inherit; font-weight:var(--ui2-weight-semibold); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.house-rules-card-button--add { flex:1; border-radius:var(--ui2-radius-md); background:var(--house-rules-accent); color:#fff; text-decoration:none; }
.house-rules-card-button--add:disabled { background:var(--ui2-success); cursor:default; }
.house-rules-card-translations { margin-top:var(--ui2-space-md); padding-top:var(--ui2-space-md); border-top:1px solid var(--ui2-border); }
.house-rules-card-translations[hidden] { display:none; }
.house-rules-card-translations dl { margin:0; }
.house-rules-card-translations dt { margin-top:var(--ui2-space-sm); font-weight:var(--ui2-weight-bold); }
.house-rules-card-translations dd { margin:.2rem 0 0; color:var(--ui2-text-muted); line-height:var(--ui2-line-body); overflow-wrap:anywhere; }
.house-rules-empty { grid-column:1/-1; padding:var(--ui2-space-xl); border:1px dashed var(--ui2-border); border-radius:var(--ui2-radius-md); text-align:center; color:var(--ui2-text-muted); }

.house-rules-my-panel { position:sticky; top:calc(var(--ui2-header-height) + 82px); max-height:calc(100vh - var(--ui2-header-height) - 100px); display:flex; flex-direction:column; padding:var(--ui2-space-lg); }
.house-rules-panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--ui2-space-sm); }
.house-rules-close-panel { display:none; min-width:44px; min-height:44px; border:0; border-radius:var(--ui2-radius-md); background:var(--ui2-surface-muted); font-size:1.5rem; cursor:pointer; }
.house-rules-add-custom { width:100%; margin:var(--ui2-space-md) 0; }
.house-rules-selected { flex:1; min-height:80px; overflow-y:auto; overscroll-behavior:contain; padding-right:.2rem; }
.house-rules-selected-empty { padding:var(--ui2-space-lg); border:1px dashed var(--ui2-border); border-radius:var(--ui2-radius-md); color:var(--ui2-text-muted); text-align:center; }
.house-rules-selected-card { margin-bottom:var(--ui2-space-sm); padding:var(--ui2-space-md); border:1px solid var(--ui2-border); border-radius:var(--ui2-radius-md); background:var(--ui2-surface); }
.house-rules-selected-card[draggable="true"] { cursor:grab; }
.house-rules-selected-card.is-dragging { opacity:.55; }
.house-rules-selected-meta { display:flex; justify-content:space-between; align-items:center; gap:var(--ui2-space-sm); margin-bottom:var(--ui2-space-xs); }
.house-rules-selected-meta span { font-size:var(--ui2-font-meta); color:var(--ui2-text-muted); font-weight:var(--ui2-weight-semibold); }
.house-rules-field { display:grid; gap:var(--ui2-space-xs); font-weight:var(--ui2-weight-semibold); color:var(--ui2-text); }
.house-rules-field textarea,.house-rules-field select,.house-rules-field input { width:100%; min-height:44px; padding:var(--ui2-space-sm); border:1px solid var(--ui2-border); border-radius:var(--ui2-radius-sm); background:var(--ui2-surface); color:var(--ui2-text); font:inherit; line-height:var(--ui2-line-body); }
.house-rules-field textarea { min-height:88px; resize:vertical; }
.house-rules-field textarea:focus,.house-rules-field select:focus,.house-rules-field input:focus { border-color:var(--ui2-focus); outline:3px solid color-mix(in srgb,var(--ui2-focus) 35%,transparent); outline-offset:1px; }
.house-rules-selected-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--ui2-space-xs); margin-top:var(--ui2-space-sm); }
.house-rules-selected-actions button { min-height:44px; border:1px solid var(--ui2-border); border-radius:var(--ui2-radius-sm); background:var(--ui2-surface-muted); color:var(--ui2-text); font:inherit; font-size:var(--ui2-font-meta); cursor:pointer; }
.house-rules-selected-actions button:last-child { color:var(--ui2-danger); }
.house-rules-translation-editor { margin-top:var(--ui2-space-sm); padding-top:var(--ui2-space-sm); border-top:1px solid var(--ui2-border); }
.house-rules-translation-editor summary { min-height:44px; display:flex; align-items:center; color:var(--house-rules-accent); font-weight:var(--ui2-weight-semibold); cursor:pointer; }
.house-rules-translation-editor .house-rules-field { margin-top:var(--ui2-space-sm); }
.house-rules-translation-status { min-height:1.4em; margin:var(--ui2-space-xs) 0; color:var(--ui2-text-muted); font-size:var(--ui2-font-meta); }
.house-rules-panel-actions { display:grid; gap:var(--ui2-space-xs); padding-top:var(--ui2-space-md); border-top:1px solid var(--ui2-border); text-align:center; }
.house-rules-panel-actions span { color:var(--ui2-text-muted); font-size:var(--ui2-font-meta); }

.house-rules-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--ui2-space-lg); }
.house-rules-theme { min-width:0; margin:0; padding:var(--ui2-space-md); border:1px solid var(--ui2-border); border-radius:var(--ui2-radius-md); }
.house-rules-theme legend { padding:0 var(--ui2-space-xs); font-weight:var(--ui2-weight-semibold); }
.house-rules-theme label,.house-rules-check { display:flex; align-items:center; gap:var(--ui2-space-sm); min-height:44px; }
.house-rules-check { align-self:end; padding:var(--ui2-space-md); border:1px solid var(--ui2-border); border-radius:var(--ui2-radius-md); font-weight:var(--ui2-weight-semibold); }
.house-rules-theme input,.house-rules-check input { width:20px; height:20px; flex:0 0 20px; accent-color:var(--house-rules-accent); }

.house-rules-preview-section { margin-top:var(--ui2-space-xl); padding:var(--ui2-space-xl); }
.house-rules-export-actions { display:flex; flex-wrap:wrap; gap:var(--ui2-space-sm); }
.house-rules-preview-summary { margin:0 0 var(--ui2-space-md); font-weight:var(--ui2-weight-semibold); color:var(--ui2-text-muted); }
.house-rules-export-status { min-height:1.5em; color:var(--ui2-text-muted); }
.house-rules-preview-empty { padding:var(--ui2-space-2xl); border:1px dashed var(--ui2-border); border-radius:var(--ui2-radius-md); text-align:center; color:var(--ui2-text-muted); }
.house-rules-preview { display:grid; justify-items:center; gap:20px; max-width:100%; overflow-x:auto; padding:16px; border-radius:var(--ui2-radius-md); background:#d9dee3; }
.house-rules-preview:empty { display:none; }
.house-rules-preview.is-exporting { display:block; width:210mm; max-width:none; margin:0; padding:0; gap:0; overflow:visible; border-radius:0; background:#fff; }
.house-rules-preview.is-exporting .house-rules-pdf-page { height:296.8mm; margin:0; box-shadow:none; break-after:auto; page-break-after:auto; }
.house-rules-pdf-page { width:210mm; height:297mm; box-sizing:border-box; position:relative; flex:none; overflow:hidden; padding:17mm 15mm 15mm; background:#fff; color:#172533; font-family:Inter,"Noto Sans TC","PingFang HK","Microsoft JhengHei",Arial,sans-serif; box-shadow:0 7px 24px rgba(15,32,46,.22); }
.house-rules-pdf-page[data-theme="mono"] { color:#111; }
.house-rules-pdf-header { display:flex; align-items:center; gap:11px; padding-bottom:9mm; border-bottom:2px solid #ef5b6c; }
.house-rules-pdf-page[data-theme="mono"] .house-rules-pdf-header { border-color:#333; }
.house-rules-pdf-header img { width:42px; height:42px; }
.house-rules-pdf-header p { margin:0; font-size:10pt; color:#5a6873; }
.house-rules-pdf-header h2 { margin:2px 0 0; font-size:20pt; line-height:1.15; color:#17415f; }
.house-rules-pdf-header h2 span,.house-rules-pdf-signature h3 span { display:block; }
.house-rules-pdf-header h2 span + span { margin-top:1mm; font-size:15pt; }
.house-rules-pdf-page[data-theme="mono"] .house-rules-pdf-header h2 { color:#111; }
.house-rules-pdf-date { margin-left:auto; text-align:right; font-size:9.5pt; color:#5a6873; }
.house-rules-pdf-date span,.house-rules-pdf-date strong { display:block; }
.house-rules-pdf-date strong { margin-top:1mm; color:#273743; }
.house-rules-pdf-rules { display:grid; gap:5mm; padding:8mm 0 27mm; }
.house-rules-pdf-rule { break-inside:avoid; page-break-inside:avoid; }
.house-rules-pdf-rule-number { display:grid; place-items:center; float:left; width:26px; height:26px; margin:1px 10px 0 0; border-radius:50%; background:#ef5b6c; color:#fff; font-weight:700; font-size:10pt; }
.house-rules-pdf-page[data-theme="mono"] .house-rules-pdf-rule-number { background:#222; }
.house-rules-pdf-rule-text { margin-left:36px; }
.house-rules-pdf-rule-text p { margin:0; font-size:11.5pt; line-height:1.45; overflow-wrap:anywhere; }
.house-rules-pdf-rule-text p + p { margin-top:2mm; color:#465561; font-size:10.5pt; }
.house-rules-pdf-signature { break-inside:avoid; page-break-inside:avoid; margin-top:7mm; padding:7mm; border:1px solid #aeb8bf; border-radius:4mm; }
.house-rules-pdf-signature h3 { margin:0 0 3mm; font-size:13pt; }
.house-rules-pdf-signature-copy { margin-bottom:5mm; }
.house-rules-pdf-signature-copy p { margin:0; font-size:9.4pt; line-height:1.42; }
.house-rules-pdf-signature-copy p + p { margin-top:2mm; }
.house-rules-signature-lines { display:grid; grid-template-columns:repeat(3,1fr); gap:6mm; }
.house-rules-signature-lines span { display:block; padding-top:7mm; border-bottom:1px solid #333; font-size:9pt; }
.house-rules-pdf-disclaimer { position:absolute; left:15mm; right:15mm; bottom:8mm; margin:0; font-size:7.2pt; line-height:1.3; color:#53616b; }
.house-rules-pdf-disclaimer p { margin:0; }
.house-rules-pdf-disclaimer p + p { margin-top:1mm; }
.house-rules-pdf-page[data-theme="mono"] .house-rules-pdf-disclaimer { color:#222; }
.house-rules-pdf-page-number { position:absolute; right:15mm; bottom:4mm; font-size:7.5pt; color:#65727b; }

.house-rules-mobile-bar { display:none; }
.house-rules-confirm { max-width:480px; padding:0; border:0; border-radius:var(--ui2-radius-lg); box-shadow:var(--ui2-shadow-floating); }
.house-rules-confirm::backdrop { background:rgba(11,28,41,.6); }
.house-rules-confirm form { padding:var(--ui2-space-xl); }
.house-rules-confirm h2 { margin-top:0; }
.house-rules-confirm form div { display:flex; justify-content:flex-end; gap:var(--ui2-space-sm); margin-top:var(--ui2-space-lg); }
.house-rules-toast { position:fixed; z-index:980; left:50%; bottom:84px; transform:translate(-50%,16px); max-width:min(90vw,520px); padding:var(--ui2-space-sm) var(--ui2-space-md); border-radius:var(--ui2-radius-pill); background:#17384f; color:#fff; opacity:0; pointer-events:none; transition:.2s ease; }
.house-rules-toast.is-visible { opacity:1; transform:translate(-50%,0); }

@media (max-width:1120px) {
  .house-rules-steps { top:72px; }
  .house-rules-layout { grid-template-columns:minmax(0,1fr) 320px; }
  .house-rules-my-panel { top:146px; }
}

@media (max-width:800px) {
  .house-rules-app { padding-bottom:94px; }
  .house-rules-steps { position:static; }
  .house-rules-steps ol { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .house-rules-layout { display:block; }
  .house-rules-sample-grid { grid-template-columns:1fr; }
  .house-rules-my-panel { position:fixed; z-index:950; inset:0; max-height:none; border-radius:0; transform:translateY(102%); visibility:hidden; transition:transform .22s ease,visibility .22s; padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom)); }
  .house-rules-my-panel.is-open { transform:none; visibility:visible; }
  .house-rules-close-panel { display:grid; place-items:center; }
  .house-rules-selected { padding-bottom:var(--ui2-space-lg); }
  .house-rules-mobile-bar { display:block; position:fixed; z-index:50; left:0; right:0; bottom:0; padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background:color-mix(in srgb,var(--ui2-surface) 96%,transparent); border-top:1px solid var(--ui2-border); box-shadow:0 -8px 22px rgba(20,38,52,.12); }
  .house-rules-mobile-bar button { display:flex; justify-content:space-between; align-items:center; width:100%; min-height:52px; padding:0 var(--ui2-space-md); border:0; border-radius:var(--ui2-radius-md); background:var(--house-rules-accent); color:#fff; font:inherit; font-weight:var(--ui2-weight-semibold); }
  .house-rules-settings { grid-template-columns:1fr; }
  .house-rules-section-heading { flex-direction:column; }
  .house-rules-export-actions { width:100%; }
  .house-rules-export-actions .ui2-button { flex:1; }
}

@media (max-width:430px) {
  .house-rules-hero { align-items:flex-start; gap:var(--ui2-space-md); }
  .house-rules-hero img { width:52px; height:52px; flex-basis:52px; }
  .house-rules-steps a { font-size:var(--ui2-font-meta); }
  .house-rules-section,.house-rules-preview-section { padding:var(--ui2-space-md); }
  .house-rules-sample-card { padding:var(--ui2-space-md); }
  .house-rules-selected-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .house-rules-selected-actions button:last-child { grid-column:1/-1; }
}

@media print {
  @page { size:A4 portrait; margin:0; }
  html,body { margin:0!important; padding:0!important; background:#fff!important; }
  .house-rules-print-mode .ui2-header,.house-rules-print-mode .ui2-search,.house-rules-print-mode .ui2-footer,.house-rules-print-mode .ui2-skip-link,.house-rules-print-mode .house-rules-breadcrumb,.house-rules-print-mode .house-rules-hero,.house-rules-print-mode .house-rules-steps,.house-rules-print-mode .house-rules-layout,.house-rules-print-mode .house-rules-preview-section > .house-rules-section-heading,.house-rules-print-mode .house-rules-preview-summary,.house-rules-print-mode .house-rules-export-status,.house-rules-print-mode .house-rules-preview-empty,.house-rules-print-mode .house-rules-mobile-bar,.house-rules-print-mode .house-rules-confirm,.house-rules-print-mode .house-rules-toast { display:none!important; }
  .house-rules-print-mode .ui2-page,.house-rules-print-mode .house-rules-app,.house-rules-print-mode .house-rules-preview-section,.house-rules-print-mode .house-rules-preview { display:block!important; width:auto!important; max-width:none!important; margin:0!important; padding:0!important; border:0!important; box-shadow:none!important; background:#fff!important; overflow:visible!important; }
  .house-rules-print-mode .house-rules-pdf-page { break-after:page; page-break-after:always; margin:0!important; box-shadow:none!important; }
  .house-rules-print-mode .house-rules-pdf-page:last-child { break-after:auto; page-break-after:auto; }
}