:root { color-scheme: light; font-family: "Yu Gothic", "Meiryo", system-ui, sans-serif; background: #fff8f4; color: #4a3030; }
* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(135deg,#fff8f4 0%,#fff0f5 48%,#eef8ff 100%); }
button, select, textarea { font: inherit; }
button { border: 0; border-radius: 12px; background: #fff; color: #5b3d47; padding: .65rem 1rem; cursor: pointer; box-shadow: 0 3px 10px #7e53601c; }
button:hover { transform: translateY(-1px); box-shadow: 0 5px 14px #7e53602d; }
button.primary { background: #ef7d9e; color: #fff; font-weight: 700; }
.poitto-shell { max-width: 1180px; margin: 0 auto; padding: 28px clamp(14px,4vw,44px) 48px; }
.hero { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.mascot { width: 58px; height: 58px; display:grid; place-items:center; border-radius: 19px; background:#ffd6e2; overflow:hidden; box-shadow: inset 0 -5px #f4aec2; }
.mascot img { width: 100%; height: 100%; object-fit: contain; display:block; }
h1 { margin: 0; font-size: clamp(1.45rem,3vw,2.15rem); color:#5b3548; } h1 span { font-size: .55em; color:#a87587; font-weight:500; }
.hero p { margin: 5px 0 0; color:#866b73; }
.rule-row { display:flex; align-items:center; gap:10px; margin: 12px 0; } .rule-row label { font-weight:700; } select { padding:.55rem .8rem; border:1px solid #e7cbd3; border-radius:10px; background:#fff; }
.edit-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:16px; }
.card { background:#ffffffd9; border:1px solid #f1dce1; border-radius:18px; padding:16px; box-shadow: 0 8px 24px #9d637114; }
.card h2 { font-size:1rem; margin:0 0 10px; color:#674252; } textarea { width:100%; min-height:360px; resize:vertical; padding:12px; border:1px solid #ead8dd; border-radius:12px; background:#fffdfd; color:#4d3940; line-height:1.5; } textarea:focus, select:focus { outline:2px solid #f3a3b9; outline-offset:1px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 10px; } .status { margin: 8px 2px 14px; color:#7a5865; }
.settings { margin-top:12px; } .order-help { color:#826a72; margin-bottom:8px; } .order-list { width:min(100%,600px); max-height:320px; overflow:auto; display:flex; flex-direction:column; gap:0; padding:10px; border:1px solid #edd9df; border-radius:12px; background:#fffafa; margin-bottom:10px; }
.drop-line { height:4px; flex:0 0 4px; margin:2px 6px; border-radius:999px; background:transparent; transition:background .12s, box-shadow .12s; pointer-events:none; } .drop-line.is-active { background:#ef7d9e; box-shadow:0 0 0 2px #ef7d9e33; } .drop-line-end { margin-top:4px; }
.order-item { display:flex; align-items:center; justify-content:space-between; min-height:42px; padding:7px 9px; border:1px solid #efdde2; border-radius:10px; background:#fff; cursor:default; user-select:none; transition:opacity .12s, border-color .12s, box-shadow .12s; } .order-item.is-dragging { opacity:.42; } .order-item.is-drop-target { border-color:#ef7d9e; box-shadow:0 0 0 2px #ef7d9e2b; } .drag-handle { display:inline-grid; place-items:center; flex:0 0 28px; min-height:28px; margin-right:6px; border-radius:7px; color:#9e6c7c; font-size:1.35rem; line-height:1; cursor:grab; touch-action:none; } .drag-handle:active { cursor:grabbing; background:#fde3eb; } .order-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .order-buttons { display:flex; gap:4px; } .order-buttons button { padding:.25rem .6rem; min-width:38px; } .reorder-ghost { position:fixed; z-index:9999; pointer-events:none; opacity:.72; transform:rotate(1deg); box-shadow:0 10px 24px #7e536033; } body.is-reordering, body.is-reordering * { cursor:grabbing !important; }
.check-grid { display:grid; grid-template-columns:minmax(180px,1fr) 70px 70px; align-items:center; gap:8px 12px; margin-top:16px; } .check-grid strong { text-align:center; } .check-grid input { justify-self:center; width:18px; height:18px; }
.settings label { display:block; margin:10px 0; } .settings input[type=radio] { margin-right:7px; }
@media (max-width: 720px) { .edit-grid { grid-template-columns:1fr; } textarea { min-height:230px; } .hero { align-items:flex-start; } .check-grid { grid-template-columns:minmax(120px,1fr) 55px 55px; font-size:.9rem; } }
#blazor-error-ui { display:none; }