@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=DM+Serif+Display&family=Grandstander:wght@600;700&family=Mountains+of+Christmas:wght@700&family=Snowburst+One&display=swap');

:root{
  --ink:#181818; --muted:#6b6b6b; --line:#d9d9d9; --soft:#f6f6f3; --panel:#ffffff; --accent:#b88a25; --accent-dark:#8f6919;
  font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:#f1f1ef;
}
*{box-sizing:border-box} body{margin:0;background:#f1f1ef;color:var(--ink)} button,input,select{font:inherit}
button{cursor:pointer} button:focus-visible,input:focus-visible,select:focus-visible,[role="button"]:focus-visible{outline:3px solid rgba(184,138,37,.28);outline-offset:2px}
button:disabled{cursor:not-allowed;opacity:.46}
.app-shell{max-width:1540px;margin:0 auto;padding:18px}.topbar{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:16px}.topbar h1{font-size:24px;margin:0 0 5px}.topbar p{margin:0;color:var(--muted)}.top-actions{display:flex;gap:10px;flex-wrap:wrap}
.workspace{display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px;align-items:start}.sidepanel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px;max-height:calc(100vh - 120px);overflow:auto;position:sticky;top:14px}.steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:16px}.step-tab{border:0;background:#f2f2ef;border-radius:10px;padding:9px 5px;font-size:12px;color:#5a5a5a;line-height:1.15}.step-tab span{display:block;font-weight:700;font-size:15px;margin-bottom:3px}.step-tab.active{background:#eee4c9;color:#5c4514}.step-panel{display:none}.step-panel.active{display:block}.step-panel h2{font-size:18px;margin:2px 0 8px}.hint{font-size:13px;line-height:1.45;color:var(--muted);margin:0 0 14px}
.choice-grid{display:grid;gap:8px;margin-bottom:14px}.choice-row{display:grid;grid-template-columns:70px 1fr auto;gap:7px;align-items:center;border-bottom:1px solid #eee;padding:7px 0}.choice-row span{font-size:12px;color:var(--muted)}.mini{width:35px;height:35px;border:1px solid #ccc;background:white;border-radius:8px;font-size:20px;line-height:1}.primary,.ghost{min-height:42px;border-radius:10px;padding:9px 14px;font-weight:700}.primary{border:1px solid var(--accent-dark);background:var(--accent);color:#fff}.primary:hover:not(:disabled){background:var(--accent-dark)}.ghost{border:1px solid #cfcfcf;background:#fff;color:#333}.wide{width:100%}.button-row{display:flex;gap:8px;margin-top:14px}.button-row>*{flex:1}
label{display:block;font-size:13px;font-weight:700;margin:12px 0 5px}input,select{width:100%;min-height:44px;border:1px solid #c9c9c9;border-radius:9px;background:white;padding:9px 10px;font-size:16px}.message{min-height:18px;margin:12px 2px 0;font-size:12px;color:#795b18}
.preview-wrap{min-width:0}.edit-controls{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#fff;border:2px solid #b88a25;border-radius:14px;padding:12px 14px;margin-bottom:10px;flex-wrap:wrap;position:sticky;top:8px;z-index:20}.edit-controls.hidden{display:none}.edit-label{font-size:13px;font-weight:700;color:#533d10}.edit-actions{display:flex;flex-wrap:wrap;gap:8px}.tool-btn{min-height:40px;padding:8px 12px}.tool-btn.danger{border-color:#d6b5b5;background:#fff9f9}
.paper-frame{background:#d5d5d2;border-radius:14px;padding:18px;overflow:auto}.paper-frame svg{display:block;width:100%;height:auto;aspect-ratio:1123/794;background:white;box-shadow:0 2px 12px rgba(0,0,0,.12)}.paper-bg{fill:white}.preview-note{text-align:center;color:var(--muted);font-size:12px;margin:8px 0 0}
.guide{fill:none;stroke:#bdbdbd;stroke-width:2.5;stroke-dasharray:8 7;opacity:.82;pointer-events:none}.guide-hit{fill:#fff;fill-opacity:.001;stroke:none;pointer-events:all}.guide-text{font:700 18px Arial,sans-serif;fill:#9a9a9a;text-anchor:middle;dominant-baseline:middle;pointer-events:none}.clickable-piece{cursor:pointer}.guide-group:hover .guide{stroke:#8e8e8e;opacity:1}.clickable-piece:hover{opacity:.84}
.placemat-title{text-anchor:middle;fill:#111}.title-berkshire{font-family:"Berkshire Swash",Georgia,serif;font-weight:400}.title-mountains{font-family:"Mountains of Christmas","Trebuchet MS",sans-serif;font-weight:700}.title-snowburst{font-family:"Snowburst One",Georgia,serif;font-weight:400}.title-grandstander{font-family:"Grandstander","Trebuchet MS",sans-serif;font-weight:700}.title-serif{font-family:"DM Serif Display",Georgia,serif;font-weight:400}
.decor-list{display:grid;gap:6px}.decor-row{display:grid;grid-template-columns:58px minmax(0,1fr) 36px 30px 36px;align-items:center;gap:7px;padding:6px;border:1px solid #e4e4e1;border-radius:10px;background:#fff}.decor-row img{width:54px;height:54px;object-fit:contain}.decor-label{font-size:12px;line-height:1.18}.decor-count{text-align:center;font-weight:800;font-variant-numeric:tabular-nums}.decor-btn{width:36px;height:36px;border-radius:8px;border:1px solid #cfcfcf;background:#fff;font-size:20px}.decor-btn:hover{background:#f4f4f1}
@media(max-width:900px){.app-shell{padding:10px}.topbar{align-items:flex-start;flex-direction:column}.workspace{grid-template-columns:1fr}.sidepanel{position:static;max-height:none}.preview-wrap{order:-1}.paper-frame{padding:8px}.decor-list{grid-template-columns:1fr 1fr}.decor-row{grid-template-columns:48px minmax(0,1fr) 34px 26px 34px}.decor-row img{width:44px;height:44px}.edit-controls{padding:10px}.edit-actions{width:100%}}
@media(max-width:560px){.decor-list{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr 1fr}.step-tab{font-size:11px;padding:7px 3px}.top-actions{width:100%}.top-actions button{flex:1}.tool-btn{flex:1 1 calc(50% - 8px)}}
@page{size:A4 landscape;margin:0}
@media print{
  html,body{width:297mm;height:210mm;margin:0!important;padding:0!important;background:white!important;overflow:hidden}
  .no-print,.no-print-svg{display:none!important}.app-shell,.workspace,.preview-wrap,.paper-frame{display:block!important;margin:0!important;padding:0!important;border:0!important;background:white!important;max-width:none!important;width:297mm!important;height:210mm!important;box-shadow:none!important}.paper-frame svg{display:block!important;width:297mm!important;height:210mm!important;box-shadow:none!important;border:0!important}
}

.decoration-item{cursor:grab;touch-action:none;user-select:none}.decoration-item.dragging{cursor:grabbing;opacity:.88}.decoration-item image{pointer-events:none}.selection-box{fill:none;stroke:#b88a25;stroke-width:2.5;stroke-dasharray:8 6;pointer-events:none}.selection-dot{fill:#b88a25;pointer-events:none}
@media print{.selection-box,.selection-dot{display:none!important}}

.decor-hit{fill:#fff;fill-opacity:.001;stroke:none;pointer-events:all}