:root {
    --vi-garden-ink: #203128;
    --vi-garden-moss: #163326;
    --vi-garden-green: #35644b;
    --vi-garden-mint: #cbe3d4;
    --vi-garden-paper: #f6f6f0;
    --vi-garden-line: #d8ded6;
}

.vi-garden-invitations { display: grid; gap: 8px; margin: -10px 0 22px; }
.vi-garden-invitation { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 16px; border: 1px solid rgba(39, 87, 58, .18); border-radius: 16px; background: linear-gradient(120deg, rgba(240, 248, 241, .9), rgba(255, 255, 255, .72)); box-shadow: 0 12px 30px rgba(35, 70, 48, .08); }
.vi-garden-invitation span { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 10px; }
.vi-garden-invitation small { grid-column: 1 / -1; color: #7a8d81; font: 700 9px/1.2 "Avenir Next", sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.vi-garden-invitation strong { color: var(--vi-garden-moss); font: 700 14px/1.2 "Avenir Next", sans-serif; }
.vi-garden-invitation em { color: #718078; font: 600 11px/1.2 "Avenir Next", sans-serif; font-style: normal; text-transform: capitalize; }
.vi-garden-invitation > div { display: flex; gap: 7px; }
.vi-garden-invitation button { padding: 8px 13px; border: 1px solid var(--vi-garden-line); border-radius: 999px; background: #fff; color: var(--vi-garden-moss); cursor: pointer; font: 700 11px/1 "Avenir Next", sans-serif; }
.vi-garden-invitation button:first-child { border-color: var(--vi-garden-moss); background: var(--vi-garden-moss); color: #fff; }
.vi-garden-invitation.is-busy { opacity: .55; pointer-events: none; }

.vi-garden-presence { display: flex; flex-direction: row-reverse; align-items: center; padding-left: 8px; }
.vi-garden-presence img { width: 29px; height: 29px; margin-left: -8px; border: 2px solid #fff; border-radius: 50%; background: #e7efe9; object-fit: cover; box-shadow: 0 2px 8px rgba(22, 51, 35, .18); }
.vi-garden-card__collaborators { display: flex; flex-direction: row-reverse; align-items: center; margin: 0 4px; }
.vi-garden-card__collaborators img, .vi-garden-card__collaborators b { display: grid; width: 25px; height: 25px; margin-left: -7px; place-items: center; border: 2px solid rgba(255, 255, 255, .92); border-radius: 50%; background: #dfece1; color: #31583f; object-fit: cover; font: 800 8px/1 "Avenir Next", sans-serif; }
.vi-garden-share-button [data-comment-count] { display: inline-grid; min-width: 17px; height: 17px; margin: -4px -7px -4px 3px; place-items: center; border-radius: 999px; background: #d9ebdc; color: #16452b; font-size: 9px; }
.vi-garden-share-button [data-comment-count][hidden] { display: none; }
.vi-garden-activity-centre-button [data-activity-unread], .vi-garden-share-button [data-activity-unread] { display: inline-grid; min-width: 18px; height: 18px; margin: -5px -8px -5px 3px; padding: 0 4px; place-items: center; border-radius: 999px; background: #d16d44; color: #fff; font: 800 9px/1 "Avenir Next", sans-serif; box-shadow: 0 2px 7px rgba(111, 50, 27, .2); }
.vi-garden-activity-centre-button [data-activity-unread][hidden], .vi-garden-share-button [data-activity-unread][hidden] { display: none; }

.vi-garden-collaboration-modal { position: fixed; z-index: 2147483000; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(18, 35, 26, .42); backdrop-filter: blur(12px); }
.vi-garden-collaboration-modal > section { width: min(680px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: hidden; border: 1px solid rgba(255, 255, 255, .7); border-radius: 25px; background: rgba(247, 250, 246, .96); box-shadow: 0 34px 90px rgba(15, 38, 24, .28); color: #183225; }
.vi-garden-collaboration-modal > section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 24px 25px 19px; border-bottom: 1px solid rgba(39, 87, 58, .12); background: linear-gradient(115deg, rgba(234, 243, 233, .96), rgba(255, 255, 255, .86)); }
.vi-garden-collaboration-modal header span { display: block; }
.vi-garden-collaboration-modal header small { color: #6b8373; font: 700 9px/1 "Avenir Next", sans-serif; letter-spacing: .16em; }
.vi-garden-collaboration-modal header h2 { margin: 4px 0 2px; color: #173426; font: 500 26px/1.1 "Avenir Next", sans-serif; }
.vi-garden-collaboration-modal header p { margin: 6px 0 0; color: #738179; font: 500 12px/1.45 "Avenir Next", sans-serif; }
.vi-garden-collaboration-modal header > button { width: 34px; height: 34px; border: 1px solid rgba(32, 72, 47, .15); border-radius: 50%; background: rgba(255, 255, 255, .72); color: #31523f; cursor: pointer; font: 300 25px/1 sans-serif; }
.vi-garden-collaboration-modal__body { max-height: calc(min(760px, 100vh - 48px) - 105px); overflow-y: auto; padding: 20px 25px 25px; overscroll-behavior: contain; scrollbar-color: rgba(45, 91, 62, .35) transparent; scrollbar-width: thin; }
.vi-garden-collaboration-loading, .vi-garden-comment-empty { padding: 25px; border: 1px dashed rgba(39, 87, 58, .2); border-radius: 16px; color: #74847a; text-align: center; font: 600 12px/1.4 "Avenir Next", sans-serif; }
.vi-garden-collaboration-invite { position: relative; display: grid; grid-template-columns: 1fr 145px; gap: 10px; margin-bottom: 22px; padding-bottom: 21px; border-bottom: 1px solid rgba(39, 87, 58, .12); }
.vi-garden-collaboration-invite label, .vi-garden-comment-form label { display: grid; gap: 6px; color: #607268; font: 700 10px/1.2 "Avenir Next", sans-serif; text-transform: uppercase; }
.vi-garden-collaboration-invite input, .vi-garden-collaboration-invite select, .vi-garden-comment-form textarea, .vi-garden-comment-form select, .vi-garden-comment-form input { min-height: 41px; padding: 10px 12px; border: 1px solid rgba(39, 87, 58, .18); border-radius: 11px; outline: none; background: rgba(255, 255, 255, .82); color: #183225; font: 600 12px/1.3 "Avenir Next", sans-serif; text-transform: none; }
.vi-garden-collaboration-invite input:focus, .vi-garden-comment-form textarea:focus, .vi-garden-comment-form select:focus, .vi-garden-comment-form input:focus { border-color: #4b7f5c; box-shadow: 0 0 0 3px rgba(74, 125, 91, .12); }
.vi-garden-collaboration-invite [data-collaborator-results] { position: absolute; z-index: 2; top: 66px; right: 155px; left: 0; display: grid; gap: 2px; overflow: hidden; border-radius: 13px; background: #fff; box-shadow: 0 15px 38px rgba(22, 53, 34, .18); }
.vi-garden-collaboration-invite [data-collaborator-results]:empty { display: none; }
.vi-garden-collaboration-invite [data-collaborator-results] button { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 9px 11px; border: 0; border-bottom: 1px solid #edf1ed; background: #fff; color: #183225; cursor: pointer; text-align: left; }
.vi-garden-collaboration-invite img, .vi-garden-collaborator > img, .vi-garden-comment > img { width: 34px; height: 34px; border-radius: 50%; background: #e3ece4; object-fit: cover; }
.vi-garden-collaboration-invite [data-collaborator-results] span { display: grid; }
.vi-garden-collaboration-invite [data-collaborator-results] strong { font: 700 12px/1.2 "Avenir Next", sans-serif; }
.vi-garden-collaboration-invite [data-collaborator-results] small { color: #829087; font: 500 10px/1.2 "Avenir Next", sans-serif; }
.vi-garden-collaboration-invite [data-collaborator-results] b { color: #39704d; font: 700 10px/1 "Avenir Next", sans-serif; }
.vi-garden-collaborator-list { display: grid; gap: 7px; }
.vi-garden-collaborator { display: grid; grid-template-columns: 38px 1fr auto auto; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid rgba(39, 87, 58, .1); border-radius: 14px; background: rgba(255, 255, 255, .64); }
.vi-garden-collaborator > span { display: grid; gap: 2px; }
.vi-garden-collaborator strong { font: 700 12px/1.2 "Avenir Next", sans-serif; }
.vi-garden-collaborator small { color: #819087; font: 600 10px/1.2 "Avenir Next", sans-serif; text-transform: capitalize; }
.vi-garden-collaborator select { padding: 7px 28px 7px 9px; border: 1px solid rgba(39, 87, 58, .15); border-radius: 9px; background: #fff; color: #31523f; font: 600 10px/1 "Avenir Next", sans-serif; }
.vi-garden-collaborator > button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f2e9e6; color: #8a4e40; cursor: pointer; }

.vi-garden-comment-list { display: grid; gap: 10px; }
.vi-garden-activity-centre__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding: 0 2px; color: #718078; font: 600 10px/1.2 "Avenir Next", sans-serif; }
.vi-garden-activity-centre__toolbar span { display: flex; align-items: baseline; gap: 4px; }
.vi-garden-activity-centre__toolbar strong { color: #234733; font-size: 15px; }
.vi-garden-activity-centre__toolbar button { padding: 8px 12px; border: 1px solid rgba(39, 87, 58, .16); border-radius: 999px; background: rgba(255, 255, 255, .8); color: #315b41; cursor: pointer; font: 700 9px/1 "Avenir Next", sans-serif; }
.vi-garden-activity-centre__toolbar button:disabled { opacity: .45; cursor: default; }
.vi-garden-activity-centre__toolbar > div { display: flex; gap: 6px; }
.vi-notification-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.vi-notification-filters button { padding: 7px 10px; border: 1px solid rgba(39, 87, 58, .14); border-radius: 999px; background: rgba(255, 255, 255, .68); color: #66776d; cursor: pointer; font: 750 8px/1 "Avenir Next", sans-serif; }
.vi-notification-filters button span { margin-left: 3px; opacity: .65; }
.vi-notification-filters button.is-active { border-color: var(--vi-garden-moss); background: var(--vi-garden-moss); color: #fff; }
.vi-notification-preferences { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 11px; padding: 11px; border: 1px solid rgba(39, 87, 58, .12); border-radius: 14px; background: rgba(239, 245, 238, .8); }
.vi-notification-preferences[hidden] { display: none; }
.vi-notification-preferences label { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 7px; padding: 8px 9px; border-radius: 9px; background: rgba(255, 255, 255, .78); color: #52685b; font: 700 8px/1.2 "Avenir Next", sans-serif; }
.vi-notification-preferences input { accent-color: var(--vi-garden-moss); }
.vi-notification-preferences select { min-width: 0; padding: 6px 7px; border: 1px solid #d7dfd5; border-radius: 7px; background: #fff; color: #35523f; font: 700 8px/1 "Avenir Next", sans-serif; }
.vi-notification-preferences > button { grid-column: 1 / -1; justify-self: end; padding: 8px 11px; border: 0; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; cursor: pointer; font: 800 8px/1 "Avenir Next", sans-serif; }
.vi-garden-notification-list { display: grid; gap: 6px; }
.vi-garden-notification { position: relative; display: grid; width: 100%; grid-template-columns: 38px 1fr 8px; align-items: center; gap: 11px; padding: 12px; border: 1px solid rgba(39, 87, 58, .1); border-radius: 15px; background: rgba(255, 255, 255, .64); color: #1f392b; cursor: pointer; text-align: left; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.vi-garden-notification:hover { border-color: rgba(39, 87, 58, .24); background: #fff; transform: translateY(-1px); }
.vi-garden-notification.is-unread { border-color: rgba(46, 105, 68, .22); background: rgba(235, 245, 236, .92); }
.vi-garden-notification > img { width: 36px; height: 36px; border-radius: 50%; background: #dfe9e0; object-fit: cover; }
.vi-notification-system-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 12px; background: var(--vi-garden-moss); color: #dcebdd; font: 800 15px/1 "Avenir Next", sans-serif; }
.vi-garden-notification.is-system { border-left: 3px solid #72917a; }
.vi-garden-notification > span { display: grid; min-width: 0; gap: 3px; }
.vi-garden-notification strong { overflow: hidden; color: #1d3b2a; font: 700 11px/1.25 "Avenir Next", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.vi-garden-notification small { overflow: hidden; color: #718078; font: 500 10px/1.3 "Avenir Next", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.vi-garden-notification time { color: #96a198; font: 600 8px/1.2 "Avenir Next", sans-serif; text-transform: uppercase; }
.vi-garden-notification > i { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.vi-garden-notification.is-unread > i { background: #2f744b; box-shadow: 0 0 0 4px rgba(47, 116, 75, .09); }
.vi-work-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.vi-work-summary > div { display: grid; gap: 3px; padding: 12px; border: 1px solid rgba(39, 87, 58, .1); border-radius: 13px; background: rgba(255, 255, 255, .7); text-align: center; }
.vi-work-summary strong { color: #244c34; font: 600 22px/1 "Avenir Next", sans-serif; }
.vi-work-summary span { color: #7a8a80; font: 800 8px/1 "Avenir Next", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.vi-work-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.vi-work-filters button { padding: 8px 11px; border: 1px solid rgba(39, 87, 58, .14); border-radius: 999px; background: #fff; color: #557061; cursor: pointer; font: 700 9px/1 "Avenir Next", sans-serif; }
.vi-work-filters button.is-active { border-color: var(--vi-garden-green); background: var(--vi-garden-green); color: #fff; }
.vi-work-list { display: grid; gap: 7px; }
.vi-work-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid rgba(39, 87, 58, .11); border-radius: 14px; background: rgba(255, 255, 255, .72); }
.vi-work-item[data-priority="urgent"] { border-left: 4px solid #ac5644; }
.vi-work-item[data-priority="high"] { border-left: 4px solid #cc8b46; }
.vi-work-item.is-complete { opacity: .55; }
.vi-work-item > div:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.vi-work-item span { color: #77877d; font: 700 8px/1 "Avenir Next", sans-serif; text-transform: uppercase; }
.vi-work-item strong { overflow: hidden; color: #254330; font: 700 12px/1.2 "Avenir Next", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.vi-work-item small { overflow: hidden; color: #77877d; font: 500 9px/1.3 "Avenir Next", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.vi-work-item > button:last-child { padding: 8px 10px; border: 1px solid rgba(39, 87, 58, .15); border-radius: 999px; background: #f5f8f4; color: #44604f; cursor: pointer; font: 700 8px/1 "Avenir Next", sans-serif; }
.vi-work-check { display: grid; width: 26px; height: 26px; padding: 0; place-items: center; border: 2px solid #89a293; border-radius: 50%; background: #fff; color: #fff; cursor: pointer; }
.vi-work-item.is-complete .vi-work-check { background: #39704d; }
.vi-work-review-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #e6eee5; color: #3f654c; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-garden-comment { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 10px; margin-left: calc(var(--vi-comment-depth, 0) * 17px); padding: 13px; border: 1px solid rgba(39, 87, 58, .11); border-radius: 15px; background: rgba(255, 255, 255, .72); box-shadow: 0 7px 20px rgba(33, 66, 44, .035); }
.vi-garden-comment.is-resolved { opacity: .55; }
.vi-garden-comment > div > span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vi-garden-comment strong { font: 700 12px/1.2 "Avenir Next", sans-serif; }
.vi-garden-comment time, .vi-garden-comment small { color: #849188; font: 500 9px/1.3 "Avenir Next", sans-serif; }
.vi-garden-comment p { margin: 6px 0; color: #30483a; font: 500 12px/1.5 "Avenir Next", sans-serif; white-space: pre-wrap; }
.vi-garden-comment-mentioned { display: block !important; margin-top: 5px; color: #39704d; font: 700 9px/1.3 "Avenir Next", sans-serif; }
.vi-garden-comment__context { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vi-garden-comment-assignment { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: #e8f1e9; color: #315a40; font: 700 9px/1 "Avenir Next", sans-serif; }
.vi-garden-comment-assignment img { width: 17px; height: 17px; border-radius: 50%; object-fit: cover; }
.vi-garden-comment__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.vi-garden-comment__actions > button, .vi-garden-comment__actions summary { padding: 6px 9px; border: 1px solid rgba(39, 87, 58, .15); border-radius: 999px; background: #f4f8f4; color: #557061; cursor: pointer; list-style: none; font: 700 9px/1 "Avenir Next", sans-serif; }
.vi-garden-comment__actions summary::-webkit-details-marker { display: none; }
.vi-garden-comment__actions details { position: relative; }
.vi-garden-comment__actions details > div { position: absolute; z-index: 4; top: calc(100% + 6px); right: 0; display: grid; width: 220px; gap: 8px; padding: 11px; border: 1px solid rgba(39, 87, 58, .14); border-radius: 13px; background: rgba(252, 253, 250, .98); box-shadow: 0 14px 34px rgba(24, 56, 35, .16); }
.vi-garden-comment__actions details label { display: grid; gap: 4px; color: #718078; font: 700 8px/1 "Avenir Next", sans-serif; text-transform: uppercase; }
.vi-garden-comment__actions details select, .vi-garden-comment__actions details input { min-width: 0; padding: 8px; border: 1px solid rgba(39, 87, 58, .15); border-radius: 8px; background: #fff; color: #274936; font: 600 10px/1 "Avenir Next", sans-serif; }
.vi-garden-comment-replies { display: grid; grid-column: 1 / -1; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(39, 87, 58, .08); }
.vi-garden-comment-replies .vi-garden-comment { background: rgba(246, 250, 245, .83); }
.vi-garden-comment-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin-top: 17px; padding-top: 17px; border-top: 1px solid rgba(39, 87, 58, .12); }
.vi-garden-comment-composer > label, .vi-garden-comment-replying, .vi-garden-comment-mentions { grid-column: 1 / -1; }
.vi-garden-comment-composer__options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vi-garden-comment-replying { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border-radius: 11px; background: #e8f1e9; color: #315a40; font: 700 10px/1.2 "Avenir Next", sans-serif; }
.vi-garden-comment-replying[hidden] { display: none; }
.vi-garden-comment-replying button { width: 24px; min-height: 24px; padding: 0; border: 1px solid rgba(39, 87, 58, .14); background: rgba(255, 255, 255, .72); color: #315a40; }
.vi-garden-comment-mentions { display: flex; flex-wrap: wrap; gap: 5px; }
.vi-garden-comment-mentions:empty { display: none; }
.vi-garden-comment-mentions button { min-height: 27px; padding: 0 9px; border: 1px solid rgba(39, 87, 58, .12); background: #e8f1e9; color: #315a40; font-size: 9px; }
.vi-garden-comment-form textarea { min-height: 76px; resize: vertical; }
.vi-garden-comment-form button { min-height: 42px; padding: 0 17px; border: 0; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; cursor: pointer; font: 700 11px/1 "Avenir Next", sans-serif; }
.vi-review-request { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr) auto; align-items: end; gap: 9px; margin-bottom: 17px; padding: 14px; border: 1px solid rgba(39, 87, 58, .13); border-radius: 16px; background: linear-gradient(120deg, rgba(232, 242, 232, .86), rgba(255, 255, 255, .7)); }
.vi-review-request > div { display: grid; gap: 3px; }
.vi-review-request strong { color: #20432f; font: 700 12px/1.2 "Avenir Next", sans-serif; }
.vi-review-request span { color: #74847a; font: 500 9px/1.3 "Avenir Next", sans-serif; }
.vi-review-request input, .vi-review-request select { min-width: 0; min-height: 39px; padding: 9px 10px; border: 1px solid rgba(39, 87, 58, .16); border-radius: 10px; background: rgba(255, 255, 255, .84); color: #294936; font: 600 10px/1 "Avenir Next", sans-serif; }
.vi-review-request button { min-height: 39px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; cursor: pointer; font: 700 9px/1 "Avenir Next", sans-serif; }
.vi-review-list { display: grid; gap: 9px; }
.vi-review-card { padding: 14px; border: 1px solid rgba(39, 87, 58, .12); border-left: 4px solid #9aa99f; border-radius: 14px; background: rgba(255, 255, 255, .75); }
.vi-review-card[data-status="approved"] { border-left-color: #3d7951; }
.vi-review-card[data-status="changes_requested"] { border-left-color: #b5674d; }
.vi-review-card.is-stale { background: linear-gradient(120deg, rgba(255, 249, 236, .86), rgba(255, 255, 255, .76)); }
.vi-review-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vi-review-card__top span, .vi-review-card__top strong { font: 800 8px/1 "Avenir Next", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.vi-review-card__top span { color: #718078; }
.vi-review-card__top strong { padding: 5px 8px; border-radius: 999px; background: #edf2ec; color: #42614e; }
.vi-review-card h3 { margin: 8px 0 4px; color: #203d2d; font: 700 13px/1.2 "Avenir Next", sans-serif; }
.vi-review-card p { margin: 0 0 6px; color: #607268; font: 500 11px/1.4 "Avenir Next", sans-serif; }
.vi-review-card small { color: #87938b; font: 600 8px/1.2 "Avenir Next", sans-serif; }
.vi-review-snapshot-tools { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.vi-review-snapshot-tools button { padding: 7px 9px; border: 1px solid rgba(39, 87, 58, .16); border-radius: 999px; background: #f5f8f4; color: #41604d; cursor: pointer; font: 700 8px/1 "Avenir Next", sans-serif; }
.vi-review-snapshot-tools button:disabled { cursor: default; opacity: .45; }
.vi-review-snapshot-tools span { color: #7e6a4c; font: 700 8px/1.3 "Avenir Next", sans-serif; }
.vi-review-snapshot { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; margin-top: 10px; border: 1px solid rgba(39, 87, 58, .12); border-radius: 13px; background: #dce3da; }
.vi-review-snapshot[hidden] { display: none; }
.vi-review-snapshot > section { display: grid; gap: 7px; padding: 10px; background: #f7f8f3; }
.vi-review-snapshot > section > strong { color: #52675a; font: 800 8px/1 "Avenir Next", sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.vi-review-snapshot .vi-garden-plan-preview { min-height: 220px; }
.vi-review-audit { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: #63766a; font: 700 8px/1.2 "Avenir Next", sans-serif; }
.vi-review-audit img { width: 23px; height: 23px; border-radius: 50%; object-fit: cover; }
.vi-review-card__decision { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; margin-top: 10px; }
.vi-review-stale-ack { display: flex; grid-column: 1 / -1; align-items: flex-start; gap: 7px; padding: 9px; border-radius: 10px; background: #fff2d9; color: #77532e; font: 700 9px/1.35 "Avenir Next", sans-serif; }
.vi-review-stale-ack input { flex: 0 0 auto; margin: 1px 0 0; }
.vi-review-card__decision input { min-width: 0; padding: 8px 9px; border: 1px solid #d7ded5; border-radius: 9px; font: 600 9px/1 "Avenir Next", sans-serif; }
.vi-review-card__decision button { padding: 8px 10px; border: 1px solid #386348; border-radius: 999px; background: #fff; color: #315a40; cursor: pointer; font: 700 8px/1 "Avenir Next", sans-serif; }
.vi-review-card__decision button[data-review-decision="approved"] { background: #315a40; color: #fff; }
.vi-garden-conflict { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vi-garden-conflict-summary { display: grid; gap: 8px; margin-bottom: 12px; padding: 13px 15px; border: 1px solid rgba(194, 118, 33, .22); border-radius: 14px; background: rgba(255, 244, 220, .7); }
.vi-garden-conflict-summary strong { color: #70471e; font: 700 11px/1.2 "Avenir Next", sans-serif; }
.vi-garden-conflict-summary span { display: flex; flex-wrap: wrap; gap: 5px; }
.vi-garden-conflict-summary i { padding: 5px 8px; border-radius: 999px; background: rgba(255, 255, 255, .78); color: #79512d; font: 600 9px/1 "Avenir Next", sans-serif; font-style: normal; }
.vi-garden-conflict > div { display: flex; min-height: 170px; align-items: flex-start; flex-direction: column; padding: 18px; border: 1px solid rgba(39, 87, 58, .13); border-radius: 16px; background: rgba(255, 255, 255, .68); }
.vi-garden-conflict strong { color: #1c3d2b; font: 700 14px/1.2 "Avenir Next", sans-serif; }
.vi-garden-conflict p { margin: 8px 0 18px; color: #708077; font: 500 11px/1.5 "Avenir Next", sans-serif; }
.vi-garden-conflict button { width: 100%; min-height: 38px; margin-top: auto; border: 1px solid #315f43; border-radius: 999px; background: #fff; color: #234d34; cursor: pointer; font: 700 10px/1 "Avenir Next", sans-serif; }
.vi-garden-conflict > div:last-child button { background: #234d34; color: #fff; }
.vi-garden-comment-pin { position: absolute; z-index: 55; display: grid; width: 25px; height: 25px; padding: 0; place-items: center; border: 2px solid rgba(255, 255, 255, .92); border-radius: 50%; background: #2e6944; color: #fff; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; box-shadow: 0 5px 14px rgba(22, 52, 34, .3); transform: translate(-50%, -50%); }
.vi-garden-object.is-collaborator-active { outline: 3px solid rgba(242, 171, 68, .92); outline-offset: 3px; animation: vi-garden-collaborator-pulse 1.65s ease-in-out infinite; }
.vi-garden-layer-item.is-collaborator-active { border-color: rgba(214, 139, 40, .5); background: rgba(255, 243, 217, .76); box-shadow: inset 3px 0 0 #d99032; }
@keyframes vi-garden-collaborator-pulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(225, 146, 44, 0)); } 50% { filter: drop-shadow(0 0 7px rgba(225, 146, 44, .55)); } }

@media (max-width: 720px) {
    .vi-garden-collaboration-modal { padding: 0; }
    .vi-garden-collaboration-modal > section { width: 100%; height: 100%; max-height: none; border-radius: 0; }
    .vi-garden-collaboration-modal__body { max-height: calc(100vh - 105px); padding: 16px; }
    .vi-garden-collaboration-invite { grid-template-columns: 1fr; }
    .vi-garden-collaboration-invite [data-collaborator-results] { top: 66px; right: 0; }
    .vi-garden-collaborator { grid-template-columns: 38px 1fr auto; }
    .vi-garden-collaborator select { grid-column: 2; }
    .vi-garden-comment-form { grid-template-columns: 1fr; }
    .vi-work-item { grid-template-columns: 30px minmax(0, 1fr); }
    .vi-work-item > button:last-child { grid-column: 2; justify-self: start; }
    .vi-garden-comment-composer__options { grid-template-columns: 1fr; }
    .vi-review-request, .vi-review-card__decision { grid-template-columns: 1fr; }
    .vi-review-snapshot-tools { align-items: flex-start; flex-direction: column; }
    .vi-review-snapshot { grid-template-columns: 1fr; }
    .vi-garden-comment { margin-left: calc(var(--vi-comment-depth, 0) * 8px); }
    .vi-garden-comment__actions details > div { right: auto; left: 0; width: min(220px, calc(100vw - 76px)); }
    .vi-garden-conflict { grid-template-columns: 1fr; }
    .vi-garden-invitation { align-items: flex-start; flex-direction: column; }
}

.vi-garden-app {
    position: relative;
    color: var(--vi-garden-ink);
    background:
        radial-gradient(circle at 90% 5%, rgba(203, 227, 212, .72), transparent 34%),
        var(--vi-garden-paper);
    border: 1px solid var(--vi-garden-line);
    border-radius: 24px;
    padding: clamp(22px, 5vw, 54px);
    font-family: "Avenir Next", "Century Gothic", sans-serif;
}

.vi-garden-app.is-full-page {
    position: relative;
    z-index: 10;
    width: 100vw;
    max-width: none;
    min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
    margin-left: calc(50% - 50vw);
    overflow-x: clip;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-sizing: border-box;
}

.vi-garden-app:fullscreen {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    overflow: auto;
    border: 0;
    border-radius: 0;
}

.vi-garden-app.is-library {
    --vi-library-pad-y: clamp(22px, 3vw, 34px);
    display: flex;
    max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - 16px);
    flex-direction: column;
    padding-top: var(--vi-library-pad-y);
    padding-bottom: var(--vi-library-pad-y);
    overflow: hidden;
    box-sizing: border-box;
}

.vi-garden-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.vi-garden-kicker,
.vi-garden-card__visibility {
    color: var(--vi-garden-green);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.vi-garden-hero h2 {
    margin: 0 0 4px;
    font-size: clamp(34px, 5.5vw, 58px);
    font-weight: 500;
    line-height: .95;
}

.vi-garden-hero p { margin: 7px 0 0; color: #68786f; font-size: 14px; line-height: 1.25; }

.vi-garden-hero__logo { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; width: clamp(72px, 7vw, 92px); aspect-ratio: 1; place-items: center; }
.vi-garden-hero__logo img { display: block; width: 84%; height: 84%; object-fit: contain; filter: brightness(0) saturate(100%) invert(16%) sepia(20%) saturate(1018%) hue-rotate(101deg) brightness(89%) contrast(94%); }

.vi-garden-button {
    border: 0;
    border-radius: 999px;
    background: var(--vi-garden-moss);
    color: white;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 14px 22px;
    text-decoration: none;
}

.vi-garden-library-tabs { display: flex; gap: 4px; width: fit-content; margin: -8px 0 24px; padding: 4px; border: 1px solid var(--vi-garden-line); border-radius: 999px; background: rgba(255, 255, 255, .72); }
.vi-garden-library-tabs button, .vi-garden-library-tabs a { padding: 9px 15px; border: 0; border-radius: 999px; background: transparent; color: #68786f; cursor: pointer; font: inherit; font-size: 12px; font-weight: 800; line-height: normal; text-decoration: none; }
.vi-garden-library-tabs button.is-active { background: var(--vi-garden-moss); color: #fff; }
.vi-garden-library-tabs button.is-composing { background: #e7efe9; color: var(--vi-garden-moss); }
.vi-garden-library-create { display: flex; align-items: center; gap: 3px; width: 0; max-width: 0; margin: 0; overflow: hidden; visibility: hidden; opacity: 0; pointer-events: none; transition: max-width .28s ease, width .28s ease, opacity .18s ease, visibility 0s linear .28s; }
.vi-garden-library-create.is-open { width: 246px; max-width: 246px; visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
.vi-garden-library-create input { box-sizing: border-box; width: 162px; min-width: 0; padding: 9px 13px; border: 0; border-radius: 999px; outline: 0; background: rgba(230, 239, 232, .92); color: var(--vi-garden-ink); font: 800 11px/1 "Avenir Next", sans-serif; }
.vi-garden-library-create input:focus { box-shadow: inset 0 0 0 2px var(--vi-garden-green); }
.vi-garden-library-create button { display: grid; width: 36px; height: 36px; padding: 0; place-items: center; flex: 0 0 36px; font-size: 18px; line-height: 1; }
.vi-garden-library-create button.is-confirm { background: var(--vi-garden-moss); color: #fff; }
.vi-garden-library-create button:disabled { cursor: wait; opacity: .45; }
.vi-community-filters { display: grid; grid-template-columns: minmax(180px, 1fr) auto; align-items: center; gap: 8px; margin: -20px 0 28px; padding: 10px; border: 1px solid var(--vi-garden-line); border-radius: 14px; background: rgba(255, 255, 255, .72); }
.vi-community-filters[hidden] { display: none; }
.vi-community-filters input { min-width: 0; padding: 9px 11px; border: 1px solid var(--vi-garden-line); border-radius: 9px; background: #fff; color: var(--vi-garden-ink); font: 600 11px/1 "Avenir Next", sans-serif; }
.vi-community-filters span { padding: 0 8px; color: #718078; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.vi-garden-card-controls { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto auto; align-items: end; gap: 8px; margin: -20px 0 0; padding: 10px; border: 1px solid var(--vi-garden-line); border-radius: 15px; background: rgba(255, 255, 255, .74); box-shadow: 0 10px 30px rgba(26, 54, 38, .04); backdrop-filter: blur(12px); }
.vi-garden-card-controls[hidden] { display: none; }
.vi-garden-card-controls label, .vi-garden-card-layout, .vi-garden-card-motion { display: grid; gap: 5px; }
.vi-garden-card-controls label > span, .vi-garden-card-layout > span, .vi-garden-card-motion > span { padding-left: 3px; color: #718078; font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.vi-garden-card-controls input, .vi-garden-card-controls select { min-width: 0; height: 38px; padding: 0 11px; border: 1px solid var(--vi-garden-line); border-radius: 10px; outline: 0; background: #fff; color: var(--vi-garden-ink); font: 700 10px/1 "Avenir Next", sans-serif; }
.vi-garden-card-controls input:focus, .vi-garden-card-controls select:focus { border-color: var(--vi-garden-moss); box-shadow: 0 0 0 3px rgba(72, 108, 72, .1); }
.vi-garden-card-search { min-width: 0; }
.vi-garden-card-layout { grid-template-columns: repeat(3, auto); column-gap: 0; row-gap: 5px; }
.vi-garden-card-layout > span { grid-column: 1 / -1; }
.vi-garden-card-layout button { height: 38px; padding: 0 11px; border: 1px solid var(--vi-garden-line); background: #fff; color: #68786f; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-garden-card-layout button:first-of-type { border-radius: 10px 0 0 10px; }
.vi-garden-card-layout button:last-of-type { border-radius: 0 10px 10px 0; }
.vi-garden-card-layout button + button { border-left: 0; }
.vi-garden-card-layout button.is-active { position: relative; z-index: 1; border-color: var(--vi-garden-moss); background: var(--vi-garden-moss); color: #fff; }
.vi-garden-card-motion button { height: 38px; padding: 0 13px; border: 1px solid var(--vi-garden-line); border-radius: 10px; background: #fff; color: #68786f; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; white-space: nowrap; }
.vi-garden-card-motion button.is-active { border-color: var(--vi-garden-moss); background: var(--vi-garden-moss); color: #fff; box-shadow: 0 0 0 3px rgba(72, 108, 72, .1); }
.vi-garden-merge-panel { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(180px, 280px) auto auto; align-items: end; gap: 10px; margin: 12px 0 -18px; padding: 12px; border: 1px solid rgba(76, 108, 83, .2); border-radius: 16px; background: linear-gradient(120deg, rgba(235, 244, 236, .88), rgba(255, 255, 255, .72)); box-shadow: 0 14px 36px rgba(27, 58, 39, .08); backdrop-filter: blur(16px) saturate(125%); }
.vi-garden-merge-panel[hidden] { display: none; }
.vi-garden-merge-panel__summary { display: flex; min-width: 0; align-items: center; gap: 10px; }
.vi-garden-merge-panel__summary > i { display: grid; width: 38px; height: 38px; place-items: center; flex: 0 0 38px; border-radius: 50%; background: var(--vi-garden-moss); color: #fff; font: 900 12px/1 "Avenir Next", sans-serif; font-style: normal; box-shadow: 0 0 0 5px rgba(53, 100, 75, .09); }
.vi-garden-merge-panel__summary span { display: grid; min-width: 0; gap: 3px; }
.vi-garden-merge-panel__summary strong { color: var(--vi-garden-ink); font-size: 11px; }
.vi-garden-merge-panel__summary small { overflow: hidden; color: #718078; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.vi-garden-merge-panel label { display: grid; gap: 5px; }
.vi-garden-merge-panel label > span { padding-left: 3px; color: #718078; font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.vi-garden-merge-panel input { min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--vi-garden-line); border-radius: 10px; outline: 0; background: rgba(255, 255, 255, .9); color: var(--vi-garden-ink); font: 800 10px/1 "Avenir Next", sans-serif; }
.vi-garden-merge-panel input:focus { border-color: var(--vi-garden-moss); box-shadow: 0 0 0 3px rgba(72, 108, 72, .1); }
.vi-garden-merge-panel button { height: 38px; padding: 0 14px; border: 1px solid var(--vi-garden-line); border-radius: 10px; background: rgba(255, 255, 255, .86); color: var(--vi-garden-green); cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; white-space: nowrap; }
.vi-garden-merge-panel [data-merge-confirm] { border-color: var(--vi-garden-moss); background: var(--vi-garden-moss); color: #fff; }
.vi-garden-merge-panel button:disabled { cursor: not-allowed; opacity: .42; }

.vi-garden-grid {
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    grid-auto-rows: max-content;
    min-height: 0;
    gap: 18px;
    margin-top: 3em;
    padding: 4px 12px 12px 0;
    overflow-x: hidden;
    overflow-y: auto;
    align-content: start;
    overscroll-behavior-y: contain;
    scroll-behavior: smooth;
    scrollbar-color: rgba(36, 76, 54, .72) rgba(214, 225, 216, .5);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}
.vi-garden-grid::-webkit-scrollbar { width: 10px; }
.vi-garden-grid::-webkit-scrollbar-track { margin: 6px 0; border-radius: 999px; background: rgba(214, 225, 216, .48); }
.vi-garden-grid::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: linear-gradient(180deg, rgba(53, 100, 75, .9), rgba(22, 51, 38, .78)) padding-box; }
.vi-garden-grid::-webkit-scrollbar-thumb:hover { background: var(--vi-garden-moss) padding-box; }
.vi-garden-grid[data-card-layout="two"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vi-garden-grid[data-card-layout="three"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vi-garden-grid[data-card-layout="list"] { grid-template-columns: minmax(0, 1fr); }
.vi-garden-grid[data-card-layout="list"] .vi-garden-card { display: grid; grid-template-columns: minmax(260px, 34%) minmax(0, 1fr); }
.vi-garden-grid[data-card-layout="list"] .vi-garden-card__preview { height: auto; min-height: 230px; }

.vi-garden-card {
    height: max-content;
    align-self: start;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--vi-garden-line);
    border-radius: 18px;
    transition: transform .2s ease, box-shadow .2s ease;
}

.vi-garden-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(24, 52, 38, .1); }
.vi-garden-card.is-merge-selected { border-color: var(--vi-garden-moss); box-shadow: 0 0 0 3px rgba(53, 100, 75, .18), 0 18px 38px rgba(24, 52, 38, .12); }
.vi-garden-card__merge-select { position: absolute; z-index: 8; top: 10px; left: 10px; display: flex; align-items: center; gap: 7px; padding: 5px 10px 5px 5px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 999px; background: rgba(242, 246, 241, .82); color: var(--vi-garden-green); cursor: pointer; font: 900 9px/1 "Avenir Next", sans-serif; box-shadow: 0 8px 24px rgba(24, 44, 31, .14); backdrop-filter: blur(14px) saturate(130%); }
.vi-garden-card__merge-select i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: rgba(53, 100, 75, .12); color: var(--vi-garden-moss); font: 900 13px/1 "Avenir Next", sans-serif; font-style: normal; }
.vi-garden-card__merge-select[aria-pressed="true"] { background: rgba(39, 78, 56, .92); color: #fff; }
.vi-garden-card__merge-select[aria-pressed="true"] i { background: #f1f6ef; color: var(--vi-garden-moss); }
.is-merging-gardens .vi-garden-card { cursor: pointer; }
.is-merging-gardens .vi-garden-card__preview-tabs { display: none; }
.is-merging-gardens .vi-garden-card__actions { opacity: .34; pointer-events: none; }
.vi-garden-3d-modal.is-card-preview canvas { touch-action: pan-y !important; }

.vi-garden-card__art {
    min-height: 130px;
    display: flex;
    align-items: end;
    justify-content: space-evenly;
    padding: 18px;
    background: linear-gradient(145deg, var(--vi-garden-mint), #edf4ee);
}

.vi-garden-card__art span {
    width: 42px;
    height: 72px;
    border-radius: 70% 20% 60% 30%;
    background: var(--vi-garden-green);
    transform: rotate(-18deg);
    opacity: .78;
}

.vi-garden-card__art span:nth-child(2) { height: 94px; transform: rotate(10deg); }
.vi-garden-card__art span:nth-child(3) { height: 58px; transform: rotate(24deg); }
.vi-garden-card__preview { position: relative; height: 210px; overflow: hidden; background: #e4ebe2; }
.vi-garden-card__eyebrow { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; }
.vi-garden-card__visibility { flex: 0 0 auto; }
.vi-garden-card__element-pill { display: flex; min-width: 0; max-width: calc(100% - 68px); align-items: center; justify-content: flex-start; gap: 3px; margin-left: auto; padding: 3px; overflow-x: auto; border: 1px solid rgba(68, 96, 77, .13); border-radius: 999px; background: rgba(230, 235, 230, .74); scrollbar-width: none; }
.vi-garden-card__element-pill::-webkit-scrollbar { display: none; }
.vi-garden-card__element-group { display: flex; height: 24px; flex: 0 0 auto; align-items: center; gap: 5px; padding: 2px 6px; border-radius: 999px; color: #294235; }
.vi-garden-card__element-group + .vi-garden-card__element-group { border-left: 1px solid rgba(62, 91, 71, .14); border-radius: 0 999px 999px 0; }
.vi-garden-card__element-group > em { color: #65766d; font-size: 6px; font-style: normal; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.vi-garden-card__element-pill b { display: grid; min-width: 16px; height: 16px; place-items: center; padding: 0 4px; border-radius: 999px; background: rgba(53, 100, 75, .12); color: #294235; font: 900 8px/1 "Avenir Next", sans-serif; }
.vi-garden-card__preview-tabs { position: absolute; z-index: 6; bottom: 10px; left: 50%; display: flex; gap: 3px; padding: 3px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 999px; background: rgba(186, 191, 188, .58); box-shadow: 0 8px 24px rgba(25, 31, 28, .16), inset 0 1px 0 rgba(255, 255, 255, .48); transform: translateX(-50%); backdrop-filter: blur(16px) saturate(135%); }
.vi-garden-card__preview-tabs button { min-width: 52px; padding: 7px 12px; border: 0; border-radius: 999px; background: transparent; color: #35423b; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-garden-card__preview-tabs button.is-active { background: #f5f6ef; color: var(--vi-garden-green); }
.vi-garden-card__preview-panel { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px 16px 48px; }
.vi-garden-card__preview-panel[hidden] { display: none; }
.vi-garden-card__plan-svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 9px 13px rgba(20, 42, 28, .14)); }
.vi-garden-card__3d { padding: 0; background: #dce6da; }
.vi-garden-card__3d .vi-garden-3d-loading { font-size: 10px; }
.vi-garden-card__body { padding: 20px; }
.vi-garden-card h3 { margin: 8px 0; font-size: 22px; }
.vi-garden-card p { min-height: 24px; color: #68786f; }
.vi-garden-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; border-top: 1px solid var(--vi-garden-line); padding-top: 12px; font-size: 12px; color: #68786f; }
.vi-garden-card__workflow { padding: 5px 8px; border-radius: 999px; background: #e7efe6; color: #365b42; font: 800 8px/1 "Avenir Next", sans-serif; text-transform: uppercase; }
.vi-garden-card__dates { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 8px; color: #819087; font-size: 9px; font-weight: 700; }
.vi-garden-card__dates .is-views { margin-left: auto; color: var(--vi-garden-moss); font-weight: 900; }
.vi-garden-card__open { margin-top: 14px; padding: 0; border: 0; background: transparent; color: var(--vi-garden-moss); font: inherit; font-weight: 800; cursor: pointer; }
.vi-garden-card__actions { display: flex; min-width: 0; align-items: center; gap: 7px; margin-top: 14px; }
.vi-garden-card__actions .vi-garden-card__open { margin-top: 0; margin-right: auto; flex: 0 0 auto; }
.vi-garden-card__owner { display: flex; min-width: 0; align-items: center; gap: 6px; color: #607168; }
.vi-garden-card__owner img { width: 27px; height: 27px; flex: 0 0 27px; border: 2px solid rgba(255, 255, 255, .86); border-radius: 50%; background: #dfe8e0; object-fit: cover; box-shadow: 0 0 0 1px rgba(49, 85, 62, .16); }
.vi-garden-card__owner b { max-width: 82px; overflow: hidden; font-size: 9px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.vi-garden-card__actions [data-bookmark], .vi-garden-card__actions [data-clone] { padding: 6px 9px; border: 1px solid var(--vi-garden-line); border-radius: 999px; background: #fff; color: var(--vi-garden-green); cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-garden-card__share { position: relative; flex: 0 0 auto; }
.vi-garden-card__share summary { padding: 7px 10px; border: 1px solid var(--vi-garden-line); border-radius: 999px; background: #fff; color: var(--vi-garden-green); cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; list-style: none; }
.vi-garden-card__share summary::-webkit-details-marker { display: none; }
.vi-garden-card__share[open] summary { border-color: var(--vi-garden-moss); background: var(--vi-garden-moss); color: #fff; }
.vi-garden-card__share > div { position: absolute; z-index: 8; right: 0; bottom: calc(100% + 7px); display: grid; gap: 3px; width: 142px; padding: 6px; border: 1px solid rgba(255, 255, 255, .65); border-radius: 12px; background: rgba(235, 238, 235, .9); box-shadow: 0 14px 34px rgba(27, 40, 31, .18); backdrop-filter: blur(16px) saturate(130%); }
.vi-garden-card__share a { padding: 9px 10px; border-radius: 8px; color: #34433a; font-size: 10px; font-weight: 800; text-decoration: none; }
.vi-garden-card__share a:hover { background: rgba(70, 97, 76, .1); color: var(--vi-garden-green); }
.vi-garden-feedback { margin: -22px 0 22px; color: #68786f; }
.vi-garden-notice { padding: 20px; border-radius: 12px; background: var(--vi-garden-paper); }

.vi-garden-editor { margin: calc(clamp(22px, 5vw, 54px) * -1); }
.vi-garden-editor__topbar { position: relative; z-index: 200; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--vi-garden-line); background: rgba(255, 255, 255, .72); backdrop-filter: blur(14px); border-radius: 24px 24px 0 0; }
.vi-garden-theme-control { position: relative; }
.vi-garden-theme-trigger { display: flex !important; align-items: center; gap: 7px; }
.vi-garden-theme-trigger > i { width: 9px; height: 9px; border-radius: 3px; background: var(--vi-garden-green); box-shadow: 0 0 0 3px rgba(53, 100, 75, .12); }
.vi-garden-theme-menu { position: absolute; z-index: 210; top: calc(100% + 10px); right: 0; display: grid; gap: 4px; width: 230px; max-height: min(570px, 72vh); padding: 10px; overflow-y: auto; border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; background: #1d201f; color: #f5f7f4; box-shadow: 0 22px 60px rgba(21, 31, 25, .34); }
.vi-garden-theme-menu[hidden] { display: none; }
.vi-garden-theme-menu > strong { padding: 4px 4px 7px; color: #a8b0ab; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.vi-garden-theme-menu > button { display: grid; grid-template-columns: 42px minmax(0, 1fr) 15px; align-items: center; gap: 9px; width: 100%; padding: 6px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #f4f6f3; cursor: pointer; font: 700 11px/1.2 "Avenir Next", sans-serif; text-align: left; }
.vi-garden-theme-menu > button:hover, .vi-garden-theme-menu > button.is-active { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .07); }
.vi-garden-theme-menu > button small { color: #6fc891; font-size: 12px; opacity: 0; }
.vi-garden-theme-menu > button.is-active small { opacity: 1; }
.vi-garden-theme-swatch { position: relative; display: block; width: 42px; height: 29px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); border-radius: 5px; background-color: var(--swatch-canvas); background-image: linear-gradient(var(--swatch-grid) 1px, transparent 1px), linear-gradient(90deg, var(--swatch-grid) 1px, transparent 1px); background-size: 7px 7px; }
.vi-garden-theme-swatch b, .vi-garden-theme-swatch em { position: absolute; display: block; border-radius: 2px; }
.vi-garden-theme-swatch b { top: 6px; left: 5px; width: 18px; height: 10px; background: var(--swatch-bed); }
.vi-garden-theme-swatch em { right: 4px; bottom: 5px; width: 22px; height: 5px; background: var(--swatch-path); transform: rotate(-7deg); }
.vi-garden-back { width: 42px; height: 42px; border: 1px solid var(--vi-garden-line); border-radius: 50%; background: #fff; color: var(--vi-garden-ink); cursor: pointer; font-size: 22px; }
.vi-garden-name { display: block; width: min(420px, 100%); margin-top: 3px; padding: 0; border: 0; border-bottom: 1px solid transparent; outline: 0; background: transparent; color: var(--vi-garden-ink); font: 700 22px/1.2 "Avenir Next", "Century Gothic", sans-serif; }
.vi-garden-name:focus { border-bottom-color: var(--vi-garden-green); }
.vi-garden-save-status { font-size: 12px; color: #68786f; }
.vi-garden-save-status[data-state="saved"] { color: #2d6849; }
.vi-garden-save-status[data-state="error"] { color: #a43c32; }
.vi-garden-editor__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.vi-garden-visibility { display: flex; align-items: center; gap: 7px; color: #68786f; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vi-garden-visibility select { padding: 8px 28px 8px 10px; border: 1px solid var(--vi-garden-line); border-radius: 999px; background: #fff; color: var(--vi-garden-ink); font: 700 11px/1 "Avenir Next", sans-serif; text-transform: none; }
.vi-garden-share-button { padding: 9px 14px; border: 1px solid var(--vi-garden-line); border-radius: 999px; background: #fff; color: var(--vi-garden-moss); cursor: pointer; font: 800 11px/1 "Avenir Next", sans-serif; }
.vi-garden-workspace-tabs { display: flex; gap: 2px; padding: 0 22px; border-bottom: 1px solid var(--vi-garden-line); background: rgba(255, 255, 255, .68); }
.vi-garden-workspace-tabs button { position: relative; display: flex; align-items: center; gap: 8px; padding: 14px 20px 13px; border: 0; background: transparent; color: #718078; cursor: pointer; font: 800 12px/1 "Avenir Next", sans-serif; }
.vi-garden-workspace-tabs button::after { content: ""; position: absolute; right: 15px; bottom: -1px; left: 15px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; }
.vi-garden-workspace-tabs button span { color: #9aa69f; font-size: 9px; letter-spacing: .08em; }
.vi-garden-workspace-tabs button.is-active { color: var(--vi-garden-moss); }
.vi-garden-workspace-tabs button.is-active::after { background: var(--vi-garden-green); }

/* Build and Assistant share the calm, editorial workspace language used by Grow. */
.vi-build-main, .vi-assistant-main { min-height: 680px; padding: clamp(18px, 3vw, 34px); background: radial-gradient(circle at 90% 0, rgba(177, 204, 181, .35), transparent 32%), #e9ede4; }
.vi-build-hero { display: grid; grid-template-columns: minmax(0, 1fr) 150px 190px; align-items: stretch; overflow: hidden; border-radius: 22px; background: var(--vi-garden-moss); color: #fff; box-shadow: 0 20px 50px rgba(28, 57, 41, .16); }
.vi-build-hero > div { padding: clamp(20px, 3vw, 36px); }
.vi-build-hero > div:first-child { background: radial-gradient(circle at 90% 10%, rgba(167, 205, 175, .24), transparent 42%); }
.vi-build-hero span, .vi-build-section > header span, .vi-assistant-intro > span, .vi-assistant-proposal > header span { color: #a9d4b8; font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.vi-build-hero h3, .vi-assistant-intro h3 { margin: 8px 0 9px; color: inherit; font-size: clamp(25px, 3.5vw, 40px); line-height: 1.05; }
.vi-build-hero p, .vi-assistant-intro p { max-width: 680px; margin: 0; color: #d8e5dc; font-size: 12px; line-height: 1.6; }
.vi-build-progress, .vi-build-cost { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(255, 255, 255, .12); }
.vi-build-progress strong, .vi-build-cost strong { color: #fff; font-size: 30px; }
.vi-build-progress span, .vi-build-cost span { margin-top: 5px; color: #b8c9bf; font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.vi-build-progress i { position: relative; height: 5px; margin-top: 14px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .14); }
.vi-build-progress i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--build-progress); border-radius: inherit; background: #9dd1ac; }
.vi-build-cost small { margin-top: 8px; color: #b8c9bf; font-size: 9px; }
.vi-build-section { margin-top: 20px; padding: 18px; border: 1px solid #cdd8cd; border-radius: 20px; background: rgba(255, 255, 255, .76); box-shadow: 0 10px 28px rgba(42, 70, 51, .05); }
.vi-build-section > header, .vi-assistant-proposal > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.vi-build-section > header > div, .vi-assistant-proposal > header > div { display: grid; gap: 4px; }
.vi-build-section > header span { color: var(--vi-garden-green); }
.vi-build-section > header strong, .vi-assistant-proposal > header strong { color: var(--vi-garden-ink); font-size: 16px; }
.vi-build-section > header small, .vi-assistant-proposal > header small { color: #738178; font-size: 9px; }
.vi-build-phases { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.vi-build-phases > article { min-width: 190px; padding: 14px; border: 1px solid rgba(47, 82, 58, .14); border-top: 4px solid #aab7ad; border-radius: 15px; background: rgba(249, 251, 247, .92); }
.vi-build-phases > article[data-phase-status="in_progress"] { border-top-color: #bf943f; }
.vi-build-phases > article[data-phase-status="blocked"] { border-top-color: #b95a4d; }
.vi-build-phases > article[data-phase-status="complete"] { border-top-color: var(--vi-garden-green); }
.vi-build-phases article > header { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 7px; }
.vi-build-phases article > header span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--vi-garden-moss); color: #fff; font-size: 8px; }
.vi-build-phases article > header select { grid-column: 1 / -1; }
.vi-build-phases input, .vi-build-phases select, .vi-build-phases textarea, .vi-build-inspection-form input, .vi-build-inspection-form select, .vi-build-inspection-form textarea { min-width: 0; width: 100%; padding: 8px 9px; border: 1px solid #d1dbd1; border-radius: 9px; outline: 0; background: rgba(255, 255, 255, .9); color: var(--vi-garden-ink); font: 700 10px/1.3 "Avenir Next", sans-serif; box-sizing: border-box; }
.vi-build-phases input:focus, .vi-build-phases select:focus, .vi-build-phases textarea:focus, .vi-build-inspection-form :focus { border-color: var(--vi-garden-green); box-shadow: 0 0 0 3px rgba(53, 100, 75, .1); }
.vi-build-phases article > label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; margin-top: 11px; color: #67776d; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.vi-build-phases article > label input[type="range"] { grid-column: 1 / -1; padding: 0; accent-color: var(--vi-garden-green); }
.vi-build-phases article > div { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.vi-build-phases article > div label, .vi-build-phases article > label:has(input:not([type="range"])) { display: grid; grid-template-columns: 1fr; gap: 4px; color: #718078; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.vi-build-phases textarea { min-height: 58px; margin-top: 8px; resize: vertical; }
.vi-build-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 20px; }
.vi-build-materials, .vi-build-inspections { display: grid; gap: 6px; max-height: 390px; overflow-y: auto; }
.vi-build-materials > article { display: grid; grid-template-columns: minmax(0, 1fr) auto 80px; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid rgba(49, 84, 59, .1); border-radius: 11px; background: rgba(249, 251, 247, .9); }
.vi-build-materials article > div { display: grid; gap: 2px; min-width: 0; }
.vi-build-materials article span { color: var(--vi-garden-green); font-size: 7px; font-weight: 900; text-transform: uppercase; }
.vi-build-materials article strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.vi-build-materials article small { color: #7b887f; font-size: 8px; }
.vi-build-materials article > b, .vi-build-materials article > em { font-size: 10px; font-style: normal; text-align: right; }
.vi-build-inspection-form { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px; }
.vi-build-inspection-form textarea { grid-column: 1 / -1; min-height: 62px; resize: vertical; }
.vi-build-inspection-form button { grid-column: 1 / -1; padding: 10px; border: 0; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-build-inspections > article { display: grid; gap: 4px; padding: 11px; border-left: 3px solid #abb8ae; border-radius: 9px; background: rgba(249, 251, 247, .92); }
.vi-build-inspections > article[data-status="passed"] { border-left-color: var(--vi-garden-green); }
.vi-build-inspections > article[data-status="issues"] { border-left-color: #b95a4d; }
.vi-build-inspections article span { color: #748078; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.vi-build-inspections article strong { font-size: 11px; }
.vi-build-inspections article small, .vi-build-inspections article p { margin: 0; color: #748078; font-size: 8px; line-height: 1.45; }

.vi-assistant-safety { padding: 8px 12px; border: 1px solid #cbd9cd; border-radius: 999px; background: #eef5ed; color: #42644e; font-size: 9px; font-weight: 800; }
.vi-assistant-main { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(380px, 1.05fr) minmax(320px, .9fr); gap: 16px; }
.vi-assistant-intro, .vi-assistant-chat, .vi-assistant-proposal { min-width: 0; border: 1px solid #cdd8cd; border-radius: 20px; background: rgba(255, 255, 255, .76); box-shadow: 0 10px 28px rgba(42, 70, 51, .05); }
.vi-assistant-intro { align-self: start; padding: clamp(22px, 3vw, 34px); background: radial-gradient(circle at 80% 5%, rgba(166, 207, 178, .23), transparent 37%), var(--vi-garden-moss); color: #fff; }
.vi-assistant-intro > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.vi-assistant-intro button { padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .19); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #ecf4ee; cursor: pointer; font: 750 8px/1 "Avenir Next", sans-serif; }
.vi-assistant-intro button:hover { background: rgba(255, 255, 255, .16); }
.vi-assistant-chat { display: flex; min-height: 540px; flex-direction: column; overflow: hidden; }
.vi-assistant-messages { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 9px; overflow-y: auto; padding: 18px; }
.vi-assistant-messages > article { max-width: 82%; padding: 11px 13px; border-radius: 14px 14px 14px 4px; background: #edf3eb; }
.vi-assistant-messages > article[data-role="user"] { align-self: flex-end; border-radius: 14px 14px 4px; background: var(--vi-garden-moss); color: #fff; }
.vi-assistant-messages article span { display: block; margin-bottom: 5px; color: #719078; font-size: 7px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.vi-assistant-messages article[data-role="user"] span { color: #b8d2bf; }
.vi-assistant-messages article p { margin: 0; font-size: 10px; line-height: 1.55; }
.vi-assistant-chat > form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px; border-top: 1px solid #d5ded5; background: rgba(246, 248, 244, .92); }
.vi-assistant-chat textarea { min-height: 72px; padding: 12px; border: 1px solid #cbd7cc; border-radius: 13px; outline: 0; resize: vertical; color: var(--vi-garden-ink); font: 600 11px/1.5 "Avenir Next", sans-serif; }
.vi-assistant-chat textarea:focus { border-color: var(--vi-garden-green); box-shadow: 0 0 0 3px rgba(53, 100, 75, .1); }
.vi-assistant-chat form button, .vi-assistant-proposal footer button { align-self: end; padding: 11px 14px; border: 0; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-assistant-proposal { align-self: start; padding: 18px; }
.vi-assistant-proposal > p { margin: 0 0 12px; color: #65756b; font-size: 10px; line-height: 1.5; }
.vi-assistant-evidence { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
.vi-assistant-evidence i { padding: 6px 8px; border-radius: 999px; background: #e9f1e8; color: #53705b; font-size: 7px; font-style: normal; font-weight: 800; }
.vi-assistant-actions { display: grid; gap: 7px; max-height: 390px; overflow-y: auto; }
.vi-assistant-actions article { display: grid; gap: 4px; padding: 11px; border: 1px solid rgba(49, 84, 59, .11); border-left: 3px solid var(--vi-garden-green); border-radius: 11px; background: rgba(249, 251, 247, .92); }
.vi-assistant-actions article[data-action-type="review_only"] { border-left-color: #c29b52; }
.vi-assistant-actions article span { color: #6f9278; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.vi-assistant-actions article strong { color: var(--vi-garden-ink); font-size: 10px; }
.vi-assistant-actions article small { color: #748078; font-size: 8px; line-height: 1.45; }
.vi-assistant-proposal footer { display: flex; justify-content: flex-end; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #d5ded5; }
.vi-assistant-proposal footer [data-assistant-discard] { border: 1px solid #ccd6cd; background: transparent; color: #64756a; }
.vi-assistant-proposal footer button:disabled { cursor: not-allowed; opacity: .4; }

.vi-capture-main, .vi-team-main { min-height: 680px; padding: clamp(18px, 3vw, 34px); background: radial-gradient(circle at 92% 0, rgba(175, 203, 181, .36), transparent 31%), #e9ede4; }
.vi-capture-hero, .vi-team-hero { display: grid; grid-template-columns: minmax(0, 1fr) 170px 170px; overflow: hidden; border-radius: 22px; background: var(--vi-garden-moss); color: #fff; box-shadow: 0 20px 50px rgba(28, 57, 41, .16); }
.vi-capture-hero > div:first-child, .vi-team-hero > div:first-child { padding: clamp(25px, 4vw, 44px); background: radial-gradient(circle at 88% 8%, rgba(170, 211, 180, .25), transparent 40%); }
.vi-capture-hero span, .vi-team-hero span, .vi-capture-panel > header span, .vi-team-panel > header span, .vi-team-status > article > span { color: #a9d4b8; font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.vi-capture-hero h3, .vi-team-hero h3 { max-width: 720px; margin: 8px 0 10px; color: #fff; font-size: clamp(27px, 4vw, 43px); line-height: 1.04; }
.vi-capture-hero p, .vi-team-hero p { max-width: 720px; margin: 0; color: #d8e5dc; font-size: 12px; line-height: 1.6; }
.vi-capture-hero > div:first-child > div, .vi-team-hero > div:first-child > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.vi-capture-hero button, .vi-team-hero button { padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-capture-hero button:first-child, .vi-team-hero button:first-child { background: #eef6ee; color: var(--vi-garden-moss); }
.vi-capture-hero__stat { display: flex; flex-direction: column; justify-content: center; padding: 24px; border-left: 1px solid rgba(255, 255, 255, .12); }
.vi-capture-hero__stat strong { color: #fff; font-size: 35px; }
.vi-capture-hero__stat span { margin-top: 5px; color: #b8c9bf; }
.vi-capture-hero__stat small { margin-top: 10px; color: #91a89a; font-size: 8px; }
.vi-capture-readiness { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.vi-capture-readiness article { position: relative; min-height: 130px; padding: 16px; overflow: hidden; border: 1px solid #ccd7cd; border-radius: 16px; background: rgba(255, 255, 255, .76); }
.vi-capture-readiness article::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: #bd9a57; }
.vi-capture-readiness article[data-state="ready"]::before { background: var(--vi-garden-green); }
.vi-capture-readiness article[data-state="blocked"]::before { background: #b65a4e; }
.vi-capture-readiness span { color: #6a9275; font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.vi-capture-readiness strong { display: block; margin-top: 17px; color: var(--vi-garden-ink); font-size: 13px; }
.vi-capture-readiness p { margin: 6px 0 0; color: #718078; font-size: 9px; line-height: 1.5; }
.vi-capture-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr); gap: 18px; }
.vi-capture-panel, .vi-team-panel, .vi-team-status > article { margin-top: 18px; padding: 18px; border: 1px solid #cdd8cd; border-radius: 20px; background: rgba(255, 255, 255, .76); box-shadow: 0 10px 28px rgba(42, 70, 51, .05); }
.vi-capture-panel > header, .vi-team-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.vi-capture-panel > header > div, .vi-team-panel > header > div { display: grid; gap: 4px; }
.vi-capture-panel > header span, .vi-team-panel > header span { color: var(--vi-garden-green); }
.vi-capture-panel > header strong, .vi-team-panel > header strong { font-size: 15px; }
.vi-capture-panel > header small, .vi-team-panel > header small { color: #77847c; font-size: 8px; }
.vi-capture-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vi-capture-settings label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 5px; padding: 10px; border: 1px solid rgba(48, 83, 59, .11); border-radius: 11px; color: #66766c; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.vi-capture-settings input, .vi-capture-settings select { grid-column: 1 / -1; width: 100%; accent-color: var(--vi-garden-green); }
.vi-capture-settings select { padding: 8px; border: 1px solid #ced9cf; border-radius: 8px; background: #fff; color: var(--vi-garden-ink); font: 700 9px/1 "Avenir Next", sans-serif; }
.vi-capture-settings output { color: var(--vi-garden-green); font-size: 10px; }
.vi-capture-pdf-views { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.vi-capture-pdf-views > strong { width: 100%; color: #69786f; font-size: 8px; text-transform: uppercase; }
.vi-capture-pdf-views button { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid #ccd7cd; border-radius: 999px; background: transparent; color: #65756b; cursor: pointer; font: 750 8px/1 "Avenir Next", sans-serif; }
.vi-capture-pdf-views button i { opacity: 0; font-style: normal; }
.vi-capture-pdf-views button[aria-pressed="true"] { border-color: var(--vi-garden-green); background: #e8f1e8; color: var(--vi-garden-moss); }
.vi-capture-pdf-views button[aria-pressed="true"] i { opacity: 1; }
.vi-capture-route, .vi-capture-history > div, .vi-team-members, .vi-team-feed, .vi-team-reviews { display: grid; gap: 7px; max-height: 330px; overflow-y: auto; }
.vi-capture-route article, .vi-capture-history article { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(48, 83, 59, .1); border-radius: 11px; background: rgba(249, 251, 247, .9); }
.vi-capture-route article > b { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border-radius: 50%; background: var(--vi-garden-moss); color: #fff; font-size: 9px; }
.vi-capture-route article > div, .vi-capture-history article > div { display: grid; min-width: 0; flex: 1; gap: 3px; }
.vi-capture-route article strong, .vi-capture-history article strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.vi-capture-route article span, .vi-capture-history article small { color: #78857d; font-size: 8px; }
.vi-capture-panel__action, .vi-team-panel__action, .vi-team-status button { width: 100%; margin-top: 12px; padding: 10px; border: 0; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-capture-history article > span { width: 68px; padding: 6px; border-radius: 999px; background: #e8f1e8; color: #4f755b; font-size: 7px; font-weight: 900; text-align: center; text-transform: uppercase; }
.vi-capture-history article > b { color: #66776c; font-size: 8px; }

.vi-team-hero { grid-template-columns: minmax(0, 1fr) minmax(360px, .7fr); }
.vi-team-hero__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vi-team-hero__stats article { display: flex; flex-direction: column; justify-content: center; padding: 20px; border-bottom: 1px solid rgba(255, 255, 255, .12); border-left: 1px solid rgba(255, 255, 255, .12); text-align: center; }
.vi-team-hero__stats strong { color: #fff; font-size: 29px; }
.vi-team-hero__stats span { margin-top: 5px; color: #b8c9bf; }
.vi-team-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vi-team-status > article { display: flex; min-height: 190px; flex-direction: column; }
.vi-team-status > article > span { color: var(--vi-garden-green); }
.vi-team-status > article > strong { margin-top: 15px; font-size: 15px; text-transform: capitalize; }
.vi-team-status > article > p { flex: 1; margin: 7px 0 12px; color: #718078; font-size: 9px; line-height: 1.5; }
.vi-team-status label { display: grid; gap: 5px; color: #708077; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.vi-team-status select { padding: 8px; border: 1px solid #ced8cf; border-radius: 9px; background: #fff; color: var(--vi-garden-ink); font: 700 9px/1 "Avenir Next", sans-serif; }
.vi-team-presence { display: flex; flex-wrap: wrap; gap: 6px; }
.vi-team-presence span { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 999px; background: #e9f1e8; font-size: 8px; }
.vi-team-presence img, .vi-team-members img, .vi-team-feed img { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; object-fit: cover; background: #dce6dc; }
.vi-team-presence small { color: #748178; font-size: 8px; }
.vi-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vi-team-members article, .vi-team-feed article, .vi-team-reviews article { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid rgba(48, 83, 59, .1); border-radius: 11px; background: rgba(249, 251, 247, .9); }
.vi-team-members article > div, .vi-team-feed article > div, .vi-team-reviews article > div { display: grid; min-width: 0; flex: 1; gap: 3px; }
.vi-team-members article strong, .vi-team-feed article strong, .vi-team-reviews article strong { font-size: 10px; text-transform: capitalize; }
.vi-team-members article span, .vi-team-feed article small, .vi-team-reviews article small { color: #78857d; font-size: 8px; }
.vi-team-members article > b { color: #597563; font-size: 7px; text-align: right; }
.vi-team-feed article { align-items: flex-start; }
.vi-team-feed p, .vi-team-reviews p { display: -webkit-box; margin: 0; overflow: hidden; color: #66756c; font-size: 9px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.vi-team-reviews article > b { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border-radius: 9px; background: var(--vi-garden-moss); color: #fff; font-size: 9px; }
.vi-team-reviews article[data-status="approved"] > b { background: var(--vi-garden-green); }
.vi-team-reviews article[data-status="changes_requested"] > b { background: #aa674e; }

.vi-export-main, .vi-readiness-main { min-height: 680px; padding: clamp(18px, 3vw, 34px); background: radial-gradient(circle at 92% 0, rgba(175, 203, 181, .36), transparent 31%), #e9ede4; }
.vi-export-hero, .vi-readiness-hero { display: grid; overflow: hidden; border-radius: 22px; background: var(--vi-garden-moss); color: #fff; box-shadow: 0 20px 50px rgba(28, 57, 41, .16); }
.vi-export-hero { grid-template-columns: minmax(0, 1fr) minmax(245px, .36fr); }
.vi-export-hero > div:first-child { padding: clamp(25px, 4vw, 44px); background: radial-gradient(circle at 88% 8%, rgba(170, 211, 180, .25), transparent 40%); }
.vi-export-hero span, .vi-readiness-hero > div > span, .vi-readiness-footer span { color: #a9d4b8; font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.vi-export-hero h3, .vi-readiness-hero h3 { max-width: 720px; margin: 8px 0 10px; color: #fff; font-size: clamp(27px, 4vw, 43px); line-height: 1.04; }
.vi-export-hero p, .vi-readiness-hero p { max-width: 720px; margin: 0; color: #d8e5dc; font-size: 12px; line-height: 1.6; }
.vi-export-hero > div:first-child > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 22px; }
.vi-export-hero button, .vi-readiness-hero button { padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-export-hero button:first-child, .vi-readiness-hero aside button:first-child { background: #eef6ee; color: var(--vi-garden-moss); }
.vi-export-manifest { padding: 26px; border-left: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .035); }
.vi-export-manifest strong { display: block; margin-top: 13px; color: #fff; font-size: 19px; }
.vi-export-manifest ul { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.vi-export-manifest li { padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #c5d5ca; font-size: 9px; }
.vi-export-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.vi-export-grid > article { display: flex; min-height: 220px; flex-direction: column; padding: 18px; border: 1px solid #cdd8cd; border-radius: 20px; background: rgba(255, 255, 255, .76); box-shadow: 0 10px 28px rgba(42, 70, 51, .05); }
.vi-export-grid article > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vi-export-grid article > header span { padding: 6px 8px; border-radius: 999px; background: #e4eee4; color: #4e7258; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.vi-export-grid article > header small { color: #7b887f; font-size: 7px; text-align: right; }
.vi-export-grid h3 { margin: 20px 0 8px; color: var(--vi-garden-ink); font-size: 15px; }
.vi-export-grid p { flex: 1; margin: 0 0 17px; color: #6e7c73; font-size: 9px; line-height: 1.55; }
.vi-export-grid button { width: 100%; padding: 10px; border: 0; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; cursor: pointer; font: 800 8px/1 "Avenir Next", sans-serif; }
.vi-export-grid button:disabled { cursor: wait; opacity: .55; }
.vi-export-media { background: radial-gradient(circle at 100% 0, rgba(130, 181, 143, .3), transparent 48%), var(--vi-garden-moss) !important; }
.vi-export-media h3 { color: #fff; }
.vi-export-media p { color: #c9d8ce; }
.vi-export-media button { background: #eef6ee; color: var(--vi-garden-moss); }
.vi-export-notes { display: flex; gap: 16px; margin-top: 12px; padding: 14px 18px; border: 1px solid #ccd7cd; border-radius: 15px; background: rgba(255, 255, 255, .62); }
.vi-export-notes strong { flex: 0 0 auto; color: var(--vi-garden-moss); font-size: 9px; }
.vi-export-notes span { color: #6d7b72; font-size: 9px; line-height: 1.5; }

.vi-readiness-hero { grid-template-columns: 190px minmax(0, 1fr) 210px; align-items: stretch; }
.vi-readiness-score { --score-angle: calc(var(--readiness-score) * 3.6deg); position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 220px; border-right: 1px solid rgba(255, 255, 255, .12); background: radial-gradient(circle, var(--vi-garden-moss) 46%, transparent 48%), conic-gradient(#a8d0b4 var(--score-angle), rgba(255, 255, 255, .1) 0); }
.vi-readiness-score strong { color: #fff; font-size: 43px; line-height: 1; }
.vi-readiness-score span { margin-top: 7px; color: #afc3b6; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.vi-readiness-hero > div:nth-child(2) { align-self: center; padding: 30px; }
.vi-readiness-hero > div:nth-child(2) > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.vi-readiness-hero > div:nth-child(2) b { padding: 7px 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #dbe8de; font-size: 8px; }
.vi-readiness-hero aside { display: flex; justify-content: center; flex-direction: column; gap: 9px; padding: 24px; border-left: 1px solid rgba(255, 255, 255, .12); }
.vi-readiness-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.vi-readiness-groups > section { overflow: hidden; border: 1px solid #cdd8cd; border-radius: 18px; background: rgba(255, 255, 255, .76); box-shadow: 0 10px 28px rgba(42, 70, 51, .05); }
.vi-readiness-groups > section > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid rgba(48, 83, 59, .1); }
.vi-readiness-groups header span { color: var(--vi-garden-green); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.vi-readiness-groups header strong { color: #748178; font-size: 8px; }
.vi-readiness-groups > section > div { display: grid; gap: 1px; }
.vi-readiness-groups article { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; background: rgba(249, 251, 247, .72); }
.vi-readiness-groups article i { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; background: #dceadf; color: #35644b; font-size: 10px; font-style: normal; font-weight: 900; }
.vi-readiness-groups article[data-status="warn"] i { background: #f0e6cd; color: #8b6b27; }
.vi-readiness-groups article[data-status="fail"] i { background: #f1deda; color: #a1493d; }
.vi-readiness-groups article > div { display: grid; min-width: 0; gap: 4px; }
.vi-readiness-groups article strong { color: var(--vi-garden-ink); font-size: 10px; }
.vi-readiness-groups article p { margin: 0; color: #718078; font-size: 8px; line-height: 1.45; }
.vi-readiness-groups article small { color: #8a6532; font-size: 8px; font-weight: 700; line-height: 1.4; }
.vi-readiness-footer { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; margin-top: 12px; padding: 14px 18px; border: 1px solid #ccd7cd; border-radius: 15px; background: rgba(255, 255, 255, .62); }
.vi-readiness-footer div { display: grid; gap: 3px; }
.vi-readiness-footer strong { font-size: 9px; }
.vi-readiness-footer p { margin: 0; color: #6d7b72; font-size: 9px; line-height: 1.5; }
.vi-ui-tests { margin-top: 18px; overflow: hidden; border: 1px solid #cdd8cd; border-radius: 20px; background: rgba(255, 255, 255, .76); box-shadow: 0 10px 28px rgba(42, 70, 51, .05); }
.vi-ui-tests > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px; border-bottom: 1px solid rgba(48, 83, 59, .1); }
.vi-ui-tests > header > div:first-child { display: grid; gap: 4px; }
.vi-ui-tests > header span, .vi-ui-tests__results article span { color: var(--vi-garden-green); font-size: 8px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.vi-ui-tests > header h3 { margin: 0; color: var(--vi-garden-ink); font-size: 18px; }
.vi-ui-tests > header p { margin: 0; color: #718078; font-size: 9px; }
.vi-ui-tests > header > div:last-child { display: flex; gap: 7px; }
.vi-ui-tests button { padding: 10px 14px; border: 1px solid var(--vi-garden-moss); border-radius: 999px; background: var(--vi-garden-moss); color: #fff; cursor: pointer; font: 800 8px/1 "Avenir Next", sans-serif; }
.vi-ui-tests button + button { background: transparent; color: var(--vi-garden-moss); }
.vi-ui-tests button:disabled { cursor: not-allowed; opacity: .4; }
.vi-ui-tests__summary { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 12px 20px; background: rgba(232, 241, 232, .72); }
.vi-ui-tests__summary strong { padding: 6px 8px; border-radius: 999px; background: #fff; color: #4e6e57; font-size: 8px; }
.vi-ui-tests__summary span { margin-left: auto; color: #758279; font-size: 8px; }
.vi-ui-tests__results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 470px; overflow-y: auto; }
.vi-ui-tests__results article { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(48, 83, 59, .08); }
.vi-ui-tests__results article:nth-child(odd) { border-right: 1px solid rgba(48, 83, 59, .08); }
.vi-ui-tests__results article > i { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: #dceadf; color: #35644b; font-size: 10px; font-style: normal; font-weight: 900; }
.vi-ui-tests__results article[data-status="warn"] > i { background: #f0e6cd; color: #8b6b27; }
.vi-ui-tests__results article[data-status="fail"] > i { background: #f1deda; color: #a1493d; }
.vi-ui-tests__results article > div { display: grid; gap: 3px; }
.vi-ui-tests__results article strong { color: var(--vi-garden-ink); font-size: 10px; }
.vi-ui-tests__results article p { margin: 0; color: #718078; font-size: 8px; line-height: 1.45; }
.vi-ui-tests__results article > small { color: #849087; font-size: 7px; white-space: nowrap; }
.vi-ui-tests__empty { display: grid; min-height: 120px; place-content: center; gap: 5px; color: #718078; text-align: center; }
.vi-ui-tests__empty strong { color: var(--vi-garden-ink); font-size: 12px; }
.vi-ui-tests__empty span { font-size: 9px; }

/* Design workspace: clearer hierarchy around the garden canvas. */
.vi-garden-editor--design .vi-garden-editor__topbar { grid-template-columns: 42px minmax(160px, 210px) minmax(0, 1fr); gap: 14px; padding: 13px 18px; background: rgba(248, 250, 247, .94); box-shadow: 0 5px 22px rgba(34, 58, 41, .05); }
.vi-garden-editor__topbar.has-workspace-tabs, .vi-garden-editor--design .vi-garden-editor__topbar.has-workspace-tabs { grid-template-columns: 42px minmax(140px, 210px) minmax(430px, 1fr) auto; }
.vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs { min-width: 0; align-self: stretch; justify-self: center; justify-content: center; gap: 1px; padding: 0; overflow-x: auto; border: 0; background: transparent; scrollbar-width: none; }
.vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs::-webkit-scrollbar { display: none; }
.vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs button { flex: 0 0 auto; padding: 9px 8px 8px; font-size: 8px; }
.vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs button span { font-size: 6px; }
.vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs button::after { right: 7px; left: 7px; }
.vi-garden-editor--design .vi-garden-name { width: 100%; font-size: 20px; }
.vi-garden-editor--design .vi-garden-kicker { font-size: 8px; letter-spacing: .16em; }
.vi-garden-editor--design .vi-garden-editor__actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 8px; }
.vi-garden-actions__group { display: flex; min-width: 0; align-items: center; gap: 6px; }
.vi-garden-actions__group--collaboration { padding: 4px; border: 1px solid rgba(52, 91, 63, .1); border-radius: 999px; background: rgba(228, 238, 227, .58); }
.vi-garden-editor--design .vi-garden-share-button { padding: 8px 11px; border-color: rgba(57, 88, 66, .14); background: rgba(255, 255, 255, .8); font-size: 9px; white-space: nowrap; }
.vi-garden-editor--design .vi-garden-actions__group--collaboration .vi-garden-share-button { border-color: transparent; background: transparent; }
.vi-garden-editor--design .vi-garden-actions__group--collaboration .vi-garden-share-button:hover { background: rgba(255, 255, 255, .88); }
.vi-garden-editor--design .vi-garden-share-button--primary { border-color: var(--vi-garden-moss); background: var(--vi-garden-moss); color: #fff; }
.vi-garden-header-basket { position: relative; display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; padding: 0; border: 1px solid rgba(57, 88, 66, .14); border-radius: 50%; background: rgba(255, 255, 255, .82); color: var(--vi-garden-moss); cursor: pointer; }
.vi-garden-header-basket:hover { border-color: rgba(47, 91, 59, .3); background: #edf4eb; }
.vi-garden-header-basket svg { width: 17px; height: 17px; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.vi-garden-header-basket > span { position: absolute; top: -5px; right: -5px; display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border: 2px solid #f7f9f5; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; font: 900 7px/1 "Avenir Next", sans-serif; }
.vi-garden-header-basket > span[hidden] { display: none; }
.vi-garden-editor--design .vi-garden-visibility { gap: 5px; font-size: 7px; }
.vi-garden-editor--design .vi-garden-visibility select { padding: 7px 25px 7px 9px; font-size: 9px; }
.vi-garden-editor--design .vi-garden-save-status { min-width: 82px; font-size: 9px; text-align: right; }
.vi-garden-editor--design + .vi-garden-workspace-tabs, .vi-garden-editor--design .vi-garden-workspace-tabs { justify-content: center; gap: 4px; padding: 0 18px; background: rgba(250, 251, 248, .92); }
.vi-garden-editor--design .vi-garden-workspace-tabs button { padding: 12px 16px 11px; font-size: 10px; }
.vi-garden-editor--design .vi-garden-workspace-tabs button span { font-size: 7px; }

.vi-garden-editor--design .vi-garden-editor__body { --vi-tools-width: 210px; --vi-sidebar-width: 300px; background: #edf1eb; }
.vi-garden-editor--design .vi-garden-tools, .vi-garden-editor--design .vi-garden-sidebar { padding: 15px; background: rgba(247, 249, 245, .9); scrollbar-color: rgba(56, 92, 66, .25) transparent; scrollbar-width: thin; }
.vi-garden-editor--design .vi-garden-tools { border-right: 1px solid rgba(51, 84, 60, .1); }
.vi-garden-editor--design .vi-garden-sidebar { display: flex; flex-direction: column; gap: 12px; border-left: 1px solid rgba(51, 84, 60, .1); }
.vi-garden-editor--design .vi-garden-schedule { transition: border-color .25s ease, box-shadow .25s ease; }
.vi-garden-editor--design .vi-garden-schedule.is-highlighted { border-color: rgba(45, 102, 59, .42); box-shadow: 0 0 0 3px rgba(70, 130, 82, .12), 0 10px 28px rgba(36, 60, 43, .08); }
.vi-garden-editor--design .vi-garden-panel { padding: 14px; border-color: rgba(58, 89, 66, .13); border-radius: 14px; background: rgba(255, 255, 255, .86); box-shadow: 0 7px 20px rgba(36, 60, 43, .04); }
.vi-garden-editor--design .vi-garden-panel__heading { margin-bottom: 11px; }
.vi-garden-editor--design .vi-garden-panel__heading span { font-size: 8px; }
.vi-garden-editor--design .vi-garden-panel__heading strong { font-size: 15px; }
.vi-garden-editor--design .vi-garden-build-tree { gap: 6px; margin-top: 10px; }
.vi-garden-editor--design .vi-garden-build-branch { border-color: rgba(56, 91, 66, .12); border-radius: 10px; background: rgba(255, 255, 255, .64); }
.vi-garden-editor--design .vi-garden-build-branch > summary { min-height: 43px; padding: 7px 9px; background: rgba(228, 237, 226, .7); }
.vi-garden-editor--design .vi-garden-build-branch > summary strong { font-size: 11px; }
.vi-garden-editor--design .vi-garden-build-branch > summary small { font-size: 7px; }
.vi-garden-editor--design .vi-garden-build-children.vi-garden-tool-grid button { min-height: 38px; font-size: 10px; }
.vi-garden-editor--design .vi-garden-plant-results { max-height: 280px; }
.vi-garden-editor--design .vi-garden-capture-button { margin: 0; padding: 10px; font-size: 10px; }
.vi-garden-editor--design .vi-garden-import-button { margin: 0; }
.vi-garden-tool-section { margin-top: 10px; padding-top: 0; border: 1px solid rgba(56, 91, 66, .12); border-radius: 10px; background: rgba(255, 255, 255, .64); }
.vi-garden-tool-section > summary { position: relative; display: grid; gap: 2px; padding: 11px 30px 11px 12px; cursor: pointer; list-style: none; }
.vi-garden-tool-section > summary::-webkit-details-marker { display: none; }
.vi-garden-tool-section > summary::after { content: "+"; position: absolute; top: 50%; right: 12px; color: #587064; font-size: 16px; transform: translateY(-50%); }
.vi-garden-tool-section[open] > summary::after { content: "−"; }
.vi-garden-tool-section > summary span { color: var(--vi-garden-green); font-size: 7px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.vi-garden-tool-section > summary strong { color: var(--vi-garden-ink); font-size: 11px; }
.vi-garden-tool-section > div { padding: 0 11px 12px; }
.vi-garden-editor--design .vi-garden-space-panel { order: -1; margin-top: 0; background: rgba(235, 243, 233, .82); }
.vi-garden-space-actions { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); gap: 6px; }
.vi-garden-space-dimensions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.vi-garden-space-dimensions label { color: #68786f; font-size: 7px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.vi-garden-space-dimensions label span { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--vi-garden-ink); font-size: 10px; letter-spacing: 0; text-transform: none; }
.vi-garden-space-dimensions input { width: 100%; min-width: 0; padding: 8px; border: 1px solid rgba(54, 88, 64, .16); border-radius: 9px; background: rgba(255, 255, 255, .9); color: var(--vi-garden-ink); font: 800 10px/1 "Avenir Next", sans-serif; }
.vi-garden-space-summary { display: block; margin-top: 8px; color: #68786f; font-size: 8px; line-height: 1.4; }
.vi-garden-space-panel .vi-garden-reference-controls { margin-top: 9px; }
.vi-garden-editor--design .vi-garden-condition-panel, .vi-garden-editor--design .vi-garden-solar-panel { padding-top: 0; border-top: 1px solid rgba(56, 91, 66, .12); }
.vi-garden-editor--design .vi-garden-condition-panel label, .vi-garden-editor--design .vi-garden-solar-panel label { font-size: 8px; }

.vi-garden-editor--design .vi-garden-workspace { padding: 14px 16px 22px; background: radial-gradient(circle at 90% 0, rgba(188, 211, 190, .24), transparent 34%), #edf1eb; }
.vi-garden-editor--design .vi-garden-detail-strip { position: relative; z-index: 45; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.vi-garden-editor--design .vi-garden-canvas-options { position: relative; display: flex; min-width: 0; flex: 0 1 auto; align-items: center; flex-wrap: wrap; gap: 5px; margin: 0; padding: 5px; border: 1px solid rgba(56, 91, 66, .13); border-radius: 13px; background: rgba(250, 251, 248, .88); box-shadow: 0 5px 16px rgba(35, 60, 42, .05); backdrop-filter: blur(16px); }
.vi-garden-editor--design .vi-garden-design-switch { padding: 3px; background: #e5ece3; }
.vi-garden-editor--design .vi-garden-design-switch button { min-height: 32px; padding: 7px 11px; font-size: 9px; }
.vi-garden-editor--design .vi-garden-overlap-control strong, .vi-garden-editor--design .vi-season-simulator > strong, .vi-garden-editor--design .vi-garden-group-control > strong { font-size: 7px; }
.vi-garden-editor--design .vi-garden-heat-map-control { min-width: 152px; max-width: 100%; }
.vi-garden-editor--design .vi-garden-heat-map-control button { min-height: 27px; font-size: 7px; }
.vi-garden-editor--design .vi-garden-heat-map-control, .vi-garden-editor--design .vi-garden-zone-trigger, .vi-garden-editor--design .vi-garden-group-control { order: 2; margin-top: 2px; }
.vi-garden-editor--design .vi-garden-heat-map-control { flex: 0 0 auto; padding: 0; border: 0; }
.vi-garden-editor--design .vi-garden-zone-trigger { min-height: 36px; }
.vi-garden-editor--design .vi-garden-group-control { margin-left: auto; }
.vi-garden-editor--design .vi-zone-intelligence { max-height: 245px; overflow: auto; border-radius: 14px; }
.vi-garden-editor--design .vi-garden-detail-strip > .vi-garden-overview { min-width: 360px; flex: 1 1 460px; grid-template-columns: repeat(4, minmax(82px, 1fr)); gap: 5px; margin: 0; }
.vi-garden-editor--design .vi-garden-detail-strip > .vi-garden-overview div { display: grid; min-height: 36px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 10px; }
.vi-garden-editor--design .vi-garden-detail-strip > .vi-garden-overview span { font-size: 7px; }
.vi-garden-editor--design .vi-garden-detail-strip > .vi-garden-overview strong { font-size: 12px; white-space: nowrap; }
.vi-garden-editor--design .vi-garden-canvas-wrap { border-color: rgba(49, 82, 58, .14); background: rgba(255, 255, 255, .62); box-shadow: 0 14px 38px rgba(36, 61, 43, .06); }
.vi-garden-editor--design .vi-garden-inline-3d { border-color: rgba(49, 82, 58, .14); border-radius: 16px; box-shadow: 0 16px 42px rgba(35, 60, 42, .08); }
.vi-garden-editor--design .vi-garden-layers { max-height: min(46vh, 520px); }

.vi-garden-editor--design .vi-garden-editor__actions { position: relative; }
.vi-garden-header-menu-trigger { display: inline-flex !important; align-items: center; gap: 6px; }
.vi-garden-header-menu-trigger::after { content: "⌄"; color: #779080; font-size: 9px; }
.vi-garden-editor--design .vi-garden-actions__group { position: absolute; z-index: 230; top: calc(100% + 10px); display: none; width: max-content; max-width: min(760px, 82vw); flex-wrap: wrap; padding: 9px; border: 1px solid rgba(55, 86, 64, .14); border-radius: 15px; background: rgba(247, 249, 245, .97); box-shadow: 0 18px 45px rgba(26, 47, 33, .18); backdrop-filter: blur(18px); }
.vi-garden-editor--design .vi-garden-actions__group.is-open { display: flex; }
.vi-garden-editor--design .vi-garden-actions__group--collaboration { right: 145px; }
.vi-garden-editor--design .vi-garden-actions__group--project { right: 0; }

.vi-garden-editor--design .vi-garden-editor__body { position: relative; display: block; min-height: 720px; overflow: hidden; }
.vi-garden-editor--design .vi-garden-sidebar-resizer { position: absolute; z-index: 116; top: 0; bottom: 0; display: block; width: 14px; min-width: 14px; border: 0; background: transparent; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.vi-garden-editor--design [data-sidebar-resize="left"] { left: min(var(--vi-tools-width), calc(100% - 28px)); transform: translateX(-50%); }
.vi-garden-editor--design [data-sidebar-resize="right"] { right: min(var(--vi-sidebar-width), calc(100% - 28px)); transform: translateX(50%); }
.vi-garden-editor--design .is-tools-open [data-sidebar-resize="left"], .vi-garden-editor--design .is-inspector-open [data-sidebar-resize="right"] { opacity: 1; pointer-events: auto; }
.vi-garden-editor--design .vi-garden-sidebar-resizer::after { width: 4px; height: 64px; background: rgba(53, 100, 75, .48); box-shadow: 0 0 0 3px rgba(250, 252, 248, .72); }
.vi-garden-editor--design .vi-garden-sidebar-resizer:hover::after, .vi-garden-editor--design .vi-garden-sidebar-resizer:focus-visible::after, .vi-garden-editor--design .is-resizing-sidebars .vi-garden-sidebar-resizer::after { height: 88px; background: var(--vi-garden-green); box-shadow: 0 0 0 4px rgba(255, 255, 255, .82), 0 5px 16px rgba(30, 64, 40, .2); }
.vi-garden-editor--design .is-resizing-sidebars .vi-garden-tools, .vi-garden-editor--design .is-resizing-sidebars .vi-garden-sidebar { transition: none; }
.vi-garden-editor--design .vi-garden-workspace { min-height: 720px; }
.vi-garden-editor--design .vi-garden-tools, .vi-garden-editor--design .vi-garden-sidebar { position: absolute; z-index: 110; top: 0; bottom: 0; width: min(var(--vi-tools-width), calc(100% - 28px)); max-height: none; overflow-y: auto; box-shadow: 0 20px 55px rgba(25, 49, 32, .2); opacity: 0; pointer-events: none; transition: transform .28s cubic-bezier(.22, .8, .24, 1), opacity .2s ease; }
.vi-garden-editor--design .vi-garden-tools { left: 0; transform: translateX(calc(-100% - 18px)); }
.vi-garden-editor--design .vi-garden-sidebar { right: 0; width: min(var(--vi-sidebar-width), calc(100% - 28px)); transform: translateX(calc(100% + 18px)); }
.vi-garden-editor--design .vi-garden-editor__body.is-tools-open .vi-garden-tools, .vi-garden-editor--design .vi-garden-editor__body.is-inspector-open .vi-garden-sidebar { opacity: 1; pointer-events: auto; transform: translateX(0); }
.vi-garden-drawer-heading { position: sticky; z-index: 4; top: -15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -1px -1px 12px; padding: 14px 1px 8px; background: rgba(247, 249, 245, .96); backdrop-filter: blur(12px); }
.vi-garden-drawer-heading .vi-garden-panel__heading { margin: 0; }
.vi-garden-drawer-heading > button { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; padding: 0; border: 1px solid rgba(54, 88, 64, .15); border-radius: 50%; background: #fff; color: var(--vi-garden-moss); cursor: pointer; font: 500 18px/1 sans-serif; }

.vi-garden-modebar { position: sticky; z-index: 95; top: 0; display: flex; align-items: center; gap: 5px; width: fit-content; max-width: 100%; margin: 0 auto 10px; padding: 5px; overflow-x: auto; border: 1px solid rgba(55, 88, 64, .14); border-radius: 16px; background: rgba(250, 251, 248, .92); box-shadow: 0 9px 28px rgba(31, 55, 38, .09); scrollbar-width: none; backdrop-filter: blur(18px); }
.vi-garden-modebar::-webkit-scrollbar { display: none; }
.vi-garden-modebar > button { display: flex; min-height: 37px; flex: 0 0 auto; align-items: center; gap: 6px; padding: 8px 11px; border: 0; border-radius: 11px; background: transparent; color: #5d7065; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-garden-modebar > button span { font-size: 13px; font-weight: 600; }
.vi-garden-modebar > button:hover { background: #eef3ec; color: var(--vi-garden-moss); }
.vi-garden-modebar > button.is-active, .vi-garden-modebar > button[aria-pressed="true"] { background: var(--vi-garden-moss); color: #fff; box-shadow: 0 4px 12px rgba(35, 75, 47, .18); }
.vi-garden-modebar__views { display: flex; flex: 0 0 auto; padding: 3px; border-radius: 11px; background: #e7ede5; }
.vi-garden-modebar__views button { min-width: 42px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: #607269; cursor: pointer; font: 900 9px/1 "Avenir Next", sans-serif; }
.vi-garden-modebar__views button.is-active { background: #fff; color: var(--vi-garden-moss); box-shadow: 0 3px 10px rgba(39, 68, 47, .1); }
.vi-garden-modebar__density { margin-left: 3px; border-left: 1px solid rgba(55, 88, 64, .12) !important; }
.vi-garden-modebar__2d-controls { display: flex; margin-left: 3px; padding-left: 7px; align-items: center; border-left: 1px solid rgba(55, 88, 64, .12); }
.vi-garden-modebar__2d-controls[hidden] { display: none; }
.vi-garden-modebar__2d-controls .vi-garden-3d-actions { flex-wrap: nowrap; gap: 4px; }
.vi-garden-modebar__2d-controls .vi-garden-3d-zoom button { min-width: 26px !important; height: 25px !important; padding: 0 6px !important; font-size: 8px !important; }
.vi-garden-modebar__3d-controls { display: flex; min-width: 0; align-items: center; }
.vi-garden-modebar__3d-controls[hidden], .vi-garden-modebar__3d-controls:empty { display: none; }
.vi-garden-modebar__3d-controls:not(:empty) { margin-left: 3px; padding-left: 7px; border-left: 1px solid rgba(55, 88, 64, .12); }
.vi-garden-modebar__3d-controls .vi-garden-3d-actions { flex-wrap: nowrap; gap: 4px; }
.vi-garden-modebar__3d-controls .vi-garden-weather-control { flex: 0 0 auto; padding: 3px 4px 3px 8px; }
.vi-garden-modebar__3d-controls .vi-garden-3d-actions button, .vi-garden-modebar__3d-controls .vi-garden-ar-button { padding: 7px 9px !important; font-size: 8px !important; white-space: nowrap; }
.vi-garden-modebar__3d-controls .vi-garden-3d-zoom button { min-width: 26px !important; height: 25px !important; padding: 0 6px !important; }
.vi-garden-modebar__3d-controls .vi-garden-weather-control span { font-size: 7px; }
.vi-garden-modebar__3d-controls .vi-garden-weather-control select { min-width: 65px; padding-top: 4px; padding-bottom: 4px; font-size: 8px; }

.vi-garden-editor--design .vi-garden-editor__body:not(.is-expert-interface) .vi-garden-overlap-control,
.vi-garden-editor--design .vi-garden-editor__body:not(.is-expert-interface) .vi-garden-grid-settings,
.vi-garden-editor--design .vi-garden-editor__body:not(.is-expert-interface) .vi-season-simulator,
.vi-garden-editor--design .vi-garden-editor__body:not(.is-expert-interface):not(.is-analysis-open) .vi-garden-heat-map-control,
.vi-garden-editor--design .vi-garden-editor__body:not(.is-expert-interface):not(.is-analysis-open) .vi-garden-zone-trigger,
.vi-garden-editor--design .vi-garden-editor__body:not(.is-expert-interface) .vi-garden-group-control { display: none; }
.vi-garden-editor--design .vi-garden-editor__body:not(.is-expert-interface):not(.is-analysis-open) .vi-zone-intelligence,
.vi-garden-editor--design .vi-garden-editor__body:not(.is-expert-interface):not(.is-analysis-open) .vi-garden-heat-map-legend { display: none !important; }
.vi-garden-editor--design .vi-garden-editor__body:not(.is-expert-interface):not(.is-analysis-open) .vi-garden-canvas-options { display: none; }
.vi-garden-editor--design .vi-garden-editor__body.is-analysis-open .vi-garden-canvas-options { justify-content: center; }
.vi-garden-editor--design .vi-garden-editor__body.is-analysis-open .vi-garden-heat-map-control { display: block; }
.vi-garden-editor--design .vi-garden-editor__body.is-analysis-open .vi-garden-zone-trigger { display: flex; }

@media (max-width: 1280px) {
    .vi-garden-editor--design .vi-garden-editor__topbar { grid-template-columns: 42px minmax(150px, 190px) minmax(0, 1fr); }
    .vi-garden-editor__topbar.has-workspace-tabs, .vi-garden-editor--design .vi-garden-editor__topbar.has-workspace-tabs { grid-template-columns: 42px minmax(130px, 170px) minmax(400px, 1fr) auto; }
    .vi-garden-editor--design .vi-garden-editor__actions { align-items: center; flex-direction: row; }
    .vi-garden-editor--design .vi-garden-actions__group { max-width: min(680px, 90vw); }
}
@media (max-width: 1050px) {
    .vi-garden-editor__topbar.has-workspace-tabs, .vi-garden-editor--design .vi-garden-editor__topbar.has-workspace-tabs { grid-template-columns: 42px minmax(0, 1fr) auto; }
    .vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: flex-start; }
}
@media (max-width: 1100px) {
    .vi-garden-editor--design .vi-garden-detail-strip { align-items: stretch; flex-wrap: wrap; }
    .vi-garden-editor--design .vi-garden-canvas-options { flex: 1 1 100%; }
    .vi-garden-editor--design .vi-garden-detail-strip > .vi-garden-overview { min-width: 0; flex-basis: 100%; }
}
@media (max-width: 620px) {
    .vi-garden-editor--design .vi-garden-detail-strip > .vi-garden-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .vi-garden-editor--design .vi-garden-sidebar-resizer { display: none; }
}

.vi-garden-editor__body { --vi-tools-width: 164px; --vi-sidebar-width: 260px; display: grid; grid-template-columns: var(--vi-tools-width) 8px minmax(400px, 1fr) 8px var(--vi-sidebar-width); min-height: 680px; }
.vi-garden-tools, .vi-garden-sidebar { padding: 22px; background: rgba(255, 255, 255, .58); }
.vi-garden-tools { min-width: 0; }
.vi-garden-sidebar { display: flex; min-width: 0; flex-direction: column; gap: 18px; max-height: 680px; overflow-y: auto; }
.vi-garden-sidebar-resizer { position: relative; z-index: 4; width: 8px; min-width: 8px; padding: 0; border: 0; outline: 0; background: rgba(217, 225, 217, .52); cursor: col-resize; touch-action: none; }
.vi-garden-sidebar-resizer::after { content: ""; position: absolute; top: 50%; left: 50%; width: 3px; height: 54px; border-radius: 999px; background: rgba(53, 100, 75, .34); transform: translate(-50%, -50%); transition: height .18s ease, background .18s ease, box-shadow .18s ease; }
.vi-garden-sidebar-resizer:hover::after, .vi-garden-sidebar-resizer:focus-visible::after, .vi-garden-editor__body.is-resizing-sidebars .vi-garden-sidebar-resizer::after { height: 82px; background: var(--vi-garden-green); box-shadow: 0 0 0 4px rgba(53, 100, 75, .1); }
.vi-garden-editor__body.is-resizing-sidebars { cursor: col-resize; user-select: none; }
.vi-garden-editor__body.is-resizing-sidebars iframe, .vi-garden-editor__body.is-resizing-sidebars canvas { pointer-events: none; }
.vi-garden-panel { padding: 16px; border: 1px solid var(--vi-garden-line); border-radius: 16px; background: rgba(255, 255, 255, .84); }
.vi-garden-panel__heading { display: flex; flex-direction: column; margin-bottom: 14px; }
.vi-garden-panel__heading span { color: var(--vi-garden-green); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.vi-garden-panel__heading strong { margin-top: 3px; font-size: 17px; text-transform: capitalize; }

.vi-garden-tool-grid { display: grid; gap: 8px; }
.vi-garden-tool-grid button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--vi-garden-ink); cursor: pointer; font: inherit; font-size: 12px; text-align: left; }
.vi-garden-tool-grid button:hover { border-color: var(--vi-garden-line); background: #fff; }
.vi-garden-build-tree { display: grid; gap: 7px; }
.vi-garden-build-branch { overflow: hidden; border: 1px solid rgba(59, 95, 69, .14); border-radius: 11px; background: rgba(245, 248, 243, .66); }
.vi-garden-build-branch > summary { position: relative; display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 39px; padding: 5px 8px; background: rgba(224, 235, 223, .72); color: var(--vi-garden-ink); cursor: pointer; list-style: none; }
.vi-garden-build-branch > summary::-webkit-details-marker { display: none; }
.vi-garden-build-branch > summary::before { content: "›"; position: absolute; margin-left: -3px; color: #718078; font-size: 12px; transform: rotate(0deg); transition: transform .15s ease; }
.vi-garden-build-branch[open] > summary::before { transform: rotate(90deg); }
.vi-garden-build-branch > summary strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.vi-garden-build-branch > summary small { color: #73837a; font-size: 7px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.vi-garden-build-branch > summary .vi-tool-icon, .vi-garden-build-folder { width: 25px; height: 25px; margin-left: 4px; border-radius: 7px; }
.vi-garden-build-folder { position: relative; display: block; background: #d3dfd1; }
.vi-garden-build-folder::before { content: ""; position: absolute; inset: 7px 5px 5px; border-radius: 2px; background: #729078; }
.vi-garden-build-folder::after { content: ""; position: absolute; top: 5px; left: 6px; width: 8px; height: 4px; border-radius: 2px 2px 0 0; background: #729078; }
.vi-garden-build-branch > summary .vi-tool-icon, .vi-garden-build-folder { position: relative; overflow: visible; }
.vi-garden-build-branch > summary .vi-tool-icon > small, .vi-garden-build-folder > small { position: absolute; z-index: 2; top: -5px; right: -5px; display: grid; min-width: 15px; height: 15px; place-items: center; padding: 0 3px; border: 2px solid #e4ede2; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; font: 900 6px/1 "Avenir Next", sans-serif; letter-spacing: 0; }
.vi-garden-build-children { display: grid; gap: 3px; margin: 0 5px 5px 14px; padding: 6px 0 0 7px; border-left: 1px solid rgba(65, 105, 76, .22); }
.vi-garden-build-children.vi-garden-tool-grid { gap: 2px; }
.vi-garden-build-children.vi-garden-tool-grid button { min-width: 0; padding: 6px; border-radius: 8px; font-size: 9px; }
.vi-garden-build-children.vi-garden-tool-grid button .vi-tool-icon { width: 25px; height: 25px; flex: 0 0 25px; }
.vi-garden-build-children.vi-garden-tool-grid button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vi-garden-build-children.vi-garden-tool-grid button[draggable="true"] { cursor: grab; }
.vi-garden-build-children.vi-garden-tool-grid button.is-dragging { opacity: .38; }
.vi-garden-build-branch--plants .vi-garden-build-children { padding-right: 5px; }
.vi-garden-build-branch--plants [data-plant-search] { width: 100%; margin: 0 0 3px; padding: 7px 8px; border: 1px solid var(--vi-garden-line); border-radius: 8px; background: rgba(255,255,255,.84); color: var(--vi-garden-ink); font: 700 9px/1 "Avenir Next", sans-serif; }
.vi-garden-build-branch--plants .vi-garden-plant-results { max-height: 245px; margin-top: 0; padding-right: 2px; }
.vi-garden-build-branch--plants .vi-garden-plant-result { grid-template-columns: 31px minmax(0, 1fr); gap: 6px; padding: 4px; border-radius: 8px; }
.vi-garden-build-branch--plants .vi-garden-plant-result img, .vi-garden-build-branch--plants .vi-garden-plant-result__placeholder { width: 31px; height: 31px; border-radius: 6px; }
.vi-garden-build-branch--plants .vi-garden-plant-result strong { font-size: 8px; }
.vi-garden-build-branch--plants .vi-garden-plant-result small { font-size: 7px; }
.vi-garden-capture-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 18px; padding: 10px; border: 1px solid var(--vi-garden-green); border-radius: 11px; background: #fff; color: var(--vi-garden-moss); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.vi-garden-import-button { margin-top: 7px; border-color: var(--vi-garden-line); }
.vi-camera-icon { width: 15px; height: 11px; border: 2px solid currentColor; border-radius: 3px; }
.vi-camera-icon::before { content: ""; display: block; width: 4px; height: 4px; margin: 2px auto; border: 1px solid currentColor; border-radius: 50%; }
.vi-garden-reference-controls { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vi-garden-line); }
.vi-garden-reference-controls label { color: #68786f; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vi-garden-reference-controls input { width: 100%; margin: 8px 0; accent-color: var(--vi-garden-green); }
.vi-garden-reference-controls button { padding: 0; border: 0; background: transparent; color: #a43c32; cursor: pointer; font: inherit; font-size: 10px; font-weight: 700; }
.vi-garden-condition-panel { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--vi-garden-line); }
.vi-garden-condition-panel label { display: block; margin-top: 8px; color: #68786f; font-size: 9px; font-weight: 800; }
.vi-garden-condition-panel select { width: 100%; margin-top: 4px; padding: 7px 8px; border: 1px solid var(--vi-garden-line); border-radius: 8px; background: #fff; color: var(--vi-garden-ink); font: 700 10px/1 "Avenir Next", sans-serif; }
.vi-garden-solar-panel { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--vi-garden-line); }
.vi-garden-solar-panel label { display: block; margin-top: 8px; color: #68786f; font-size: 8px; font-weight: 900; }
.vi-garden-solar-panel input { width: 100%; margin-top: 4px; padding: 7px 6px; border: 1px solid var(--vi-garden-line); border-radius: 8px; background: #fff; color: var(--vi-garden-ink); font: 700 9px/1 "Avenir Next", sans-serif; }
.vi-garden-solar-coordinates, .vi-garden-solar-time { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.vi-garden-solar-panel button { width: 100%; margin-top: 8px; padding: 8px 6px; border: 1px solid var(--vi-garden-line); border-radius: 9px; background: #fff; color: var(--vi-garden-moss); cursor: pointer; font: 800 8px/1 "Avenir Next", sans-serif; }
.vi-garden-solar-panel button[data-use-location] { border-color: var(--vi-garden-green); }
.vi-garden-solar-panel button:disabled { cursor: wait; opacity: .55; }
.vi-garden-solar-status { min-height: 25px; margin-top: 9px; padding: 7px 8px; border-radius: 8px; background: rgba(203, 227, 212, .52); color: var(--vi-garden-green); font-size: 8px; font-weight: 800; line-height: 1.35; }
.vi-tool-icon { flex: 0 0 28px; height: 28px; border-radius: 8px; background: #9dc58f; }
.vi-tool-icon--bed { border-radius: 45%; background: #96704c; }
.vi-tool-icon--container { border-radius: 50%; background: radial-gradient(circle, #74936d 0 42%, #b97e54 44%); }
.vi-tool-icon--path { border-radius: 4px; background: repeating-linear-gradient(45deg, #cbbca4, #cbbca4 4px, #e0d5c4 4px, #e0d5c4 8px); }
.vi-tool-icon--patio { border-radius: 4px; background: repeating-linear-gradient(90deg, #b8b8ad, #b8b8ad 5px, #d4d4ca 5px, #d4d4ca 7px); }
.vi-tool-icon--structure { border: 2px solid #637267; background: repeating-linear-gradient(90deg, transparent 0 6px, #637267 6px 8px); }
.vi-tool-icon--label { position: relative; width: 28px; height: 18px; border-radius: 3px; background: #f4efd9; box-shadow: 0 0 0 1px #a39270; }
.vi-tool-icon--water { border-radius: 50%; background: #91cbd0; }
.vi-tool-icon--tree { border-radius: 50%; background: #3f7251; box-shadow: inset 0 0 0 6px #6d9877; }
.vi-tool-icon--irrigation { border: 5px solid #6cb8cb; border-radius: 50%; background: #d9f1f4; box-shadow: inset 0 0 0 2px #367b8d; }
.vi-tool-icon--lighting { border-radius: 50%; background: radial-gradient(circle, #fff7b8 0 24%, #e6bd4f 26% 44%, #46564e 47%); box-shadow: 0 0 0 2px rgba(226, 184, 67, .2); }
.vi-tool-icon--power { border: 3px solid #59645e; background: radial-gradient(circle at 35% 50%, #59645e 0 2px, transparent 3px), radial-gradient(circle at 65% 50%, #59645e 0 2px, transparent 3px), #e6e8df; }
.vi-tool-icon--drainage { border: 2px solid #66736d; border-radius: 50%; background: repeating-linear-gradient(90deg, #8e9a94 0 2px, #d6ddd8 2px 5px); }

.vi-garden-workspace { min-width: 0; padding: 22px; background: #e9ede4; }
.vi-garden-design-switch { display: flex; padding: 3px; border: 1px solid var(--vi-garden-line); border-radius: 999px; background: rgba(255, 255, 255, .72); }
.vi-garden-design-switch button { padding: 7px 11px; border: 0; border-radius: 999px; background: transparent; color: #68786f; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-garden-design-switch button.is-active { background: var(--vi-garden-moss); color: #fff; box-shadow: 0 3px 9px rgba(38, 72, 51, .2); }
.vi-garden-overlap-control { display: flex; align-items: center; gap: 7px; }
.vi-garden-overlap-control strong { color: #718078; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.vi-garden-overlap-control button { padding: 10px 12px; border: 1px solid var(--vi-garden-line); border-radius: 999px; background: rgba(255, 255, 255, .72); color: #68786f; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-garden-overlap-control button.is-active { border-color: #c58c31; background: #d69a36; color: #fff; box-shadow: 0 3px 9px rgba(117, 78, 21, .2); }
.vi-garden-grid-settings { position: relative; flex: 0 0 auto; }
.vi-garden-grid-settings[open] { z-index: 120; }
.vi-garden-grid-settings summary { padding: 10px 13px; border: 1px solid var(--vi-garden-line); border-radius: 999px; background: rgba(255, 255, 255, .72); color: #506159; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; list-style: none; }
.vi-garden-grid-settings summary::-webkit-details-marker { display: none; }
.vi-garden-grid-settings > div { position: absolute; top: calc(100% + 8px); right: 0; display: grid; gap: 9px; width: 230px; padding: 13px; border: 1px solid rgba(70, 96, 77, .18); border-radius: 14px; background: rgba(245, 248, 243, .96); box-shadow: 0 18px 42px rgba(28, 52, 35, .2); backdrop-filter: blur(16px); }
.vi-garden-grid-settings > div label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #5d6f65; font-size: 8px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.vi-garden-grid-settings select, .vi-garden-grid-settings input[type="number"] { min-width: 82px; padding: 7px; border: 1px solid var(--vi-garden-line); border-radius: 8px; background: #fff; color: var(--vi-garden-ink); font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-garden-grid-settings input[type="range"] { width: 104px; accent-color: var(--vi-garden-green); }
.vi-garden-grid-settings input[type="color"] { width: 42px; height: 30px; padding: 2px; border: 1px solid var(--vi-garden-line); border-radius: 8px; background: #fff; }
.vi-garden-grid-settings .vi-garden-grid-toggle { justify-content: flex-start; padding: 9px; border-radius: 9px; background: rgba(87, 133, 99, .09); color: var(--vi-garden-moss); }
.vi-garden-grid-settings .vi-garden-grid-toggle input { width: auto; accent-color: var(--vi-garden-green); }
.vi-garden-grid-settings label span { display: flex; align-items: center; gap: 5px; margin: 0; color: #5d6f65; }
.vi-garden-grid-settings input:disabled { cursor: not-allowed; opacity: .42; }
.vi-garden-heat-map-control { position: relative; z-index: 60; width: max-content; min-width: 152px; max-width: 100%; }
.vi-garden-heat-map-control > summary { display: grid; min-height: 34px; grid-template-columns: auto auto auto; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid var(--vi-garden-line); border-radius: 999px; background: rgba(255, 255, 255, .78); color: #718078; cursor: pointer; list-style: none; box-shadow: 0 4px 12px rgba(35, 57, 42, .04); }
.vi-garden-heat-map-control > summary::-webkit-details-marker { display: none; }
.vi-garden-heat-map-control > summary::after { content: "⌄"; color: #789083; font-size: 9px; transition: transform .18s ease; }
.vi-garden-heat-map-control[open] > summary::after { transform: rotate(180deg); }
.vi-garden-heat-map-control > summary strong { font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.vi-garden-heat-map-control > summary span { color: var(--vi-garden-moss); font-size: 8px; font-weight: 900; text-align: right; white-space: nowrap; }
.vi-garden-heat-map-control > div { position: absolute; top: calc(100% + 6px); left: 0; display: grid; width: max(204px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 5px; border: 1px solid rgba(64, 95, 72, .16); border-radius: 13px; background: rgba(248, 250, 246, .97); box-shadow: 0 16px 38px rgba(28, 52, 35, .18); backdrop-filter: blur(18px); }
.vi-garden-heat-map-control button { min-width: 0; padding: 7px 6px; border: 0; border-radius: 8px; background: transparent; color: #68786f; cursor: pointer; font: 800 8px/1 "Avenir Next", sans-serif; text-align: left; }
.vi-garden-heat-map-control button:hover { background: rgba(222, 234, 220, .72); color: var(--vi-garden-moss); }
.vi-garden-heat-map-control button.is-active { background: linear-gradient(90deg, #2476bc, #45a95a, #e2b52e, #d84b3f); color: #fff; box-shadow: 0 3px 9px rgba(80, 72, 38, .2); }
.vi-garden-heat-map-control button[data-heat-map="price"].is-active { background: linear-gradient(90deg, #39a94c, #e2b52e, #d84b3f); }
.vi-garden-heat-map-control button[data-heat-map="off"].is-active { background: #7b857f; }
.vi-season-simulator { display: grid; min-width: 142px; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 5px; padding: 4px 6px; border: 1px solid var(--vi-garden-line); border-radius: 16px; background: rgba(255, 255, 255, .72); }
.vi-season-simulator > strong { color: #718078; font-size: 7px; text-transform: uppercase; }
.vi-season-simulator input { width: 62px; padding: 0; accent-color: var(--vi-garden-green); }
.vi-season-simulator span { min-width: 24px; color: var(--vi-garden-ink); font-size: 8px; font-weight: 900; }
.vi-season-simulator button { padding: 5px 7px; border: 0; border-radius: 999px; background: var(--vi-garden-mint); color: var(--vi-garden-moss); cursor: pointer; font: 800 7px/1 "Avenir Next", sans-serif; }
.vi-garden-group-control { display: flex; align-items: center; gap: 7px; padding-left: 4px; }
.vi-garden-group-control > strong { min-width: 58px; color: #718078; font-size: 8px; letter-spacing: .04em; text-align: right; text-transform: uppercase; }
.vi-garden-group-control > div { display: flex; padding: 3px; border: 1px solid var(--vi-garden-line); border-radius: 999px; background: rgba(255, 255, 255, .72); }
.vi-garden-group-control button { padding: 7px 10px; border: 0; border-radius: 999px; background: transparent; color: #4d6758; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-garden-group-control button:not(:disabled):hover { background: #e8f1e9; color: var(--vi-garden-moss); }
.vi-garden-group-control button:disabled { cursor: default; opacity: .38; }
.vi-garden-heat-map-legend { display: grid; min-height: 34px; grid-template-columns: auto auto minmax(72px, 150px) auto auto; align-items: center; gap: 6px; width: fit-content; max-width: 100%; margin: 0; padding: 6px 9px; border: 1px solid rgba(83, 104, 88, .16); border-radius: 999px; background: rgba(255, 255, 255, .72); color: #536159; box-shadow: 0 4px 12px rgba(35, 57, 42, .04); backdrop-filter: blur(10px); }
.vi-garden-heat-map-legend[hidden] { display: none; }
.vi-garden-heat-map-legend strong { color: var(--vi-garden-ink); font-size: 9px; white-space: nowrap; }
.vi-garden-heat-map-legend span, .vi-garden-heat-map-legend small { font-size: 8px; font-weight: 800; white-space: nowrap; }
.vi-garden-heat-map-legend i { display: block; width: 100%; height: 7px; border-radius: 999px; background: linear-gradient(90deg, hsl(120 72% 48%), hsl(60 72% 48%), hsl(0 72% 48%)); }
.vi-garden-heat-map-legend[data-heat-scale="environment"] i { background: linear-gradient(90deg, hsl(210 72% 48%), hsl(105 72% 48%), hsl(50 72% 50%), hsl(0 72% 48%)); }
.vi-garden-heat-map-legend.is-empty { grid-template-columns: auto auto; }
.vi-garden-heat-map-legend.is-empty i, .vi-garden-heat-map-legend.is-empty [data-heat-max], .vi-garden-heat-map-legend.is-empty small { display: none; }
.vi-garden-canvas-options > .vi-garden-heat-map-legend { order: 2; flex: 0 1 auto; }
@media (max-width: 720px) {
    .vi-garden-canvas-options > .vi-garden-heat-map-legend small { display: none; }
    .vi-garden-heat-map-legend { grid-template-columns: auto auto minmax(54px, 1fr) auto; }
}
@media (max-width: 480px) {
    .vi-garden-heat-map-control { width: min(180px, 100%); }
    .vi-garden-heat-map-control > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
    .vi-garden-heat-map-control > summary span { overflow: hidden; text-overflow: ellipsis; }
}
.vi-garden-zone-trigger { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; padding: 9px 10px 9px 12px; border: 1px solid rgba(63, 100, 73, .18); border-radius: 999px; background: rgba(255, 255, 255, .72); color: #587064; cursor: pointer; font: 800 8px/1 "Avenir Next", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.vi-garden-zone-trigger strong { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 50%; background: rgba(60, 101, 71, .11); color: var(--vi-garden-moss); font-size: 8px; }
.vi-garden-zone-trigger.is-active { border-color: rgba(51, 110, 68, .34); background: var(--vi-garden-moss); color: #fff; box-shadow: 0 5px 14px rgba(34, 78, 46, .16); }
.vi-garden-zone-trigger.is-active strong { background: rgba(255, 255, 255, .18); color: #fff; }
.vi-zone-intelligence { margin: 0 0 12px; padding: 12px; border: 1px solid rgba(64, 99, 73, .16); border-radius: 16px; background: linear-gradient(135deg, rgba(248, 251, 246, .9), rgba(225, 237, 226, .76)); box-shadow: 0 10px 28px rgba(33, 62, 41, .07); backdrop-filter: blur(18px); }
.vi-zone-intelligence[hidden] { display: none; }
.vi-zone-intelligence__header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.vi-zone-intelligence__header > div:first-child { display: grid; gap: 2px; }
.vi-zone-intelligence__header > div:first-child span { color: var(--vi-garden-green); font-size: 7px; font-weight: 900; letter-spacing: .14em; }
.vi-zone-intelligence__header > div:first-child strong { color: var(--vi-garden-ink); font-size: 15px; }
.vi-zone-intelligence__header > div:first-child small { color: #708078; font-size: 8px; font-weight: 700; }
.vi-zone-intelligence__summary { display: flex; align-items: center; gap: 6px; }
.vi-zone-intelligence__summary > strong { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(52, 107, 69, .18); border-radius: 50%; background: #fff; color: var(--vi-garden-moss); font-size: 13px; box-shadow: 0 4px 12px rgba(42, 75, 50, .08); }
.vi-zone-intelligence__summary > span { margin-right: 5px; color: #77847d; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.vi-zone-intelligence__summary > b { padding: 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .66); color: #617269; font-size: 7px; white-space: nowrap; }
.vi-zone-intelligence__summary > button { display: grid; width: 27px; height: 27px; place-items: center; padding: 0; border: 1px solid rgba(65, 93, 73, .16); border-radius: 50%; background: rgba(255, 255, 255, .7); color: #5c6d63; cursor: pointer; }
.vi-zone-grid { display: grid; grid-auto-columns: minmax(210px, 1fr); grid-auto-flow: column; gap: 8px; padding: 1px 1px 7px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-color: rgba(57, 101, 69, .28) transparent; scrollbar-width: thin; }
.vi-zone-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 10px; border: 1px solid rgba(68, 100, 76, .13); border-radius: 12px; background: rgba(255, 255, 255, .72); scroll-snap-align: start; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.vi-zone-card:hover, .vi-zone-card.is-active { border-color: rgba(46, 111, 64, .42); box-shadow: 0 7px 18px rgba(37, 75, 47, .1); transform: translateY(-1px); }
.vi-zone-card[data-zone-status="warning"] { border-left: 3px solid #c95f4f; }
.vi-zone-card[data-zone-status="caution"] { border-left: 3px solid #d19c3f; }
.vi-zone-card[data-zone-status="good"] { border-left: 3px solid #4d9b61; }
.vi-zone-card__main { display: grid; min-width: 0; gap: 2px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.vi-zone-card__main span { color: #77857d; font-size: 7px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.vi-zone-card__main strong { overflow: hidden; color: var(--vi-garden-ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.vi-zone-card__main small { color: #68786f; font-size: 8px; font-weight: 700; }
.vi-zone-card__score { display: grid; width: 43px; justify-items: center; align-content: center; }
.vi-zone-card__score > strong { color: var(--vi-garden-moss); font-size: 15px; line-height: 1; }
.vi-zone-card__score > span { color: #7b8881; font-size: 6px; font-weight: 900; text-transform: uppercase; }
.vi-zone-card__score > i { width: 35px; height: 3px; margin-top: 4px; overflow: hidden; border-radius: 999px; background: #dce4dc; }
.vi-zone-card__score > i::after { content: ""; display: block; width: var(--zone-score); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d06b4f, #d3ad3f, #43945c); }
.vi-zone-card__metrics { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.vi-zone-card__metrics button { display: grid; gap: 1px; padding: 5px 3px; border: 0; border-radius: 7px; background: rgba(72, 112, 82, .06); color: #65756c; cursor: pointer; text-align: left; }
.vi-zone-card__metrics button:hover { background: rgba(72, 112, 82, .13); }
.vi-zone-card__metrics span { font-size: 6px; font-weight: 900; text-transform: uppercase; }
.vi-zone-card__metrics strong { color: var(--vi-garden-ink); font-size: 8px; }
.vi-zone-card__profile { display: flex; grid-column: 1 / -1; min-width: 0; align-items: center; gap: 3px; overflow: hidden; }
.vi-zone-card__profile > span { margin-right: auto; color: #738179; font-size: 6px; font-weight: 900; text-transform: uppercase; white-space: nowrap; }
.vi-zone-card__profile i { overflow: hidden; padding: 3px 5px; border-radius: 999px; background: rgba(61, 101, 72, .08); color: #607168; font-size: 6px; font-style: normal; font-weight: 800; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; }
.vi-zone-findings { margin-top: 5px; border-top: 1px solid rgba(66, 99, 75, .12); }
.vi-zone-findings summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px 2px; color: #617269; cursor: pointer; list-style: none; }
.vi-zone-findings summary::-webkit-details-marker { display: none; }
.vi-zone-findings summary span { font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.vi-zone-findings summary strong { font-size: 8px; }
.vi-zone-findings > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding-top: 8px; }
.vi-zone-finding { display: flex; min-width: 0; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid rgba(71, 102, 79, .12); border-radius: 10px; background: rgba(255, 255, 255, .62); }
.vi-zone-finding[data-severity="warning"] { border-left: 3px solid #c95f4f; }
.vi-zone-finding[data-severity="caution"] { border-left: 3px solid #d19c3f; }
.vi-zone-finding[data-severity="info"] { border-left: 3px solid #4f8da6; }
.vi-zone-finding > div { display: grid; min-width: 0; gap: 2px; }
.vi-zone-finding > div > span { width: fit-content; padding: 3px 5px; border-radius: 999px; background: rgba(197, 104, 73, .11); color: #9e523e; font-size: 6px; font-weight: 900; text-transform: uppercase; }
.vi-zone-finding[data-severity="info"] > div > span { background: rgba(73, 133, 157, .11); color: #41758a; }
.vi-zone-finding > div > strong { color: var(--vi-garden-ink); font-size: 9px; }
.vi-zone-finding p { margin: 0; color: #67776e; font-size: 8px; line-height: 1.35; }
.vi-zone-finding__evidence { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.vi-zone-finding__evidence i { max-width: 100%; overflow: hidden; padding: 3px 5px; border: 1px solid rgba(62, 99, 72, .1); border-radius: 999px; background: rgba(65, 107, 76, .06); color: #5e7165; font-size: 6px; font-style: normal; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.vi-zone-finding small { color: #87918b; font-size: 7px; font-weight: 700; }
.vi-zone-finding footer { display: grid; flex: 0 0 auto; gap: 4px; }
.vi-zone-finding footer button { padding: 6px 8px; border: 1px solid rgba(57, 101, 69, .16); border-radius: 999px; background: var(--vi-garden-moss); color: #fff; cursor: pointer; font: 800 7px/1 "Avenir Next", sans-serif; white-space: nowrap; }
.vi-zone-finding footer button.is-target { background: rgba(255, 255, 255, .76); color: var(--vi-garden-moss); }
.vi-zone-empty { display: grid; gap: 3px; padding: 14px; border: 1px dashed rgba(62, 100, 72, .2); border-radius: 11px; color: #68786f; }
.vi-zone-empty strong { color: var(--vi-garden-ink); font-size: 10px; }
.vi-zone-empty span { font-size: 8px; }
.vi-garden-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.vi-garden-overview div { display: flex; min-width: 0; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid rgba(80, 108, 87, .15); border-radius: 11px; background: rgba(255, 255, 255, .68); }
.vi-garden-overview span { overflow: hidden; color: #718078; font-size: 8px; font-weight: 900; letter-spacing: .07em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.vi-garden-overview strong { font-size: 15px; }
.vi-garden-canvas-wrap { position: relative; display: grid; align-items: start; justify-items: safe center; min-height: 520px; padding: 24px; overflow: auto; border: 1px solid #d2d9ce; border-radius: 18px; background: rgba(255, 255, 255, .45); }
.vi-garden-mini-3d { position: absolute; z-index: 28; top: 14px; right: auto; left: 14px; width: 190px; height: var(--vi-mini-map-height, 152px); overflow: hidden; border: 1px solid rgba(255, 255, 255, .62); border-radius: 14px; background: rgba(20, 42, 29, .92); box-shadow: 0 15px 38px rgba(19, 43, 27, .28); transform-origin: top left; backdrop-filter: blur(14px); transition: width .4s cubic-bezier(.22, .8, .24, 1), height .4s cubic-bezier(.22, .8, .24, 1), box-shadow .4s ease; }
.vi-garden-mini-3d.is-expanded { width: min(380px, calc(100% - 28px)); height: var(--vi-mini-map-large-height, 304px); box-shadow: 0 24px 60px rgba(19, 43, 27, .36); }
.vi-garden-mini-3d.is-compressed { width: 190px; height: 41px; box-shadow: 0 10px 26px rgba(19, 43, 27, .24); }
.vi-garden-mini-3d > header { position: absolute; z-index: 3; top: 8px; right: 8px; left: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: auto; }
.vi-garden-mini-3d > header strong { padding: 6px 8px; border-radius: 999px; background: rgba(20, 42, 29, .78); color: #e5eee7; font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.vi-garden-mini-3d > header button { display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: rgba(20, 42, 29, .8); color: #fff; cursor: pointer; font: 900 12px/1 sans-serif; pointer-events: auto; }
.vi-garden-mini-3d > [data-mini-3d-stage] { position: absolute; z-index: 1; inset: 0; opacity: 1; transition: opacity .22s ease, visibility 0s linear; }
.vi-garden-mini-3d.is-compressed > [data-mini-3d-stage] { visibility: hidden; opacity: 0; transition: opacity .18s ease, visibility 0s linear .18s; }
.vi-garden-mini-3d__loading { display: grid; place-items: center; height: 100%; color: #dce9df; font-size: 9px; font-weight: 800; }
.vi-garden-mini-3d__loading.is-error { color: #ffd0c8; }
.vi-garden-canvas { position: relative; width: min(100%, 720px); height: auto; max-height: none; overflow: hidden; border: 2px solid var(--vi-theme-border, #667c69); border-radius: 7px; background-color: var(--vi-theme-canvas, #f7f7ef); background-image: linear-gradient(var(--vi-theme-grid, rgba(76, 105, 82, .13)) 1px, transparent 1px), linear-gradient(90deg, var(--vi-theme-grid, rgba(76, 105, 82, .13)) 1px, transparent 1px); background-size: var(--vi-grid-width, 10%) var(--vi-grid-depth, 10%); box-shadow: 0 16px 40px rgba(42, 65, 49, .12); color: var(--vi-theme-ink, #183225); touch-action: none; transition: background-color .24s ease, border-color .24s ease; }
.vi-garden-canvas.has-sun-study .vi-garden-object { filter: drop-shadow(var(--vi-shadow-x) var(--vi-shadow-y) 3px rgba(30, 43, 33, var(--vi-sun-strength))); }
.vi-garden-sun-indicator { position: absolute; z-index: 20; display: flex; align-items: center; gap: 3px; color: #8b5f18; pointer-events: none; transform: translate(-50%, -50%); }
.vi-garden-sun-indicator span { display: block; width: 23px; height: 23px; border: 4px solid rgba(255, 255, 255, .92); border-radius: 50%; background: #f6bd38; box-shadow: 0 0 0 2px #d69716, 0 0 20px rgba(246, 189, 56, .55); }
.vi-garden-sun-indicator strong { padding: 4px 6px; border-radius: 999px; background: rgba(35, 48, 39, .82); color: #fff; font-size: 8px; }
.vi-garden-north-indicator { position: absolute; z-index: 19; top: 12px; left: 12px; display: flex; width: 54px; flex-direction: column; align-items: center; gap: 3px; padding: 5px; border: 1px solid rgba(23, 49, 79, .25); border-radius: 13px; background: rgba(255, 255, 255, .88); color: #17314f; cursor: grab; font-family: "Avenir Next", sans-serif; box-shadow: 0 5px 14px rgba(23, 49, 79, .12); touch-action: none; backdrop-filter: blur(8px); }
.vi-garden-north-indicator:active { cursor: grabbing; }
.vi-garden-north-indicator:focus-visible { outline: 3px solid rgba(40, 119, 212, .35); outline-offset: 2px; }
.vi-garden-north-indicator > span { position: relative; display: block; width: 38px; height: 38px; border: 1px solid #a9b5ad; border-radius: 50%; background: radial-gradient(circle, #fff 0 26%, #edf1eb 27% 100%); }
.vi-garden-north-indicator i { position: absolute; inset: 3px; display: block; transform-origin: 50% 50%; }
.vi-garden-north-indicator i::before { content: ""; position: absolute; top: 0; left: 50%; border-right: 5px solid transparent; border-bottom: 15px solid #d45d3e; border-left: 5px solid transparent; transform: translateX(-50%); }
.vi-garden-north-indicator i::after { content: ""; position: absolute; bottom: 0; left: 50%; border-top: 15px solid #17314f; border-right: 5px solid transparent; border-left: 5px solid transparent; transform: translateX(-50%); }
.vi-garden-north-indicator b { position: absolute; top: -2px; left: 50%; color: #b6462f; font-size: 7px; transform: translateX(-50%); }
.vi-garden-north-indicator small { color: #52665a; font-size: 7px; font-weight: 900; }
.vi-garden-reference { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.vi-garden-reference img { width: 100%; height: 100%; object-fit: fill; }
.vi-garden-reference svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vi-garden-reference polygon { fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: .7; stroke-dasharray: 2 1; vector-effect: non-scaling-stroke; }
.vi-garden-canvas-help { margin: 12px 0 0; color: #68786f; font-size: 11px; text-align: center; }
.vi-garden-inline-3d { position: relative; height: clamp(560px, 72vh, 880px); min-height: 560px; overflow: hidden; border: 1px solid #cbd5ca; border-radius: 18px; background: #dce6da; box-shadow: 0 16px 40px rgba(42, 65, 49, .12); }
.vi-garden-inline-3d[hidden] { display: none; }
.vi-garden-3d-loading { display: grid; place-items: center; height: 100%; color: var(--vi-garden-moss); font-size: 12px; font-weight: 800; }
.vi-garden-3d-loading.is-error { color: #a43c32; }

.vi-garden-object { position: absolute; display: grid; place-items: center; min-width: 18px; min-height: 18px; overflow: hidden; border: 0; border-radius: 6px; background: transparent; color: var(--vi-theme-ink, #183225); cursor: grab; font: 700 10px/1.1 "Avenir Next", sans-serif; touch-action: none; transition: box-shadow .15s ease; }
.vi-garden-object::before { content: ""; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--vi-theme-ink, #183225) 28%, transparent); border-radius: inherit; background: var(--vi-theme-lawn, #94bd82); clip-path: var(--vi-object-clip, none); }
.vi-garden-object > .vi-garden-object__label { z-index: 1; max-width: 92%; padding: 3px 5px; overflow: hidden; border-radius: 5px; background: var(--vi-theme-label, rgba(255, 255, 255, .76)); color: var(--vi-theme-label-ink, var(--vi-theme-ink, #183225)); text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.vi-garden-object.is-selected { z-index: 7; overflow: visible; outline: 3px solid #fff; box-shadow: 0 0 0 6px #e39b2f, 0 0 0 10px rgba(27, 67, 42, .28), 0 12px 26px rgba(21, 48, 34, .3); animation: vi-garden-selected-pulse 2.2s ease-in-out infinite; }
.vi-garden-object.is-linked-hover { z-index: 6; overflow: visible; outline: 2px solid rgba(255, 255, 255, .94); animation: vi-garden-hover-pulse 1.9s ease-in-out infinite; }
.vi-garden-object.is-selected.is-linked-hover { z-index: 7; outline: 3px solid #fff; animation: vi-garden-selected-pulse 2.2s ease-in-out infinite; }
.vi-garden-object.is-selected > .vi-garden-object__label { background: #173f2a; color: #fff; box-shadow: 0 2px 7px rgba(18, 48, 31, .28); }
.vi-garden-object.is-group-selected { z-index: 4; outline: 2px dashed rgba(255, 255, 255, .95); box-shadow: 0 0 0 4px #55a66a, 0 8px 18px rgba(21, 48, 34, .18); }
.vi-garden-object.is-dragging { cursor: grabbing; transition: none; }
.vi-garden-object.is-read-only { cursor: default; }
.vi-garden-object.is-locked { cursor: not-allowed; opacity: .84; }
.vi-garden-object.is-underground-object:not(.is-selected):not(.is-linked-hover) { outline: 2px dashed rgba(42, 91, 86, .68); outline-offset: -3px; filter: saturate(.72) opacity(.82); }
.vi-garden-resize-handle, .vi-garden-rotate-handle { position: absolute; z-index: 9; display: block; width: 10px; height: 10px; padding: 0; border: 2px solid #2877d4; border-radius: 1px; background: #fff; box-shadow: 0 1px 4px rgba(14, 48, 88, .25); pointer-events: auto; }
.vi-garden-resize-handle.is-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.vi-garden-resize-handle.is-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.vi-garden-resize-handle.is-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.vi-garden-resize-handle.is-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.vi-garden-rotate-handle { top: -31px; left: 50%; width: 13px; height: 13px; border-radius: 50%; cursor: grab; transform: translateX(-50%); }
.vi-garden-rotate-handle::after { content: ""; position: absolute; top: 11px; left: 50%; width: 2px; height: 16px; background: #2877d4; transform: translateX(-50%); }
.vi-garden-object__dimensions { position: absolute; z-index: 8; top: -34px; left: 0; width: max-content; max-width: none; padding: 5px 8px; border-radius: 5px; background: #17314f; color: #fff; font: 800 8px/1 "Avenir Next", sans-serif; pointer-events: none; white-space: nowrap; transform: translateY(-100%); }
.vi-garden-object--bed { border-radius: 18px; }
.vi-garden-object--bed::before { background: repeating-radial-gradient(circle at 20% 30%, var(--vi-theme-bed-accent, #728c52) 0 3px, transparent 4px 16px), var(--vi-theme-bed, #8b6846); }
.vi-garden-object--container { min-width: 6px; min-height: 6px; border-radius: 50%; }
.vi-garden-object--container.is-square-container { border-radius: 7px; }
.vi-garden-object--container::before { border: clamp(2px, .11em, 6px) solid #7d5036; background: radial-gradient(circle at 38% 28%, #b97e55 0 7%, #8d5a3d 38%, #68412e 76%, #4d3125 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.13), inset 0 -7px 10px rgba(52,27,18,.22); }
.vi-garden-object--container::after { content: ""; position: absolute; inset: 17%; border: clamp(2px, .08em, 5px) solid #9c6748; border-radius: inherit; background-color: #4a3828; background-image: radial-gradient(circle at 18% 28%, #806348 0 3%, transparent 4%), radial-gradient(circle at 72% 62%, #2f281f 0 2.5%, transparent 3.5%), radial-gradient(circle at 48% 45%, #6b523d 0 2%, transparent 3%), radial-gradient(circle at 84% 22%, #947054 0 1.8%, transparent 2.8%); background-size: 17px 15px, 19px 18px, 13px 14px, 23px 20px; box-shadow: inset 0 2px 5px rgba(25,18,12,.38), 0 0 0 1px rgba(55,31,20,.28); pointer-events: none; }
.vi-garden-object--container.is-square-container::after { border-radius: 3px; }
.vi-garden-object--path::before { background: repeating-linear-gradient(45deg, var(--vi-theme-path, #c9baa3), var(--vi-theme-path, #c9baa3) 8px, var(--vi-theme-path-accent, #e0d4c2) 8px, var(--vi-theme-path-accent, #e0d4c2) 16px); }
.vi-garden-object--patio::before { background: repeating-linear-gradient(90deg, var(--vi-theme-patio, #aaa99f), var(--vi-theme-patio, #aaa99f) 18px, var(--vi-theme-patio-accent, #cecdc3) 18px, var(--vi-theme-patio-accent, #cecdc3) 20px); }
.vi-garden-object--structure::before { border: 3px double var(--vi-theme-border, #5d6c63); background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 14px, rgba(0,0,0,.1) 14px 17px), var(--vi-theme-structure, #c5d1c5); }
.vi-garden-object--label { border-radius: 3px; color: var(--vi-theme-label-ink, #4d493b); box-shadow: 0 2px 4px rgba(57, 53, 40, .15); }
.vi-garden-object--label::before { background: var(--vi-theme-label, #f5efd7); }
.vi-garden-object--water::before { background: repeating-radial-gradient(ellipse at center, color-mix(in srgb, var(--vi-theme-water, #83c3cb) 72%, white) 0 7px, var(--vi-theme-water, #83c3cb) 8px 11px); }
.vi-garden-object--water.is-animated-water::before { background-image: radial-gradient(ellipse at 28% 32%, rgba(255,255,255,.38) 0 2%, transparent 9%), repeating-radial-gradient(ellipse at center, color-mix(in srgb, var(--vi-theme-water, #83c3cb) 72%, white) 0 7px, var(--vi-theme-water, #83c3cb) 8px 11px); background-position: 20% 35%, center; background-size: 58% 48%, auto; animation: vi-garden-water-ripple 6.5s ease-in-out infinite alternate; }
@keyframes vi-garden-water-ripple {
    0% { background-position: 8% 28%, center; filter: brightness(.98) saturate(.96); }
    50% { background-position: 58% 62%, center; filter: brightness(1.04) saturate(1.03); }
    100% { background-position: 92% 38%, center; filter: brightness(1.01) saturate(.98); }
}
@media (prefers-reduced-motion: reduce) {
    .vi-garden-object--water.is-animated-water::before { animation: none; }
}
.vi-garden-object--tree { border-radius: 50%; }
.vi-garden-object--tree::before { background: radial-gradient(circle, #87aa78 0 24%, #416f4a 25% 65%, #2e5739 66%); }
.vi-garden-object--irrigation { border-radius: 50%; }
.vi-garden-object--irrigation::before { border: 3px solid #397f91; background: radial-gradient(circle, #dff6f8 0 18%, #69b5c7 20% 45%, #2f7182 47% 54%, #b8dfe5 56%); }
.vi-garden-object--lighting { border-radius: 50%; }
.vi-garden-object--lighting::before { border: 3px solid #47574f; background: radial-gradient(circle, #fff8bd 0 30%, #e0b948 32% 48%, #43534b 50%); box-shadow: 0 0 12px rgba(230, 190, 74, .46); }
.vi-garden-object--power { border-radius: 5px; }
.vi-garden-object--power::before { border: 3px solid #56635c; background: radial-gradient(circle at 35% 52%, #59665f 0 5%, transparent 6%), radial-gradient(circle at 65% 52%, #59665f 0 5%, transparent 6%), #e4e8df; }
.vi-garden-object--drainage { border-radius: 50%; }
.vi-garden-object--drainage::before { border: 3px solid #5d6b64; background: repeating-linear-gradient(90deg, #74817b 0 5%, #c3cbc6 5% 12%); }
.vi-garden-object--plant { border-radius: 50%; }
.vi-garden-object--plant::before { background: #dce9d2; }
.vi-garden-object--plant img { position: absolute; z-index: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; pointer-events: none; }
.vi-garden-object--plant[data-season-state="dormant"] img { filter: saturate(.28) sepia(.16); opacity: .55; }
.vi-garden-object--plant[data-season-state="sowing"] { filter: saturate(.55); opacity: .48; }
.vi-garden-object--plant[data-season-state="planting"] img { filter: saturate(.72); opacity: .78; }
.vi-garden-object--plant[data-season-state="flower"] { box-shadow: 0 0 0 4px rgba(239, 181, 189, .35), 0 0 18px rgba(224, 139, 157, .28); }
.vi-garden-object--plant[data-season-state="harvest"] { box-shadow: 0 0 0 4px rgba(224, 170, 71, .3); }
.vi-garden-object__heat-overlay { position: absolute; z-index: 1; inset: 0; border: 3px solid color-mix(in srgb, var(--vi-heat-colour) 78%, white); border-radius: inherit; background: color-mix(in srgb, var(--vi-heat-colour) 64%, transparent); box-shadow: inset 0 0 18px color-mix(in srgb, var(--vi-heat-colour) 72%, transparent), 0 0 12px color-mix(in srgb, var(--vi-heat-colour) 42%, transparent); pointer-events: none; }
.vi-garden-object__heat-price { position: absolute; z-index: 3; right: 3px; bottom: 3px; padding: 3px 5px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; background: rgba(28, 39, 32, .82); color: #fff; font-size: 7px; font-weight: 900; line-height: 1; pointer-events: none; backdrop-filter: blur(6px); }
.vi-garden-polygon-vertex { position: absolute; z-index: 12; display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #2877d4; color: #fff; cursor: move; font: 800 8px/1 "Avenir Next", sans-serif; touch-action: none; transform: translate(-50%, -50%); box-shadow: 0 2px 7px rgba(17, 48, 82, .32); }

.vi-garden-timeline { margin-top: 16px; padding: 13px; overflow-x: auto; border: 1px solid #d2d9ce; border-radius: 14px; background: rgba(255, 255, 255, .62); }
.vi-garden-timeline__months, .vi-garden-timeline__row { display: grid; grid-template-columns: 110px repeat(12, minmax(18px, 1fr)) 58px; align-items: center; min-width: 620px; }
.vi-garden-timeline__months { padding-bottom: 7px; color: #7b877f; font-size: 7px; font-weight: 900; text-align: center; text-transform: uppercase; }
.vi-garden-timeline__months strong { color: var(--vi-garden-ink); text-align: left; }
.vi-garden-timeline__row { min-height: 25px; border-top: 1px solid rgba(102, 124, 105, .12); }
.vi-garden-timeline__row strong { overflow: hidden; padding-right: 8px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.vi-garden-timeline__row span { height: 5px; margin: 0 2px; border-radius: 999px; background: #dce4d9; }
.vi-garden-timeline__row span.is-start { height: 9px; background: var(--vi-garden-green); box-shadow: 0 0 0 3px rgba(53, 100, 75, .13); }
.vi-garden-timeline__row small { color: var(--vi-garden-green); font-size: 7px; font-weight: 900; text-align: right; text-transform: uppercase; }
.vi-garden-timeline > p { margin: 0; color: #718078; font-size: 10px; }

.vi-garden-snapshots-button, .vi-garden-activity-button { display: inline-flex !important; align-items: center; gap: 6px; }
.vi-garden-snapshots-button [data-snapshot-count], .vi-garden-activity-button [data-activity-count] { display: grid; min-width: 18px; height: 18px; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; font-size: 8px; }
.vi-garden-snapshots-button [data-snapshot-count][hidden] { display: none; }
.vi-garden-activity-button [data-activity-count][hidden] { display: none; }
.vi-garden-history-button { gap: 4px !important; }
.vi-garden-history-count { display: inline-flex; height: 19px; align-items: center; gap: 3px; padding: 0 6px; border: 1px solid rgba(53,100,75,.14); border-radius: 999px; background: rgba(236,243,234,.82); color: var(--vi-garden-moss); font-size: 9px; font-weight: 900; }
.vi-garden-history-count b { font: inherit; }
.vi-garden-history-count.is-activity { border: 0; background: var(--vi-garden-moss); color: #fff; }
.vi-garden-history-icon { width: 15px; height: 15px; flex: 0 0 15px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.vi-garden-history-count .vi-garden-history-icon { width: 12px; height: 12px; flex-basis: 12px; }
.vi-garden-snapshot-modal { position: fixed; inset: 0; z-index: 1000001; display: grid; place-items: center; padding: 18px; background: rgba(18, 35, 26, .72); backdrop-filter: blur(12px); }
.vi-garden-snapshot-dialog { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: min(960px, 100%); height: min(760px, 92vh); overflow: hidden; border: 1px solid rgba(255, 255, 255, .48); border-radius: 22px; background: #f7f7f0; box-shadow: 0 30px 90px rgba(0,0,0,.34); }
.vi-garden-snapshot-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--vi-garden-line); background: rgba(255,255,255,.72); }
.vi-garden-snapshot-dialog > header span, .vi-garden-snapshot-detail__heading span { color: var(--vi-garden-green); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.vi-garden-snapshot-dialog > header h3 { margin: 3px 0 0; font-size: 22px; }
.vi-garden-snapshot-dialog > header small { display: block; margin-top: 3px; color: #718078; font-size: 8px; }
.vi-garden-snapshot-dialog > header button { width: 36px; height: 36px; border: 1px solid var(--vi-garden-line); border-radius: 50%; background: #fff; cursor: pointer; font-size: 22px; }
.vi-garden-snapshot-dialog > form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding: 12px 20px; border-bottom: 1px solid rgba(64, 96, 73, .1); background: #edf1e9; }
.vi-garden-snapshot-dialog > form input[type="text"] { min-width: 0; padding: 10px 12px; border: 1px solid var(--vi-garden-line); border-radius: 10px; font: 600 11px/1 "Avenir Next", sans-serif; }
.vi-garden-snapshot-dialog > form button, .vi-garden-snapshot-import { display: grid; place-items: center; padding: 9px 13px; border: 0; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-garden-snapshot-import { border: 1px solid rgba(38, 74, 51, .2); background: rgba(255,255,255,.76); color: var(--vi-garden-moss); }
.vi-garden-snapshot-import input { display: none; }
.vi-garden-snapshot-dialog > main { display: grid; min-height: 0; grid-template-columns: 290px minmax(0, 1fr); }
.vi-garden-snapshot-dialog > main > aside { min-height: 0; padding: 14px; overflow-y: auto; border-right: 1px solid var(--vi-garden-line); background: rgba(233, 239, 231, .62); scrollbar-width: thin; }
.vi-garden-snapshot-current { padding: 11px; border: 1px solid rgba(54, 96, 66, .17); border-radius: 12px; background: rgba(203, 227, 212, .5); }
.vi-garden-snapshot-current span, .vi-garden-snapshot-current strong { display: block; }
.vi-garden-snapshot-current span { color: var(--vi-garden-green); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.vi-garden-snapshot-current strong { margin-top: 4px; color: #53685b; font-size: 9px; line-height: 1.4; }
.vi-garden-snapshot-dialog [data-snapshot-list] { display: grid; gap: 7px; margin-top: 10px; }
.vi-garden-snapshot-dialog [data-snapshot-list] > p { padding: 20px 8px; color: #718078; font-size: 10px; text-align: center; }
.vi-garden-snapshot-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 10px; border: 1px solid rgba(62, 96, 71, .14); border-radius: 11px; background: rgba(255,255,255,.74); color: var(--vi-garden-ink); cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.vi-garden-snapshot-row:hover { border-color: rgba(53, 100, 75, .38); background: #fff; transform: translateX(2px); }
.vi-garden-snapshot-row.is-selected { border-color: #4e805b; background: #fff; box-shadow: inset 3px 0 var(--vi-garden-green); }
.vi-garden-snapshot-row strong, .vi-garden-snapshot-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vi-garden-snapshot-row strong { font-size: 10px; }
.vi-garden-snapshot-row small { margin-top: 3px; color: #718078; font-size: 7px; }
.vi-garden-snapshot-row > span { color: #74837b; font-size: 7px; font-weight: 900; white-space: nowrap; }
.vi-garden-snapshot-dialog [data-snapshot-detail] { min-width: 0; min-height: 0; padding: 18px; overflow-y: auto; }
.vi-garden-snapshot-detail__heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.vi-garden-snapshot-detail__heading input { display: block; width: min(360px, 100%); margin-top: 4px; padding: 7px 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--vi-garden-ink); font: 800 16px/1.2 "Avenir Next", sans-serif; }
.vi-garden-snapshot-detail__heading input:hover, .vi-garden-snapshot-detail__heading input:focus { border-color: var(--vi-garden-line); background: #fff; outline: none; }
.vi-garden-snapshot-detail__heading small { color: #718078; font-size: 8px; white-space: nowrap; }
.vi-garden-snapshot-preview { display: grid; height: 250px; place-items: center; margin-top: 12px; padding: 14px; overflow: hidden; border: 1px solid var(--vi-garden-line); border-radius: 15px; background: #dfe8dd; }
.vi-garden-snapshot-preview svg { width: 100%; height: 100%; }
.vi-garden-snapshot-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.vi-garden-snapshot-stats div { min-width: 0; padding: 9px; border: 1px solid rgba(63, 96, 72, .12); border-radius: 10px; background: rgba(255,255,255,.7); }
.vi-garden-snapshot-stats span, .vi-garden-snapshot-stats strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vi-garden-snapshot-stats span { color: #738279; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.vi-garden-snapshot-stats strong { margin-top: 3px; font-size: 10px; }
.vi-garden-snapshot-compare { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: 11px; background: #edf2eb; color: #637268; font-size: 9px; }
.vi-garden-snapshot-compare > span { margin-right: auto; font-weight: 800; }
.vi-garden-snapshot-compare strong { color: var(--vi-garden-moss); }
.vi-garden-snapshot-detail__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.vi-garden-snapshot-detail__actions button { padding: 9px 12px; border: 1px solid var(--vi-garden-line); border-radius: 999px; background: #fff; color: var(--vi-garden-moss); cursor: pointer; font: 800 8px/1 "Avenir Next", sans-serif; }
.vi-garden-snapshot-detail__actions button.is-primary { border-color: var(--vi-garden-moss); background: var(--vi-garden-moss); color: #fff; }
.vi-garden-snapshot-detail__actions button.is-danger { margin-left: auto; color: #9b5148; }
.vi-garden-snapshot-empty { display: grid; height: 100%; place-content: center; gap: 5px; color: #718078; text-align: center; }
.vi-garden-snapshot-empty strong { color: var(--vi-garden-ink); font-size: 17px; }
.vi-garden-snapshot-empty span { font-size: 10px; }
.vi-garden-snapshot-status { min-height: 30px; padding: 9px 20px; border-top: 1px solid var(--vi-garden-line); color: #68786f; font-size: 9px; }
.vi-garden-snapshot-status[data-state="error"] { color: #a2493e; }
.vi-garden-snapshot-status[data-state="saved"] { color: var(--vi-garden-green); }
.vi-garden-activity-modal { position: fixed; inset: 0; z-index: 1000001; display: grid; place-items: center; padding: 18px; background: rgba(18, 35, 26, .72); backdrop-filter: blur(12px); }
.vi-garden-activity-dialog { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; width: min(920px, 100%); height: min(730px, 92vh); overflow: hidden; border: 1px solid rgba(255,255,255,.48); border-radius: 22px; background: #f7f7f0; box-shadow: 0 30px 90px rgba(0,0,0,.34); }
.vi-garden-activity-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--vi-garden-line); background: rgba(255,255,255,.72); }
.vi-garden-activity-dialog > header span { color: var(--vi-garden-green); font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.vi-garden-activity-dialog > header h3 { margin: 3px 0 0; font-size: 22px; }
.vi-garden-activity-dialog > header small { display: block; margin-top: 3px; color: #718078; font-size: 8px; }
.vi-garden-activity-dialog > header button { width: 36px; height: 36px; border: 1px solid var(--vi-garden-line); border-radius: 50%; background: #fff; cursor: pointer; font-size: 22px; }
.vi-garden-activity-header-actions { display: flex; align-items: center; gap: 7px; }
.vi-garden-activity-dialog > header .vi-garden-activity-header-actions > button:not(.vi-garden-activity-close) { display: inline-flex; width: auto; height: 34px; align-items: center; gap: 5px; padding: 0 10px; border-radius: 999px; color: var(--vi-garden-moss); font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-garden-activity-dialog > header .vi-garden-activity-header-actions > button:not(.vi-garden-activity-close) span { display: grid; min-width: 18px; height: 18px; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--vi-garden-mint); color: var(--vi-garden-moss); font-size: 8px; letter-spacing: 0; }
.vi-garden-activity-dialog > header .vi-garden-activity-header-actions > button:disabled { cursor: not-allowed; opacity: .38; }
.vi-garden-activity-dialog > form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 11px 20px; background: #edf1e9; }
.vi-garden-activity-dialog > form input { min-width: 0; padding: 10px 12px; border: 1px solid var(--vi-garden-line); border-radius: 10px; font: 600 11px/1 "Avenir Next", sans-serif; }
.vi-garden-activity-dialog > form button { padding: 9px 14px; border: 0; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-garden-activity-toolbar { display: grid; grid-template-columns: minmax(160px, 1fr) 150px auto auto auto; align-items: end; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--vi-garden-line); background: rgba(255,255,255,.62); }
.vi-garden-activity-toolbar label { display: grid; gap: 4px; }
.vi-garden-activity-toolbar label span { color: #708078; font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.vi-garden-activity-toolbar input, .vi-garden-activity-toolbar select { min-width: 0; height: 32px; padding: 7px 9px; border: 1px solid var(--vi-garden-line); border-radius: 9px; background: #fff; color: var(--vi-garden-ink); font: 700 9px/1 "Avenir Next", sans-serif; }
.vi-garden-activity-toolbar button { height: 32px; padding: 0 10px; border: 1px solid var(--vi-garden-line); border-radius: 999px; background: #fff; color: var(--vi-garden-moss); cursor: pointer; font: 800 8px/1 "Avenir Next", sans-serif; white-space: nowrap; }
.vi-garden-activity-toolbar button.is-danger { color: #9b5148; }
.vi-garden-activity-dialog > main { display: grid; min-height: 0; grid-template-columns: minmax(310px, 38%) minmax(0, 1fr); }
.vi-garden-activity-dialog [data-activity-list] { min-height: 0; padding: 13px; overflow-y: auto; border-right: 1px solid var(--vi-garden-line); background: rgba(233,239,231,.62); scrollbar-width: thin; }
.vi-garden-activity-dialog [data-activity-list] > p { padding: 28px 10px; color: #718078; font-size: 10px; text-align: center; }
.vi-garden-activity-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 8px; width: 100%; padding: 10px; border: 1px solid rgba(62,96,71,.14); border-radius: 11px; background: rgba(255,255,255,.74); color: var(--vi-garden-ink); cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.vi-garden-activity-row + .vi-garden-activity-row { margin-top: 7px; }
.vi-garden-activity-row:hover { border-color: rgba(53,100,75,.38); background: #fff; transform: translateX(2px); }
.vi-garden-activity-row.is-selected { border-color: #4e805b; background: #fff; box-shadow: inset 3px 0 var(--vi-garden-green); }
.vi-garden-activity-category { display: inline-grid; width: max-content; place-items: center; padding: 4px 7px; border-radius: 999px; background: rgba(53,100,75,.12); color: var(--vi-garden-green); font-size: 7px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.vi-garden-activity-row strong { align-self: center; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.vi-garden-activity-row small { grid-column: 2; color: #718078; font-size: 7px; }
.vi-garden-activity-dialog [data-activity-detail] { position: relative; min-width: 0; min-height: 0; padding: 28px; overflow-y: auto; }
.vi-garden-activity-detail__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vi-garden-activity-detail__heading small { color: #718078; font-size: 8px; }
.vi-garden-activity-dialog [data-activity-detail] h4 { max-width: 620px; margin: 20px 0 0; color: var(--vi-garden-ink); font-size: 23px; line-height: 1.25; }
.vi-garden-activity-details { margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(62,96,71,.13); border-radius: 13px; background: rgba(237,242,235,.72); }
.vi-garden-activity-details ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: #5e6f64; font-size: 10px; line-height: 1.45; }
.vi-garden-activity-details p { margin: 0; color: #718078; font-size: 10px; }
.vi-garden-activity-entry-actions { display: flex; align-items: center; gap: 7px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(62,96,71,.13); }
.vi-garden-activity-entry-actions button { display: inline-flex; height: 34px; align-items: center; gap: 5px; padding: 0 11px; border: 1px solid rgba(53,100,75,.2); border-radius: 999px; background: #fff; color: var(--vi-garden-moss); cursor: pointer; font: 800 8px/1 "Avenir Next", sans-serif; }
.vi-garden-activity-entry-actions button:hover:not(:disabled) { border-color: rgba(53,100,75,.48); background: var(--vi-garden-mint); }
.vi-garden-activity-entry-actions button:disabled { cursor: not-allowed; opacity: .36; }
.vi-garden-activity-entry-actions .vi-garden-activity-delete { margin-left: auto; border-color: rgba(155,81,72,.2); color: #9b5148; }
.vi-garden-activity-empty { display: grid; height: 100%; place-content: center; gap: 5px; color: #718078; text-align: center; }
.vi-garden-activity-empty strong { color: var(--vi-garden-ink); font-size: 17px; }
.vi-garden-activity-empty span { font-size: 10px; }
.vi-garden-activity-status { min-height: 30px; padding: 9px 20px; border-top: 1px solid var(--vi-garden-line); color: #68786f; font-size: 9px; }
.vi-garden-activity-status[data-state="error"] { color: #a2493e; }
.vi-garden-activity-status[data-state="saved"] { color: var(--vi-garden-green); }

.vi-garden-panel label { display: block; margin-top: 10px; color: #68786f; font-size: 11px; font-weight: 700; }
.vi-garden-panel input, .vi-garden-panel select { width: 100%; margin-top: 5px; padding: 9px 10px; border: 1px solid var(--vi-garden-line); border-radius: 9px; background: #fff; color: var(--vi-garden-ink); font: inherit; font-size: 13px; }
.vi-garden-panel input[type="range"] { padding: 0; accent-color: var(--vi-garden-green); }
.vi-zone-profile-editor { margin-top: 13px; padding: 10px; border: 1px solid rgba(56, 100, 69, .14); border-radius: 12px; background: linear-gradient(145deg, rgba(235, 244, 234, .76), rgba(255, 255, 255, .72)); }
.vi-zone-profile-editor > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.vi-zone-profile-editor > header > div { display: grid; gap: 2px; }
.vi-zone-profile-editor > header span { color: var(--vi-garden-green); font-size: 6px; font-weight: 900; letter-spacing: .12em; }
.vi-zone-profile-editor > header strong { color: var(--vi-garden-ink); font-size: 11px; }
.vi-zone-profile-editor > header small { max-width: 92px; color: #7a8980; font-size: 6px; line-height: 1.35; text-align: right; }
.vi-zone-profile-editor > div { display: grid; grid-template-columns: 1fr 1fr; gap: 0 7px; }
.vi-zone-profile-editor label { margin-top: 7px; font-size: 8px; }
.vi-zone-profile-editor select { margin-top: 3px; padding: 7px 8px; font-size: 9px; }
.vi-garden-container-size { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 7px; padding: 10px; border-radius: 10px; background: var(--vi-garden-mint); }
.vi-garden-container-size strong { color: var(--vi-garden-moss); font-size: 13px; }
.vi-garden-container-size span { color: #5e7166; font-size: 9px; font-weight: 800; text-align: right; }
.vi-garden-polygon-controls { display: grid; grid-template-columns: 1fr repeat(3, auto); align-items: center; gap: 5px; margin-top: 7px; padding: 8px; border: 1px solid var(--vi-garden-line); border-radius: 10px; background: rgba(255,255,255,.6); }
.vi-garden-polygon-controls span { color: #6b7b72; font-size: 8px; line-height: 1.35; }
.vi-garden-polygon-controls button { padding: 6px 7px; border: 1px solid var(--vi-garden-line); border-radius: 7px; background: #fff; color: var(--vi-garden-moss); cursor: pointer; font: 800 8px/1 "Avenir Next", sans-serif; }
.vi-garden-polygon-controls button:disabled { cursor: not-allowed; opacity: .4; }
.vi-garden-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vi-garden-plant-lifecycle { display: grid; grid-template-columns: 1fr; gap: 0; }
.vi-garden-inspector-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.vi-garden-inspector-actions button { padding: 8px; border: 1px solid var(--vi-garden-line); border-radius: 8px; background: #fff; color: var(--vi-garden-ink); cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; }
.vi-garden-inspector-actions button.is-danger { color: #a43c32; }
.vi-garden-empty-selection { display: flex; flex-direction: column; gap: 4px; color: #68786f; font-size: 12px; }
.vi-garden-empty-selection strong { color: var(--vi-garden-ink); font-size: 15px; }
.vi-garden-multi-selection { display: flex; flex-direction: column; gap: 5px; padding: 12px; border: 1px solid rgba(70, 112, 80, .18); border-radius: 12px; background: linear-gradient(145deg, rgba(238, 247, 239, .9), rgba(255, 255, 255, .72)); color: #68786f; font-size: 11px; }
.vi-garden-multi-selection strong { color: var(--vi-garden-ink); font-size: 14px; }
.vi-garden-multi-selection + .vi-garden-inspector-actions { grid-template-columns: 1fr 1fr 1fr; }
.vi-garden-plant-library { min-height: 0; }
.vi-garden-plant-results { display: grid; gap: 6px; max-height: 310px; margin-top: 10px; overflow: auto; }
.vi-garden-plant-result { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 9px; width: 100%; padding: 6px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--vi-garden-ink); cursor: pointer; text-align: left; }
.vi-garden-plant-result[draggable="true"] { cursor: grab; }
.vi-garden-plant-result.is-dragging { opacity: .42; }
.vi-garden-plant-result:hover { border-color: var(--vi-garden-line); background: #fff; }
.vi-garden-plant-result.is-planning-only { opacity: .62; }
.vi-garden-plant-result.is-planning-only small { color: #9a6b3f; }
.vi-garden-plant-result img, .vi-garden-plant-result__placeholder { width: 42px; height: 42px; border-radius: 8px; background: linear-gradient(145deg, #c9dfc4, #eaf1e4); object-fit: cover; }
.vi-garden-plant-result > span:last-child { min-width: 0; }
.vi-garden-plant-result strong, .vi-garden-plant-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vi-garden-plant-result strong { font-size: 11px; }
.vi-garden-plant-result small, .vi-garden-searching { margin-top: 3px; color: #68786f; font-size: 10px; }
.vi-garden-layers-panel { min-height: 0; padding: 13px 10px 10px; overflow: hidden; background: linear-gradient(150deg, rgba(255, 255, 255, .92), rgba(244, 248, 242, .82)); }
.vi-garden-layers-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 8px; margin: 0; padding: 0 3px 10px; border-bottom: 1px solid rgba(62, 101, 72, .12); }
.vi-garden-layers-heading span, .vi-garden-layers-heading strong { grid-column: 1; }
.vi-garden-layers-heading__actions { grid-column: 2; grid-row: 1 / span 2; display: flex; max-width: 150px; flex-wrap: wrap; justify-content: flex-end; gap: 4px; align-self: center; }
.vi-garden-layers-heading__actions button { min-height: 28px; padding: 6px 7px; border: 1px solid rgba(48, 91, 61, .2); border-radius: 8px; background: var(--vi-garden-mint); color: var(--vi-garden-moss); cursor: pointer; font: 800 7px/1 "Avenir Next", sans-serif; white-space: nowrap; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.vi-garden-layers-heading__actions button:hover { border-color: rgba(48, 91, 61, .42); background: #d8eadf; transform: translateY(-1px); }
.vi-garden-layers-heading__actions button:disabled { cursor: default; opacity: .42; transform: none; }
.vi-garden-layers-heading__actions button.is-drop-target { border-color: #438055; background: #cbe4d2; box-shadow: 0 0 0 3px rgba(67, 128, 85, .14); }
.vi-garden-layers-heading__actions [data-add-underground] { background: #e7efed; color: #315c58; }
.vi-garden-layers { display: grid; align-content: start; gap: 8px; box-sizing: border-box; width: 100%; height: clamp(420px, 58vh, 680px); min-height: 0; margin-top: 8px; padding: 1px 5px 12px 1px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(48, 85, 61, .38) transparent; scrollbar-gutter: stable; scrollbar-width: thin; touch-action: pan-y; }
.vi-garden-layers::-webkit-scrollbar { width: 7px; }
.vi-garden-layers::-webkit-scrollbar-track { background: transparent; }
.vi-garden-layers::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(48, 85, 61, .34); background-clip: padding-box; }
.vi-garden-layer-parent { height: max-content; min-height: max-content; align-self: start; overflow: hidden; border: 1px solid rgba(55, 91, 66, .18); border-radius: 12px; background: rgba(239, 245, 238, .72); box-shadow: 0 3px 12px rgba(35, 65, 44, .045); transition: border-color .15s ease, box-shadow .15s ease; }
.vi-garden-layer-parent.is-drop-target { border-color: #4b8a5b; box-shadow: inset 0 0 0 2px rgba(75, 138, 91, .18), 0 0 0 2px rgba(75, 138, 91, .1); }
.vi-garden-layer-parent__header { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 28px 22px; align-items: center; gap: 3px; min-height: 41px; padding: 4px 5px; background: rgba(220, 234, 220, .72); }
.vi-garden-layer-parent.is-hidden .vi-garden-layer-parent__header { background: rgba(226, 230, 225, .7); }
.vi-garden-layer-parent.is-underground { border-color: rgba(53, 91, 91, .24); background: rgba(232, 240, 238, .72); }
.vi-garden-layer-parent.is-underground .vi-garden-layer-parent__header { background: rgba(205, 224, 220, .72); }
.vi-garden-layer-parent__collapse, .vi-garden-layer-parent__delete { display: grid; place-items: center; width: 24px; height: 29px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #66776d; cursor: pointer; font-size: 10px; }
.vi-garden-layer-parent__collapse:hover, .vi-garden-layer-parent__delete:hover { background: rgba(255, 255, 255, .8); color: var(--vi-garden-moss); }
.vi-garden-layer-parent__delete { color: #9a675e; font-size: 16px; }
.vi-garden-panel .vi-garden-layer-parent__name { min-width: 0; width: 100%; margin: 0; padding: 6px; overflow: hidden; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--vi-garden-ink); font: 800 10px/1.2 "Avenir Next", sans-serif; text-overflow: ellipsis; }
.vi-garden-panel strong.vi-garden-layer-parent__name { padding-left: 6px; }
.vi-garden-panel input.vi-garden-layer-parent__name:hover, .vi-garden-panel input.vi-garden-layer-parent__name:focus { border-color: rgba(59, 101, 70, .2); background: rgba(255, 255, 255, .72); outline: none; }
.vi-garden-layer-parent__count { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: rgba(255, 255, 255, .68); color: #65766c; font-size: 8px; font-weight: 900; }
.vi-garden-panel .vi-garden-layer-parent__level { display: flex; align-items: center; gap: 4px; min-height: 29px; margin: 0; padding: 3px 8px 3px 36px; border-top: 1px solid rgba(62, 101, 72, .09); background: rgba(255, 255, 255, .3); color: #708078; font-size: 8px; }
.vi-garden-panel .vi-garden-layer-parent__level span { margin-right: auto; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.vi-garden-panel .vi-garden-layer-parent__level input { width: 54px; height: 22px; margin: 0; padding: 3px 5px; border-radius: 6px; background: rgba(255, 255, 255, .72); font-size: 9px; text-align: right; }
.vi-garden-panel .vi-garden-layer-parent__level small, .vi-garden-panel .vi-garden-layer-parent__level strong { color: #52685c; font-size: 8px; font-weight: 900; }
.vi-garden-layer-parent__children { display: grid; gap: 5px; min-height: 24px; margin: 0 5px 6px 11px; padding: 6px 0 0 8px; border-left: 2px solid rgba(65, 105, 76, .18); }
.vi-garden-layer-parent.is-collapsed .vi-garden-layer-parent__children { display: none; }
.vi-garden-layer-drop-empty { margin: 0 5px 5px 0; padding: 8px; border: 1px dashed rgba(70, 109, 80, .26); border-radius: 7px; color: #7a8980; font-size: 8px; text-align: center; }
.vi-garden-layer-row { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 28px 28px 22px; align-items: center; gap: 2px; min-height: 42px; padding: 4px; border: 1px solid rgba(69, 101, 77, .16); border-radius: 9px; background: rgba(255, 255, 255, .68); transition: border-color .15s ease, background .15s ease, opacity .15s ease, box-shadow .15s ease; }
.vi-garden-layer-row::before { content: ""; position: absolute; top: 50%; left: -10px; width: 8px; height: 1px; background: rgba(65, 105, 76, .25); }
.vi-garden-layer-item[draggable="true"] { cursor: grab; }
.vi-garden-layer-item.is-dragging { opacity: .35; }
.vi-garden-layer-drag-stack { position: fixed; z-index: 1000002; top: -200px; left: -200px; width: 68px; height: 56px; pointer-events: none; }
.vi-garden-layer-drag-stack i { position: absolute; display: block; width: 48px; height: 34px; border: 1px solid rgba(46, 86, 58, .28); border-radius: 8px; background: rgba(239, 247, 238, .94); box-shadow: 0 5px 14px rgba(30, 62, 40, .16); }
.vi-garden-layer-drag-stack i:nth-child(1) { top: 14px; left: 2px; transform: rotate(-5deg); }
.vi-garden-layer-drag-stack i:nth-child(2) { top: 8px; left: 8px; transform: rotate(-2deg); }
.vi-garden-layer-drag-stack i:nth-child(3) { top: 2px; left: 14px; border-color: rgba(46, 86, 58, .42); background: #f8fbf6; }
.vi-garden-layer-drag-stack span { position: absolute; z-index: 2; right: 0; bottom: 0; display: grid; min-width: 27px; height: 27px; place-items: center; padding: 0 6px; border: 2px solid #fff; border-radius: 999px; background: #245b39; color: #fff; box-shadow: 0 4px 10px rgba(24, 66, 39, .3); font: 900 11px/1 "Avenir Next", sans-serif; }
.vi-garden-layer-row:hover { border-color: rgba(47, 92, 62, .35); background: rgba(255, 255, 255, .86); }
.vi-garden-layer-row.is-selected { border-color: #4d825a; background: rgba(226, 241, 227, .94); box-shadow: inset 3px 0 #356c45, 0 4px 12px rgba(53, 108, 69, .12); }
.vi-garden-layer-row.is-selected { animation: vi-garden-layer-selected-pulse 2.2s ease-in-out infinite; }
.vi-garden-layer-row.is-linked-hover { border-color: #4e9461; background: rgba(232, 245, 233, .94); animation: vi-garden-layer-hover-pulse 1.9s ease-in-out infinite; }
.vi-garden-layer-row.is-hidden { opacity: .5; }
.vi-garden-layer-multi { display: grid; width: 18px; height: 18px; place-items: center; padding: 0; border: 1px solid rgba(68, 105, 78, .3); border-radius: 50%; background: rgba(255,255,255,.72); color: transparent; cursor: pointer; font: 900 9px/1 "Avenir Next", sans-serif; touch-action: manipulation; transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease; }
.vi-garden-layer-multi:hover { border-color: #4d825a; transform: scale(1.08); }
.vi-garden-layer-multi.is-active { border-color: #356c45; background: #356c45; color: #fff; box-shadow: 0 0 0 3px rgba(53,108,69,.12); }
.vi-garden-layer-select { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; padding: 2px; border: 0; background: transparent; color: var(--vi-garden-ink); cursor: pointer; text-align: left; }
.vi-garden-layer-select > span { min-width: 0; }
.vi-garden-layer-select strong, .vi-garden-layer-select small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vi-garden-layer-select strong { font-size: 10px; }
.vi-garden-layer-select small { margin-top: 2px; color: #77867e; font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.vi-garden-layer-select .vi-tool-icon { width: 24px; height: 24px; border-radius: 7px; }
.vi-garden-layer-icon { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #587064; cursor: pointer; font: 800 11px/1 "Avenir Next", sans-serif; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; }
.vi-garden-layer-icon:hover { border-color: var(--vi-garden-line); background: #fff; color: var(--vi-garden-moss); }
.vi-garden-layer-icon.is-visibility span { position: relative; width: 15px; height: 10px; border: 1.5px solid currentColor; border-radius: 70% 15%; transform: rotate(45deg); }
.vi-garden-layer-icon.is-visibility span::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; border-radius: 50%; background: currentColor; transform: translate(-50%, -50%); }
.vi-garden-layer-icon.is-visibility.is-off { color: #9aa69f; }
.vi-garden-layer-icon.is-visibility.is-off span::after { opacity: 0; }
.vi-garden-layer-icon.is-lock span { position: relative; width: 11px; height: 9px; margin-top: 5px; border: 1.5px solid currentColor; border-radius: 2px; }
.vi-garden-layer-icon.is-lock span::before { content: ""; position: absolute; right: 1px; bottom: 7px; left: 1px; height: 7px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 6px 6px 0 0; }
.vi-garden-layer-icon.is-lock.is-active { border-color: rgba(53, 100, 75, .18); background: rgba(203, 227, 212, .58); color: var(--vi-garden-moss); }
.vi-garden-layer-order { display: grid; gap: 1px; }
.vi-garden-layer-order button { width: 24px; height: 14px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #708078; cursor: pointer; font-size: 7px; line-height: 1; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; }
.vi-garden-layer-order button:hover { background: #fff; color: var(--vi-garden-moss); }
.vi-garden-layer-order button:disabled { cursor: default; opacity: .25; }
.vi-garden-layers-empty { padding: 12px 8px; border: 1px dashed var(--vi-garden-line); border-radius: 9px; color: #718078; font-size: 10px; line-height: 1.4; text-align: center; }
@keyframes vi-garden-hover-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(63, 133, 81, .32), 0 7px 16px rgba(21, 48, 34, .12); }
    50% { box-shadow: 0 0 0 5px rgba(63, 133, 81, .16), 0 9px 20px rgba(21, 48, 34, .18); }
}
@keyframes vi-garden-selected-pulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(227, 155, 47, .9), 0 0 0 8px rgba(27, 67, 42, .22), 0 10px 22px rgba(21, 48, 34, .24); }
    50% { box-shadow: 0 0 0 7px rgba(227, 155, 47, .58), 0 0 0 11px rgba(27, 67, 42, .12), 0 13px 28px rgba(21, 48, 34, .31); }
}
@keyframes vi-garden-layer-hover-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(63, 133, 81, .24); }
    50% { box-shadow: 0 0 0 3px rgba(63, 133, 81, .12); }
}
@keyframes vi-garden-layer-selected-pulse {
    0%, 100% { box-shadow: inset 3px 0 #356c45, 0 0 0 1px rgba(53, 108, 69, .18); }
    50% { box-shadow: inset 3px 0 #356c45, 0 0 0 3px rgba(53, 108, 69, .1); }
}
@media (prefers-reduced-motion: reduce) {
    .vi-garden-object.is-selected, .vi-garden-object.is-linked-hover, .vi-garden-layer-row.is-selected, .vi-garden-layer-row.is-linked-hover { animation: none; }
}
[data-planner-canvas].is-build-drop-target, [data-design-3d].is-build-drop-target { outline: 3px solid rgba(58, 119, 73, .75); outline-offset: -6px; box-shadow: inset 0 0 0 9px rgba(109, 168, 119, .14); }
[data-planner-canvas].is-build-drop-target::after, [data-design-3d].is-build-drop-target::after { content: attr(data-drop-label); position: absolute; z-index: 30; top: 50%; left: 50%; padding: 10px 15px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 999px; background: rgba(27, 65, 40, .86); color: #fff; font: 800 11px/1 "Avenir Next", sans-serif; letter-spacing: .03em; pointer-events: none; transform: translate(-50%, -50%); backdrop-filter: blur(8px); }
[data-planner-canvas].is-build-drop-target::after { display: none; }
[data-planner-canvas].is-drop-blocked, [data-design-3d].is-drop-blocked { outline-color: rgba(190, 78, 61, .8); box-shadow: inset 0 0 0 9px rgba(190, 78, 61, .12); }
.vi-garden-drop-preview { position: absolute; z-index: 24; display: grid; place-items: center; min-width: 10px; min-height: 10px; border: 3px solid #fff; border-radius: 5px; outline: 3px solid #3c9a58; outline-offset: -6px; background: repeating-linear-gradient(135deg, rgba(65, 157, 89, .42) 0 8px, rgba(65, 157, 89, .2) 8px 16px); box-shadow: 0 0 0 4px rgba(37, 91, 51, .28), inset 0 0 20px rgba(255, 255, 255, .28); pointer-events: none; animation: vi-garden-drop-preview-pulse 1.1s ease-in-out infinite; }
.vi-garden-drop-preview span { max-width: calc(100% - 10px); padding: 5px 8px; overflow: hidden; border-radius: 999px; background: rgba(22, 72, 38, .9); color: #fff; font: 800 10px/1 "Avenir Next", sans-serif; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 3px 12px rgba(19, 51, 29, .24); }
.vi-garden-drop-preview.is-blocked { outline-color: #bd4e3d; background: repeating-linear-gradient(135deg, rgba(190, 78, 61, .42) 0 8px, rgba(190, 78, 61, .2) 8px 16px); box-shadow: 0 0 0 4px rgba(145, 48, 35, .24), inset 0 0 20px rgba(255, 255, 255, .22); }
.vi-garden-drop-preview.is-blocked span { background: rgba(132, 43, 32, .92); }
.vi-garden-drop-preview.is-overlap { outline-color: #d69a36; background: repeating-linear-gradient(135deg, rgba(214, 154, 54, .45) 0 8px, rgba(214, 154, 54, .2) 8px 16px); box-shadow: 0 0 0 4px rgba(136, 88, 20, .24), inset 0 0 20px rgba(255, 255, 255, .22); }
.vi-garden-drop-preview.is-overlap span { background: rgba(131, 84, 18, .92); }
@keyframes vi-garden-drop-preview-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
@media (prefers-reduced-motion: reduce) { .vi-garden-drop-preview { animation: none; } }
.vi-garden-schedule-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--vi-garden-line); }
.vi-garden-schedule-row.is-selectable { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.vi-garden-schedule-row.is-not-selected { opacity: .52; }
.vi-garden-schedule-row > input { width: 16px; height: 16px; accent-color: var(--vi-garden-green); }
.vi-garden-schedule-row strong, .vi-garden-schedule-row small { display: block; }
.vi-garden-schedule-row strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.vi-garden-schedule-row small { margin-top: 3px; color: #68786f; font-size: 9px; }
.vi-garden-schedule-row > span { font-size: 11px; font-weight: 800; }
.vi-garden-schedule-row.is-unavailable > span { color: #9a6b3f; }
.vi-garden-schedule-empty { color: #68786f; font-size: 11px; line-height: 1.5; }
.vi-garden-basket-button { width: 100%; margin-top: 14px; padding: 11px 12px; border: 0; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.vi-garden-basket-button:disabled { cursor: not-allowed; opacity: .4; }
.vi-garden-basket-feedback { margin-top: 9px; color: #68786f; font-size: 10px; line-height: 1.45; }
.vi-garden-basket-feedback a { color: var(--vi-garden-moss); font-weight: 800; }
.vi-garden-basket-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.vi-garden-basket-scope select { min-width: 0; padding: 7px 8px; border: 1px solid var(--vi-garden-line); border-radius: 9px; background: rgba(255, 255, 255, .75); color: #35503f; font: 700 8px/1 "Avenir Next", sans-serif; }
.vi-garden-basket-scope strong { grid-column: 1 / -1; color: #42604d; font: 800 9px/1.2 "Avenir Next", sans-serif; }
.vi-garden-basket-skipped { display: grid; gap: 4px; margin-top: 7px; padding: 7px; border-radius: 9px; background: #fff3df; }
.vi-garden-basket-skipped a { font-size: 8px; line-height: 1.35; }

.vi-growing-workspace { min-height: 680px; padding: clamp(18px, 3vw, 34px); background: #e9ede4; }
.vi-growing-title { margin: 3px 0 0; font-size: 22px; }
.vi-growing-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .9fr); align-items: stretch; overflow: hidden; border-radius: 22px; background: var(--vi-garden-moss); color: #fff; box-shadow: 0 20px 50px rgba(28, 57, 41, .16); }
.vi-growing-hero > div:first-child { padding: clamp(26px, 4vw, 48px); background: radial-gradient(circle at 86% 10%, rgba(153, 192, 164, .25), transparent 38%); }
.vi-growing-hero > div:first-child > span, .vi-growing-section-title > div > span { color: #a9d4b8; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.vi-growing-hero h3 { max-width: 620px; margin: 8px 0 9px; color: #fff; font-size: clamp(26px, 4vw, 42px); line-height: 1.05; }
.vi-growing-hero p { margin: 0; color: #d8e5dc; font-size: 13px; }
.vi-growing-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255, 255, 255, .06); }
.vi-growing-stats div { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; padding: 24px 16px; border-left: 1px solid rgba(255, 255, 255, .12); text-align: center; }
.vi-growing-stats strong { color: #fff; font-size: 30px; }
.vi-growing-stats span { color: #b8c9bf; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.vi-care-panel { margin: 28px 0; }
.vi-care-recommendations { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 11px; }
.vi-care-recommendation { position: relative; display: flex; min-height: 190px; flex-direction: column; padding: 18px; overflow: hidden; border: 1px solid #cdd8cd; border-radius: 17px; background: rgba(255, 255, 255, .9); }
.vi-care-recommendation::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: #8ca78f; }
.vi-care-recommendation[data-confidence="high"]::before { background: var(--vi-garden-green); }
.vi-care-recommendation[data-confidence="medium"]::before { background: #c09b5d; }
.vi-care-recommendation__top, .vi-care-recommendation__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vi-care-confidence { color: #7a887f; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.vi-care-recommendation h4 { margin: 16px 0 7px; font-size: 16px; line-height: 1.2; }
.vi-care-recommendation p { flex: 1; margin: 0; color: #647269; font-size: 10px; line-height: 1.5; }
.vi-care-recommendation__meta { margin-top: 15px; padding-top: 10px; border-top: 1px solid var(--vi-garden-line); color: #78857d; font-size: 9px; }
.vi-care-recommendation__meta strong { color: var(--vi-garden-green); }
.vi-care-recommendation__actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.vi-care-recommendation button { padding: 8px 13px; border: 0; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-care-recommendation [data-dismiss-suggestion] { border: 1px solid var(--vi-garden-line); background: transparent; color: #68786f; }
.vi-care-recommendation button:disabled { cursor: wait; opacity: .55; }
.vi-care-empty { display: flex; min-height: 100px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; grid-column: 1 / -1; border: 1px dashed #bcc8bf; border-radius: 16px; color: #718078; text-align: center; }
.vi-care-empty strong { color: var(--vi-garden-ink); font-size: 13px; }
.vi-care-empty span { font-size: 10px; }
.vi-fit-panel { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 20px; margin: 28px 0; padding: 18px; border: 1px solid #cdd8cd; border-radius: 20px; background: rgba(255, 255, 255, .72); }
.vi-fit-score { display: flex; min-height: 140px; flex-direction: column; align-items: center; justify-content: center; border-radius: 16px; background: var(--vi-garden-moss); color: #fff; text-align: center; }
.vi-fit-score strong { font-size: 46px; line-height: 1; }
.vi-fit-score span { margin-top: 8px; color: #b9d3c2; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.vi-fit-score small { margin-top: 5px; color: rgba(255, 255, 255, .58); font-size: 8px; }
.vi-fit-content { min-width: 0; }
.vi-fit-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-bottom: 9px; }
.vi-fit-metrics div { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 5px; padding: 9px 10px; border: 1px solid rgba(39, 87, 58, .1); border-radius: 11px; background: rgba(242, 247, 241, .78); }
.vi-fit-metrics strong { color: var(--vi-garden-moss); font-size: 16px; }
.vi-fit-metrics span { overflow: hidden; color: #748178; font-size: 8px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.vi-fit-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.vi-fit-filters button { padding: 6px 9px; border: 1px solid #d5ded4; border-radius: 999px; background: rgba(255, 255, 255, .7); color: #64756a; cursor: pointer; font: 750 8px/1 "Avenir Next", sans-serif; text-transform: capitalize; }
.vi-fit-filters button span { margin-left: 3px; opacity: .68; }
.vi-fit-filters button.is-active { border-color: var(--vi-garden-moss); background: var(--vi-garden-moss); color: #fff; }
.vi-fit-findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 9px; }
.vi-catalogue-profiles, .vi-replacement-plants { margin: 10px 0; padding: 11px; border: 1px solid rgba(48, 91, 60, .12); border-radius: 13px; background: rgba(241, 247, 240, .68); }
.vi-catalogue-profiles > header, .vi-replacement-plants > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.vi-catalogue-profiles > header > div, .vi-replacement-plants > header > div { display: grid; gap: 2px; }
.vi-catalogue-profiles > header span, .vi-replacement-plants > header span { color: var(--vi-garden-green); font-size: 6px; font-weight: 900; letter-spacing: .1em; }
.vi-catalogue-profiles > header strong, .vi-replacement-plants > header strong { font-size: 11px; }
.vi-catalogue-profiles > header b { color: var(--vi-garden-moss); font-size: 18px; }
.vi-catalogue-profiles > div, .vi-replacement-plants > div { display: grid; gap: 5px; }
.vi-catalogue-profiles article, .vi-replacement-plants article { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 8px; border-radius: 9px; background: rgba(255, 255, 255, .78); }
.vi-catalogue-profiles article > div { display: grid; min-width: 0; flex: 1; gap: 2px; }
.vi-catalogue-profiles article strong, .vi-replacement-plants article > strong { font-size: 9px; }
.vi-catalogue-profiles article span { color: #758279; font-size: 7px; }
.vi-catalogue-profiles article i { height: 3px; overflow: hidden; border-radius: 999px; background: #dce5db; }
.vi-catalogue-profiles article i::after { display: block; width: var(--profile-complete); height: 100%; border-radius: inherit; background: var(--vi-garden-green); content: ""; }
.vi-catalogue-profiles button, .vi-replacement-plants button { padding: 6px 8px; border: 1px solid rgba(49, 94, 62, .16); border-radius: 999px; background: #fff; color: var(--vi-garden-moss); cursor: pointer; font: 800 7px/1 "Avenir Next", sans-serif; }
.vi-replacement-plants article { align-items: flex-start; flex-wrap: wrap; }
.vi-replacement-plants article > span { display: flex; min-width: 0; flex: 1; flex-wrap: wrap; gap: 4px; }
.vi-replacement-plants article a { padding: 4px 6px; border-radius: 999px; background: var(--vi-garden-mint); color: var(--vi-garden-moss); font-size: 7px; text-decoration: none; }
.vi-plant-profile-dialog { width: min(760px, calc(100vw - 24px)); max-height: min(780px, calc(100vh - 24px)); padding: 0; overflow: hidden; border: 1px solid rgba(40, 79, 51, .2); border-radius: 20px; background: #f8faf6; box-shadow: 0 28px 80px rgba(20, 45, 28, .25); }
.vi-plant-profile-dialog::backdrop { background: rgba(19, 35, 25, .44); backdrop-filter: blur(5px); }
.vi-plant-profile-dialog form { display: grid; max-height: inherit; grid-template-rows: auto minmax(0, 1fr) auto; }
.vi-plant-profile-dialog form > header, .vi-plant-profile-dialog form > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(45, 82, 54, .12); }
.vi-plant-profile-dialog form > header > div { display: grid; gap: 2px; }
.vi-plant-profile-dialog form > header span { color: var(--vi-garden-green); font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.vi-plant-profile-dialog form > header strong { font-size: 16px; }
.vi-plant-profile-dialog form > header small { color: #738078; font-size: 8px; }
.vi-plant-profile-dialog form > header button { border: 0; background: transparent; color: #627168; cursor: pointer; font-size: 22px; }
.vi-plant-profile-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 16px 18px; overflow-y: auto; }
.vi-plant-profile-fields fieldset { min-width: 0; padding: 10px; border: 1px solid rgba(51, 91, 61, .13); border-radius: 11px; background: #fff; }
.vi-plant-profile-fields legend { padding: 0 5px; color: var(--vi-garden-ink); font-size: 9px; font-weight: 900; }
.vi-plant-profile-fields label { display: inline-flex; align-items: center; margin: 2px; cursor: pointer; }
.vi-plant-profile-fields input { position: absolute; opacity: 0; }
.vi-plant-profile-fields label span { padding: 5px 7px; border: 1px solid #dce4da; border-radius: 999px; color: #64736a; font-size: 7px; font-weight: 800; }
.vi-plant-profile-fields input:checked + span { border-color: var(--vi-garden-green); background: var(--vi-garden-moss); color: #fff; }
.vi-plant-profile-dialog form > footer { border-top: 1px solid rgba(45, 82, 54, .12); border-bottom: 0; }
.vi-plant-profile-dialog form > footer a { color: var(--vi-garden-moss); font-size: 8px; font-weight: 800; }
.vi-plant-profile-dialog form > footer button { padding: 9px 13px; border: 0; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; cursor: pointer; font: 800 8px/1 "Avenir Next", sans-serif; }
.vi-fit-finding { padding: 12px; border-left: 4px solid #8ca78f; border-radius: 11px; background: #fff; }
.vi-fit-finding[data-severity="warning"] { border-left-color: #b25d45; }
.vi-fit-finding[data-severity="caution"] { border-left-color: #c09b5d; }
.vi-fit-finding h4 { margin: 5px 0; font-size: 12px; }
.vi-fit-finding p { margin: 0 0 7px; color: #647269; font-size: 9px; line-height: 1.45; }
.vi-fit-finding small { color: #8a968f; font-size: 8px; }
.vi-fit-finding__top, .vi-fit-finding footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vi-fit-finding__top em { color: #87938c; font-size: 8px; font-style: normal; text-transform: capitalize; }
.vi-fit-finding footer { align-items: end; margin-top: 9px; }
.vi-fit-finding footer small { max-width: 62%; line-height: 1.3; }
.vi-fit-finding footer button { flex: 0 0 auto; padding: 6px 8px; border: 1px solid rgba(39, 87, 58, .18); border-radius: 999px; background: #f3f7f1; color: var(--vi-garden-moss); cursor: pointer; font: 800 7px/1 "Avenir Next", sans-serif; }
.vi-seasonal-panel { margin: 28px 0; padding: clamp(16px, 2.5vw, 24px); border: 1px solid var(--vi-garden-line); border-radius: 20px; background: rgba(255, 255, 255, .72); }
.vi-season-timeline { display: grid; grid-template-columns: repeat(12, minmax(74px, 1fr)); gap: 5px; overflow-x: auto; padding: 2px 0 8px; scrollbar-color: rgba(39, 87, 58, .34) transparent; }
.vi-season-month { min-height: 116px; overflow: hidden; border: 1px solid #d9e0d7; border-radius: 12px; background: rgba(246, 248, 243, .88); }
.vi-season-month.is-current { border-color: var(--vi-garden-moss); box-shadow: inset 0 0 0 1px var(--vi-garden-moss); }
.vi-season-month header { display: flex; align-items: center; justify-content: space-between; padding: 8px; border-bottom: 1px solid #e0e5dd; }
.vi-season-month header strong { font-size: 10px; text-transform: uppercase; }
.vi-season-month header span { padding: 3px 5px; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; font-size: 6px; font-weight: 900; text-transform: uppercase; }
.vi-season-month > div { display: grid; gap: 3px; padding: 6px; }
.vi-season-month i { display: flex; align-items: center; justify-content: space-between; gap: 3px; overflow: hidden; padding: 5px 6px; border-radius: 7px; background: #e4efe3; color: #42614d; font-size: 7px; font-style: normal; line-height: 1.15; text-overflow: ellipsis; }
.vi-season-month i[data-season-type="flower"] { background: #f2e6df; color: #865c4b; }
.vi-season-month i[data-season-type="harvest"] { background: #f0ead3; color: #77652e; }
.vi-season-month i[data-season-type^="sow"] { background: #e4edf1; color: #466572; }
.vi-season-month i b { flex: 0 0 auto; font-size: 7px; }
.vi-season-month > div > small { padding: 4px 2px; color: #a0aaa3; font-size: 7px; }
.vi-seasonal-columns { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; margin-top: 10px; }
.vi-seasonal-columns.is-single { grid-template-columns: 1fr; }
.vi-seasonal-columns > section { min-width: 0; padding: 14px; border: 1px solid #dae1d8; border-radius: 15px; background: rgba(249, 250, 247, .82); }
.vi-seasonal-columns > section > header { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.vi-seasonal-columns > section > header div { display: grid; gap: 3px; }
.vi-seasonal-columns > section > header span { color: var(--vi-garden-green); font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.vi-seasonal-columns > section > header strong { font-size: 14px; }
.vi-seasonal-columns > section > header small, .vi-seasonal-columns > section > footer { color: #849087; font-size: 8px; }
.vi-season-upcoming { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.vi-season-upcoming > article { display: grid; gap: 3px; padding: 9px; border-left: 3px solid #7b9a80; border-radius: 9px; background: #fff; }
.vi-season-upcoming > article[data-season-type="flower"] { border-left-color: #bb806b; }
.vi-season-upcoming > article[data-season-type="harvest"] { border-left-color: #af9644; }
.vi-season-upcoming > article span { color: #819087; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.vi-season-upcoming > article strong { font-size: 10px; }
.vi-season-upcoming > article small { overflow: hidden; color: #718078; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.vi-weather-days { display: grid; grid-template-columns: repeat(7, minmax(62px, 1fr)); gap: 5px; overflow-x: auto; padding-bottom: 7px; }
.vi-weather-days article { display: grid; gap: 3px; min-width: 62px; padding: 8px; border-radius: 10px; background: linear-gradient(150deg, #eaf1e7, #f9faf6); }
.vi-weather-days span, .vi-weather-days em { color: #7b8980; font-size: 7px; font-style: normal; }
.vi-weather-days strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.vi-weather-days b { color: var(--vi-garden-moss); font-size: 13px; }
.vi-weather-days b small { color: #89948e; font-size: 9px; font-weight: 600; }
.vi-weather-alerts { display: grid; gap: 5px; margin-top: 4px; }
.vi-weather-alerts > article { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 9px; border-left: 3px solid #c28a4c; border-radius: 9px; background: #fff; }
.vi-weather-alerts > article[data-priority="urgent"] { border-left-color: #ad5644; }
.vi-weather-alerts > article div { display: grid; gap: 2px; }
.vi-weather-alerts span { color: #977043; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.vi-weather-alerts strong { font-size: 10px; }
.vi-weather-alerts small { color: #748178; font-size: 8px; }
.vi-weather-alerts button, .vi-weather-location button { flex: 0 0 auto; padding: 7px 9px; border: 0; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; cursor: pointer; font: 800 8px/1 "Avenir Next", sans-serif; }
.vi-weather-alerts button:disabled { cursor: wait; opacity: .5; }
.vi-weather-location { display: flex; min-height: 128px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 16px; border: 1px dashed #bdc9bf; border-radius: 12px; color: #748178; text-align: center; }
.vi-weather-location strong { color: var(--vi-garden-ink); font-size: 13px; }
.vi-weather-location span { max-width: 360px; font-size: 9px; line-height: 1.45; }
.vi-weather-location button { margin-top: 5px; }
.vi-seasonal-columns > section > footer { margin-top: 8px; text-align: right; }
.vi-seasonal-columns > section > footer a { color: var(--vi-garden-green); font-weight: 800; }
.vi-conditions-panel { --condition-line: rgba(35, 65, 48, .13); margin: 28px 0; padding: clamp(16px, 2.5vw, 24px); overflow: hidden; border: 1px solid var(--vi-garden-line); border-radius: 22px; background: linear-gradient(145deg, rgba(251, 252, 248, .94), rgba(231, 239, 228, .88)); box-shadow: 0 18px 48px rgba(31, 63, 43, .08); }
.vi-conditions-current { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); min-width: 0; overflow: hidden; border-radius: 19px; background: radial-gradient(circle at 13% 5%, rgba(183, 213, 177, .22), transparent 38%), linear-gradient(135deg, #183e2b, #0d291c); color: #fff; box-shadow: 0 16px 34px rgba(24, 56, 38, .2); }
.vi-conditions-current[data-tone="sun"] { background: radial-gradient(circle at 18% 4%, rgba(239, 205, 117, .3), transparent 39%), linear-gradient(135deg, #294f36, #122d20); }
.vi-conditions-current[data-tone="rain"], .vi-conditions-current[data-tone="storm"] { background: radial-gradient(circle at 18% 4%, rgba(118, 166, 178, .28), transparent 39%), linear-gradient(135deg, #213f3e, #132827); }
.vi-conditions-current__hero { position: relative; display: grid; grid-template-columns: 1fr auto; align-content: center; min-height: 204px; padding: 26px 30px; border-right: 1px solid rgba(255, 255, 255, .12); }
.vi-conditions-current__hero > span { grid-column: 1 / -1; color: #aed4b8; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.vi-conditions-current__hero > div { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.vi-conditions-current__hero i { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 16px; background: rgba(255, 255, 255, .09); color: #f2d98c; font: 400 27px/1 Georgia, serif; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.vi-conditions-current__hero h4 { margin: 0; color: #fff; font-size: clamp(19px, 2vw, 27px); font-weight: 600; }
.vi-conditions-current__hero > strong { align-self: center; color: #fff; font-size: clamp(48px, 6vw, 72px); font-weight: 500; letter-spacing: -.07em; line-height: 1; }
.vi-conditions-current__hero > small { grid-column: 1 / -1; margin-top: 14px; color: rgba(231, 241, 234, .62); font-size: 8px; }
.vi-conditions-current__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vi-conditions-current__metrics article { --condition-chart: #9fc4aa; position: relative; display: grid; align-content: center; gap: 6px; min-width: 0; min-height: 101px; overflow: hidden; padding: 16px; border-right: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.vi-conditions-current__metrics article[data-chart-color="blue"] { --condition-chart: #8fc3df; }
.vi-conditions-current__metrics article[data-chart-color="gold"] { --condition-chart: #efd278; }
.vi-conditions-current__metrics article[data-chart-color="lime"] { --condition-chart: #bad77d; }
.vi-conditions-current__metrics article[data-chart-color="slate"] { --condition-chart: #b6c4c4; }
.vi-conditions-current__metrics span:not(.vi-condition-chart) { position: relative; z-index: 2; overflow: hidden; color: rgba(221, 236, 225, .6); font-size: 7px; font-weight: 800; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.vi-conditions-current__metrics strong { position: relative; z-index: 2; color: #fff; font-size: clamp(13px, 1.6vw, 20px); font-weight: 600; text-shadow: 0 1px 8px rgba(7, 24, 15, .7); }
.vi-environment-intelligence { margin-top: 14px; padding: 15px; border: 1px solid rgba(35, 65, 48, .13); border-radius: 19px; background: rgba(255, 255, 255, .52); box-shadow: inset 0 1px rgba(255, 255, 255, .72); }
.vi-environment-intelligence > header, .vi-environment-subhead { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.vi-environment-intelligence > header { margin-bottom: 10px; }
.vi-environment-intelligence > header > div, .vi-environment-subhead > div { display: grid; gap: 3px; }
.vi-environment-intelligence > header span, .vi-environment-subhead span { color: var(--vi-garden-green); font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.vi-environment-intelligence > header strong, .vi-environment-subhead strong { color: var(--vi-garden-ink); font-size: 13px; }
.vi-environment-intelligence > header small, .vi-environment-subhead > small { color: #7c8981; font-size: 7px; }
.vi-environment-water { display: grid; grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr); overflow: hidden; border: 1px solid rgba(28, 71, 44, .14); border-radius: 16px; background: #f7f9f4; }
.vi-environment-water__summary { display: grid; align-content: center; min-height: 190px; padding: 22px; background: radial-gradient(circle at 100% 0, rgba(134, 183, 145, .2), transparent 46%), linear-gradient(145deg, #214a33, #173a28); color: #fff; }
.vi-environment-intelligence[data-water-status="action"] .vi-environment-water__summary { background: radial-gradient(circle at 100% 0, rgba(215, 178, 90, .24), transparent 46%), linear-gradient(145deg, #4c4526, #2d3825); }
.vi-environment-intelligence[data-water-status="watch"] .vi-environment-water__summary { background: radial-gradient(circle at 100% 0, rgba(124, 170, 180, .2), transparent 46%), linear-gradient(145deg, #294b42, #1d3832); }
.vi-environment-water__summary > span { color: #acd1b5; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.vi-environment-water__summary h4 { margin: 8px 0 0; color: #fff; font-size: 18px; font-weight: 600; }
.vi-environment-water__summary > strong { margin-top: 5px; color: #fff; font-size: 36px; font-weight: 500; letter-spacing: -.05em; }
.vi-environment-water__summary > strong small { font-size: 14px; font-weight: 600; }
.vi-environment-water__summary > p { max-width: 540px; margin: 5px 0 15px; color: rgba(234, 242, 236, .68); font-size: 8px; line-height: 1.45; }
.vi-environment-water__summary footer { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .11); }
.vi-environment-water__summary footer span { display: grid; gap: 2px; color: rgba(226, 237, 229, .56); font-size: 6px; text-transform: uppercase; }
.vi-environment-water__summary footer b { color: #fff; font-size: 9px; text-transform: none; }
.vi-environment-water__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 0; }
.vi-environment-water__days article { display: grid; align-content: center; gap: 7px; min-width: 0; padding: 12px 8px; border-left: 1px solid rgba(35, 65, 48, .09); text-align: center; }
.vi-environment-water__days header { display: grid; gap: 2px; }
.vi-environment-water__days strong { font-size: 8px; text-transform: uppercase; }
.vi-environment-water__days header span { color: #68786f; font-size: 8px; font-weight: 800; }
.vi-environment-water__days article > div { position: relative; width: 9px; height: 60px; margin: 0 auto; overflow: hidden; border-radius: 999px; background: #e1e8df; }
.vi-environment-water__days article > div i { position: absolute; right: 0; bottom: 0; left: 0; height: var(--water-level); min-height: 3px; border-radius: inherit; background: #799e82; }
.vi-environment-water__days article[data-status="deficit"] > div i { background: #c79655; }
.vi-environment-water__days article[data-status="recharge"] > div i { background: #6497a9; }
.vi-environment-water__days article > small { overflow: hidden; color: #89938d; font-size: 6px; text-overflow: ellipsis; text-transform: uppercase; }
.vi-environment-subhead { margin: 17px 0 8px; }
.vi-environment-risks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.vi-environment-risks article { position: relative; display: grid; min-width: 0; min-height: 126px; padding: 12px; overflow: hidden; border: 1px solid rgba(35, 65, 48, .11); border-radius: 13px; background: rgba(249, 250, 247, .82); }
.vi-environment-risks article::after { position: absolute; right: -20px; bottom: -30px; width: 80px; height: 80px; border-radius: 50%; background: rgba(95, 143, 107, .06); content: ""; }
.vi-environment-risks header { display: flex; align-items: center; justify-content: space-between; }
.vi-environment-risks header i { width: 7px; height: 7px; border-radius: 50%; background: #78a184; box-shadow: 0 0 0 3px rgba(120, 161, 132, .13); }
.vi-environment-risks header span { color: #6d7b72; font-size: 6px; font-weight: 900; text-transform: uppercase; }
.vi-environment-risks article[data-level="watch"] header i { background: #d19c4f; box-shadow: 0 0 0 3px rgba(209, 156, 79, .14); }
.vi-environment-risks article[data-level="high"] header i { background: #b9604d; box-shadow: 0 0 0 3px rgba(185, 96, 77, .14); }
.vi-environment-risks article > strong { margin-top: 10px; font-size: 9px; }
.vi-environment-risks article > b { margin-top: 3px; color: var(--vi-garden-moss); font-size: 24px; font-weight: 500; }
.vi-environment-risks article > b small { font-size: 8px; }
.vi-environment-risks article p { z-index: 1; margin: 7px 0 0; color: #7d8981; font-size: 7px; line-height: 1.4; }
.vi-plant-weather-risks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.vi-plant-weather-risks > article { display: grid; min-width: 0; gap: 5px; padding: 12px; border: 1px solid rgba(53, 91, 63, .13); border-left: 3px solid #d09a48; border-radius: 12px; background: rgba(255, 255, 255, .76); }
.vi-plant-weather-risks > article[data-level="high"] { border-left-color: #b85d4b; background: linear-gradient(135deg, rgba(255, 248, 245, .9), rgba(255, 255, 255, .76)); }
.vi-plant-weather-risks > article > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vi-plant-weather-risks > article > header span, .vi-plant-weather-risks > article > header b { color: #8f6938; font-size: 6px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.vi-plant-weather-risks > article[data-level="high"] > header b { color: #a34f42; }
.vi-plant-weather-risks > article > strong { color: var(--vi-garden-ink); font-size: 10px; }
.vi-plant-weather-risks > article > p { margin: 0; color: #6f7d74; font-size: 8px; line-height: 1.4; }
.vi-plant-weather-risks > article > div { display: flex; min-width: 0; flex-wrap: wrap; gap: 3px; }
.vi-plant-weather-risks > article > div i { overflow: hidden; padding: 3px 5px; border-radius: 999px; background: rgba(61, 102, 72, .07); color: #617168; font-size: 6px; font-style: normal; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.vi-plant-weather-risks > article > small { color: #859088; font-size: 6px; font-weight: 800; }
.vi-plant-weather-risks > article > footer { display: flex; justify-content: flex-end; gap: 5px; margin-top: 2px; }
.vi-plant-weather-risks button { padding: 7px 9px; border: 1px solid rgba(49, 94, 62, .17); border-radius: 999px; background: rgba(255, 255, 255, .82); color: var(--vi-garden-moss); cursor: pointer; font: 800 7px/1 "Avenir Next", sans-serif; }
.vi-plant-weather-risks button:last-child { border-color: transparent; background: var(--vi-garden-moss); color: #fff; }
.vi-plant-weather-risks button:disabled { cursor: default; opacity: .45; }
.vi-environment-soil { display: grid; grid-template-columns: minmax(245px, .65fr) minmax(0, 1.35fr); overflow: hidden; border: 1px solid rgba(73, 69, 44, .14); border-radius: 14px; background: #f8f7f1; }
.vi-environment-soil > article { display: grid; align-content: center; min-height: 150px; padding: 17px; background: radial-gradient(circle at 100% 0, rgba(193, 165, 100, .16), transparent 45%), linear-gradient(145deg, #4b4a34, #343b2e); color: #fff; }
.vi-environment-soil[data-status="dry"] > article { background: radial-gradient(circle at 100% 0, rgba(208, 150, 78, .2), transparent 45%), linear-gradient(145deg, #59462d, #3d3529); }
.vi-environment-soil[data-status="saturated"] > article { background: radial-gradient(circle at 100% 0, rgba(101, 156, 173, .2), transparent 45%), linear-gradient(145deg, #334d49, #293b37); }
.vi-environment-soil > article > span { color: #d5c99e; font-size: 6px; font-weight: 900; letter-spacing: .1em; }
.vi-environment-soil > article > strong { margin-top: 6px; font-size: 14px; }
.vi-environment-soil > article > div { display: flex; gap: 18px; margin-top: 11px; }
.vi-environment-soil > article b { color: #fff; font-size: 22px; font-weight: 500; }
.vi-environment-soil > article b small { color: rgba(238, 240, 231, .55); font-size: 7px; }
.vi-environment-soil > article p { margin: 10px 0 0; color: rgba(238, 240, 231, .58); font-size: 7px; line-height: 1.4; }
.vi-environment-soil__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.vi-environment-soil__days article { display: grid; align-content: center; justify-items: center; gap: 5px; min-width: 0; padding: 10px 6px; border-left: 1px solid rgba(73, 69, 44, .09); }
.vi-environment-soil__days strong { font-size: 7px; text-transform: uppercase; }
.vi-environment-soil__days span { color: #625f48; font-size: 12px; font-weight: 700; }
.vi-environment-soil__days article > div { position: relative; width: 25px; height: 35px; overflow: hidden; border-radius: 7px 7px 11px 11px; background: #e5e3d7; }
.vi-environment-soil__days article > div i { position: absolute; right: 0; bottom: 0; left: 0; height: var(--soil-level); background: linear-gradient(#8cac9b, #5d8b78); }
.vi-environment-soil__days small { color: #8b8979; font-size: 6px; }
.vi-environment-plant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.vi-environment-plant-grid > section { min-width: 0; padding: 12px; border: 1px solid rgba(35, 65, 48, .11); border-radius: 13px; background: rgba(255, 255, 255, .66); }
.vi-environment-plant-grid > section > header { display: grid; gap: 3px; margin-bottom: 8px; }
.vi-environment-plant-grid > section > header span { color: var(--vi-garden-green); font-size: 6px; font-weight: 900; letter-spacing: .09em; }
.vi-environment-plant-grid > section > header strong { font-size: 10px; }
.vi-environment-growth, .vi-environment-sowing { display: grid; gap: 5px; }
.vi-environment-growth > article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 8px; border-radius: 9px; background: #f1f5ef; }
.vi-environment-growth > article > div { display: grid; gap: 2px; min-width: 0; }
.vi-environment-growth span, .vi-environment-sowing span { color: #728178; font-size: 6px; font-weight: 900; text-transform: uppercase; }
.vi-environment-growth strong, .vi-environment-sowing strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.vi-environment-growth small, .vi-environment-sowing small { color: #879188; font-size: 6px; }
.vi-environment-growth > article > b { color: var(--vi-garden-moss); font-size: 18px; font-weight: 500; }
.vi-environment-growth > article > b small { font-size: 6px; }
.vi-environment-growth > article[data-momentum="strong"] > b { color: #39734b; }
.vi-environment-growth > article[data-momentum="slow"] > b { color: #9a7b46; }
.vi-environment-sowing > article { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; padding: 8px; border-radius: 9px; background: #f4f5f0; }
.vi-environment-sowing > article > i { width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; background: #c4954f; box-shadow: 0 0 0 3px rgba(196, 149, 79, .13); }
.vi-environment-sowing > article[data-status="ready"] > i { background: #57906a; box-shadow: 0 0 0 3px rgba(87, 144, 106, .13); }
.vi-environment-sowing > article > div { display: grid; gap: 2px; min-width: 0; }
.vi-environment-sowing small { line-height: 1.35; }
.vi-environment-plant-health { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.vi-environment-plant-health > article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; padding: 11px; border: 1px solid rgba(35, 65, 48, .11); border-radius: 12px; background: rgba(255, 255, 255, .74); }
.vi-environment-plant-health > article > div { display: grid; gap: 2px; min-width: 0; }
.vi-environment-plant-health span { color: #63806c; font-size: 6px; font-weight: 900; text-transform: uppercase; }
.vi-environment-plant-health article[data-level="watch"] span { color: #a17737; }
.vi-environment-plant-health article[data-level="high"] span { color: #a84f3f; }
.vi-environment-plant-health strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.vi-environment-plant-health small, .vi-environment-plant-health p { color: #7e8b82; font-size: 6px; }
.vi-environment-plant-health > article > b { color: var(--vi-garden-moss); font-size: 17px; font-weight: 500; }
.vi-environment-plant-health > article > b small { font-size: 6px; }
.vi-environment-plant-health p { grid-column: 1 / -1; margin: 3px 0 0; line-height: 1.35; }
.vi-environment-windows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.vi-environment-windows > article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(35, 65, 48, .11); border-radius: 13px; background: rgba(255, 255, 255, .76); }
.vi-environment-windows > article > div:first-child { display: grid; gap: 3px; min-width: 0; }
.vi-environment-windows span { color: #688071; font-size: 6px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.vi-environment-windows strong { font-size: 10px; }
.vi-environment-windows small, .vi-environment-windows p { color: #7e8a82; font-size: 7px; }
.vi-environment-windows p { margin: 2px 0 0; }
.vi-environment-windows > article > div:last-child { display: grid; justify-items: end; gap: 7px; }
.vi-environment-windows b { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; background: #e6eee4; color: var(--vi-garden-moss); font-size: 11px; }
.vi-environment-windows button, .vi-environment-actions button { padding: 7px 9px; border: 0; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; cursor: pointer; font: 800 7px/1 "Avenir Next", sans-serif; }
.vi-environment-windows button:disabled, .vi-environment-actions button:disabled { cursor: default; opacity: .48; }
.vi-environment-actions { display: grid; gap: 5px; margin-top: 10px; }
.vi-environment-actions > article { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; border-left: 3px solid #c8954e; border-radius: 10px; background: #fff; }
.vi-environment-actions > article[data-priority="high"] { border-left-color: #b9604d; }
.vi-environment-actions > article > div { display: grid; gap: 2px; }
.vi-environment-actions span { color: #9a7039; font-size: 6px; font-weight: 900; text-transform: uppercase; }
.vi-environment-actions strong { font-size: 9px; }
.vi-environment-actions small { color: #758178; font-size: 7px; line-height: 1.4; }
.vi-environment-actions em { color: #849088; font-size: 6px; font-style: normal; }
.vi-environment-intelligence > footer { margin-top: 10px; color: #879189; font-size: 6px; line-height: 1.4; }
.vi-conditions-forecast-head, .vi-conditions-hourly > header, .vi-conditions-guidance > header { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 23px 0 11px; }
.vi-conditions-forecast-head > div:first-child, .vi-conditions-hourly > header > div, .vi-conditions-guidance > header > div { display: grid; gap: 4px; }
.vi-conditions-forecast-head span, .vi-conditions-hourly > header span, .vi-conditions-guidance > header span { color: var(--vi-garden-green); font-size: 7px; font-weight: 900; letter-spacing: .13em; }
.vi-conditions-forecast-head strong, .vi-conditions-hourly > header strong, .vi-conditions-guidance > header strong { color: var(--vi-garden-ink); font-size: 14px; }
.vi-condition-display-toolbar { display: flex; align-items: center; gap: 8px; margin: 0 0 11px; padding: 5px; overflow-x: auto; border: 1px solid var(--condition-line); border-radius: 14px; background: rgba(255, 255, 255, .58); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vi-condition-display-toolbar::-webkit-scrollbar { display: none; }
.vi-condition-display-toolbar > div { display: flex; flex: 0 0 auto; align-items: center; gap: 3px; }
.vi-condition-display-toolbar > div + div { padding-left: 8px; border-left: 1px solid var(--condition-line); }
.vi-condition-display-toolbar span { padding: 0 6px; color: #7b8980; font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.vi-condition-display-toolbar button { flex: 0 0 auto; padding: 8px 11px; border: 0; border-radius: 10px; background: transparent; color: #68786e; cursor: pointer; font: 800 8px/1 "Avenir Next", sans-serif; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.vi-condition-display-toolbar button:hover { background: rgba(39, 87, 58, .07); color: var(--vi-garden-moss); }
.vi-condition-display-toolbar button.is-active { background: var(--vi-garden-moss); color: #fff; box-shadow: 0 5px 12px rgba(27, 65, 40, .16); }
.vi-condition-display-toolbar .vi-condition-now-toggle { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.vi-condition-display-toolbar .vi-condition-loop-toggle { display: flex; align-items: center; gap: 6px; }
.vi-condition-loop-toggle i { color: currentColor; font: 700 15px/.5 Georgia, serif; }
.vi-condition-now-toggle i { display: block; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #82938a; box-shadow: 0 0 0 2px rgba(104, 120, 110, .2); }
.vi-condition-now-toggle.is-active i { background: #d7b85c; box-shadow: 0 0 0 2px rgba(215, 184, 92, .3), 0 0 8px #d7b85c; }
.vi-conditions-days { display: grid; grid-auto-columns: minmax(176px, 1fr); grid-auto-flow: column; gap: 9px; overflow-x: auto; padding: 4px 3px 12px; scroll-snap-type: x proximity; scrollbar-color: rgba(39, 87, 58, .32) transparent; }
.vi-conditions-days[data-layout="2"], .vi-conditions-days[data-layout="3"] { grid-auto-columns: auto; grid-auto-flow: row; overflow: visible; scroll-snap-type: none; }
.vi-conditions-days[data-layout="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vi-conditions-days[data-layout="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vi-conditions-days.is-looping { grid-template-columns: none; grid-auto-flow: column; overflow-x: auto; overscroll-behavior-x: contain; scroll-behavior: auto; scroll-snap-type: none; scrollbar-width: none; }
.vi-conditions-days.is-looping::-webkit-scrollbar { display: none; }
.vi-conditions-days.is-looping[data-layout="2"] { grid-auto-columns: calc((100% - 9px) / 2); }
.vi-conditions-days.is-looping[data-layout="3"] { grid-auto-columns: calc((100% - 18px) / 3); }
.vi-conditions-days.is-looping[data-layout="compact"] { grid-auto-columns: minmax(176px, 20%); }
.vi-conditions-days.is-looping .vi-condition-day[data-loop-clone] { pointer-events: none; }
.vi-conditions-days.is-looping .vi-condition-day.is-active { border-color: var(--condition-line); box-shadow: inset 0 3px var(--vi-garden-moss); }
.vi-condition-day { position: relative; display: grid; gap: 11px; min-width: 0; padding: 14px; overflow: hidden; border: 1px solid var(--condition-line); border-radius: 17px; outline: 0; background: rgba(255, 255, 255, .75); color: var(--vi-garden-ink); cursor: pointer; scroll-snap-align: start; text-align: left; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.vi-condition-day:hover { border-color: rgba(39, 87, 58, .32); transform: translateY(-2px); }
.vi-condition-day.is-active { border-color: var(--vi-garden-moss); box-shadow: 0 10px 24px rgba(34, 70, 47, .12), inset 0 0 0 1px var(--vi-garden-moss); }
.vi-condition-day header, .vi-condition-day footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vi-condition-day header span { font-size: 9px; font-weight: 900; text-transform: uppercase; }
.vi-condition-day header small { color: #849087; font-size: 8px; }
.vi-condition-day__hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.vi-condition-day__hero > i { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 13px; background: #e6eee3; color: #627963; font: 400 22px/1 Georgia, serif; }
.vi-condition-day[data-tone="sun"] .vi-condition-day__hero > i { background: #f3ebce; color: #92732c; }
.vi-condition-day[data-tone="rain"] .vi-condition-day__hero > i, .vi-condition-day[data-tone="storm"] .vi-condition-day__hero > i { background: #e1edf0; color: #507487; }
.vi-condition-day__hero > div { display: grid; gap: 3px; min-width: 0; }
.vi-condition-day__hero strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.vi-condition-day__hero b { color: var(--vi-garden-moss); font-size: 21px; font-weight: 600; }
.vi-condition-day__hero b small { margin-left: 3px; color: #859087; font-size: 12px; font-weight: 500; }
.vi-condition-day__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 7px; min-width: 0; }
.vi-condition-day__metric { --condition-chart: #6f9477; display: grid; min-width: 0; padding-top: 2px; }
.vi-condition-day__metric[data-chart-color="blue"] { --condition-chart: #5992ad; }
.vi-condition-day__metric[data-chart-color="warm"] { --condition-chart: #c68861; }
.vi-condition-day__metric[data-chart-color="gold"] { --condition-chart: #b89a45; }
.vi-condition-day__metric[data-chart-color="lime"] { --condition-chart: #7e9b48; }
.vi-condition-day__metric[data-chart-color="mint"] { --condition-chart: #6f9b89; }
.vi-condition-day__metric[data-chart-color="slate"] { --condition-chart: #82918f; }
.vi-condition-day__metric > .vi-condition-chart { height: 25px; margin-bottom: 3px; }
.vi-condition-day__metric > span:not(.vi-condition-chart) { overflow: hidden; color: #849087; font-size: 6px; font-weight: 800; letter-spacing: .02em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.vi-condition-day__metric > b { overflow: hidden; margin-top: 2px; color: #435b4b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.vi-conditions-days[data-layout="2"] .vi-condition-day { padding: 17px; }
.vi-conditions-days[data-layout="2"] .vi-condition-day__hero { grid-template-columns: auto minmax(0, 1fr); }
.vi-conditions-days[data-layout="2"] .vi-condition-day__hero > i { width: 46px; height: 46px; font-size: 25px; }
.vi-conditions-days[data-layout="2"] .vi-condition-day__hero strong { font-size: 14px; }
.vi-conditions-days[data-layout="2"] .vi-condition-day__hero b { font-size: 27px; }
.vi-conditions-days[data-layout="2"] .vi-condition-day__metric > .vi-condition-chart { height: 31px; }
.vi-conditions-days[data-layout="2"] .vi-condition-day__metric > span:not(.vi-condition-chart) { font-size: 7px; }
.vi-conditions-days[data-layout="2"] .vi-condition-day__metric > b { font-size: 11px; }
.vi-condition-chart { position: relative; display: block; width: 100%; height: 26px; }
.vi-condition-chart.is-current { position: absolute; z-index: 0; top: 11px; right: 7px; bottom: 8px; left: 43px; width: auto; height: auto; opacity: .72; }
.vi-condition-chart.is-empty { border-bottom: 1px dashed #ccd5cb; }
.vi-condition-chart.is-current.is-empty { border-bottom-color: rgba(255, 255, 255, .12); }
.vi-condition-sparkline { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.vi-condition-sparkline polygon { fill: color-mix(in srgb, var(--condition-chart) 18%, transparent); stroke: none; }
.vi-condition-sparkline polyline { fill: none; stroke: var(--condition-chart); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.vi-condition-now-marker { position: absolute; z-index: 3; left: var(--now-x); top: var(--now-y); display: block; width: 7px; height: 7px; border: 2px solid rgba(255, 255, 255, .96); border-radius: 50%; background: var(--condition-chart); box-shadow: 0 0 0 2px color-mix(in srgb, var(--condition-chart) 30%, transparent), 0 0 10px var(--condition-chart); transform: translate(-50%, -50%); animation: viConditionNowPulse 2.8s ease-in-out infinite; }
.vi-condition-now-marker::after { position: absolute; top: 8px; left: 50%; width: 1px; height: 11px; background: linear-gradient(var(--condition-chart), transparent); content: ""; transform: translateX(-50%); opacity: .65; }
@keyframes viConditionNowPulse { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--condition-chart) 24%, transparent), 0 0 8px var(--condition-chart); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--condition-chart) 10%, transparent), 0 0 15px var(--condition-chart); } }
@media (prefers-reduced-motion: reduce) { .vi-condition-now-marker { animation: none; } }
.vi-conditions-hourly { min-width: 0; margin-top: 6px; }
.vi-conditions-hourly > header small, .vi-conditions-guidance > header small { color: #78867e; font-size: 8px; }
.vi-condition-hourly-scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--condition-line); border-radius: 16px; outline: 0; background: rgba(255, 255, 255, .65); -webkit-overflow-scrolling: touch; scrollbar-color: rgba(39, 87, 58, .36) transparent; }
.vi-condition-hourly-grid { display: grid; grid-template-columns: 136px repeat(var(--hours), minmax(50px, 1fr)); min-width: calc(136px + var(--hours) * 50px); }
.vi-condition-hourly-grid > time { display: grid; place-items: center; min-height: 35px; border-bottom: 1px solid var(--condition-line); border-left: 1px solid rgba(35, 65, 48, .08); color: #708078; font-size: 8px; font-weight: 800; }
.vi-condition-hour-label { position: sticky; left: 0; z-index: 2; display: grid; align-content: center; gap: 3px; min-height: 50px; padding: 8px 11px; border-right: 1px solid var(--condition-line); border-bottom: 1px solid var(--condition-line); background: rgba(244, 247, 240, .96); box-shadow: 5px 0 12px rgba(31, 62, 43, .04); }
.vi-condition-hour-label strong { font-size: 8px; }
.vi-condition-hour-label small { color: #87928b; font-size: 7px; }
.vi-condition-hour-corner { z-index: 3; min-height: 35px; color: #6d7c73; font-size: 7px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.vi-condition-hour-cell { position: relative; display: flex; min-height: 50px; align-items: end; justify-content: center; overflow: hidden; padding: 6px 2px; border-bottom: 1px solid var(--condition-line); border-left: 1px solid rgba(35, 65, 48, .07); background: rgba(255, 255, 255, .3); }
.vi-condition-hour-cell::before { position: absolute; right: 2px; bottom: 2px; left: 2px; height: var(--level); max-height: calc(100% - 4px); border-radius: 5px 5px 2px 2px; background: linear-gradient(to top, rgba(112, 151, 119, .34), rgba(112, 151, 119, .08)); content: ""; }
.vi-condition-hour-cell[data-color="warm"]::before { background: linear-gradient(to top, rgba(202, 132, 76, .42), rgba(232, 194, 151, .08)); }
.vi-condition-hour-cell[data-color="blue"]::before { background: linear-gradient(to top, rgba(84, 139, 169, .38), rgba(161, 203, 217, .08)); }
.vi-condition-hour-cell[data-color="gold"]::before { background: linear-gradient(to top, rgba(209, 174, 72, .4), rgba(240, 222, 152, .08)); }
.vi-condition-hour-cell[data-color="lime"]::before { background: linear-gradient(to top, rgba(133, 169, 77, .38), rgba(191, 215, 140, .08)); }
.vi-condition-hour-cell[data-color="slate"]::before { background: linear-gradient(to top, rgba(100, 117, 123, .35), rgba(183, 193, 195, .08)); }
.vi-condition-hour-cell b { position: relative; z-index: 1; color: #394c40; font-size: 7px; font-weight: 800; white-space: nowrap; }
.vi-condition-hour-cell.is-condition { align-items: center; padding: 0; }
.vi-condition-hour-cell.is-condition::before { display: none; }
.vi-condition-hour-cell.is-condition i { color: #718273; font: 400 18px/1 Georgia, serif; }
.vi-condition-hour-cell.is-condition[data-tone="sun"] i { color: #ad872e; }
.vi-condition-hour-cell.is-condition[data-tone="rain"] i, .vi-condition-hour-cell.is-condition[data-tone="storm"] i { color: #527b90; }
.vi-conditions-guidance { margin-top: 20px; }
.vi-conditions-guidance .vi-weather-alerts { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vi-conditions-panel > footer { margin-top: 13px; color: #819087; font-size: 8px; text-align: right; }
.vi-conditions-panel > footer a { color: var(--vi-garden-green); font-weight: 800; }
.vi-analytics-panel { margin: 28px 0; padding: clamp(16px, 2.5vw, 24px); border: 1px solid var(--vi-garden-line); border-radius: 20px; background: linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(239, 244, 236, .76)); }
.vi-analytics-actions, .vi-analytics-actions > div { display: flex; align-items: center; gap: 5px; }
.vi-analytics-actions button { padding: 7px 9px; border: 1px solid #d2dcd1; border-radius: 999px; background: rgba(255, 255, 255, .72); color: #617268; cursor: pointer; font: 800 8px/1 "Avenir Next", sans-serif; }
.vi-analytics-actions button.is-active, .vi-analytics-actions > button { border-color: var(--vi-garden-moss); background: var(--vi-garden-moss); color: #fff; }
.vi-analytics-overview { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
.vi-analytics-score { display: flex; min-height: 128px; flex-direction: column; align-items: center; justify-content: center; border-radius: 16px; background: var(--vi-garden-moss); color: #fff; text-align: center; }
.vi-analytics-score strong { font-size: 42px; line-height: 1; }
.vi-analytics-score span { margin-top: 7px; color: #b9d4c1; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.vi-analytics-score small { margin-top: 4px; color: rgba(255, 255, 255, .55); font-size: 7px; }
.vi-analytics-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vi-analytics-kpis article { display: grid; align-content: center; gap: 3px; min-width: 0; padding: 10px 12px; border: 1px solid rgba(39, 87, 58, .1); border-radius: 12px; background: rgba(255, 255, 255, .75); }
.vi-analytics-kpis strong { overflow: hidden; color: var(--vi-garden-moss); font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.vi-analytics-kpis span { color: #4e6657; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.vi-analytics-kpis small { overflow: hidden; color: #859188; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.vi-analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.vi-analytics-card { min-width: 0; padding: 13px; border: 1px solid rgba(39, 87, 58, .11); border-radius: 15px; background: rgba(255, 255, 255, .78); }
.vi-analytics-card > header { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.vi-analytics-card > header > div { display: grid; gap: 3px; }
.vi-analytics-card > header span { color: var(--vi-garden-green); font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.vi-analytics-card > header strong { font-size: 13px; }
.vi-analytics-card > header small { color: #849188; font-size: 7px; }
.vi-analytics-card > header small i { display: inline-block; width: 6px; height: 6px; margin: 0 2px 0 5px; border-radius: 2px; background: #8aaa8c; }
.vi-analytics-card > header small i[data-series="completed"] { background: #315f43; }
.vi-analytics-card > header small i[data-series="journal"] { background: #c3a663; }
.vi-analytics-bars { display: grid; min-height: 145px; grid-template-columns: repeat(var(--months, 12), minmax(22px, 1fr)); align-items: end; gap: 5px; overflow-x: auto; padding: 5px 0 0; }
.vi-analytics-bars article { display: grid; min-width: 22px; grid-template-rows: 118px auto; gap: 5px; text-align: center; }
.vi-analytics-bars article > div { display: flex; align-items: end; justify-content: center; gap: 2px; border-bottom: 1px solid #d7dfd5; }
.vi-analytics-bars i { display: block; width: 22%; min-height: 2px; height: var(--value); border-radius: 3px 3px 0 0; background: #8aaa8c; }
.vi-analytics-bars i[data-series="completed"] { background: #315f43; }
.vi-analytics-bars i[data-series="journal"] { background: #c3a663; }
.vi-analytics-bars article > strong { color: #7c8981; font-size: 7px; text-transform: uppercase; }
.vi-analytics-lifecycle, .vi-analytics-ranking, .vi-analytics-insights { display: grid; gap: 6px; }
.vi-analytics-lifecycle article { display: grid; gap: 4px; }
.vi-analytics-lifecycle header, .vi-analytics-ranking article, .vi-analytics-years, .vi-analytics-insights article { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.vi-analytics-lifecycle header strong { color: #506659; font-size: 8px; text-transform: capitalize; }
.vi-analytics-lifecycle header span { color: #819087; font-size: 8px; }
.vi-analytics-lifecycle article > div { overflow: hidden; height: 7px; border-radius: 999px; background: #e5ebe2; }
.vi-analytics-lifecycle article > div i { display: block; width: var(--value); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #86a98a, #315f43); }
.vi-analytics-ranking article { padding: 8px 9px; border-radius: 9px; background: #f4f7f1; }
.vi-analytics-ranking article > div { display: grid; gap: 2px; min-width: 0; }
.vi-analytics-ranking strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.vi-analytics-ranking small { color: #89948d; font-size: 7px; }
.vi-analytics-ranking span { flex: 0 0 auto; color: var(--vi-garden-moss); font-size: 9px; font-weight: 900; }
.vi-analytics-years { flex-wrap: wrap; margin-top: 8px; }
.vi-analytics-years article { display: grid; gap: 2px; min-width: 72px; padding: 7px; border: 1px solid #dce3da; border-radius: 8px; }
.vi-analytics-years strong { font-size: 8px; }
.vi-analytics-years span { color: var(--vi-garden-moss); font-size: 10px; font-weight: 900; }
.vi-analytics-years small { color: #8a958e; font-size: 7px; }
.vi-analytics-insights article { align-items: flex-start; flex-direction: column; gap: 3px; padding: 9px; border-left: 3px solid #829f86; border-radius: 9px; background: #f5f7f2; }
.vi-analytics-insights article[data-tone="warning"] { border-left-color: #b7684c; }
.vi-analytics-insights article[data-tone="positive"] { border-left-color: #4f865e; }
.vi-analytics-insights strong { font-size: 9px; }
.vi-analytics-insights span { color: #718078; font-size: 8px; line-height: 1.4; }
.vi-growing-plants { margin: 28px 0; }
.vi-growing-section-title { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 13px; }
.vi-growing-section-title > div > span { color: var(--vi-garden-green); }
.vi-growing-section-title h3 { margin: 3px 0 0; font-size: 22px; }
.vi-growing-section-title small { color: #748178; font-size: 10px; }
.vi-growing-plant-strip { display: grid; grid-auto-columns: minmax(210px, 1fr); grid-auto-flow: column; gap: 11px; overflow-x: auto; padding-bottom: 5px; }
.vi-growing-plant { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; min-width: 210px; padding: 10px; border: 1px solid var(--vi-garden-line); border-radius: 15px; background: rgba(255, 255, 255, .88); }
.vi-growing-plant__image { min-height: 74px; border-radius: 11px; background: radial-gradient(circle at 35% 30%, #dcebd9 0 20%, #9dc398 21% 42%, #547c5d 43%); background-position: center; background-size: cover; }
.vi-growing-plant > div:last-child { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
.vi-growing-plant strong, .vi-growing-plant small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vi-growing-plant strong { font-size: 12px; }
.vi-growing-plant small { margin: 4px 0 8px; color: #718078; font-size: 9px; }
.vi-growing-plant select { width: 100%; padding: 5px 7px; border: 1px solid var(--vi-garden-line); border-radius: 8px; background: #f7f8f3; color: var(--vi-garden-green); font: 800 9px/1 "Avenir Next", sans-serif; text-transform: capitalize; }
.vi-growing-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.vi-growing-card { min-width: 0; padding: clamp(16px, 2.5vw, 24px); border: 1px solid var(--vi-garden-line); border-radius: 20px; background: rgba(255, 255, 255, .82); }
.vi-growing-form { display: grid; gap: 8px; margin-bottom: 19px; padding: 12px; border-radius: 14px; background: #eff2eb; }
.vi-growing-form > div { display: grid; grid-template-columns: .8fr 1fr 1.25fr; gap: 7px; }
.vi-growing-form input, .vi-growing-form select, .vi-growing-form textarea { min-width: 0; width: 100%; padding: 9px 10px; border: 1px solid #d3dbd1; border-radius: 9px; outline: 0; background: #fff; color: var(--vi-garden-ink); font: 500 11px/1.3 "Avenir Next", sans-serif; }
.vi-growing-form input:focus, .vi-growing-form select:focus, .vi-growing-form textarea:focus { border-color: var(--vi-garden-green); }
.vi-growing-form textarea { resize: vertical; }
.vi-growing-form button { justify-self: end; padding: 9px 14px; border: 0; border-radius: 999px; background: var(--vi-garden-moss); color: #fff; cursor: pointer; font: 800 10px/1 "Avenir Next", sans-serif; }
.vi-growing-form button:disabled { cursor: not-allowed; opacity: .45; }
.vi-growing-photo-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #647269; font-size: 10px; font-weight: 800; }
.vi-growing-photo-field input { width: auto; max-width: 70%; padding: 6px; font-size: 9px; }
.vi-growing-task-list, .vi-growing-journal-list { display: grid; gap: 8px; max-height: 430px; overflow-y: auto; }
.vi-growing-task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px; border: 1px solid var(--vi-garden-line); border-radius: 12px; background: #fff; }
.vi-growing-task[data-priority="high"] { border-left: 4px solid #cc8b46; }
.vi-growing-task[data-priority="urgent"] { border-left: 4px solid #ac5644; box-shadow: 0 7px 20px rgba(139, 62, 45, .08); }
.vi-growing-task__check { display: grid; place-items: center; width: 25px; height: 25px; border: 2px solid #89a293; border-radius: 50%; background: #fff; color: #fff; cursor: pointer; font-size: 12px; }
.vi-growing-task.is-complete { opacity: .58; }
.vi-growing-task.is-complete .vi-growing-task__check { border-color: var(--vi-garden-green); background: var(--vi-garden-green); }
.vi-growing-task.is-complete strong { text-decoration: line-through; }
.vi-growing-task.is-overdue { border-left: 4px solid #b5674d; }
.vi-growing-task strong, .vi-growing-task small { display: block; }
.vi-growing-task strong { margin: 2px 0; font-size: 12px; }
.vi-growing-task small { overflow: hidden; color: #718078; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.vi-growing-task__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.vi-task-priority, .vi-task-approval { padding: 4px 7px; border-radius: 999px; background: #edf2ec; color: #587061; font: 800 8px/1 "Avenir Next", sans-serif; text-transform: uppercase; }
.vi-task-approval { background: #eef0df; color: #6d6b36; }
.vi-task-workflow { display: flex; flex-wrap: wrap; align-items: end; gap: 7px; margin-top: 8px; }
.vi-task-workflow label { display: grid; gap: 3px; color: #829087; font: 700 7px/1 "Avenir Next", sans-serif; text-transform: uppercase; }
.vi-task-workflow select { min-width: 105px; padding: 6px 22px 6px 7px; border: 1px solid #d8ded6; border-radius: 8px; background: #f8faf7; color: #31523f; font: 600 9px/1 "Avenir Next", sans-serif; }
.vi-task-workflow > div { display: flex; align-items: center; gap: 5px; }
.vi-task-workflow button, .vi-task-workflow span { padding: 7px 9px; border: 1px solid rgba(39, 87, 58, .15); border-radius: 999px; background: #f4f8f4; color: #42614e; font: 700 8px/1 "Avenir Next", sans-serif; }
.vi-task-workflow button { cursor: pointer; }
.vi-task-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 9px; margin-bottom: 10px; }
.vi-task-toolbar > div { display: flex; flex-wrap: wrap; gap: 4px; }
.vi-task-toolbar button { padding: 7px 9px; border: 1px solid #d7ded5; border-radius: 999px; background: rgba(255, 255, 255, .72); color: #5f7167; cursor: pointer; font: 700 8px/1 "Avenir Next", sans-serif; }
.vi-task-toolbar button.is-active { border-color: var(--vi-garden-green); background: var(--vi-garden-green); color: #fff; }
.vi-task-toolbar input { min-width: 120px; padding: 8px 10px; border: 1px solid #d7ded5; border-radius: 999px; outline: none; background: #fff; color: #284434; font: 600 9px/1 "Avenir Next", sans-serif; }
.vi-growing-tag { color: var(--vi-garden-green); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.vi-growing-delete { align-self: start; padding: 2px 6px; border: 0; background: transparent; color: #9b7770; cursor: pointer; font: 500 18px/1 sans-serif; }
.vi-growing-journal-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; padding: 12px; border: 1px solid var(--vi-garden-line); border-radius: 13px; background: #fff; }
.vi-growing-journal-card__date { display: flex; height: 45px; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; background: var(--vi-garden-mint); color: var(--vi-garden-moss); }
.vi-growing-journal-card__date strong { font-size: 17px; line-height: 1; }
.vi-growing-journal-card__date span { margin-top: 3px; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.vi-growing-journal-card h4 { margin: 3px 0; font-size: 13px; }
.vi-growing-journal-card p { margin: 0 0 5px; color: #65746b; font-size: 10px; line-height: 1.4; }
.vi-growing-journal-card small { color: #8a968f; font-size: 8px; }
.vi-growing-journal-card__image { width: 100%; height: 110px; margin-bottom: 8px; border-radius: 9px; object-fit: cover; }
.vi-growing-harvest-card { margin-top: 18px; }
.vi-growing-harvest-form > div { grid-template-columns: 1.3fr .7fr .8fr .8fr 1fr; }
.vi-growing-harvest-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; }
.vi-growing-harvest { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--vi-garden-line); border-radius: 14px; background: #fff; }
.vi-growing-harvest__amount { display: flex; min-height: 55px; flex-direction: column; align-items: center; justify-content: center; border-radius: 11px; background: var(--vi-garden-moss); color: #fff; }
.vi-growing-harvest__amount strong { font-size: 17px; line-height: 1; }
.vi-growing-harvest__amount span { margin-top: 4px; color: #b9d3c2; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.vi-growing-harvest h4 { margin: 3px 0; font-size: 12px; }
.vi-growing-harvest p { margin: 0; color: #718078; font-size: 9px; line-height: 1.35; }
.vi-growing-empty { display: flex; min-height: 86px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; padding: 18px; border: 1px dashed #bcc8bf; border-radius: 13px; color: #718078; text-align: center; }
.vi-growing-empty strong { color: var(--vi-garden-ink); font-size: 13px; }
.vi-growing-empty span { font-size: 10px; }

.vi-garden-viewer__title { margin: 3px 0 0; font-size: clamp(22px, 4vw, 34px); line-height: 1.05; }
.vi-garden-viewer__actions { display: flex; gap: 8px; }
.vi-garden-viewer__meta { display: flex; justify-content: space-between; gap: 20px; padding: 14px 24px; border-bottom: 1px solid var(--vi-garden-line); color: #68786f; font-size: 11px; font-weight: 700; }
.vi-garden-viewer__workspace { padding: clamp(18px, 4vw, 42px); background: #e9ede4; }
.vi-garden-viewer .vi-garden-canvas-wrap { min-height: min(68vh, 680px); }
.vi-garden-viewer .vi-garden-canvas { width: min(100%, 900px); }

@media (min-width: 1051px) {
    .vi-garden-app.is-full-page .vi-garden-editor__body { min-height: calc(100dvh - 124px - var(--wp-admin--admin-bar--height, 0px)); }
    .vi-garden-app.is-full-page .vi-garden-tools,
    .vi-garden-app.is-full-page .vi-garden-sidebar { max-height: calc(100dvh - 124px - var(--wp-admin--admin-bar--height, 0px)); overflow-y: auto; }
    .vi-garden-app.is-full-page .vi-garden-workspace { min-height: calc(100dvh - 124px - var(--wp-admin--admin-bar--height, 0px)); }
}

.vi-garden-capture-modal { position: fixed; inset: 0; z-index: 999999; display: grid; place-items: center; padding: 18px; background: rgba(18, 35, 26, .76); backdrop-filter: blur(12px); }
.vi-garden-capture-dialog { width: min(820px, 100%); max-height: 94vh; overflow: auto; border: 1px solid rgba(255, 255, 255, .28); border-radius: 22px; background: #f7f7f0; box-shadow: 0 30px 90px rgba(0, 0, 0, .35); }
.vi-garden-capture-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid var(--vi-garden-line); }
.vi-garden-capture-dialog h3 { margin: 3px 0 0; font-size: 22px; }
.vi-garden-capture-dialog > header button { width: 36px; height: 36px; border: 1px solid var(--vi-garden-line); border-radius: 50%; background: #fff; color: var(--vi-garden-ink); cursor: pointer; font-size: 24px; }
.vi-garden-capture-stage { display: grid; place-items: center; min-height: 420px; padding: 14px; overflow: hidden; background: #17271f; }
.vi-garden-capture-stage video { width: 100%; max-height: 60vh; border-radius: 12px; object-fit: contain; }
.vi-garden-camera-message { max-width: 440px; color: #dce8df; line-height: 1.5; text-align: center; }
.vi-garden-calibration { position: relative; width: fit-content; max-width: 100%; }
.vi-garden-calibration[hidden] { display: none; }
.vi-garden-calibration img { display: block; max-width: 100%; max-height: 58vh; border-radius: 10px; }
.vi-garden-calibration [data-calibration-points] { position: absolute; inset: 0; cursor: crosshair; }
.vi-garden-calibration [data-calibration-points] svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vi-garden-calibration [data-calibration-points] polygon { fill: rgba(82, 133, 91, .18); stroke: #fff; stroke-width: .8; stroke-dasharray: 2 1; vector-effect: non-scaling-stroke; }
.vi-garden-calibration [data-calibration-points] span { position: absolute; display: grid; place-items: center; width: 28px; height: 28px; border: 3px solid #fff; border-radius: 50%; background: var(--vi-garden-moss); color: #fff; font-size: 11px; font-weight: 800; transform: translate(-50%, -50%); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.vi-garden-capture-instructions { padding: 13px 20px; color: #68786f; font-size: 12px; text-align: center; }
.vi-garden-capture-dialog > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px 20px; }
.vi-garden-capture-dialog > footer button { padding: 11px 16px; border: 1px solid var(--vi-garden-line); border-radius: 999px; background: #fff; color: var(--vi-garden-ink); cursor: pointer; font: inherit; font-size: 11px; font-weight: 800; }
.vi-garden-capture-dialog > footer button.is-primary { border-color: var(--vi-garden-moss); background: var(--vi-garden-moss); color: #fff; }
.vi-garden-capture-dialog > footer button:disabled { cursor: not-allowed; opacity: .4; }

.vi-garden-3d-modal { position: fixed; inset: 0; z-index: 1000000; display: grid; place-items: center; padding: 14px; background: rgba(13, 29, 20, .82); backdrop-filter: blur(14px); }
.vi-garden-3d-modal.is-embedded { position: absolute; z-index: 1; padding: 0; background: transparent; backdrop-filter: none; }
.vi-garden-3d-modal.is-embedded .vi-garden-3d-dialog { width: 100%; height: 100%; border: 0; border-radius: 18px; box-shadow: none; }
.vi-garden-3d-modal.is-card-preview { inset: 0; }
.vi-garden-3d-modal.is-card-preview .vi-garden-3d-dialog { grid-template-rows: minmax(0, 1fr); border-radius: 0; }
.vi-garden-3d-modal.is-card-preview .vi-garden-3d-dialog > header,
.vi-garden-3d-modal.is-card-preview .vi-garden-3d-dialog > footer,
.vi-garden-3d-modal.is-card-preview .vi-garden-3d-capture,
.vi-garden-3d-modal.is-card-preview .vi-garden-3d-editor,
.vi-garden-3d-modal.is-card-preview .vi-garden-weather-label { display: none; }
.vi-garden-3d-dialog { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: 96vw; height: 94dvh; overflow: hidden; border: 1px solid rgba(255, 255, 255, .24); border-radius: 24px; background: #e8eee5; box-shadow: 0 30px 100px rgba(0, 0, 0, .42); }
.vi-garden-3d-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 18px; border-bottom: 1px solid rgba(43, 72, 54, .16); background: rgba(248, 249, 243, .9); }
.vi-garden-3d-modal.is-embedded .vi-garden-3d-dialog > header { justify-content: flex-end; }
.vi-garden-3d-modal.is-embedded.has-external-controls .vi-garden-3d-dialog > header { display: none; }
.vi-garden-3d-dialog > header span { color: var(--vi-garden-green); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.vi-garden-3d-dialog h3 { margin: 2px 0 0; color: var(--vi-garden-ink); font-size: 20px; }
.vi-garden-3d-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.vi-garden-weather-control { display: flex; align-items: center; gap: 7px; padding: 4px 5px 4px 11px; border: 1px solid var(--vi-garden-line); border-radius: 999px; background: rgba(255, 255, 255, .72); }
.vi-garden-weather-control span { letter-spacing: .08em !important; }
.vi-garden-weather-control select { min-width: 76px; padding: 5px 24px 5px 7px; border: 0; border-radius: 999px; outline: 0; background-color: #e8eee5; color: var(--vi-garden-ink); cursor: pointer; font: 800 10px/1 "Avenir Next", sans-serif; }
.vi-garden-3d-actions button, .vi-garden-ar-button { min-width: auto !important; height: auto !important; padding: 9px 13px !important; border: 1px solid var(--vi-garden-line) !important; border-radius: 999px !important; background: #fff !important; color: var(--vi-garden-ink) !important; cursor: pointer; font: 800 10px/1 "Avenir Next", sans-serif !important; position: static !important; opacity: 1 !important; }
.vi-garden-3d-zoom { display: flex; align-items: center; padding: 3px; border: 1px solid var(--vi-garden-line); border-radius: 999px; background: rgba(255, 255, 255, .72); }
.vi-garden-3d-actions .vi-garden-3d-zoom button { min-width: 30px !important; height: 28px !important; padding: 0 8px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; }
.vi-garden-3d-actions .vi-garden-3d-zoom button:hover { background: #e5eee5 !important; }
.vi-garden-3d-actions [data-3d-close] { display: grid; place-items: center; width: 36px; height: 36px !important; padding: 0 !important; font-size: 22px !important; }
.vi-garden-ar-button { border-color: var(--vi-garden-moss) !important; background: var(--vi-garden-moss) !important; color: #fff !important; }
.vi-garden-ar-button:disabled { cursor: wait !important; opacity: .55 !important; }
.vi-garden-3d-stage { position: relative; min-height: 0; touch-action: none; }
.vi-garden-3d-stage canvas { display: block; width: 100%; height: 100%; }
.vi-garden-3d-capture { position: absolute; z-index: 4; bottom: 14px; left: 50%; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 28px); padding: 6px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; background: rgba(25, 45, 33, .86); color: #fff; box-shadow: 0 12px 34px rgba(15, 30, 21, .2); transform: translateX(-50%); backdrop-filter: blur(14px); }
.vi-garden-3d-capture button, .vi-garden-3d-capture select { min-width: 0; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; white-space: nowrap; }
.vi-garden-3d-capture button.is-active { border-color: #f3c65e; background: #f3c65e; color: #273a2d; }
.vi-garden-3d-capture button:disabled, .vi-garden-3d-capture select:disabled { cursor: wait; opacity: .5; }
.vi-garden-3d-capture label { display: flex; align-items: center; gap: 5px; padding-left: 6px; color: #b9cbbf; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.vi-garden-3d-capture select { padding: 7px 22px 7px 8px; text-transform: none; }
.vi-garden-3d-capture .vi-garden-orbit-speed { gap: 7px; }
.vi-garden-orbit-speed input { width: 72px; margin: 0; accent-color: #f3c65e; }
.vi-garden-orbit-speed output { min-width: 24px; color: #fff; font-size: 8px; text-align: right; text-transform: none; }
.vi-garden-pdf-views { position: relative; flex: 0 0 auto; }
.vi-garden-pdf-views summary { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .1); cursor: pointer; list-style: none; white-space: nowrap; }
.vi-garden-pdf-views summary::-webkit-details-marker { display: none; }
.vi-garden-pdf-views summary span { color: #b9cbbf; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.vi-garden-pdf-views summary strong { color: #fff; font-size: 9px; }
.vi-garden-pdf-views > div { position: absolute; right: 0; bottom: calc(100% + 8px); display: grid; gap: 3px; width: 220px; padding: 7px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; background: rgba(25, 45, 33, .96); box-shadow: 0 16px 40px rgba(8, 22, 13, .32); backdrop-filter: blur(16px); }
.vi-garden-3d-capture .vi-garden-pdf-views > div button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px; border-color: transparent; border-radius: 9px; background: transparent; color: #d7e5dc; text-align: left; }
.vi-garden-3d-capture .vi-garden-pdf-views > div button:hover { background: rgba(255, 255, 255, .08); }
.vi-garden-3d-capture .vi-garden-pdf-views > div button[aria-pressed="true"] { border-color: rgba(243, 198, 94, .35); background: rgba(243, 198, 94, .14); color: #fff; }
.vi-garden-pdf-views > div button i { color: #f3c65e; font-style: normal; opacity: 0; }
.vi-garden-pdf-views > div button[aria-pressed="true"] i { opacity: 1; }
.vi-garden-camera-track { position: relative; flex: 0 0 auto; }
.vi-garden-camera-track summary { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .1); cursor: pointer; list-style: none; white-space: nowrap; }
.vi-garden-camera-track summary::-webkit-details-marker { display: none; }
.vi-garden-camera-track summary span { color: #b9cbbf; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.vi-garden-camera-track summary strong { color: #f3c65e; font-size: 9px; }
.vi-garden-camera-track > div { position: absolute; right: 0; bottom: calc(100% + 8px); display: grid; gap: 8px; width: 310px; padding: 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; background: rgba(25, 45, 33, .96); box-shadow: 0 16px 40px rgba(8, 22, 13, .32); backdrop-filter: blur(16px); }
.vi-garden-camera-track > div p { margin: 0; color: #b9cbbf; font-size: 9px; line-height: 1.45; }
.vi-garden-camera-track > div > div { display: flex; gap: 5px; }
.vi-garden-3d-capture .vi-garden-camera-track > div button { flex: 1 1 auto; padding: 9px 7px; }
.vi-garden-3d-capture .vi-garden-camera-track [data-track-record] { border-color: rgba(243, 198, 94, .55); background: #f3c65e; color: #273a2d; }
.vi-garden-camera-track > div label { justify-content: space-between; padding: 0; }
.vi-garden-track-waypoints { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px; border-radius: 11px; background: rgba(255, 255, 255, .06); }
.vi-garden-3d-capture .vi-garden-camera-track .vi-garden-track-waypoints > button { display: grid; place-items: center; width: 29px; min-width: 29px; max-width: 29px; height: 29px; min-height: 29px; max-height: 29px; aspect-ratio: 1; flex: 0 0 29px; padding: 0; border-radius: 50%; }
.vi-garden-3d-capture .vi-garden-track-waypoints button.is-active { border-color: #fff; background: #f3c65e; color: #20392a; box-shadow: 0 0 0 2px rgba(243, 198, 94, .28); }
.vi-garden-track-editor { display: grid; gap: 8px; padding: 9px; border: 1px solid rgba(243, 198, 94, .25); border-radius: 11px; background: rgba(243, 198, 94, .07); }
.vi-garden-track-editor[hidden] { display: none; }
.vi-garden-track-editor > strong { color: #fff; font-size: 9px; }
.vi-garden-track-coordinates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vi-garden-camera-track .vi-garden-track-coordinates label { display: grid; gap: 4px; color: #b9cbbf; font-size: 7px; }
.vi-garden-camera-track .vi-garden-track-coordinates input { width: 100%; min-width: 0; padding: 7px 5px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 7px; background: rgba(255, 255, 255, .1); color: #fff; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-garden-track-editor > div:last-child { display: flex; gap: 5px; }
.vi-garden-3d-capture .vi-garden-track-editor [data-track-delete] { color: #ffc3b9; }
.vi-garden-camera-track-map { position: absolute; z-index: 3; top: 14px; left: 14px; width: 190px; height: var(--vi-mini-map-height, 152px); overflow: hidden; border: 1px solid rgba(255, 255, 255, .58); border-radius: 14px; background: rgba(19, 40, 27, .92); color: #fff; box-shadow: 0 14px 36px rgba(9, 24, 14, .3); pointer-events: auto; transform-origin: top left; backdrop-filter: blur(12px); transition: width .38s cubic-bezier(.22, .8, .24, 1), height .38s cubic-bezier(.22, .8, .24, 1), box-shadow .38s ease; }
.vi-garden-camera-track-map.is-expanded { width: min(380px, calc(100% - 28px)); height: var(--vi-mini-map-large-height, 304px); box-shadow: 0 22px 54px rgba(9, 24, 14, .38); }
.vi-garden-camera-track-map.is-compressed { width: 190px; height: 41px; box-shadow: 0 10px 26px rgba(9, 24, 14, .26); }
.vi-garden-camera-track-map[hidden] { display: none; }
.vi-garden-camera-track-map > div { position: absolute; z-index: 2; top: 8px; right: 8px; left: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vi-garden-camera-track-map > div strong { color: #d8e7dc; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.vi-garden-camera-track-map > div button { display: grid; place-items: center; width: 23px; height: 23px; padding: 0; border: 1px solid rgba(255, 255, 255, .24); border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; font: 900 12px/1 sans-serif; }
.vi-garden-camera-track-map svg { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; opacity: 1; transition: opacity .22s ease, visibility 0s linear; }
.vi-garden-camera-track-map.is-compressed svg { visibility: hidden; opacity: 0; transition: opacity .18s ease, visibility 0s linear .18s; }
.vi-garden-camera-track-map .is-garden { fill: rgba(108, 156, 117, .2); stroke: rgba(216, 231, 220, .58); stroke-width: 1; }
.vi-garden-camera-track-map .is-plan-grid line { stroke: rgba(220, 235, 224, .18); stroke-width: .45; }
.vi-garden-camera-track-map .is-object { stroke: rgba(255, 255, 255, .32); stroke-width: .55; }
.vi-garden-camera-track-map .is-lawn { fill: #6d966d; }
.vi-garden-camera-track-map .is-bed { fill: #8d6747; }
.vi-garden-camera-track-map .is-path { fill: #c2b396; }
.vi-garden-camera-track-map .is-patio { fill: #9ca5a0; }
.vi-garden-camera-track-map .is-water { fill: #70b8c2; }
.vi-garden-camera-track-map .is-container { fill: #b7764e; }
.vi-garden-camera-track-map .is-structure { fill: #7d9086; }
.vi-garden-camera-track-map .is-label { fill: #eee5c7; }
.vi-garden-camera-track-map .is-plant { fill: #71a36d; }
.vi-garden-camera-track-map .is-tree { fill: #3e7753; }
.vi-garden-camera-track-map .is-route { fill: none; stroke: #ffd568; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 5 3; filter: drop-shadow(0 0 2px rgba(243, 198, 94, .6)); transition: stroke-width .38s ease; }
.vi-garden-camera-track-map circle { fill: #f3c65e; stroke: #fff; stroke-width: 1.8; transition: r .38s ease, stroke-width .38s ease; }
.vi-garden-camera-track-map g:first-of-type circle { fill: #68c785; }
.vi-garden-camera-track-map g.is-selected circle { stroke: #20392a; stroke-width: 3; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)); }
.vi-garden-camera-track-map text { fill: #20392a; font: 900 6px/1 sans-serif; text-anchor: middle; dominant-baseline: central; alignment-baseline: central; transition: font-size .38s ease; }
.vi-garden-camera-track-map.is-expanded .is-route { stroke-width: 1.75; stroke-dasharray: 2.5 1.5; }
.vi-garden-camera-track-map.is-expanded circle { r: 3px; stroke-width: .9; }
.vi-garden-camera-track-map.is-expanded g.is-selected circle { stroke-width: 1.5; }
.vi-garden-camera-track-map.is-expanded text { font-size: 3px; }
.vi-garden-camera-track-map g[data-track-map-index] { cursor: grab; pointer-events: auto; touch-action: none; }
.vi-garden-camera-track-map:has(g[data-track-map-index]:active) { cursor: grabbing; }
.vi-garden-3d-capture [data-capture-status] { max-width: 180px; overflow: hidden; color: #d7e5dc; font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.vi-garden-3d-editor { position: absolute; z-index: 4; top: 14px; right: 14px; width: min(300px, calc(100% - 28px)); padding: 16px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 18px; background: rgba(25, 45, 33, .88); color: #fff; box-shadow: 0 18px 45px rgba(15, 30, 21, .24); backdrop-filter: blur(16px); }
.vi-garden-3d-editor[hidden] { display: none; }
.vi-garden-3d-editor > div:first-child { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.vi-garden-3d-editor > div:first-child span { color: #a9c5af; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.vi-garden-3d-editor > div:first-child strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.vi-garden-3d-editor > label { display: block; margin-top: 12px; color: #dbe7df; font-size: 9px; font-weight: 800; }
.vi-garden-3d-editor > label > div { display: grid; grid-template-columns: minmax(70px, 1fr) 62px 12px; align-items: center; gap: 7px; margin-top: 5px; }
.vi-garden-3d-editor input[type="range"] { width: 100%; accent-color: #f3c65e; }
.vi-garden-3d-editor input[type="number"] { width: 100%; padding: 6px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 7px; background: rgba(255, 255, 255, .1); color: #fff; font: 800 10px/1 "Avenir Next", sans-serif; }
.vi-garden-3d-editor small { color: #a9c5af; font-size: 9px; }
.vi-garden-3d-editor__position { margin-top: 12px; color: #a9c5af; font-size: 9px; font-weight: 800; }
.vi-garden-3d-editor__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.vi-garden-3d-editor__actions button { padding: 8px 9px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: rgba(255, 255, 255, .09); color: #fff; cursor: pointer; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-garden-3d-editor__actions button.is-primary { border-color: #f3c65e; background: #f3c65e; color: #273a2d; }
.vi-garden-3d-editor > p { margin: 10px 0 0; color: #a9c5af; font-size: 8px; line-height: 1.35; }
.vi-garden-weather-label { display: none; }
.vi-garden-weather-label[data-weather="rain"] { background: rgba(37, 58, 68, .75); }
.vi-garden-weather-label[data-weather="snow"], .vi-garden-weather-label[data-weather="mist"] { background: rgba(85, 103, 101, .7); }
.vi-garden-ar-guide { position: absolute; z-index: 3; right: 50%; bottom: 24px; width: min(340px, calc(100% - 28px)); padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 14px; background: rgba(19, 43, 31, .84); color: #fff; pointer-events: none; text-align: center; transform: translateX(50%); backdrop-filter: blur(12px); }
.vi-garden-ar-guide[hidden] { display: none; }
.vi-garden-ar-guide strong, .vi-garden-ar-guide span { display: block; }
.vi-garden-ar-guide strong { font-size: 13px; }
.vi-garden-ar-guide span { margin-top: 4px; color: #d7e5dc; font-size: 10px; line-height: 1.35; }
.vi-garden-ar-guide button { margin-top: 9px; padding: 6px 11px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; pointer-events: auto; font: 800 9px/1 "Avenir Next", sans-serif; }
.vi-garden-3d-modal.is-ar-active { display: block; padding: 0; background: transparent; pointer-events: none; backdrop-filter: none; }
.vi-garden-3d-modal.is-ar-active .vi-garden-3d-dialog { position: fixed; inset: 0; display: block; width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.vi-garden-3d-modal.is-ar-active .vi-garden-3d-dialog > header,
.vi-garden-3d-modal.is-ar-active .vi-garden-3d-dialog > footer { display: none; }
.vi-garden-3d-modal.is-ar-active .vi-garden-3d-stage { position: absolute; inset: 0; background: transparent; }
.vi-garden-3d-modal.is-ar-active .vi-garden-3d-stage canvas { background: transparent !important; }
.vi-garden-3d-dialog > footer { display: flex; justify-content: space-between; gap: 16px; padding: 10px 18px; border-top: 1px solid rgba(43, 72, 54, .16); background: rgba(248, 249, 243, .9); color: #68786f; font-size: 10px; font-weight: 700; }

@media (max-width: 640px) {
    .vi-garden-hero { align-items: stretch; flex-direction: column; }
    .vi-garden-hero > div:first-child { padding-right: 76px; }
    .vi-garden-hero__logo { top: 12px; right: 12px; width: 64px; }
    .vi-garden-button { width: 100%; }
    .vi-garden-activity-centre__toolbar { align-items: stretch; flex-direction: column; }
    .vi-garden-activity-centre__toolbar > div { justify-content: space-between; }
    .vi-notification-preferences { grid-template-columns: 1fr; }
    .vi-garden-library-tabs { max-width: 100%; flex-wrap: wrap; }
    .vi-garden-library-create.is-open { width: 100%; max-width: 100%; }
    .vi-garden-library-create input { width: auto; flex: 1; }
    .vi-community-filters { grid-template-columns: 1fr; }
}

@media (max-width: 1050px) {
    .vi-garden-card-controls { grid-template-columns: minmax(220px, 1fr) auto auto; }
    .vi-garden-merge-panel { grid-template-columns: minmax(220px, 1fr) minmax(180px, 1fr) auto; }
    .vi-garden-merge-panel [data-merge-cancel] { grid-column: 3; }
    .vi-garden-card-layout { grid-column: 1 / -1; justify-content: end; }
    .vi-garden-grid[data-card-layout="three"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vi-garden-editor__body { grid-template-columns: 130px minmax(320px, 1fr); }
    .vi-garden-sidebar-resizer { display: none; }
    .vi-garden-sidebar { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); max-height: none; border-top: 1px solid var(--vi-garden-line); border-left: 0; }
    .vi-growing-hero { grid-template-columns: 1fr; }
    .vi-growing-stats div { border-top: 1px solid rgba(255, 255, 255, .12); }
    .vi-build-hero { grid-template-columns: minmax(0, 1fr) 150px; }
    .vi-build-cost { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .12); border-left: 0; }
    .vi-build-grid { grid-template-columns: 1fr; gap: 0; }
    .vi-assistant-main { grid-template-columns: minmax(260px, .7fr) minmax(380px, 1fr); }
    .vi-assistant-proposal { grid-column: 1 / -1; width: auto; }
    .vi-capture-readiness { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vi-capture-grid { grid-template-columns: 1fr; gap: 0; }
    .vi-team-hero { grid-template-columns: 1fr; }
    .vi-team-hero__stats article:first-child { border-left: 0; }
    .vi-team-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vi-team-grid { grid-template-columns: 1fr 1fr; }
    .vi-team-grid .vi-team-panel:last-child { grid-column: 1 / -1; }
    .vi-export-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vi-readiness-hero { grid-template-columns: 160px minmax(0, 1fr); }
    .vi-readiness-hero aside { grid-column: 1 / -1; flex-direction: row; border-top: 1px solid rgba(255, 255, 255, .12); border-left: 0; }
    .vi-readiness-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vi-ui-tests__results { grid-template-columns: 1fr; }
    .vi-ui-tests__results article:nth-child(odd) { border-right: 0; }
    .vi-conditions-current { grid-template-columns: 1fr; }
    .vi-conditions-current__hero { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
}

@media (max-width: 700px) {
    .vi-garden-card-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vi-garden-merge-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: -12px; }
    .vi-garden-merge-panel__summary, .vi-garden-merge-panel label { grid-column: 1 / -1; }
    .vi-garden-merge-panel [data-merge-cancel] { grid-column: auto; }
    .vi-garden-card-search, .vi-garden-card-layout { grid-column: 1 / -1; }
    .vi-garden-card-layout { justify-content: stretch; }
    .vi-garden-card-layout button { width: 100%; }
    .vi-garden-grid[data-card-layout] { grid-template-columns: minmax(0, 1fr); }
    .vi-garden-grid[data-card-layout="list"] .vi-garden-card { display: block; }
    .vi-garden-grid[data-card-layout="list"] .vi-garden-card__preview { height: 210px; min-height: 0; }
    .vi-garden-3d-modal.is-card-preview canvas { pointer-events: none; }
    .vi-garden-editor__topbar { grid-template-columns: auto 1fr; }
    .vi-garden-save-status { grid-column: 2; }
    .vi-garden-editor__actions { grid-column: 1 / -1; justify-content: stretch; flex-wrap: wrap; }
    .vi-garden-editor--design .vi-garden-editor__topbar { grid-template-columns: 42px minmax(0, 1fr); padding: 12px; }
    .vi-garden-editor__topbar.has-workspace-tabs, .vi-garden-editor--design .vi-garden-editor__topbar.has-workspace-tabs { grid-template-columns: 42px minmax(0, 1fr); }
    .vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; }
    .vi-garden-editor--design .vi-garden-editor__actions { display: grid; align-items: stretch; }
    .vi-garden-editor--design .vi-garden-actions__group { position: fixed; top: auto; right: 10px; bottom: 10px; left: 10px; width: auto; max-width: none; overflow-x: auto; padding: 10px; border-radius: 13px; }
    .vi-garden-editor--design .vi-garden-save-status { min-width: 100px; text-align: left; }
    .vi-garden-modebar { justify-content: flex-start; width: 100%; margin-bottom: 9px; }
    .vi-garden-editor--design .vi-garden-tools, .vi-garden-editor--design .vi-garden-sidebar { position: fixed; z-index: 260; top: var(--wp-admin--admin-bar--height, 0px); bottom: 0; width: min(92vw, 360px); }
    .vi-garden-theme-control { flex: 1 1 145px; }
    .vi-garden-theme-trigger { width: 100%; justify-content: center; }
    .vi-garden-theme-menu { position: fixed; top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-height: 70vh; }
    .vi-garden-editor__actions .vi-garden-save-status { grid-column: auto; width: 100%; }
    .vi-garden-viewer__meta { flex-direction: column; gap: 4px; }
    .vi-garden-editor__body { display: flex; flex-direction: column; }
    .vi-garden-tools { border-right: 0; border-bottom: 1px solid var(--vi-garden-line); }
    .vi-garden-tool-grid { grid-template-columns: repeat(3, 1fr); }
    .vi-garden-tool-grid button { flex-direction: column; text-align: center; }
    .vi-garden-build-tree .vi-garden-tool-grid { grid-template-columns: 1fr; }
    .vi-garden-build-tree .vi-garden-tool-grid button { flex-direction: row; text-align: left; }
    .vi-garden-workspace { padding: 14px; }
    .vi-garden-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vi-garden-zone-trigger { flex: 1 1 150px; justify-content: center; }
    .vi-zone-intelligence { padding: 10px; }
    .vi-zone-intelligence__header { align-items: flex-start; flex-direction: column; }
    .vi-zone-intelligence__summary { width: 100%; flex-wrap: wrap; }
    .vi-zone-intelligence__summary > span { margin-right: auto; }
    .vi-zone-intelligence__summary > button { margin-left: auto; }
    .vi-zone-grid { grid-auto-columns: minmax(230px, 84vw); -webkit-overflow-scrolling: touch; }
    .vi-zone-findings > div { grid-template-columns: 1fr; }
    .vi-zone-finding { align-items: stretch; flex-direction: column; }
    .vi-zone-finding footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vi-zone-finding footer button { white-space: normal; }
    .vi-garden-canvas-wrap { min-height: 360px; padding: 10px; }
    .vi-garden-mini-3d { top: 14px; right: auto; left: 14px; width: 190px; border-radius: 14px; }
    .vi-garden-mini-3d.is-expanded { width: calc(100% - 28px); height: auto; aspect-ratio: var(--vi-mini-map-ratio, 1.25); }
    .vi-garden-camera-track-map.is-expanded { width: calc(100% - 28px); height: auto; aspect-ratio: var(--vi-mini-map-ratio, 1.25); }
    .vi-garden-mini-3d > header { top: 6px; right: 6px; left: 6px; }
    .vi-garden-mini-3d > header strong { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vi-garden-sidebar { display: flex; }
    .vi-garden-capture-stage { min-height: 300px; }
    .vi-garden-capture-dialog > footer { flex-wrap: wrap; }
    .vi-garden-3d-modal { padding: 0; }
    .vi-garden-3d-dialog { width: 100%; height: 100%; border-radius: 0; }
    .vi-garden-3d-dialog > header { align-items: flex-start; flex-direction: column; }
    .vi-garden-3d-actions { width: 100%; overflow-x: auto; }
    .vi-garden-weather-control { flex: 0 0 auto; }
    .vi-garden-3d-editor { top: auto; right: 10px; bottom: 10px; left: 10px; width: auto; max-height: 48%; overflow-y: auto; padding: 13px; border-radius: 15px; }
    .vi-garden-3d-editor:not([hidden]) + .vi-garden-ar-guide { bottom: 52%; }
    .vi-garden-3d-capture { right: 10px; bottom: 10px; left: 10px; max-width: none; overflow-x: auto; border-radius: 15px; transform: none; }
    .vi-garden-pdf-views > div { position: fixed; right: 12px; bottom: 70px; left: 12px; width: auto; }
    .vi-garden-3d-capture [data-capture-status] { flex: 0 0 120px; }
    .vi-garden-3d-editor:not([hidden]) { bottom: 62px; }
    .vi-garden-3d-dialog > footer { flex-direction: column; gap: 3px; }
    .vi-garden-workspace-tabs { padding: 0 10px; }
    .vi-garden-workspace-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .vi-garden-workspace-tabs button { flex: 0 0 auto; padding-right: 13px; padding-left: 13px; }
    .vi-build-main, .vi-assistant-main { padding: 14px; }
    .vi-capture-main, .vi-team-main, .vi-export-main, .vi-readiness-main { padding: 14px; }
    .vi-build-hero { grid-template-columns: 1fr; }
    .vi-build-progress, .vi-build-cost { grid-column: auto; border-top: 1px solid rgba(255, 255, 255, .12); border-left: 0; }
    .vi-build-hero > div { padding: 20px; }
    .vi-build-phases { grid-template-columns: none; grid-auto-columns: minmax(220px, 82vw); grid-auto-flow: column; scroll-snap-type: x proximity; }
    .vi-build-phases > article { scroll-snap-align: start; }
    .vi-build-materials > article { grid-template-columns: minmax(0, 1fr) auto; }
    .vi-build-materials article > em { grid-column: 2; }
    .vi-build-inspection-form { grid-template-columns: 1fr; }
    .vi-build-inspection-form textarea, .vi-build-inspection-form button { grid-column: auto; }
    .vi-assistant-main { display: grid; grid-template-columns: 1fr; }
    .vi-assistant-proposal { grid-column: auto; }
    .vi-assistant-chat { min-height: 460px; }
    .vi-assistant-chat > form { grid-template-columns: 1fr; }
    .vi-assistant-chat form button { width: 100%; }
    .vi-assistant-safety { width: 100%; text-align: center; }
    .vi-capture-hero, .vi-team-hero { grid-template-columns: 1fr; }
    .vi-capture-hero__stat { border-top: 1px solid rgba(255, 255, 255, .12); border-left: 0; }
    .vi-capture-readiness, .vi-team-status, .vi-team-grid { grid-template-columns: 1fr; }
    .vi-team-grid .vi-team-panel:last-child { grid-column: auto; }
    .vi-capture-settings { grid-template-columns: 1fr; }
    .vi-team-hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vi-team-hero__stats article:nth-child(odd) { border-left: 0; }
    .vi-export-hero, .vi-readiness-hero { grid-template-columns: 1fr; }
    .vi-export-manifest, .vi-readiness-hero aside { border-top: 1px solid rgba(255, 255, 255, .12); border-left: 0; }
    .vi-export-grid, .vi-readiness-groups { grid-template-columns: 1fr; }
    .vi-export-grid > article { min-height: 190px; }
    .vi-export-notes, .vi-readiness-footer { display: flex; align-items: stretch; flex-direction: column; gap: 7px; }
    .vi-readiness-score { min-height: 180px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .vi-readiness-hero aside { flex-direction: column; }
    .vi-ui-tests > header { align-items: stretch; flex-direction: column; }
    .vi-ui-tests > header > div:last-child { width: 100%; }
    .vi-ui-tests > header button { flex: 1; }
    .vi-ui-tests__summary span { width: 100%; margin-left: 0; }
    .vi-growing-workspace { padding: 14px; }
    .vi-growing-columns { grid-template-columns: 1fr; }
    .vi-growing-hero > div:first-child { padding: 25px 20px; }
    .vi-growing-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vi-growing-stats div { padding: 17px 8px; }
    .vi-growing-stats strong { font-size: 24px; }
    .vi-growing-form > div { grid-template-columns: 1fr; }
    .vi-task-toolbar { align-items: stretch; flex-direction: column; }
    .vi-task-toolbar input { width: 100%; }
    .vi-task-workflow { align-items: stretch; flex-direction: column; }
    .vi-fit-panel { grid-template-columns: 1fr; }
    .vi-fit-score { min-height: 100px; }
    .vi-fit-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vi-plant-profile-fields { grid-template-columns: 1fr; }
    .vi-seasonal-columns { grid-template-columns: 1fr; }
    .vi-season-upcoming { grid-template-columns: 1fr; }
    .vi-conditions-panel { padding: 13px; border-radius: 18px; }
    .vi-conditions-current__hero { min-height: 154px; padding: 20px; }
    .vi-conditions-current__hero > strong { font-size: 50px; }
    .vi-conditions-current__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vi-conditions-current__metrics article { min-height: 76px; padding: 12px; }
    .vi-environment-intelligence { padding: 11px; }
    .vi-environment-intelligence > header, .vi-environment-subhead { align-items: flex-start; flex-direction: column; gap: 4px; }
    .vi-environment-water { grid-template-columns: 1fr; }
    .vi-environment-water__summary { min-height: 180px; padding: 18px; }
    .vi-environment-water__days { grid-template-columns: repeat(7, 70px); min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .vi-environment-risks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vi-plant-weather-risks { grid-template-columns: 1fr; }
    .vi-environment-soil { grid-template-columns: 1fr; }
    .vi-environment-soil__days { grid-template-columns: repeat(7, 70px); min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .vi-environment-plant-grid { grid-template-columns: 1fr; }
    .vi-environment-plant-health { grid-template-columns: 1fr; }
    .vi-environment-windows { grid-template-columns: 1fr; }
    .vi-environment-actions > article { align-items: flex-start; flex-direction: column; }
    .vi-condition-display-toolbar { align-items: stretch; margin-right: -13px; margin-left: -13px; padding-right: 13px; padding-left: 13px; border-right: 0; border-left: 0; border-radius: 0; }
    .vi-condition-display-toolbar .vi-condition-now-toggle { margin-left: 0; }
    .vi-conditions-days, .vi-conditions-days[data-layout="2"], .vi-conditions-days[data-layout="3"] { grid-template-columns: none; grid-auto-columns: minmax(280px, 84vw); grid-auto-flow: column; overflow-x: auto; scroll-snap-type: x proximity; }
    .vi-conditions-days.is-looping[data-layout="2"], .vi-conditions-days.is-looping[data-layout="3"], .vi-conditions-days.is-looping[data-layout="compact"] { grid-auto-columns: minmax(280px, 84vw); scroll-snap-type: none; }
    .vi-conditions-days[data-layout="2"] .vi-condition-day { padding: 14px; }
    .vi-conditions-days[data-layout="2"] .vi-condition-day__hero > i { width: 39px; height: 39px; font-size: 22px; }
    .vi-conditions-days[data-layout="2"] .vi-condition-day__hero strong { font-size: 11px; }
    .vi-conditions-days[data-layout="2"] .vi-condition-day__hero b { font-size: 21px; }
    .vi-conditions-days[data-layout="2"] .vi-condition-day__metric > .vi-condition-chart { height: 25px; }
    .vi-conditions-days[data-layout="2"] .vi-condition-day__metric > span:not(.vi-condition-chart) { font-size: 6px; }
    .vi-conditions-days[data-layout="2"] .vi-condition-day__metric > b { font-size: 9px; }
    .vi-conditions-forecast-head, .vi-conditions-hourly > header, .vi-conditions-guidance > header { align-items: stretch; flex-direction: column; }
    .vi-condition-hourly-grid { grid-template-columns: 108px repeat(var(--hours), 48px); min-width: calc(108px + var(--hours) * 48px); }
    .vi-condition-hour-label { padding: 7px 8px; }
    .vi-conditions-guidance .vi-weather-alerts { grid-template-columns: 1fr; }
    .vi-weather-alerts > article { align-items: flex-start; flex-direction: column; }
    .vi-analytics-overview { grid-template-columns: 1fr; }
    .vi-analytics-score { min-height: 100px; }
    .vi-analytics-kpis, .vi-analytics-grid { grid-template-columns: 1fr; }
    .vi-analytics-actions { align-items: stretch; flex-direction: column; }
    .vi-garden-snapshot-modal { padding: 0; }
    .vi-garden-snapshot-dialog { width: 100%; height: 100%; max-height: none; border-radius: 0; }
    .vi-garden-snapshot-dialog > form { grid-template-columns: 1fr 1fr; padding: 10px 12px; }
    .vi-garden-snapshot-dialog > form input[type="text"] { grid-column: 1 / -1; }
    .vi-garden-snapshot-dialog > main { display: block; overflow-y: auto; }
    .vi-garden-snapshot-dialog > main > aside { max-height: 240px; border-right: 0; border-bottom: 1px solid var(--vi-garden-line); }
    .vi-garden-snapshot-dialog [data-snapshot-detail] { overflow: visible; padding: 14px; }
    .vi-garden-snapshot-detail__heading { align-items: flex-start; flex-direction: column; gap: 4px; }
    .vi-garden-snapshot-preview { height: 190px; }
    .vi-garden-snapshot-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vi-garden-snapshot-compare { align-items: flex-start; flex-wrap: wrap; }
    .vi-garden-snapshot-compare > span { width: 100%; }
    .vi-garden-snapshot-detail__actions button { flex: 1 1 42%; }
    .vi-garden-snapshot-detail__actions button.is-danger { margin-left: 0; }
    .vi-garden-activity-modal { padding: 0; }
    .vi-garden-activity-dialog { width: 100%; height: 100%; max-height: none; border-radius: 0; }
    .vi-garden-activity-dialog > form { grid-template-columns: 1fr; padding: 10px 12px; }
    .vi-garden-activity-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vi-garden-activity-toolbar label { grid-column: 1 / -1; }
    .vi-garden-activity-toolbar button { width: 100%; }
    .vi-garden-activity-toolbar [data-clear-log] { grid-column: 1 / -1; }
    .vi-garden-activity-dialog > main { display: block; overflow-y: auto; }
    .vi-garden-activity-dialog [data-activity-list] { max-height: 250px; border-right: 0; border-bottom: 1px solid var(--vi-garden-line); }
    .vi-garden-activity-dialog [data-activity-detail] { min-height: 300px; overflow: visible; padding: 20px 14px 70px; }
    .vi-garden-activity-detail__heading { align-items: flex-start; flex-direction: column; }
    .vi-garden-activity-dialog [data-activity-detail] h4 { font-size: 19px; }
    .vi-garden-activity-entry-actions { flex-wrap: wrap; }
    .vi-garden-activity-entry-actions .vi-garden-activity-delete { margin-left: 0; }
}

/* Final cascade for the canvas-first designer, after legacy responsive rules. */
.vi-garden-editor--design .vi-garden-workspace { padding: 16px 18px 18px; }
.vi-garden-editor--design .vi-garden-modebar { gap: 8px; width: max-content; padding: 6px; overflow: visible; border-color: rgba(43, 76, 53, .18); background: rgba(252, 253, 250, .96); box-shadow: 0 10px 28px rgba(31, 55, 38, .1); }
.vi-garden-modebar__group > button, .vi-garden-editor--design .vi-garden-modebar > button { min-height: 40px; padding: 9px 13px; color: #40584a; font-size: 11px; white-space: nowrap; }
.vi-garden-editor--design .vi-garden-modebar__views { padding: 4px; border-radius: 12px; background: #dfe8dd; }
.vi-garden-editor--design .vi-garden-modebar__views button { min-width: 48px; min-height: 34px; padding: 9px 12px; color: #40584a; font-size: 11px; }
.vi-garden-editor--design .vi-garden-detail-strip { justify-content: center; margin: 0 auto 10px; }
.vi-garden-editor--design .vi-garden-detail-strip > .vi-garden-overview { display: block; min-width: 0; flex: 0 1 auto; margin: 0; }
.vi-garden-editor--design .vi-garden-overview__summary { display: flex; min-height: 34px; grid-template-columns: none; align-items: center; justify-content: center; }
.vi-garden-editor--design .vi-garden-overview__summary span { display: flex; align-items: baseline; gap: 4px; color: #617268; font-size: 10px; letter-spacing: 0; text-transform: none; }
.vi-garden-editor--design .vi-garden-overview__summary strong { color: #183b27; font-size: 12px; }
.vi-garden-editor--design .vi-garden-inline-3d { height: clamp(640px, calc(100dvh - 245px), 980px); min-height: 640px; }
.vi-garden-editor--design .vi-garden-3d-dialog > footer { min-height: 34px; max-height: 40px; flex: 0 0 auto; align-items: center; padding: 7px 14px; }
.vi-garden-3d-capture { right: 14px; bottom: 14px; left: auto; display: block; max-width: none; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; backdrop-filter: none; }
.vi-garden-3d-capture > summary { display: flex; }
.vi-garden-3d-capture:not([open]) > .vi-garden-export-panel { display: none; }

@media (max-width: 1100px) {
    .vi-garden-editor--design .vi-garden-modebar { width: 100%; overflow-x: auto; }
    .vi-garden-editor--design .vi-garden-inline-3d { height: clamp(600px, calc(100dvh - 250px), 900px); min-height: 600px; }
}
@media (max-width: 700px) {
    .vi-garden-editor--design .vi-garden-workspace { padding: 10px; }
    .vi-garden-editor--design .vi-garden-inline-3d { height: calc(100dvh - 210px); min-height: 500px; }
    .vi-garden-3d-capture { right: 10px; bottom: 10px; left: auto; max-width: none; overflow: visible; }
}

.vi-garden-modebar__group { display: flex; align-items: center; gap: 3px; padding-right: 8px; border-right: 1px solid rgba(49, 78, 57, .14); }
.vi-garden-modebar__group > button { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; border: 0; border-radius: 11px; background: transparent; cursor: pointer; font: 800 11px/1 "Avenir Next", sans-serif; }
.vi-garden-modebar__group > button > span { font-size: 15px; font-weight: 600; }
.vi-garden-modebar__group > button:hover { background: #eaf0e8; color: #153d27; }
.vi-garden-modebar__group > button.is-active, .vi-garden-modebar__group > button[aria-pressed="true"] { background: var(--vi-garden-moss); color: #fff; box-shadow: 0 5px 14px rgba(28, 67, 42, .2); }
.vi-garden-editor--design .vi-garden-overview__summary { gap: 0; padding: 5px 10px; border: 1px solid rgba(55, 87, 64, .15); border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: 0 5px 15px rgba(37, 65, 44, .05); backdrop-filter: blur(12px); }
.vi-garden-editor--design .vi-garden-overview__summary span { padding: 2px 11px; font-weight: 700; }
.vi-garden-editor--design .vi-garden-overview__summary span + span { border-left: 1px solid rgba(53, 83, 61, .13); }

.vi-garden-view-menu { position: relative; }
.vi-garden-view-menu > summary, .vi-garden-3d-capture > summary { display: flex; min-height: 34px; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid rgba(54, 86, 63, .18); border-radius: 999px; background: #fff; color: #294936; cursor: pointer; font: 800 11px/1 "Avenir Next", sans-serif; list-style: none; box-shadow: 0 5px 15px rgba(31, 56, 38, .08); }
.vi-garden-view-menu > summary::-webkit-details-marker, .vi-garden-3d-capture > summary::-webkit-details-marker { display: none; }
.vi-garden-view-menu > summary::after, .vi-garden-3d-capture > summary::after { content: "⌄"; margin-left: 3px; color: #708278; font-size: 10px; }
.vi-garden-view-menu[open] > summary, .vi-garden-3d-capture[open] > summary { border-color: var(--vi-garden-moss); background: var(--vi-garden-moss); color: #fff; }
.vi-garden-view-menu[open] > summary::after, .vi-garden-3d-capture[open] > summary::after { color: #dce8df; transform: rotate(180deg); }
.vi-garden-view-menu > div { position: absolute; z-index: 130; top: calc(100% + 9px); right: 0; display: grid; gap: 10px; width: 265px; padding: 12px; border: 1px solid rgba(50, 82, 59, .16); border-radius: 16px; background: rgba(249, 251, 247, .98); box-shadow: 0 18px 45px rgba(23, 49, 31, .2); backdrop-filter: blur(18px); }
.vi-garden-view-menu .vi-garden-weather-control { justify-content: space-between; border-radius: 11px; }
.vi-garden-view-menu .vi-garden-weather-control span { color: #4c6255; font-size: 9px; }
.vi-garden-view-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.vi-garden-view-menu .vi-garden-view-presets button { width: 100%; min-height: 36px !important; }
.vi-garden-view-menu .vi-garden-3d-zoom { justify-content: space-between; border-radius: 11px; }
.vi-garden-view-menu .vi-garden-3d-zoom button:nth-child(2) { flex: 1; }

.vi-garden-3d-capture > summary { justify-content: center; min-width: 96px; border-color: rgba(255, 255, 255, .44); background: rgba(23, 52, 34, .9); color: #fff; box-shadow: 0 10px 30px rgba(12, 30, 18, .2); backdrop-filter: blur(14px); }
.vi-garden-export-panel { position: absolute; right: 0; bottom: calc(100% + 10px); display: grid; gap: 10px; width: min(620px, calc(100vw - 64px)); padding: 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 18px; background: rgba(21, 43, 29, .96); box-shadow: 0 22px 58px rgba(8, 22, 13, .34); backdrop-filter: blur(20px); }
.vi-garden-export-panel > section { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.vi-garden-export-panel > section > strong { width: 100%; margin-bottom: 2px; color: #bcd0c2; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.vi-garden-export-panel > [data-capture-status] { display: block; max-width: none; min-height: 12px; padding: 0 4px; color: #d7e5dc; font-size: 9px; }
.vi-garden-export-panel .vi-garden-camera-track > div, .vi-garden-export-panel .vi-garden-pdf-views > div { bottom: calc(100% + 8px); }
.vi-garden-camera-track-map { opacity: .88; }
.vi-garden-camera-track-map:hover, .vi-garden-camera-track-map:focus-within { opacity: 1; }
.vi-garden-camera-track-map > div strong { font-size: 9px; }
.vi-garden-3d-editor > div:first-child span, .vi-garden-3d-editor > label, .vi-garden-3d-editor > p { font-size: 10px; }

@media (max-width: 700px) {
    .vi-garden-modebar__group > button { min-height: 38px; padding: 8px 10px; font-size: 10px; }
    .vi-garden-editor--design .vi-garden-overview__summary { justify-content: flex-start; overflow-x: auto; border-radius: 13px; }
    .vi-garden-editor--design .vi-garden-overview__summary span { flex: 0 0 auto; }
    .vi-garden-export-panel { position: fixed; right: 10px; bottom: 64px; left: 10px; width: auto; max-height: 65dvh; overflow-y: auto; }
    .vi-garden-view-menu > div { position: fixed; top: auto; right: 10px; bottom: 64px; left: 10px; width: auto; }
}

.vi-garden-inspector-section { margin-top: 12px; padding: 12px; border: 1px solid rgba(53, 88, 63, .13); border-radius: 13px; background: rgba(249, 251, 247, .78); }
.vi-garden-inspector-section > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid rgba(53, 88, 63, .1); }
.vi-garden-inspector-section > header span { color: #294936; font-size: 11px; font-weight: 900; }
.vi-garden-inspector-section > header small { color: #78887f; font-size: 9px; text-align: right; }
.vi-garden-inspector-section--position { background: rgba(235, 243, 233, .62); }
.vi-garden-inspector-section .vi-zone-profile-editor { margin-right: -3px; margin-left: -3px; }
.vi-garden-inspector-section + .vi-garden-inspector-actions { margin-top: 10px; }

.vi-garden-3d-dialog { position: relative; }
.vi-garden-3d-dialog > footer.vi-garden-3d-status { position: absolute; z-index: 7; right: 126px; bottom: 14px; left: 14px; display: flex; min-height: 0; max-height: none; align-items: center; justify-content: space-between; gap: 7px; padding: 0; border: 0; background: transparent; color: inherit; pointer-events: none; }
.vi-garden-status-chip { display: block; max-width: min(48%, 520px); padding: 7px 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .44); border-radius: 999px; background: rgba(248, 251, 247, .82); color: #40584a; font-size: 10px; font-weight: 750; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 7px 22px rgba(22, 46, 29, .1); backdrop-filter: blur(14px); }
.vi-garden-status-chip--ar { margin-left: auto; }
.vi-garden-3d-modal.is-card-preview .vi-garden-3d-status { display: none; }

/* Keep dense expert controls readable without increasing the overall toolbar height. */
.vi-garden-editor--design .vi-garden-workspace-tabs button { font-size: 9px; }
.vi-garden-editor--design .vi-garden-workspace-tabs button span { font-size: 8px; }
.vi-garden-editor--design .vi-garden-tool-section > summary span,
.vi-garden-editor--design .vi-garden-space-dimensions label,
.vi-garden-editor--design .vi-garden-panel__heading span,
.vi-garden-editor--design .vi-garden-overlap-control strong,
.vi-garden-editor--design .vi-season-simulator > strong,
.vi-garden-editor--design .vi-garden-group-control > strong,
.vi-garden-editor--design .vi-garden-heat-map-control > summary strong { font-size: 9px; }
.vi-garden-editor--design .vi-garden-condition-panel label,
.vi-garden-editor--design .vi-garden-solar-panel label,
.vi-garden-editor--design .vi-garden-grid-settings > div label,
.vi-garden-editor--design .vi-zone-profile-editor label { font-size: 10px; }
.vi-garden-editor--design .vi-garden-build-branch > summary strong,
.vi-garden-editor--design .vi-garden-build-children.vi-garden-tool-grid button,
.vi-garden-editor--design .vi-garden-build-branch--plants .vi-garden-plant-result strong { font-size: 11px; }
.vi-garden-editor--design .vi-garden-build-branch--plants .vi-garden-plant-result small,
.vi-garden-editor--design .vi-garden-polygon-controls span,
.vi-garden-editor--design .vi-garden-space-summary { font-size: 9px; }
.vi-garden-editor--design .vi-garden-modebar__3d-controls .vi-garden-view-menu button,
.vi-garden-editor--design .vi-garden-modebar__3d-controls .vi-garden-view-menu select { font-size: 10px !important; }

@media (max-width: 700px) {
    .vi-garden-inspector-section { padding: 10px; }
    .vi-garden-3d-dialog > footer.vi-garden-3d-status { right: 10px; bottom: 58px; left: 10px; align-items: flex-start; flex-direction: column; }
    .vi-garden-status-chip { max-width: 100%; }
    .vi-garden-status-chip--ar { margin-left: 0; }
}

/* Clear, persistent navigation between the eight garden workspaces. */
.vi-garden-editor__topbar.has-workspace-tabs { grid-template-columns: 42px minmax(150px, 205px) minmax(590px, 1fr) auto; gap: 12px; }
.vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs { align-self: center; justify-self: center; justify-content: center; gap: 3px; padding: 4px; overflow-x: auto; border: 1px solid rgba(49, 80, 58, .12); border-radius: 15px; background: rgba(226, 235, 224, .74); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72); scrollbar-width: none; }
.vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs button { position: relative; display: flex; min-height: 40px; flex: 0 0 auto; align-items: center; gap: 7px; padding: 7px 10px; border: 0; border-radius: 11px; background: transparent; color: #506359; cursor: pointer; font: 750 10px/1 "Avenir Next", sans-serif; transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; }
.vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs button::after { display: none; }
.vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs button span { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 7px; background: rgba(52, 88, 63, .09); color: #60766a; font-size: 8px; font-weight: 900; letter-spacing: .03em; }
.vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs button strong { color: inherit; font: inherit; white-space: nowrap; }
.vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs button:hover { background: rgba(255, 255, 255, .72); color: #173b27; transform: translateY(-1px); }
.vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs button:focus-visible { outline: 3px solid rgba(53, 100, 75, .22); outline-offset: 2px; }
.vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs button.is-active { background: var(--vi-garden-moss); color: #fff; box-shadow: 0 6px 16px rgba(23, 55, 35, .2); }
.vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs button.is-active span { background: rgba(255, 255, 255, .16); color: #fff; }

@media (max-width: 1320px) {
    .vi-garden-editor__topbar.has-workspace-tabs { grid-template-columns: 42px minmax(130px, 180px) minmax(420px, 1fr) auto; }
    .vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs { justify-self: stretch; justify-content: flex-start; }
}
@media (max-width: 1050px) {
    .vi-garden-editor__topbar.has-workspace-tabs { grid-template-columns: 42px minmax(0, 1fr) auto; }
    .vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs { grid-column: 1 / -1; grid-row: 2; width: 100%; scroll-snap-type: x proximity; }
    .vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs button { scroll-snap-align: start; }
}
@media (max-width: 700px) {
    .vi-garden-editor__topbar.has-workspace-tabs { grid-template-columns: 42px minmax(0, 1fr); }
    .vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs { grid-row: auto; margin: 2px -2px 0; border-radius: 13px; }
    .vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs button { min-height: 42px; padding: 8px 11px; font-size: 11px; }
}

/* Give the primary workspace navigation a full row so every destination remains visible. */
.vi-garden-editor__topbar.has-workspace-tabs, .vi-garden-editor--design .vi-garden-editor__topbar.has-workspace-tabs { grid-template-columns: 42px minmax(180px, 1fr) auto; }
.vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs { display: grid; grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(8, minmax(0, 1fr)); width: 100%; max-width: 1180px; justify-self: center; gap: 5px; overflow: visible; }
.vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs button { min-width: 0; min-height: 46px; justify-content: center; padding: 9px 11px; font-size: 13px; }
.vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs button span { width: 25px; height: 25px; flex-basis: 25px; font-size: 10px; }

@media (max-width: 980px) {
    .vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
    .vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs button { justify-content: flex-start; font-size: 12px; }
}
@media (max-width: 600px) {
    .vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 2px 0 0; }
    .vi-garden-editor__topbar.has-workspace-tabs > .vi-garden-workspace-tabs button { min-height: 44px; padding: 8px 10px; font-size: 12px; }
}

/* Keep every interactive menu readable and above the design surface. */
.vi-garden-editor__topbar.has-workspace-tabs { position: relative; z-index: 320; overflow: visible; }
.vi-garden-editor--design .vi-garden-editor__actions { overflow: visible; }
.vi-garden-editor--design .vi-garden-actions__group { z-index: 360; gap: 7px; max-height: min(70dvh, 620px); overflow-y: auto; }
.vi-garden-editor--design .vi-garden-actions__group .vi-garden-share-button { min-height: 38px; padding: 9px 13px; font-size: 11px; }
.vi-garden-theme-menu { z-index: 380; width: min(270px, calc(100vw - 24px)); }
.vi-garden-theme-menu > strong { font-size: 10px; }
.vi-garden-theme-menu > button { min-height: 44px; padding: 7px 8px; font-size: 12px; }

.vi-garden-editor--design .vi-garden-modebar { z-index: 210; display: flex; width: 100%; max-width: 1180px; justify-content: center; flex-wrap: wrap; overflow: visible; }
.vi-garden-editor--design .vi-garden-modebar__group,
.vi-garden-editor--design .vi-garden-modebar__views,
.vi-garden-editor--design .vi-garden-modebar__2d-controls,
.vi-garden-editor--design .vi-garden-modebar__3d-controls,
.vi-garden-editor--design .vi-garden-modebar__3d-controls .vi-garden-3d-actions { overflow: visible; }
.vi-garden-editor--design .vi-garden-modebar__group > button,
.vi-garden-editor--design .vi-garden-modebar > button { min-height: 42px; font-size: 12px; }
.vi-garden-editor--design .vi-garden-modebar__views button { min-height: 36px; font-size: 12px; }
.vi-garden-view-menu[open] { z-index: 520; }
.vi-garden-view-menu > summary, .vi-garden-3d-capture > summary { min-height: 40px; font-size: 12px; }
.vi-garden-view-menu > div { z-index: 530; width: min(300px, calc(100vw - 24px)); padding: 14px; }
.vi-garden-view-menu .vi-garden-weather-control span { font-size: 11px; }
.vi-garden-editor--design .vi-garden-modebar__3d-controls .vi-garden-view-menu button,
.vi-garden-editor--design .vi-garden-modebar__3d-controls .vi-garden-view-menu select { min-height: 38px !important; font-size: 11px !important; }
.vi-garden-view-menu .vi-garden-3d-zoom button:disabled { cursor: not-allowed !important; opacity: .34 !important; }

.vi-garden-editor--design .vi-garden-detail-strip { z-index: 190; overflow: visible; }
.vi-garden-editor--design .vi-garden-canvas-options { overflow: visible; }
.vi-garden-grid-settings[open], .vi-garden-heat-map-control[open] { z-index: 540; }
.vi-garden-grid-settings > summary, .vi-garden-heat-map-control > summary { min-height: 40px; font-size: 11px; }
.vi-garden-grid-settings > div, .vi-garden-heat-map-control > div { z-index: 550; max-height: min(62dvh, 520px); overflow-y: auto; }
.vi-garden-grid-settings > div { width: min(280px, calc(100vw - 24px)); }
.vi-garden-heat-map-control > div { width: min(260px, calc(100vw - 24px)); }
.vi-garden-editor--design .vi-garden-grid-settings > div label,
.vi-garden-editor--design .vi-garden-grid-settings select,
.vi-garden-editor--design .vi-garden-grid-settings input[type="number"],
.vi-garden-editor--design .vi-garden-heat-map-control button { min-height: 36px; font-size: 11px; }

.vi-garden-3d-capture { z-index: 220; }
.vi-garden-3d-capture[open] { z-index: 560; }
.vi-garden-export-panel { z-index: 570; max-height: min(72dvh, 680px); overflow-y: auto; }
.vi-garden-export-panel button, .vi-garden-export-panel select, .vi-garden-export-panel label { font-size: 11px; }
.vi-garden-export-panel > section > strong { font-size: 10px; }

@media (max-width: 980px) {
    .vi-garden-editor--design .vi-garden-modebar { justify-content: flex-start; }
}
@media (max-width: 700px) {
    .vi-garden-editor__topbar.has-workspace-tabs { z-index: 300; }
    .vi-garden-editor--design .vi-garden-modebar { position: relative; top: auto; gap: 6px; }
    .vi-garden-editor--design .vi-garden-modebar__group { flex: 1 1 auto; }
    .vi-garden-editor--design .vi-garden-modebar__group > button { flex: 1 1 auto; justify-content: center; }
    .vi-garden-grid-settings > div, .vi-garden-heat-map-control > div { position: fixed; top: auto; right: 10px; bottom: 10px; left: 10px; width: auto; max-height: 70dvh; }
}