/* Vườn Mây Đôi — màu trời hoàng hôn, đảo mây và chậu vector. */
#view-sky{background:radial-gradient(ellipse at 90% 8%,#67568155,transparent 45%),linear-gradient(#273653,#526080 62%,#647792);color:#f5f0e9;isolation:isolate}
.sky-root{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 18px calc(30px + env(safe-area-inset-bottom,0px));scroll-behavior:smooth}
.sky-header{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top,0px)) 0 8px;gap:8px}.sky-header>span{font-size:9px;font-weight:600;letter-spacing:.18em;color:#c2c9d9}
.sky-circle{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border:1px solid #ffffff26;border-radius:50%;color:inherit;font-size:23px;background:#ffffff08}.sky-circle[data-sky=help]{font-size:15px}
.sky-hero{text-align:center;position:relative;padding:10px 0 22px}.sky-moon{width:47px;height:47px;line-height:40px;font-size:48px;margin:0 auto 14px;color:#ffe3ae;text-shadow:0 0 28px #f6d59675;transform:rotate(-18deg)}
.sky-eyebrow{font-size:8px;font-weight:700;letter-spacing:.12em;color:#ddc796}.sky-name{font-family:var(--serif);font-size:28px;line-height:1.3;color:#fff2db;margin:8px 0;overflow-wrap:anywhere;max-width:100%}.sky-name small{font-size:14px;color:#c9c4d1}.sky-hero>p:not(.sky-eyebrow){font-size:10px;color:#c5cddd;line-height:1.6}
.sky-connection{font-size:9px;color:#b7decf;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:5px}.sky-connection:before{content:'';width:5px;height:5px;border-radius:50%;background:#a4d5be}.sky-connection.offline{color:#ffe0aa}.sky-connection.offline:before{background:#ffe0aa}
.sky-wallet{display:flex;justify-content:center;gap:22px;margin:0 0 16px;font-size:10px;color:#e0e4ed}.sky-wallet b{font-size:14px;color:#fff0cf;margin-right:3px}
.sky-order{background:#fff7e9;border:1px solid #fae3c1;border-radius:19px;padding:16px;color:#554b5d;box-shadow:0 8px 30px #17203922}.sky-order-title{display:flex;justify-content:space-between;align-items:center;gap:10px}.sky-order-title>span{font-size:30px}.sky-order .sky-eyebrow{color:#9b7959;font-size:7px}.sky-order h2{font-family:var(--serif);font-size:18px;margin-top:4px;line-height:1.3}.sky-needs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}.sky-needs>span{font-size:10px;background:#eee5da;padding:7px 8px;border-radius:8px}.sky-needs b{margin-left:4px}.sky-needs .enough{background:#deeadc;color:#3e6a56}.sky-order-footer{display:flex;justify-content:space-between;align-items:center;gap:12px}.sky-order-footer>span{font-size:10px;color:#8b725b}
.sky-primary{border-radius:12px;background:#edc58d;color:#4e4052;padding:11px 16px;font-size:11px;font-weight:700;min-height:42px;line-height:1.5;box-shadow:inset 0 1px 0 #ffffff55}.sky-primary:disabled{opacity:.45;cursor:default}.sky-secondary{border:1px solid #ffffff44;border-radius:10px;min-height:40px;padding:9px 15px;color:inherit;font-size:10px;background:#ffffff0a}.sky-secondary:disabled{opacity:.45;cursor:default}
.sky-garden-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:25px 0 14px}.sky-garden-label h2{font-family:var(--serif);font-size:19px;font-weight:500}.sky-garden-label>span{font-size:9px;color:#d0d9e5;text-align:right}
.sky-terraces{display:flex;flex-direction:column;gap:26px}.sky-terrace{position:relative;padding:0 6px 26px;isolation:isolate}.sky-tier-label{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:9px;letter-spacing:.06em;color:#e7d9be;margin:0 6px 4px}.sky-tier-label>span:last-child{font-size:14px;color:#ffdda4}
.sky-pots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;position:relative;z-index:1}.sky-pot{position:relative;min-width:0;color:#f9f3e5;display:flex;flex-direction:column;align-items:center;padding:0 0 4px;border-radius:20px;transition:background .15s}.sky-pot:hover,.sky-pot:focus-visible{background:#ffffff0d}.sky-pot svg{width:100%;max-width:120px;display:block;aspect-ratio:120/140}.sky-pot>b{font-size:10px;font-weight:600;line-height:1.4;margin-top:1px}.sky-pot>.sky-time{font-size:8px;color:#cddbe2;margin-top:4px;padding:4px 7px;border-radius:20px;background:#293b5966}.sky-pot.ready>.sky-time{background:#d8e7c7;color:#48634b;font-weight:700}.sky-pot.ready{filter:drop-shadow(0 0 9px #fff0bd22)}.sky-watered{position:absolute;top:37%;right:4px;font-size:13px;font-style:normal;filter:drop-shadow(0 1px 3px #1c2c3f)}
.sky-cloud{position:absolute;z-index:-1;pointer-events:none;left:-10px;right:-10px;height:75px;bottom:72px;filter:drop-shadow(0 9px 10px #263c5644);opacity:.58}.sky-cloud>svg{width:100%;height:100%;display:block}
.sky-terrace.is-locked{border:1px dashed #d3dcec42;border-radius:20px;padding:13px 13px 20px;background:#27355115}.sky-lock-content{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;margin-top:8px}.sky-lock-content>span{font-size:32px;opacity:.65;line-height:1.2}.sky-lock-content>p{font-size:11px;color:#dee3ee}.sky-lock-content>small{font-size:9px;color:#bfcddd}.sky-lock-content .sky-secondary{margin-top:3px}.sky-terrace.is-locked .sky-cloud{position:absolute;z-index:-1;pointer-events:none;left:-10px;right:-10px;height:75px;bottom:72px;filter:drop-shadow(0 9px 10px #263c5644);opacity:.58}.sky-cloud>svg{width:100%;height:100%;display:block}.sky-terrace.is-locked .sky-tier-label{color:#c3cdde}
.sky-tools{display:flex;gap:10px;margin:25px 0 18px}.sky-tools>button{flex:1;min-width:0;border:1px solid #dce4ee30;border-radius:14px;padding:13px 8px;background:#2639552b;color:#e8edf4;font-size:10px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px}.sky-tools>button>span{font-size:19px}.sky-footnote{text-align:center;font-size:9px;line-height:1.9;color:#d1dbe6}
.sky-notice{font-size:10px;line-height:1.6;color:#ffedc6;border:1px solid #f6d59840;border-radius:12px;padding:10px 12px;margin-bottom:15px;background:#513e501f}.sky-notice button{text-decoration:underline;color:inherit;font-size:inherit;min-height:30px;font-weight:700}
.sky-loading{min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;color:#e5e9f0}.sky-loading>span{font-size:60px}.sky-loading h2{font-family:var(--serif);font-size:27px}.sky-loading p{font-size:12px;line-height:1.8;max-width:32ch}
.sky-dialog{position:fixed;inset:auto 0 0;max-height:90vh;max-height:90dvh;width:100%;max-width:520px;margin:0 auto;border:1px solid #eee2ce;border-bottom:0;border-radius:24px 24px 0 0;background:#fbf5ea;color:#554b5d;padding:0;box-shadow:0 -16px 80px #19213a66;overflow:hidden}.sky-dialog::backdrop{background:#1420389e;backdrop-filter:blur(5px)}
.sky-dialog-body{padding:21px 21px calc(26px + env(safe-area-inset-bottom,0px));max-height:88vh;max-height:88dvh;overflow-y:auto}.sky-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.sky-sheet-head h2{font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.4}.sky-sheet-head .sky-circle{border-color:#554b5d22;background:#eee5d9;color:#776774}.sky-sheet-sub{color:#8c7c7f;font-size:11px;line-height:1.7;margin-bottom:16px}
.sky-seeds{display:flex;flex-direction:column;gap:7px}.sky-seed{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #e2d9ca;border-radius:13px;background:#fffaf2;color:#584b59;text-align:left;min-height:61px}.sky-seed>span{font-size:27px;width:35px;flex:0 0 auto;text-align:center}.sky-seed>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}.sky-seed b{font-size:12px}.sky-seed small{font-size:9px;color:#98887e}.sky-seed em{font-style:normal;font-size:10px;color:#719084;white-space:nowrap}.sky-seed:disabled{opacity:.43;cursor:default}
.sky-plant-detail{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:0 0 22px}.sky-plant-detail>svg{width:135px;height:158px;margin-top:-5px}.sky-plant-detail h3{font-family:var(--serif);font-size:24px;margin-top:-2px}.sky-plant-detail p{font-size:11px;color:#917f7f}.sky-plant-detail .sky-time{font-size:13px;color:#678979}.sky-plant-detail progress{appearance:none;width:70%;height:6px;border:0;border-radius:5px;overflow:hidden;background:#e8e0d5;margin-top:4px}.sky-plant-detail progress::-webkit-progress-bar{background:#e8e0d5}.sky-plant-detail progress::-webkit-progress-value{background:#8fba9e}.sky-plant-detail progress::-moz-progress-bar{background:#8fba9e}.sky-wide{width:100%}
.sky-care-note{padding:12px 14px;border-radius:13px;background:#eeeadd;color:#788274;font-size:11px;line-height:1.8;margin:14px 0}.sky-style-head{margin:22px 0 12px;display:flex;flex-direction:column;gap:5px}.sky-style-head h3{font-size:13px}.sky-style-head small{font-size:9px;color:#988781}.sky-styles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.sky-style{border:1px solid #e3d9cc;border-radius:13px;padding:12px 5px;background:#fff9ee;display:flex;flex-direction:column;align-items:center;gap:8px;color:inherit;min-width:0}.sky-style>i{width:29px;height:23px;background:var(--pot-color);border-radius:3px 3px 9px 9px;border-top:5px solid #ffffff44}.sky-style b{font-size:10px}.sky-style small{font-size:9px;color:#988781}.sky-style.selected{border-color:#a0b6a1;background:#eaf0e3}.sky-style:disabled:not(.selected){opacity:.45}
.sky-stock-list>div{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #e8dfd3}.sky-stock-list>div>span{font-size:24px;width:30px}.sky-stock-list b{flex:1;font-size:12px}.sky-stock-list small{text-align:right;font-size:10px;color:#8b7c80;line-height:1.8}
.sky-log>div{display:flex;align-items:flex-start;gap:11px;border-bottom:1px solid #e8dfd3;padding:13px 0}.sky-log>div>span{font-size:21px}.sky-log p{font-size:11px;line-height:1.7}.sky-log small{display:block;font-size:9px;color:#a59591}.sky-help{padding-left:20px;font-size:12px;line-height:1.9}.sky-help li{margin-bottom:14px}
#skyNameForm{display:flex;flex-direction:column;gap:14px;margin-top:20px}#skyNameForm label{font-size:12px}#skyNameInput{border:1px solid #d9cbbb;background:#fffaf3;border-radius:11px;padding:13px;font-size:16px;width:100%;color:#554b5d}
#view-sky button:focus-visible,.sky-dialog button:focus-visible{outline:2px solid #eccb8d;outline-offset:3px}.sky-dialog button:focus-visible{outline-color:#678c7b}
@media(min-width:480px){.sky-root{padding-left:28px;padding-right:28px}.sky-pots{gap:12px}.sky-name{font-size:32px}.sky-pot>b{font-size:12px}.sky-pot>.sky-time{font-size:10px}.sky-pot svg{max-width:130px}.sky-dialog{bottom:20px;border-radius:24px;border-bottom:1px solid #eee2ce}}
@media(prefers-reduced-motion:reduce){.sky-root{scroll-behavior:auto}.sky-pot{transition:none}}
/* Cây đậu cổ tích: thân xoắn, nhánh lá nâng chậu và mây quấn quanh. */
#view-sky{background:radial-gradient(ellipse at 80% 0%,#f4d9b946,transparent 45%),radial-gradient(ellipse at 0% 75%,#95c3bb40,transparent 60%),linear-gradient(#35495f,#7694a3 65%,#abc4c4);color:#fcf2dd}
.sky-root{background-image:radial-gradient(circle at 10% 24%,#fff8d97a 0 1px,transparent 2px),radial-gradient(circle at 92% 39%,#fff8d97a 0 1px,transparent 2px),radial-gradient(circle at 25% 72%,#fff8d965 0 1px,transparent 2px);background-size:210px 330px,290px 450px,340px 540px}
.sky-hero{padding-bottom:18px}.sky-moon{color:#ffedc5;text-shadow:0 0 28px #f6d59699}.sky-hero>p:not(.sky-eyebrow){color:#e2e8df;font-size:10px}
.sky-order{background:linear-gradient(125deg,#fff9ed,#f5e9d5);border:1px solid #eed5aa;box-shadow:0 9px 24px #233e4130}.sky-order-title>span{filter:drop-shadow(1px 3px 2px #806c3d28)}.sky-order h2{color:#566850}.sky-order .sky-primary{background:#8ba783;color:#fff9e8}
.sky-wallet{color:#f2eddd}.sky-connection{color:#d3efcc}.sky-garden-label h2{font-size:20px;text-shadow:0 2px 5px #36595d44}.sky-garden-label>span{color:#ebefe4}
.sky-terraces{position:relative;isolation:isolate;gap:42px;padding-top:25px;padding-bottom:20px}
.sky-vine{position:absolute;z-index:-3;left:0;right:0;top:-20px;bottom:-35px;pointer-events:none;filter:drop-shadow(4px 7px 3px #20434438)}.sky-vine>svg{display:block;width:100%;height:100%}
.sky-terrace{padding:0 0 32px;isolation: auto;position:relative;min-width:0}
.sky-tier-label{position:relative;z-index:2;margin:0 3px 4px;width:max-content;max-width:100%;gap:12px;background:#f3ebd9;border:1px solid #c8bd9673;border-radius:7px 14px 14px 7px;padding:7px 10px;color:#5f7054;box-shadow:1px 3px 5px #294c4925;font-size:9px;letter-spacing:.04em}.sky-tier-label>span:last-child{color:#9a855c}
.sky-pots{gap:0;z-index:2}.sky-pot{padding:0 0 3px;border-radius:28px}.sky-pot:hover,.sky-pot:focus-visible{background:#fff8e412}.sky-pot svg{max-width:145px;aspect-ratio:150/172;filter:drop-shadow(0 2px 2px #35534b21)}
.sky-pot>b{position:relative;margin-top:6px;background:#f4eedddf;border:1px solid #ecdfc67a;padding:4px 7px;border-radius:7px;font-size:10px;line-height:1.4;color:#4b654e;box-shadow:0 2px 4px #284c4933}
.sky-pot>.sky-time{color:#f2f6e7;background:#385d5cc4;font-size:8px}.sky-pot.ready>.sky-time{color:#4e6642;background:#fff0b9;border:1px solid #f6db8f}.sky-pot.ready{filter:drop-shadow(0 0 7px #fff4cd39)}
.sky-watered{top:42%;right:0;font-size:12px;z-index:2}
.sky-branch{position:absolute;z-index:-1;pointer-events:none;left:-8px;right:-8px;height:134px;bottom:27px;filter:drop-shadow(0 6px 5px #24443735)}.sky-branch>svg{width:100%;height:100%;display:block}
.sky-cloud{z-index:0;left:-16px;right:-16px;bottom:52px;height:65px;opacity:.76;filter:drop-shadow(0 5px 8px #294c5430)}
.sky-terrace[data-tier="2"]>.sky-cloud{left:-6px;right:-20px;opacity:.68}
.sky-terrace.is-locked{border:1px dashed #e7eee380;border-radius:28px 28px 45px 35px;background:linear-gradient(120deg,#e9efdf30,#dae8e85c);padding:12px 12px 28px;backdrop-filter:blur(2px)}
.sky-terrace.is-locked .sky-tier-label{color:#657861;background:#f0ebddd4}.sky-terrace.is-locked .sky-cloud{bottom:-8px;opacity:.57;height:46px}.sky-terrace.is-locked .sky-branch{bottom:-26px;opacity:.7}
.sky-lock-content>p{color:#f8f2e4;text-shadow:0 1px 2px #27484777}.sky-lock-content>small{color:#f0f2e6}.sky-lock-content>span{filter:drop-shadow(0 4px 5px #38555824);opacity:.8}.sky-lock-content .sky-secondary{background:#385c5860;border-color:#e5eacb70}
.sky-tools{position:relative;z-index:2}.sky-tools>button{background:#f0efdfd4;border-color:#ecedda;color:#54715e;box-shadow:0 4px 9px #36595522}.sky-footnote{color:#eef2e8;text-shadow:0 1px 2px #42656666}
.sky-dialog{background:linear-gradient(150deg,#fffaf0,#f3ecd9);border-color:#e6d6b5}.sky-sheet-head h2{color:#576b52}.sky-plant-detail>svg{width:170px;height:194px;margin:3px 0 -4px}.sky-plant-detail h3{color:#597459}.sky-seed{background:#fffdf3;border-color:#ded7bd}.sky-seed>span{filter:drop-shadow(1px 2px 1px #a18a4930)}.sky-care-note{background:#e6ead9;color:#698266}.sky-style{background:#fffdf2}.sky-style.selected{border-color:#98b084;background:#e5ecd9}.sky-primary{background:linear-gradient(#ead19e,#dfbd80);color:#5c553d}.sky-plant-detail progress::-webkit-progress-value{background:#8ca777}.sky-plant-detail progress::-moz-progress-bar{background:#8ca777}
@media(min-width:480px){.sky-pots{gap:5px}.sky-pot svg{max-width:150px}.sky-pot>b{font-size:11px}.sky-branch{height:145px}.sky-cloud{height:75px}}