/* Генерирано от _build/build_pages.py — стиловете на демото „Проект“ от styles.css. Не се пипа на ръка. */
.wdx-viewport {position: relative; width: 100%; aspect-ratio: 900 / 560; overflow: hidden; background: #eef1f4;}
.wdx-screen {--c1: #2c5f7c; --c2: #e0a458;
    position: absolute; left: 0; top: 0;
    width: 900px; height: 560px;
    transform: scale(var(--s, .7)); transform-origin: 0 0;
    font-family: 'Nunito', sans-serif;
    overflow: hidden;}
.wdx-header {position: absolute; z-index: 2; left: 70px; right: 70px; top: 14px; height: 46px;
    display: flex; align-items: center; gap: 22px; padding: 0 20px;
    border-radius: 12px;
    /* като .navbar на темата: основният цвят, изсветляващ надясно, и едва видим акцент */
    background: radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--c2) 6%, transparent) 0%, transparent 50%),
                linear-gradient(135deg, var(--c1) 0%, color-mix(in srgb, var(--c1) 66%, #fff) 100%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    transition: background .4s ease;}
.wdx-header {color: #fff;}
.wdx-logo {font-weight: 900; font-size: 13px; letter-spacing: .08em; margin-right: auto;}
.wdx-header nav {display: flex; gap: 22px; font-size: 12.5px; font-weight: 600;}
.wdx-flag {width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #fff 0 33%, #00966e 33% 66%, #d62612 66%); box-shadow: 0 0 0 2px rgba(255, 255, 255, .5);}
.wdx-viewport.narrow {aspect-ratio: 640 / 560;}
.wdx-screen.narrow {width: 640px;}
.wdx-screen.narrow .wdx-header {left: 18px; right: 18px;}
.wdx-screen.narrow .wdx-header nav span:nth-child(n+3) {display: none;}
.wdx-pg {position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #f4f6f8, #e6ebef); animation: wdxPg .35s ease;}
.wdx-pg[hidden] {display: none;}
.wdx-band {position: absolute; left: 0; right: 0; top: 0; height: 84px; background: linear-gradient(135deg, var(--c1) 0%, color-mix(in srgb, var(--c1) 66%, #fff) 100%);}
.wdx-header nav span.on {box-shadow: inset 0 -2px 0 var(--c2); padding-bottom: 3px;}
@media (prefers-reduced-motion: reduce) {
  .wdx-pg, .mp-plane, .mp-pin, .pp-furn {animation: none; transition: none;}
}
.pr-bar {position: absolute; left: 40px; right: 40px; top: 92px; height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--c1) 0%, color-mix(in srgb, var(--c1) 66%, #fff) 100%); box-shadow: 0 8px 20px rgba(0, 0, 0, .14);}
.pr-id {display: flex; flex-direction: column; gap: 1px; min-width: 0;}
.pr-tag {align-self: flex-start; padding: 1px 7px; border-radius: 4px; background: var(--c2); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;}
.pr-id b {font-size: 15px; line-height: 1.15;}
.pr-id small {font-size: 10.5px; opacity: .85;}
.pr-chips {margin-left: auto; display: flex; gap: 6px;}
.pr-chips span {padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, .16); font-size: 11.5px; font-weight: 800; white-space: nowrap;}
.pr-ask {all: unset; padding: 8px 14px; border-radius: 8px; background: var(--c2); color: #fff; font-size: 11.5px; font-weight: 800; cursor: pointer; white-space: nowrap;}
.pr-main {position: absolute; left: 40px; right: 40px; top: 160px; bottom: 18px; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px;}
.pr-stage {position: relative; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #bfe0f1 0%, #e6f3f9 78%); box-shadow: 0 6px 18px rgba(26, 31, 54, .08);}
.pr-view {position: absolute; inset: 0;}
.pr-view[hidden] {display: none;}
.pr-bview::after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(180deg, #a9cf8f, #8fbb73);}
.pr-bview > i {position: absolute; display: block;}
.pr-sun {right: 12%; top: 10%; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, #fff6d8 0 40%, rgba(255, 246, 216, 0) 70%);}
.pr-tree {bottom: 28px; width: 46px; height: 70px; z-index: 1;}
.pr-tree::before {content: ''; position: absolute; left: 20px; bottom: 0; width: 6px; height: 26px; background: #7a5b3e; border-radius: 3px;}
.pr-tree::after {content: ''; position: absolute; left: 0; bottom: 18px; width: 46px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #7fb067, #5b8f48);}
.pr-tree.t1 {left: 9%;}
.pr-tree.t2 {right: 9%; transform: scale(.85); transform-origin: bottom;}
.pr-building {position: absolute; left: 50%; bottom: 34px; z-index: 2; width: 320px; transform: translateX(-50%); padding: 0 16px; background: #f4efe6; box-shadow: 0 16px 34px rgba(0, 0, 0, .16);}
.pr-roof {display: block; height: 12px; margin: 0 -22px 6px; background: linear-gradient(180deg, #5a5370, #4a4458); border-radius: 3px 3px 0 0;}
.pr-fl {all: unset; box-sizing: border-box; position: relative; width: 100%;
    display: flex; gap: 10px; height: 44px; padding: 5px 2px 9px;
    cursor: pointer;}
.pr-fl i {flex: 1; border-radius: 2px; border: 2px solid #fff; background: linear-gradient(180deg, #b9d9ec, #e6f3fa); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);}
.pr-fl::before {content: ''; position: absolute; left: -8px; right: -8px; bottom: 2px; height: 11px; background: rgba(255, 255, 255, .6); border-top: 2px solid #fff; border-bottom: 3px solid #ded6c6;}
.pr-fl::after {content: ''; position: absolute; top: 0; bottom: 0; left: -16px; right: -16px; background: var(--av); opacity: .22; transition: opacity .2s ease;}
.pr-fl.av-free {--av: #1acc8d;}
.pr-fl.av-dep {--av: #f5a623;}
.pr-fl.av-sold {--av: #e04848;}
.pr-fl:hover::after, .pr-fl:focus-visible::after {opacity: .55;}
.pr-fl:focus-visible {outline: none;}
.pr-ground {display: flex; gap: 10px; height: 40px; margin: 4px -16px 0; padding: 6px 16px 0; background: #ddd3c2;}
.pr-ground b {flex: 1; background: linear-gradient(180deg, #8fb3c6, #c4dce8); border: 3px solid #f4efe6; border-bottom: 0;}
.pr-ground b:nth-child(2) {flex: .6; background: linear-gradient(180deg, #6d5a48, #8b735c);}
.pr-tip {position: absolute; left: 50%; z-index: 3; transform: translate(-50%, calc(-100% - 26px)); padding: 6px 11px; border-radius: 9px; background: #fff; color: #1e293b; font-size: 11.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); opacity: 0; transition: opacity .15s ease; pointer-events: none;}
.pr-tip.on {opacity: 1;}
.pr-legend {position: absolute; left: 12px; top: 12px; z-index: 3; display: flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px; background: rgba(255, 255, 255, .9); font-size: 10.5px; color: #475569;}
.pr-legend i {width: 9px; height: 9px; border-radius: 3px; display: inline-block;}
.pr-legend span {margin-right: 5px;}
.pr-legend .l-free {background: #1acc8d;}
.pr-legend .l-dep {background: #f5a623;}
.pr-legend .l-sold {background: #e04848;}
.pr-fview {display: flex; flex-direction: column; padding: 46px 18px 16px; background: #f6f3ec;}
.pr-fview .pr-legend {top: 12px; left: auto; right: 12px;}
.pr-fhead {position: absolute; left: 12px; top: 10px; display: flex; align-items: center; gap: 10px;}
.pr-fhead b {font-size: 14px; color: var(--c1);}
.pr-back {all: unset; padding: 5px 10px; border-radius: 8px; background: #fff; color: var(--c1); font-size: 11.5px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 10px rgba(0, 0, 0, .08);}
.pr-plan {position: relative; flex: 1; border: 7px solid #4a4458; border-radius: 3px; background: #fbfaf6; animation: wdxPg .35s ease;}
.pr-plan[hidden] {display: none;}
.pr-core {position: absolute; left: 0; right: 0; top: 42%; height: 16%; background: repeating-linear-gradient(90deg, #ebe4d6 0 14px, #e3dbcb 14px 16px);}
.pr-unit {all: unset; box-sizing: border-box; position: absolute;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 3px solid #4a4458; cursor: pointer; transition: background .15s ease, box-shadow .15s ease;}
.pr-unit.u1 {left: 0; top: 0; width: 42%; height: 42%; border-width: 0 3px 3px 0;}
.pr-unit.u2 {left: 42%; top: 0; width: 58%; height: 42%; border-width: 0 0 3px 0;}
.pr-unit.u3 {left: 0; top: 58%; width: 56%; height: 42%; border-width: 3px 3px 0 0;}
.pr-unit.u4 {left: 56%; top: 58%; width: 44%; height: 42%; border-width: 3px 0 0 0;}
.pr-unit b {font-size: 15px; font-weight: 800;}
.pr-unit small {font-size: 10.5px; font-weight: 700; opacity: .8;}
.pr-unit.st-free {background: rgba(26, 204, 141, .16); color: #15855f;}
.pr-unit.st-dep {background: rgba(245, 166, 35, .18); color: #b8760c;}
.pr-unit.st-sold {background: rgba(224, 72, 72, .14); color: #c23a3a;}
.pr-unit:hover {box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .25);}
.pr-unit.sel {box-shadow: inset 0 0 0 4px var(--c1);}
.pr-side {display: flex; flex-direction: column; gap: 10px; min-height: 0;}
.pr-card {min-height: 118px; display: flex; padding: 12px 14px; background: #fff; border-radius: 12px; box-shadow: 0 4px 14px rgba(26, 31, 54, .06);}
.pr-hint {margin: auto; text-align: center; font-size: 11.5px; color: #94a3b8; font-weight: 600;}
.pr-apt {display: flex; flex-direction: column; gap: 4px; width: 100%; animation: wdxPg .3s ease;}
.pr-apt b {font-size: 15px; color: #1e293b;}
.pr-apt > span {font-size: 11.5px; color: #64748b;}
.pr-apt strong {font-size: 18px; color: var(--c1);}
.pr-apt strong small {font-size: 11px; color: #64748b; font-weight: 600;}
.pr-apt em {position: absolute;}
.pr-apt {position: relative;}
.pr-apt em {right: 0; top: 0; font-style: normal; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px;}
.pr-apt em.st-free {background: #dcf6ea; color: #15855f;}
.pr-apt em.st-dep {background: #fff1d6; color: #b8760c;}
.pr-apt em.st-sold {background: #fde4e4; color: #c23a3a;}
.pr-acts {display: flex; gap: 6px; margin-top: 4px;}
.pr-btn {all: unset; flex: 1; text-align: center; padding: 7px 6px; border-radius: 8px; border: 1px solid #e2e8f0; font-size: 11.5px; font-weight: 800; color: var(--c1); cursor: pointer;}
.pr-btn.hot {background: var(--c1); border-color: var(--c1); color: #fff;}
.pr-struct {flex: 1; min-height: 0; padding: 8px 10px; background: #fff; border-radius: 12px; box-shadow: 0 4px 14px rgba(26, 31, 54, .06);}
.pr-shead, .pr-row {display: grid; grid-template-columns: 1fr 52px 52px 52px; align-items: center; gap: 4px;}
.pr-shead {padding: 4px 6px 7px;}
.pr-shead b {font-size: 12px; color: #1e293b;}
.pr-shead .c {font-size: 9px; font-weight: 700; text-align: center;}
.pr-shead .c.f {color: #15855f;}
.pr-shead .c.d {color: #b8760c;}
.pr-shead .c.s {color: #c23a3a;}
.pr-row {all: unset; box-sizing: border-box; width: 100%; padding: 6px; border-top: 1px solid #f1f5f9; border-radius: 6px; cursor: pointer;}
.pr-row {display: grid; grid-template-columns: 1fr 52px 52px 52px; align-items: center; gap: 4px;}
.pr-row:hover {background: #f8fafc;}
.pr-row.on {background: color-mix(in srgb, var(--c1) 9%, #fff);}
.pr-row b {font-size: 12px; color: #334155; font-weight: 700;}
.pr-row .c {justify-self: center; min-width: 26px; padding: 2px 0; border-radius: 999px; text-align: center; font-size: 11px; font-weight: 800;}
.pr-row .c.f {background: #dcf6ea; color: #15855f;}
.pr-row .c.d {background: #fff1d6; color: #b8760c;}
.pr-row .c.s {background: #fde4e4; color: #c23a3a;}
.wdx-screen.narrow .pr-bar {left: 18px; right: 18px;}
.wdx-screen.narrow .pr-chips span:nth-child(2) {display: none;}
.wdx-screen.narrow .pr-main {left: 18px; right: 18px; grid-template-columns: minmax(0, 1fr) 220px;}
.wdx-screen.narrow .pr-building {width: 250px;}
.wdx-screen.narrow .pr-tree {display: none;}
.wdx-screen.narrow .pr-shead, .wdx-screen.narrow .pr-row {grid-template-columns: 1fr 34px 34px 34px;}
.wdx-screen.narrow .pr-shead .c {font-size: 0;}
.pr-plan::before, .pr-plan::after {content: ''; position: absolute; left: 6%; right: 6%; height: 7px; background: repeating-linear-gradient(90deg, #bfe0f1 0 38px, transparent 38px 78px);}
.pr-plan::before {top: -7px;}
.pr-plan::after {bottom: -7px;}
.pr-unit {transition: background .15s ease, box-shadow .15s ease, filter .15s ease;}
.pr-unit b {transition: transform .15s ease;}
.pr-unit:hover {filter: saturate(1.6) brightness(.96); box-shadow: inset 0 0 0 3px color-mix(in srgb, currentColor 55%, transparent); z-index: 1;}
.pr-unit:hover b {transform: scale(1.12);}
.pr-unit.sel, .pr-unit.sel:hover {box-shadow: inset 0 0 0 4px var(--c1);}
.pr-utip {position: absolute; z-index: 4; transform: translate(-50%, -100%); padding: 7px 11px; border-radius: 9px; background: #fff; color: #334155; font-size: 11.5px; white-space: nowrap; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); opacity: 0; transition: opacity .15s ease; pointer-events: none;}
.pr-utip.on {opacity: 1;}
.pr-utip b {color: #1e293b;}
.pr-utip em {margin-left: 4px; font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px;}
.pr-utip em.st-free {background: #dcf6ea; color: #15855f;}
.pr-utip em.st-dep {background: #fff1d6; color: #b8760c;}
.pr-utip em.st-sold {background: #fde4e4; color: #c23a3a;}
.pr-fl.hl::after {opacity: .6;}
.gd-wrap {max-width: 1180px; margin: 0 auto;}
.gd-board [hidden] {display: none !important;}
.gd-board {position: relative; padding: 1.2rem; border-radius: 24px; background: #fff; border: 1px solid rgba(99, 0, 255, .12); box-shadow: 0 30px 70px rgba(26, 31, 54, .1), 0 6px 18px rgba(99, 0, 255, .06); font-family: 'Nunito', sans-serif; text-align: left;}
.gd-head {display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1rem; padding: .2rem .3rem 1rem; border-bottom: 1px solid #eef0f6;}
.gd-hic {width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(135deg, #6300ff, #1acc8d); color: #fff; font-size: 1.05rem;}
.gd-ht {margin-right: auto; min-width: 0;}
.gd-ht b {display: block; font-size: 1.12rem; color: #1a1f36;}
.gd-ht small {display: block; font-size: .82rem; color: #64748b;}
.gd-tabs {display: flex; gap: .25rem; padding: .25rem; border-radius: 12px; background: #f4f0ff;}
.gd-tab, .gd-manage {font: inherit; cursor: pointer;}
.gd-tab {padding: .45rem .9rem; border: 0; border-radius: 9px; background: transparent; font-size: .88rem; font-weight: 700; color: #6b5d8a;}
.gd-tab.on {background: #fff; color: #1a1f36; box-shadow: 0 2px 8px rgba(26, 31, 54, .08);}
.gd-manage {display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 12px; border: 1.5px solid #e2dcf3; background: #fff; font-size: .9rem; font-weight: 700; color: #3d2d63; transition: border-color .2s, color .2s;}
.gd-manage:hover {border-color: #6300ff; color: #6300ff;}
.gd-body {padding-top: 1rem;}
.gd-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem;}
.gd-tile {display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.05rem; border-radius: 18px; border: 1px solid #eceef5; background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.gd-tile:hover {transform: translateY(-3px); border-color: rgba(99, 0, 255, .25); box-shadow: 0 14px 30px rgba(99, 0, 255, .1);}
.gd-tile:focus-visible {outline: 2px solid #6300ff; outline-offset: 3px;}
.gd-th {display: flex; align-items: flex-start; gap: .65rem;}
.gd-ic {width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: #f2eeff; color: #6300ff; font-size: .95rem;}
.gd-tn {flex: 1; min-width: 0;}
.gd-tn b {display: block; font-size: 1rem; color: #1a1f36; line-height: 1.25;}
.gd-tn small {display: block; font-size: .76rem; color: #64748b;}
.gd-src {flex: none; padding: .18rem .55rem; border-radius: 7px; font-style: normal; font-size: .68rem; font-weight: 800;}
.gd-src.s-manual {background: #fff4dc; color: #9a6400;}
.gd-src.s-auto {background: rgba(26, 204, 141, .14); color: #0e8a5f;}
.gd-src.s-mixed {background: #f1f2f7; color: #5b6478;}
.gd-num {display: flex; align-items: baseline; gap: .35rem;}
.gd-num b {font-size: 1.85rem; font-weight: 800; color: #1a1f36; line-height: 1; letter-spacing: -.01em;}
.gd-num span {font-size: .95rem; color: #94a3b8;}
.gd-pct {margin-left: auto; font-style: normal; font-size: .9rem; font-weight: 800;}
.gd-bar {position: relative; height: 8px; border-radius: 99px; background: #eef0f6;}
.gd-fill {position: absolute; left: 0; top: 0; bottom: 0; width: var(--f); border-radius: inherit;}
.gd-pace {position: absolute; top: -5px; bottom: -5px; left: var(--p); width: 2px; border-radius: 2px; background: #475069;}
.gd-status {display: flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 700; line-height: 1.35;}
.gd-foot {font-size: .76rem; color: #8a93a8; line-height: 1.4;}
.gd-note {display: flex; align-items: center; gap: .45rem; margin-top: .1rem; padding-top: .55rem; border-top: 1px dashed #e6e8f1; font-size: .8rem; font-weight: 600; color: #5b5175;}
.gd-note i {color: #6300ff;}
.st-on .gd-fill {background: linear-gradient(90deg, #6300ff, #8a3dff);}
.st-on .gd-pct, .st-on .gd-status {color: #6300ff;}
.st-behind .gd-fill {background: #f2a93b;}
.st-behind .gd-pct, .st-behind .gd-status {color: #b26b00;}
.st-done .gd-fill, .st-ok .gd-fill {background: linear-gradient(90deg, #1acc8d, #12b07a);}
.st-done .gd-pct, .st-done .gd-status, .st-ok .gd-status {color: #0e8a5f;}
.gd-anim .gd-fill {width: 0;}
.gd-anim.gd-live .gd-fill {width: var(--f); transition: width 1.1s cubic-bezier(.3, .7, .2, 1);}
.gd-anim.gd-live .gd-tile:nth-child(2) .gd-fill {transition-delay: .08s;}
.gd-anim.gd-live .gd-tile:nth-child(3) .gd-fill {transition-delay: .16s;}
.gd-anim.gd-live .gd-tile:nth-child(4) .gd-fill {transition-delay: .24s;}
.gd-anim.gd-live .gd-tile:nth-child(5) .gd-fill {transition-delay: .32s;}
.gd-anim.gd-live .gd-tile:nth-child(6) .gd-fill {transition-delay: .4s;}
.gd-drawer, .gd-past, .gd-builder {animation: gdIn .3s ease;}
.gd-dh {display: flex; align-items: center; flex-wrap: wrap; gap: .7rem 1rem; margin-bottom: .8rem;}
.gd-back {display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 10px; border: 1.5px solid #e2dcf3; background: #fff; font: inherit; font-size: .85rem; font-weight: 700; color: #3d2d63; cursor: pointer;}
.gd-back:hover {border-color: #6300ff; color: #6300ff;}
.gd-dt {margin-right: auto;}
.gd-dt b {display: block; color: #1a1f36;}
.gd-dt small {color: #64748b; font-size: .8rem;}
.gd-items {list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem;}
.gd-items li {display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 7rem auto; gap: .8rem; align-items: center; padding: .65rem .85rem; border-radius: 12px; background: #f8f7fc; font-size: .88rem; color: #1a1f36;}
.gd-items time {color: #64748b; font-variant-numeric: tabular-nums;}
.gd-who {color: #5b5175;}
.gd-items em {font-style: normal; font-weight: 700; color: #6300ff; justify-self: end;}
.gd-how {display: flex; gap: .55rem; align-items: flex-start; margin: .9rem 0 0; padding: .75rem .9rem; border-radius: 12px; background: rgba(99, 0, 255, .05); font-size: .85rem; line-height: 1.5; color: #4b4466;}
.gd-how i {margin-top: .2rem; color: #6300ff;}
.gd-past ul {list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem;}
.gd-past li {display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; border-radius: 12px; background: #f8f7fc; font-size: .92rem; color: #1a1f36;}
.gd-past li em {margin-left: .6rem; padding: .12rem .5rem; border-radius: 6px; background: #eceef5; font-style: normal; font-size: .72rem; font-weight: 800; color: #5b6478;}
.gd-past p {margin: .9rem 0 0; font-size: .85rem; line-height: 1.5; color: #64748b;}
.gd-bh {display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem;}
.gd-bh b {font-size: 1.05rem; color: #1a1f36;}
.gd-x {width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid #e2dcf3; background: #fff; color: #5b5175; cursor: pointer;}
.gd-form {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.4rem;}
.gd-f {display: grid; gap: .4rem;}
.gd-fl {font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8a7fa8;}
.gd-chips {display: flex; flex-wrap: wrap; gap: .35rem;}
.gd-chip {padding: .42rem .8rem; border-radius: 99px; border: 1.5px solid #e7e0f8; background: #fff; font: inherit; font-size: .85rem; font-weight: 700; color: #5b5175; cursor: pointer; transition: border-color .2s, background .2s, color .2s;}
.gd-chip:hover {border-color: #6300ff; color: #6300ff;}
.gd-chip.on {background: #6300ff; border-color: #6300ff; color: #fff;}
.gd-step {display: inline-flex; align-items: center; gap: .4rem;}
.gd-step button {width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid #e7e0f8; background: #fff; font: inherit; font-size: 1.05rem; font-weight: 800; color: #6300ff; cursor: pointer;}
.gd-step b {min-width: 4.5rem; text-align: center; font-size: 1.1rem; color: #1a1f36; font-variant-numeric: tabular-nums;}
.gd-togs {grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem;}
.gd-tog {display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: #3d2d63; cursor: pointer;}
.gd-tog input {width: 17px; height: 17px; accent-color: #6300ff;}
.gd-sentence {display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0 0; padding: .9rem 1rem; border-radius: 14px; background: linear-gradient(135deg, #f6f2ff, #effbf6); font-size: .98rem; font-weight: 700; line-height: 1.5; color: #1a1f36;}
.gd-sentence i {margin-top: .25rem; color: #6300ff;}
.gd-bf {display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; margin-top: .9rem;}
.gd-save {padding: .65rem 1.2rem; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--main-color-solid), var(--accent-color)); font: inherit; font-weight: 800; color: #fff; cursor: pointer;}
.gd-saved {font-size: .86rem; font-weight: 700; color: #0e8a5f;}
.gd-points {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem 1.4rem; max-width: 1180px; margin: 2rem auto 0; padding: 0; list-style: none; text-align: left;}
.gd-points li {display: flex; gap: .75rem; align-items: flex-start;}
.gd-pic {width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg, #6300ff, #1acc8d); color: #fff; font-size: .9rem;}
.gd-points b {display: block; margin-bottom: .2rem; font-size: .95rem; color: #1a1f36;}
.gd-points p {margin: 0; font-size: .86rem; line-height: 1.5; color: #64748b;}
@media (max-width: 1024px) {
  .gd-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .gd-points {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 640px) {
  .gd-board {padding: .9rem;}
  .gd-grid, .gd-form, .gd-points {grid-template-columns: 1fr;}
  .gd-head {gap: .6rem;}
  .gd-tabs {order: 3;}
  .gd-manage {order: 4;}
  .gd-items li {grid-template-columns: 1fr auto; gap: .2rem .6rem;}
  .gd-items time {grid-column: 1 / -1; font-size: .78rem;}
  .gd-who {font-size: .8rem;}
}
@media (prefers-reduced-motion: reduce) {
  .gd-tile, .gd-drawer, .gd-past, .gd-builder {transition: none; animation: none;}
}
@keyframes wdxPg { from { opacity: 0; } }
@keyframes gdIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }