/* Sakura / Monochrome. Shared design tokens; no document data or artwork. */
:root{--ink:#161616;--muted:#656565;--green:#181818;--paper:#fafafa;--cream:#f3f3f3;--sage:#eeeeee;--rose:#eeeeee;--line:#dedede;--white:#fff;--shadow:none;color:#161616;background:#fafafa}
html body{background:#fafafa;color:#161616;font-family:'Segoe UI','PingFang TC','Microsoft JhengHei',sans-serif;-webkit-font-smoothing:antialiased}
html body h1,html body h2,html body h3{color:#171717}h1{font-weight:600;letter-spacing:-.045em}h2{letter-spacing:-.025em}html body .eyebrow{color:#737373;font-size:12px;letter-spacing:2px}
html body .site-header{background:#fff;border-color:#e5e5e5;height:88px}html body .site-header nav a.active{color:#111}html body .site-header nav a.active:after{background:#111;height:2px}html body .logo-mark i{background:#222}html body .logo-mark i:nth-child(2n){background:#999}
html body .btn,html body button.primary,html body .ol .ol-primary,html body .work-dock #work-save,html body .button:not(.secondary){background:#191919;border:1px solid #191919;color:#fff;border-radius:4px;box-shadow:none}
html body .btn:hover,html body button.primary:hover,html body .ol .ol-primary:hover,html body .work-dock #work-save:hover{background:#353535}
html body .btn.secondary,html body button.secondary,html body .button.secondary{background:#fff;border-color:#ccc;color:#222;border-radius:4px}
html body input,html body select,html body textarea{background:#fff;color:#202020;border-color:#ccc;border-radius:4px;box-shadow:none}html body input:focus-visible,html body select:focus-visible,html body textarea:focus-visible{outline:2px solid #222;outline-offset:2px;border-color:#222;box-shadow:none}html body input[type=checkbox]{accent-color:#222}
::selection{background:#ddd;color:#111}
html body .hero{padding-top:72px;padding-bottom:64px}html body .hero h1{line-height:1.35;font-size:clamp(36px,4.2vw,60px)}html body .hero-art{filter:grayscale(1)}html body .hero-desc{color:#666}html body .principles{border-color:#dedede}
html body .module-card,html body .course-card,html body .side-card,html body .cms-panel,html body .cms-lesson-article,html body .cms-course-intro,html body .guide-card,html body .auth-panel{background:#fff;border-color:#dedede;border-radius:6px;box-shadow:none}
html body .module-visual,html body .blue .module-visual,html body .rose .module-visual,html body .course-card-cover{background:#f0f0f0}html body .site-footer{background:#f2f2f2;border-color:#dedede}
html body .work-dock{background:#fff;border:1px solid #d7d7d7;border-left:3px solid #1c1c1c;border-radius:4px;color:#222;padding:22px 24px}html body .work-dock a{color:#333}html body .work-dock p{color:#666}html body .work-dock button{border-radius:4px;background:#fff;color:#222;border-color:#ccc}html body .work-dock-heading strong{font-size:17px}
html body .address-helper{background:#f7f7f7;border-color:#e1e1e1;border-radius:4px}html body .address-helper button{background:#fff;border-color:#bfbfbf;color:#222;border-radius:4px}html body .address-helper p{color:#6b6b6b}
/* Order editing and preview remain visually separate; both use neutral surfaces. */
html body .ol{max-width:1640px;padding-top:44px}html body .ol-heading h1{font-size:34px;font-weight:600;letter-spacing:-1px}html body .ol-heading p{color:#666}html body .ol button,html body .ol-button{border-radius:4px;background:#fff;color:#222;border-color:#cfcfcf}html body .ol-notice{background:#f4f4f4;border-color:#e2e2e2;color:#666;border-radius:4px}
html body .ol-card{background:#fff;border:1px solid #dedede;border-radius:4px;padding:24px}html body .ol-card h2{font-size:17px;font-weight:600}html body .ol-field{color:#555;font-size:14px}html body .ol-field input,html body .ol-field select,html body .ol-field textarea{background:#fff;color:#222;border-color:#ccc;font-size:16px}html body .ol-hint,html body .ol-status{color:#707070}
html body .ol-preview{background:#fff;color:#222;border:1px solid #d9d9d9;border-radius:4px;box-shadow:0 16px 48px #00000006}html body .op-top,html body .op-shopify .op-top{background:#fff;border-top:3px solid #191919;border-bottom:1px solid #dedede;padding:32px}html body .ol-preview h2{font-size:26px;font-weight:600}html body .op-id,html body .op-shopify .op-id{color:#747474;font-size:11px;letter-spacing:1.8px}html body .op-badge,html body .op-shopify .op-badge{background:#f2f2f2;border:1px solid #e2e2e2;color:#444;border-radius:3px;font-size:12px;padding:3px 9px}html body .op-muted{color:#777}html body .op-table th{background:#f6f6f6;color:#606060;border-color:#e3e3e3}html body .op-placeholder{background:#f0f0f0;border-color:#e0e0e0;border-radius:3px}html body .op-note,html body .op-watermark{background:#fafafa;color:#666;border-color:#e5e5e5}html body .ol-preview-heading>span{border-radius:3px;border-color:#d5d5d5;color:#666}
/* Electricity controls only; canvas / exported bill artwork is preserved. */
html body:has(#editor)>header{background:#fff;border-color:#ddd}html body:has(#editor) .brand .mark{background:#222;border-radius:3px}html body:has(#editor) aside,html body:has(#editor) .preview-panel{border-radius:4px;background:#fff;border-color:#ddd}html body:has(#editor) .preview-toolbar,html body:has(#editor) .export-bar{background:#fff;border-color:#ddd}html body:has(#editor) .paper-space{background:#efefef}html body:has(#editor) .template-card,html body:has(#editor) .total{background:#f5f5f5;border-color:#ddd;border-radius:4px}html body:has(#editor) .page-tabs{background:#f0f0f0;border-radius:4px}html body:has(#editor) .bill-worknav{background:#f6f6f6;border-color:#ddd;border-radius:4px}html body .tool-return{background:#f4f4f4;color:#666;border-color:#ddd}html body .tool-return a{color:#333}
html body [data-error=true]{color:#333;text-decoration:underline;text-decoration-style:dotted}
@media(max-width:1080px){html body .site-header nav{background:#fff;top:88px}}
@media(max-width:620px){html body .site-header{height:82px}html body .site-header nav{top:82px}html body .hero{padding-top:38px;padding-bottom:36px}html body .ol{padding:26px 16px}html body .ol-heading h1{font-size:28px}html body .op-top,html body .op-shopify .op-top{padding:22px 18px}html body .ol-card{padding:20px}}
@media print{html body{background:#fff;color:#111}html body .ol-preview{box-shadow:none}html body .op-top{border-top:1px solid #111}}