@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@500;600;700;800&display=swap');

:root{
  --paper:#f6f3ec; --ink:#25231f; --muted:#706b62; --line:#d8d2c7;
  --panel:#fbfaf6; --accent:#6f7358; --danger:#9b4e46;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}
button,input{font:inherit}
button{cursor:pointer}
.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;background:rgba(246,243,236,.94);position:sticky;top:0;z-index:100}
.brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:var(--ink)}
.brand-mark{font-size:25px}.brand strong{display:block;font-size:14px;font-weight:800;letter-spacing:.12em}.brand small{display:block;font-size:9px;font-weight:700;letter-spacing:.16em;color:var(--muted);margin-top:3px}
nav{display:flex;gap:10px}.nav-btn,.sync-pill{border:0;background:transparent;padding:10px 13px;font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--muted)}.nav-btn.active{color:var(--ink);border-bottom:2px solid var(--ink)}
.sync-pill{border:1px solid var(--line);border-radius:999px;color:var(--ink)}
main{max-width:1500px;margin:auto;padding:38px 4vw 80px}
.view{display:none}.view.active{display:block}
.hero{padding:18px 0 34px}.eyebrow{font-family:"DM Mono",monospace;font-size:10px;letter-spacing:.15em;font-weight:700;color:var(--muted);margin:0 0 8px}.hero h1,.collection-head h1{font-size:clamp(34px,5vw,64px);line-height:1.03;margin:0;font-weight:800;letter-spacing:-.045em}.intro{max-width:680px;font-size:14px;line-height:1.7;color:var(--muted);font-weight:600}
.studio-grid{display:grid;grid-template-columns:250px minmax(500px,1fr) 250px;gap:18px;align-items:start}.panel{background:var(--panel);border:1px solid var(--line);border-radius:18px}.asset-panel{padding:16px}.panel-title{font-size:12px;font-weight:800;letter-spacing:.1em}.tabs{display:flex;border-bottom:1px solid var(--line);margin:14px 0 12px}.tab{flex:1;border:0;background:none;padding:9px 4px;font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--muted)}.tab.active{color:var(--ink);border-bottom:2px solid var(--ink)}
.asset-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.asset-card{border:1px solid var(--line);background:#f3efe7;border-radius:12px;padding:7px;text-align:center;transition:.15s}.asset-card:hover{transform:translateY(-1px);border-color:#aaa}.asset-thumb{height:82px;display:grid;place-items:center}.asset-thumb img{max-width:92%;max-height:82px;object-fit:contain}.asset-name{font-size:9px;font-weight:800;margin-top:4px}.upload-btn{display:block;margin-top:10px;border:1px dashed #aaa;border-radius:10px;text-align:center;padding:11px;font-size:9px;font-weight:800;letter-spacing:.08em;color:var(--muted);cursor:pointer}
.workbench-wrap{min-width:0}.workbench-head{display:flex;align-items:center;gap:9px;margin-bottom:12px;flex-wrap:wrap}.workbench-head>div:first-child{margin-right:auto}.workbench-head h2{margin:0;font-size:29px;font-weight:800;letter-spacing:-.04em}.tool-modes{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.mode{border:0;border-right:1px solid var(--line);background:var(--panel);padding:8px 9px;font-size:8px;font-weight:800;letter-spacing:.08em;color:var(--muted)}.mode:last-child{border-right:0}.mode.active{background:#e9e5da;color:var(--ink)}
.finish-btn,.ghost-btn,.danger-btn,.mini-btn{border-radius:10px;padding:10px 12px;font-size:9px;font-weight:800;letter-spacing:.06em}.finish-btn{border:1px solid var(--ink);background:var(--ink);color:white}.ghost-btn,.mini-btn{border:1px solid var(--line);background:var(--panel);color:var(--ink)}.danger-btn{border:1px solid #d6aaa5;background:#fff5f3;color:var(--danger)}
.stage{position:relative;height:min(66vw,680px);min-height:480px;border:1px solid var(--line);border-radius:22px;background:#fbfaf6;overflow:hidden;outline:none;box-shadow:0 14px 40px rgba(50,45,35,.05)}.stage:focus{box-shadow:0 0 0 2px #aaa,0 14px 40px rgba(50,45,35,.05)}
.empty-hint{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:7px;z-index:1;color:#aaa}.empty-hint strong{font-size:12px;letter-spacing:.12em}.empty-hint span{font-size:11px;font-weight:600}
.vase-guide{position:absolute;left:8%;right:8%;bottom:10%;height:24%;border:1px dashed rgba(105,94,82,.22);border-bottom:0;pointer-events:none;z-index:2}.vase-guide:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed rgba(105,94,82,.14)}.vase-guide span{position:absolute;right:0;top:5px;background:rgba(248,245,239,.78);padding:4px 7px;font-family:"DM Mono";font-size:8px;font-weight:700;letter-spacing:.08em;color:#777}
.stage-item{position:absolute;width:150px;height:150px;display:grid;place-items:center;transform-origin:center;touch-action:none;cursor:grab}.stage-item:active{cursor:grabbing}.stage-item img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}.stage-item.selected:after{content:"";position:absolute;inset:0;border:1.5px dashed #606457;border-radius:8px;pointer-events:none}.stage-item.selected:before{content:"";position:absolute;width:7px;height:7px;background:#606457;border-radius:50%;right:-4px;bottom:-4px;box-shadow:-150px 0 #606457,0 -150px #606457, -150px -150px #606457;pointer-events:none}
.stage-help{font-size:10px;font-weight:600;color:var(--muted);padding:8px 2px}
.right-panel{display:grid;gap:14px}.controls-panel{padding:16px}.controls-panel label{display:block;font-size:10px;font-weight:700;color:var(--muted);margin-top:14px}.controls-panel output{float:right;color:var(--ink)}input[type=range]{width:100%;margin-top:8px}.selected-name{font-size:17px;font-weight:800;margin-top:8px}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.controls-panel .danger-btn{width:100%;margin-top:9px}
.layer-panel{padding:16px}.layer-stack{display:grid;gap:6px;margin-top:10px}.layer-row{display:flex;align-items:center;gap:7px;padding:8px;border:1px solid var(--line);border-radius:9px;background:#f7f4ed;font-size:9px;font-weight:700;cursor:pointer}.layer-row.active{border-color:#777b65;background:#ece9df}.layer-dot{width:7px;height:7px;border-radius:50%;background:#8b8d78;flex:none}.layer-row span:last-child{margin-left:auto;font-family:"DM Mono";font-size:8px;color:var(--muted)}
.hidden{display:none!important}
.collection-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:20px 0 30px}.collection-head h1{font-size:50px}.collection-head p:last-child{color:var(--muted);font-size:13px;font-weight:600}.count-pill{border:1px solid var(--line);padding:10px 12px;border-radius:999px;font-size:9px;font-weight:800;letter-spacing:.1em}.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}.collection-card{background:#fbfaf6;border:1px solid var(--line);border-radius:18px;padding:12px;cursor:pointer}.collection-card:hover{transform:translateY(-2px)}.card-canvas{height:300px;border-radius:12px;background:#f1eee6;position:relative;overflow:hidden}.card-caption{padding:12px 3px 3px}.card-caption strong{font-size:14px;font-weight:800}.card-caption span{display:block;margin-top:4px;font-family:"DM Mono";font-size:8px;color:var(--muted)}
.modal{position:fixed;inset:0;background:rgba(30,28,24,.45);display:grid;place-items:center;padding:20px;z-index:500}.modal-card,.key-modal{width:min(620px,96vw);background:var(--panel);border-radius:22px;padding:20px;position:relative;box-shadow:0 25px 80px rgba(0,0,0,.2)}.close{position:absolute;right:14px;top:12px;border:0;background:none;font-size:25px}.card-preview{height:min(62vh,540px);background:#f1eee6;border-radius:15px;position:relative;overflow:hidden}.card-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:13px}.name-input{flex:1;border:0;border-bottom:1px solid var(--line);background:transparent;padding:7px 0;font-size:18px;font-weight:800;outline:none}.card-date{font-family:"DM Mono";font-size:8px;color:var(--muted)}.card-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:13px}
.key-modal{max-width:520px}.key-modal h2{font-size:31px;margin:0 0 8px;font-weight:800}.key-copy{font-size:12px;line-height:1.7;color:var(--muted);font-weight:600}.key-display{font-family:"DM Mono";font-size:24px;font-weight:500;letter-spacing:.12em;text-align:center;padding:18px;background:#f0ece3;border-radius:12px;margin:14px 0}.key-row{display:flex;gap:8px}.key-row input{flex:1;border:1px solid var(--line);background:white;border-radius:10px;padding:11px;font-size:11px;font-weight:700;letter-spacing:.08em}.key-actions{display:flex;gap:8px;margin-top:8px}.key-status{font-size:10px;color:var(--muted);font-weight:700;min-height:15px}
@media(max-width:1100px){.studio-grid{grid-template-columns:220px minmax(0,1fr)}.right-panel{grid-column:1/-1;grid-template-columns:1fr 1fr}.stage{min-height:430px}}
@media(max-width:760px){.topbar{padding:0 16px}.topbar nav{display:none}main{padding:24px 14px 50px}.studio-grid{display:block}.asset-panel{margin-bottom:14px}.right-panel{display:grid;grid-template-columns:1fr;margin-top:14px}.workbench-head{display:grid;grid-template-columns:1fr 1fr}.workbench-head>div:first-child{grid-column:1/-1}.tool-modes{grid-column:1/-1}.stage{height:110vw;min-height:380px}.collection-head{display:block}.collection-head h1{font-size:40px}.count-pill{display:inline-block;margin-top:12px}.key-row{display:block}.key-row button{width:100%;margin-top:8px}}
@media print{body>*:not(#cardModal){display:none!important}#cardModal{display:block!important;position:static;background:white;padding:0}.modal-card{width:100%;box-shadow:none;padding:0}.close,.card-meta,.card-actions{display:none!important}.card-preview{height:90vh}}

/* Flower Lab v5 refinements */
.hero h1,.collection-head h1{font-family:"Noto Serif SC",serif;font-size:clamp(48px,7vw,92px);line-height:.94;font-weight:500;letter-spacing:-.06em}
.hero h1 em,.collection-head h1 em{font-weight:600;color:#667c69}
.collection-head h1{font-size:clamp(50px,7vw,88px)}
.layer-help{font-size:10px;line-height:1.5;color:var(--muted);font-weight:600;margin:7px 0 8px}
.layer-row{padding:0;overflow:hidden}
.layer-main{display:flex;align-items:center;gap:7px;flex:1;min-width:0;border:0;background:none;padding:8px;cursor:pointer;font:inherit;text-align:left;color:inherit}
.layer-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layer-number{margin-left:auto;font-family:"DM Mono";font-size:8px;color:var(--muted)}
.layer-actions{display:flex;gap:2px;padding:4px 5px 4px 0}
.layer-arrow{border:1px solid var(--line);background:#fff;border-radius:6px;width:25px;height:24px;cursor:pointer;font-weight:800;line-height:1}
.layer-arrow:disabled{opacity:.3;cursor:default}
.layer-arrow:not(:disabled):hover{background:#ece9df}
.modal{cursor:pointer}
.modal-card,.key-modal{cursor:default}

/* Flower Lab v5.1 fixes */
.layer-row{position:relative}.layer-actions{z-index:2}.layer-arrow{pointer-events:auto}.card-actions{flex-wrap:wrap}.modal.hidden{display:none!important}.modal-card{cursor:default}

/* Exact arrangement card rendering: the saved workbench is scaled as one composition. */
.card-canvas,.card-preview{overflow:hidden}
.card-exact-frame{transform-origin:top left;position:absolute}
.card-exact-frame .card-item-exact{display:grid;place-items:center;transform-origin:center}
.card-exact-frame .card-item-exact img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none}