:root { --ink:#26302c; --muted:#87908a; --paper:#f8f7f2; --line:#e5e4dc; --green:#536b5c; --clay:#c97560; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"Nunito Sans","PingFang SC",sans-serif; } button { font:inherit; cursor:pointer; } .app-shell { min-height:100vh; display:grid; grid-template-columns:236px 1fr; }
.sidebar { padding:34px 24px 28px; background:#eeece4; border-right:1px solid #e0ded5; display:flex; flex-direction:column; } .brand { display:flex; gap:9px; align-items:flex-start; color:var(--ink); text-decoration:none; font:700 25px/.73 "Noto Serif SC",serif; letter-spacing:-1.5px; } .brand-mark { margin-top:-6px; color:#cb896a; font:24px serif; }.main-nav { margin-top:67px; display:grid; gap:10px; }.nav-item { display:flex; align-items:center; gap:13px; padding:13px 12px; border:0; border-radius:9px; color:#626b65; background:transparent; text-align:left; font-size:14px; }.nav-item span { width:18px; text-align:center; font-size:18px; }.nav-item.active { color:#fff; background:var(--green); box-shadow:0 7px 16px #43544824; }.sidebar-bottom { margin-top:auto; color:#838980; font-size:12px; line-height:1.6; }.local-status { display:flex; align-items:center; gap:7px; color:#536b5c; font-weight:700; }.local-status i { width:7px; height:7px; border-radius:50%; background:#8ba16f; }
main { min-width:0; padding:33px clamp(24px,5vw,72px) 60px; }.topbar { display:flex; align-items:flex-end; justify-content:space-between; padding-bottom:30px; border-bottom:1px solid var(--line); }.eyebrow { color:#9aa198; letter-spacing:1.6px; text-transform:uppercase; font:500 10px "DM Mono",monospace; }.topbar h1,.panel-heading h2,.intro-card h2,.library-header h2 { margin:5px 0 0; font:600 26px/1.2 "Noto Serif SC",serif; letter-spacing:-.7px; }.header-actions { display:flex; gap:9px; }.button { min-height:40px; padding:0 15px; border:1px solid #dcded8; border-radius:7px; color:var(--ink); background:#fff; font-size:13px; font-weight:700; }.button.dark { border-color:var(--green); background:var(--green); color:#fff; }.button.soft { background:#f0f2ec; border-color:#f0f2ec; color:#536b5c; }.button.full { width:100%; margin-top:20px; }.ghost { background:transparent; }.view { display:none; }.view.active { display:block; }
.studio-layout { display:grid; grid-template-columns:minmax(490px,1.75fr) minmax(290px,.8fr); gap:27px; padding-top:28px; }.canvas-card,.tool-panel,.intro-card { background:#fff; border:1px solid #e8e6df; border-radius:14px; }.canvas-card { padding:16px; box-shadow:0 16px 36px #3e473608; }.canvas-meta,.stage-hint { display:flex; justify-content:space-between; align-items:center; font-size:12px; }.canvas-meta b { font-size:14px; }.canvas-meta em { padding-left:8px; color:#95a094; font-style:normal; font-size:10px; }.canvas-size,.stage-hint { color:#9aa199; font-family:"DM Mono",monospace; font-size:10px; }.quilt-stage { position:relative; height:min(61vw,600px); min-height:450px; margin-top:14px; overflow:hidden; background:#f5f1e7; border:10px solid #eee9da; border-radius:3px; }.quilt-grid { position:absolute; inset:0; opacity:.5; background-image:linear-gradient(#ded9cc 1px,transparent 1px),linear-gradient(90deg,#ded9cc 1px,transparent 1px); background-size:34px 34px; }.stage-hint { padding:12px 2px 0; }
.piece { position:absolute; left:var(--x); top:var(--y); width:134px; height:134px; transform:rotate(var(--r)); background-color:#d99; background-size:cover; background-position:center; cursor:grab; filter:drop-shadow(2px 6px 5px #3c443529); transition:filter .15s,outline .15s; }.piece:hover { filter:drop-shadow(3px 7px 6px #3c443545); }.piece.selected { outline:2px dashed #536b5c; outline-offset:6px; }.piece-square { border-radius:2px; }.piece-circle { border-radius:50%; }.piece-diamond { width:104px;height:104px; }.piece-triangle { width:0;height:0;border-style:solid;border-width:0 78px 134px;border-color:transparent transparent #d3a74f; background:none!important; }.piece-arch { border-radius:70px 70px 2px 2px; }.piece-flower { display:grid; place-items:center; background:transparent!important; font:120px/1 serif; color:#d97573; }
.fabric-rose { background-color:#c77570; background-image:radial-gradient(#f7dad0 20%,transparent 21%),radial-gradient(#f7dad0 20%,transparent 21%);background-position:0 0,10px 10px;background-size:20px 20px; }.fabric-indigo { background-color:#596a89; background-image:linear-gradient(45deg,#ffffff1d 25%,transparent 25% 75%,#ffffff1d 75%),linear-gradient(45deg,#ffffff1d 25%,transparent 25% 75%,#ffffff1d 75%);background-position:0 0,12px 12px;background-size:24px 24px;}.fabric-sage { background-color:#9eae86; background-image:radial-gradient(#f5f0d9 13%,transparent 14%);background-size:16px 16px;}.fabric-mustard { background-color:#d4a54b; background-image:repeating-linear-gradient(135deg,#f8e5a5 0 2px,transparent 2px 9px);}.fabric-gingham { background-color:#d4c1a6; background-image:linear-gradient(90deg,#fff7 50%,transparent 50%),linear-gradient(#fff7 50%,transparent 50%);background-size:18px 18px;}.fabric-custom { background-color:#ddd; }
.tool-panel { overflow:hidden; min-height:595px; }.tool-tabs { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); }.tool-tab { height:52px; border:0; border-bottom:2px solid transparent; color:#858c85; background:#fff; font-size:13px; }.tool-tab.active { color:#536b5c; border-color:#72896f; font-weight:800; }.tool-content { padding:22px; }.hidden { display:none; }.panel-heading { display:flex; align-items:center; justify-content:space-between; }.panel-heading h2 { font-size:19px; }.round-button { display:grid; place-items:center; width:31px; height:31px; padding:0; border:1px solid #dce1d7; border-radius:50%; color:#63755c; background:#f4f6f0; font-size:18px; }.compact-upload,.fabric-import { display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; cursor:pointer; }.compact-upload { min-height:32px; padding:0 10px; border:1px solid #d6ded0; border-radius:6px; color:#536b5c; background:#f2f5ef; font-size:11px; font-weight:700; }.fabric-import { min-height:40px; }.shape-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:20px; }.shape-option { height:84px; display:grid; place-items:center; gap:5px; border:1px solid #edf0ea; border-radius:7px; color:#68745e; background:#fff; }.shape-icon { display:block; width:30px;height:30px;background:#9aa990; }.circle-icon{border-radius:50%}.triangle-icon{width:0;height:0;border-style:solid;border-width:0 17px 29px;border-color:transparent transparent #9aa990;background:none}.diamond-icon{width:25px;height:25px;transform:rotate(45deg)}.arch-icon{border-radius:22px 22px 0 0}.flower-icon{background:none!important;font-size:31px;line-height:25px;color:#9aa990}.shape-option small { font-size:10px; }.divider { height:1px; margin:24px 0 18px; background:var(--line); }.section-label { color:#818980; font-size:12px; }.palette-row { display:flex; flex-wrap:wrap; gap:10px; }.swatch { width:31px;height:31px;border-radius:50%;border:2px solid transparent; }.swatch.active { outline:1px solid #526a5b; outline-offset:3px; }.fabric-list { display:grid; gap:10px; margin-top:20px; }.fabric-choice { display:flex; align-items:center; gap:12px; width:100%; padding:8px; border:1px solid #edf0ea; border-radius:8px; background:#fff; text-align:left; }.fabric-choice.selected { border-color:#829176; background:#f7f9f4; }.fabric-thumb { width:46px;height:46px;border-radius:5px; background-size:cover; }.fabric-choice b { display:block; font-size:13px; }.fabric-choice span { color:#939991;font-size:11px; }.upload input,.compact-upload input,.fabric-import input { display:none; }
.intro-card { position:relative; display:flex; justify-content:space-between; padding:37px 45px; margin-top:30px; overflow:hidden; background:#f0f1e9; }.intro-card h2 { font-size:30px; }.intro-card p,.library-header p { max-width:430px; color:#7c837d; font-size:14px; }.thread-art { position:relative; color:#c6785e; font:76px serif; transform:rotate(-10deg); }.thread-art span { display:block; margin:-32px 0 0 75px; color:#829474;font-size:44px; }.thread-art i { position:absolute; width:135px;height:46px;border-top:2px dashed #b6b38b;left:-40px;top:74px;border-radius:50%; }.filter-row { display:flex; gap:10px; margin:27px 0 20px; }.filter { padding:8px 14px;border:1px solid #e1e3da;border-radius:20px;color:#778078;background:#fff;font-size:12px; }.filter.active { color:#fff;background:#536b5c;border-color:#536b5c; }.inspiration-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:19px; }.inspiration-card { overflow:hidden;border:1px solid #e8e6df;border-radius:12px;background:#fff;text-align:left;transition:transform .18s,box-shadow .18s; }.inspiration-card:hover { transform:translateY(-3px);box-shadow:0 10px 20px #47513b14; }.mini-quilt { position:relative;height:185px;overflow:hidden;background:#f0eadc; }.mini-piece { position:absolute;display:block;width:62px;height:62px;border:1px solid #ffffff5e;box-shadow:1px 2px 3px #53574018; }.mini-piece.rose {background:#ca8077}.mini-piece.indigo {background:#687a99}.mini-piece.sage {background:#9aaa82}.mini-piece.mustard {background:#d2aa55}.mini-piece.cream {background:#ece1c9}.mini-piece.circle {border-radius:50%}.mini-piece.arch {border-radius:70px 70px 0 0}.mini-piece.diamond {width:49px;height:49px}.mini-piece.triangle {width:0;height:0;border-style:solid;border-width:0 34px 59px;border-color:transparent transparent #9aaa82;background:none;box-shadow:none}.inspiration-card div:last-child { padding:13px 14px; }.inspiration-card b { display:block;font:600 16px "Noto Serif SC",serif; }.inspiration-card span { color:#929990;font-size:11px; }.library-header { display:flex;justify-content:space-between;align-items:end;margin-top:30px; }.fabric-library { display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-top:24px; }.empty-library { grid-column:1/-1;display:grid;place-items:center;gap:8px;min-height:230px;padding:28px;border:1px dashed #cfd5c9;border-radius:12px;color:#849082;background:#fbfcf9;text-align:center; }.empty-library span { font-size:29px;color:#829176; }.empty-library b { font-size:14px; }.empty-library small { color:#969c95;font-size:12px; }.library-card { position:relative;padding:8px;border:1px solid #e7e7df;border-radius:9px;background:#fff;text-align:left; }.library-swatch { width:100%;aspect-ratio:1;border-radius:5px;background-size:cover; }.library-card b { display:block;margin:8px 2px 1px;font-size:13px; }.library-card small { margin:0 2px;color:#9ca19c;font-size:10px; }.remove-fabric { position:absolute;right:13px;top:13px;width:24px;height:24px;border:0;border-radius:50%;background:#26302cba;color:#fff;opacity:0; }.library-card:hover .remove-fabric { opacity:1; }.layer-list { display:grid;gap:8px;margin-top:20px; }.layer-row { display:flex;align-items:center;gap:9px;padding:8px;border:1px solid #edf0ea;border-radius:7px; }.layer-row.selected { background:#f3f5f0;border-color:#d4dbcf; }.layer-dot { width:27px;height:27px;border-radius:5px;background-size:cover; }.layer-row span { flex:1;font-size:12px; }.layer-row button { border:0;background:transparent;color:#9a786c;font-size:17px; }.toast { position:fixed;left:50%;bottom:26px;z-index:20;transform:translate(-50%,20px);padding:10px 17px;border-radius:24px;background:#29352e;color:#fff;opacity:0;font-size:13px;transition:.25s;pointer-events:none; }.toast.show { opacity:1;transform:translate(-50%,0); }
.site-footer { display:flex; justify-content:space-between; gap:16px; padding:34px 0 4px; color:#9ba199; font-size:11px; }.site-footer a { color:#778578; text-decoration:none; }.site-footer a:hover { color:#536b5c; text-decoration:underline; }
@media (max-width:900px) { .app-shell { grid-template-columns:76px 1fr; }.sidebar { padding:25px 13px; }.brand { justify-content:center;font-size:0; }.brand-mark { font-size:24px; }.nav-item { justify-content:center;padding:13px 4px;font-size:0; }.nav-item span { font-size:20px; }.sidebar-bottom { display:none; }.studio-layout { grid-template-columns:1fr; }.tool-panel { min-height:0; }.quilt-stage { height:65vw; }.fabric-library { grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px) { .app-shell { display:block; }.sidebar { position:fixed;z-index:10;bottom:0;left:0;right:0;height:67px;padding:7px 12px;display:block;border-top:1px solid #dfddd5;border-right:0; }.brand { display:none; }.main-nav { margin:0;grid-template-columns:repeat(3,1fr);gap:2px; }.nav-item { display:grid;place-items:center;gap:0;height:52px;font-size:10px; }.nav-item span { height:20px;line-height:18px;font-size:17px; } main { padding:22px 16px 90px; }.topbar { align-items:flex-start;gap:15px; }.topbar h1 { font-size:23px; }.header-actions { display:grid;gap:5px; }.button { min-height:34px;padding:0 10px;font-size:11px; }.studio-layout { padding-top:18px; }.quilt-stage { min-height:355px;height:90vw;border-width:6px; }.piece { width:84px;height:84px; }.piece-diamond {width:68px;height:68px}.piece-triangle {border-width:0 48px 83px}.piece-flower{font-size:77px}.tool-content { padding:17px; }.intro-card { padding:27px 22px; }.intro-card h2 {font-size:24px}.thread-art { display:none; }.inspiration-grid {grid-template-columns:repeat(2,1fr);gap:12px}.mini-quilt{height:130px}.fabric-library{grid-template-columns:repeat(2,1fr)}.library-header{align-items:flex-start;gap:12px}.library-header h2{font-size:24px}.site-footer { padding-top:26px; flex-direction:column; gap:5px; } }