/* Theme variables: colors, backgrounds, and shared radius values. */
:root {
    --bg:#0a0d14;
    --panel:#111722;
    --panel2:#151d2a;
    --line:#253043;
    --text:#f3f5f9;
    --muted:#8e9bb0;
    --gold:#d8b477;
    --cyan:#70d8d0;
    --green:#70d8a2;
    --red:#ff8d9b;
    --radius:18px
}
/* Global box sizing and base page typography. */
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:radial-gradient(ellipse at 80% -20%,#1a2636 0,transparent 45%),var(--bg);
    color:var(--text);
    font-family:'DM Sans',sans-serif;
    font-size:14px
}
a {
    color:inherit;
    text-decoration:none
}
button,input,select,textarea {
    font:inherit
}
/* Main application layout and sidebar navigation. */
.app-shell {
    display:flex;
    min-height:100vh
}
.sidebar {
    width:244px;
    flex-shrink:0;
    border-right:1px solid var(--line);
    background:rgba(10,14,22,.92);
    padding:27px 17px;
    display:flex;
    flex-direction:column
}
.brand {
    display:flex;
    gap:12px;
    align-items:center;
    font:800 20px Manrope,sans-serif;
    letter-spacing:-.7px;
    margin:0 8px 45px
}
.brand-mark {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:linear-gradient(135deg,#f2d8a1,#a77e42);
    color:#111;
    font-size:22px
}
.brand small {
    display:block;
    font:600 8px 'DM Sans';
    letter-spacing:1.8px;
    color:var(--muted);
    margin-top:4px
}
.gold {
    color:var(--gold)
}
.nav-label {
    font-size:9px;
    font-weight:700;
    letter-spacing:1.7px;
    color:#66758b;
    padding:0 12px 12px;
    margin-top:9px
}
.sidebar nav a {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 13px;
    border-radius:11px;
    color:#a7b2c4;
    margin:3px 0;
    font-size:13px
}
.sidebar nav a.active,.sidebar nav a:hover {
    background:linear-gradient(90deg,rgba(216,180,119,.16),rgba(216,180,119,.04));
    color:#f4d7a4;
    border:1px solid rgba(216,180,119,.12)
}
.sidebar-bottom {
    margin-top:auto;
    padding:14px 10px;
    display:flex;
    gap:10px;
    align-items:center;
    border-top:1px solid var(--line);
    color:#dce3ed
}
.sidebar-bottom small,.user-chip small {
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-top:4px
}
.online-dot,.live-pill i {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green);
    box-shadow:0 0 12px #70d8a277
}
.main-area {
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column
}
/* Top header, page title, and user controls. */
.topbar {
    padding:24px 34px 20px;
    border-bottom:1px solid rgba(37,48,67,.75);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}
.eyebrow {
    font-size:9px;
    letter-spacing:2px;
    color:var(--gold);
    font-weight:700
}
.topbar h1 {
    font:700 24px Manrope,sans-serif;
    margin:7px 0 0;
    letter-spacing:-.7px
}
.top-actions {
    display:flex;
    align-items:center;
    gap:17px
}
.live-pill {
    border:1px solid #293b42;
    color:#a9ddd0;
    border-radius:30px;
    padding:8px 11px;
    font-size:9px;
    letter-spacing:1px;
    display:flex;
    align-items:center;
    gap:8px
}
.user-chip {
    display:flex;
    align-items:center;
    gap:9px
}
.avatar {
    width:33px;
    height:33px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#293449;
    color:var(--gold);
    font-weight:700
}
.content {
    padding:28px 34px;
    flex:1
}
.footer {
    border-top:1px solid var(--line);
    padding:16px 34px;
    color:#657188;
    font-size:10px;
    display:flex;
    justify-content:space-between;
    gap:15px
}
/* Dashboard welcome banner and primary action buttons. */
.hero {
    border:1px solid #344052;
    border-radius:24px;
    overflow:hidden;
    background:linear-gradient(110deg,#172131 0%,#111722 58%,#252316 100%);
    padding:29px 30px;
    position:relative;
    display:flex;
    justify-content:space-between;
    gap:25px;
    min-height:200px
}
.hero:after {
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border:1px solid #d8b47722;
    border-radius:50%;
    right:7%;
    top:-90px;
    box-shadow:0 0 0 35px #d8b47708,0 0 0 70px #d8b47705
}
.hero-copy {
    position:relative;
    z-index:1;
    max-width:600px
}
.hero-tag {
    display:inline-flex;
    gap:8px;
    align-items:center;
    color:var(--gold);
    font-size:10px;
    letter-spacing:1.4px;
    font-weight:700
}
.hero h2 {
    font:800 clamp(25px,3vw,36px) Manrope,sans-serif;
    line-height:1.2;
    letter-spacing:-1.2px;
    margin:15px 0 10px
}
.hero p {
    color:#a8b3c4;
    line-height:1.7;
    max-width:550px;
    margin:0 0 20px
}
.hero-art {
    z-index:1;
    align-self:center;
    font-size:80px;
    color:#d8b477;
    opacity:.8;
    padding:0 35px
}
.btn {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    border:1px solid transparent;
    border-radius:10px;
    padding:11px 15px;
    cursor:pointer;
    font-weight:700;
    font-size:12px;
    transition:.2s
}
.btn:hover {
    transform:translateY(-1px)
}
.btn-gold {
    background:linear-gradient(135deg,#e9cc94,#bd9457);
    color:#151515
}
.btn-ghost {
    border-color:#344055;
    background:#121a26;
    color:#dce3ed
}
.btn-small {
    padding:8px 11px;
    font-size:11px
}
/* Section headings and reusable card/grid layouts. */
.section-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin:28px 0 14px
}
.section-head h3 {
    font:700 16px Manrope;
    margin:0
}
.section-head p {
    color:var(--muted);
    margin:5px 0 0;
    font-size:11px
}
.grid {
    display:grid;
    gap:15px
}
.kpi-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    margin-top:18px
}
.card {
    background:linear-gradient(145deg,rgba(20,29,42,.96),rgba(15,21,31,.96));
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:19px;
    min-width:0
}
.kpi-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:var(--muted);
    font-size:11px
}
.kpi-icon {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    background:#d8b47715;
    border:1px solid #d8b47722;
    border-radius:10px;
    color:var(--gold);
    font-size:17px
}
.kpi-value {
    font:800 27px Manrope;
    letter-spacing:-1px;
    margin:15px 0 6px
}
.kpi-note {
    font-size:10px;
    color:#7d8ca2
}
.kpi-note strong {
    color:var(--green)
}
.two-col {
    grid-template-columns:1.35fr 1fr
}
.three-col {
    grid-template-columns:repeat(3,minmax(0,1fr))
}
/* Tables, status labels, and form controls. */
.table-wrap {
    overflow-x:auto
}
table {
    width:100%;
    border-collapse:collapse;
    white-space:nowrap
}
th {
    text-align:left;
    font-size:9px;
    letter-spacing:1.1px;
    color:#78869c;
    font-weight:700;
    padding:13px 12px;
    border-bottom:1px solid var(--line)
}
td {
    padding:14px 12px;
    border-bottom:1px solid #202a39;
    color:#d5dce7;
    font-size:12px
}
tbody tr:last-child td {
    border-bottom:0
}
tbody tr:hover {
    background:#ffffff04
}
.muted {
    color:var(--muted)
}
.status {
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:30px;
    padding:6px 9px;
    font-size:15px;
    font-weight:700;
    background:#70d8a215;
    color:var(--green)
}
.status:before {
    content:"";
    width:5px;
    height:5px;
    background:currentColor;
    border-radius:50%
}
.status.Reserved,.status.OnHold,.status.UnderOffer {
    background:#e5bd6d18;
    color:#e5bd6d
}
.status.Sold,.status.Blocked,.status.Unavailable {
    background:#ff8d9b18;
    color:var(--red)
}
.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px
}
.field {
    display:flex;
    flex-direction:column;
    gap:7px
}
.field label {
    font-size:11px;
    color:#aab5c6;
    font-weight:600
}
.field input,.field select,.field textarea,.search-input {
    background:#0c121c;
    border:1px solid #2b3749;
    border-radius:10px;
    padding:11px 12px;
    color:var(--text);
    width:100%;
    outline:none
}
.field input:focus,.field select:focus,.field textarea:focus {
    border-color:var(--gold)
}
.field textarea {
    min-height:90px;
    resize:vertical
}
.full {
    grid-column:1/-1
}
.toolbar {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap
}
.toolbar .search-input {
    max-width:300px
}
.notice {
    padding:13px 15px;
    border:1px solid #d8b47735;
    background:#d8b4770c;
    border-radius:12px;
    color:#d9c59f;
    font-size:12px;
    line-height:1.6;
    margin-bottom:17px
}
.success {
    color:var(--green)
}
.error {
    color:var(--red)
}
/* Plot details, facts, and presentation layouts. */
.plot-layout {
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr);
    gap:18px
}
.plan {
    min-height:370px;
    background:#0b131b;
    border:1px solid var(--line);
    border-radius:14px;
    position:relative;
    overflow:hidden;
    display:grid;
    place-items:center
}
.plan img {
    width:100%;
    height:100%;
    object-fit:contain;
    position:absolute;
    inset:0
}
.plan-empty {
    text-align:center;
    color:var(--muted);
    padding:30px;
    line-height:1.8
}
.plot-pills {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:15px 0
}
.plot-pill {
    background:#70d8a216;
    color:var(--green);
    padding:7px 10px;
    border-radius:8px;
    font-size:10px
}
.plot-pill.gold-pill {
    background:#d8b47716;
    color:var(--gold)
}
.detail-hero {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}
.price-big {
    font:800 32px Manrope;
    color:var(--gold);
    letter-spacing:-1px
}
.property-facts {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:18px
}
.fact {
    padding:12px;
    background:#0b121c;
    border-radius:11px;
    border:1px solid #202b3a
}
.fact small {
    display:block;
    color:var(--muted);
    font-size:14px;
    margin-bottom:7px
}
.fact b {
    font-size:20px
}
.empty {
    padding:30px;
    text-align:center;
    color:var(--muted)
}
.bar-row {
    display:grid;
    grid-template-columns:100px 1fr 35px;
    gap:10px;
    align-items:center;
    margin:17px 0;
    font-size:11px
}
.bar {
    height:7px;
    background:#252f3f;
    border-radius:20px;
    overflow:hidden
}
.bar span {
    display:block;
    height:100%;
    border-radius:20px;
    background:linear-gradient(90deg,#a77e42,#e8cb93)
}
.presentation {
    max-width:1150px;
    margin:auto
}
.presentation-cover {
    border-radius:20px;
    min-height:250px;
    background:linear-gradient(120deg,#17283a,#111722 55%,#2b271a);
    padding:30px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    border:1px solid #3a4555
}
.presentation-cover h2 {
    font:800 36px Manrope;
    margin:10px 0
}
.presentation-cover p {
    color:#bdc7d5
}
.doc-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:13px 0;
    border-bottom:1px solid var(--line)
}
.doc-row:last-child {
    border:0
}
.mobile-menu {
    display:none
}
/* Responsive layout for medium-sized screens. */

@media(max-width:1100px) {
    .sidebar {
        width:205px
    }
    .kpi-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .content {
        padding:23px
    }
    .topbar {
        padding:22px 23px
    }
    .two-col {
        grid-template-columns:1fr
    }
    .hero-art {
        padding:0;
        font-size:60px
    }
}
/* Responsive layout for mobile screens. */

@media(max-width:760px) {
    .sidebar {
        width:65px;
        padding:20px 8px
    }
    .brand {
        margin:0 5px 35px
    }
    .brand>span:last-child,.nav-label,.sidebar nav a span,.sidebar-bottom>div:last-child {
        display:none
    }
    .sidebar nav a {
        justify-content:center;
        font-size:18px;
        padding:13px 4px
    }
    .sidebar-bottom {
        justify-content:center;
        padding:14px 0
    }
    .topbar {
        align-items:flex-start;
        padding:18px 15px
    }
    .topbar h1 {
        font-size:20px
    }
    .live-pill {
        display:none
    }
    .user-chip>span:last-child {
        display:none
    }
    .top-actions {
        gap:8px
    }
    .content {
        padding:17px 13px
    }
    .footer {
        padding:14px;
        flex-direction:column
    }
    .hero {
        padding:22px;
        min-height:0
    }
    .hero-art {
        display:none
    }
    .hero h2 {
        font-size:26px
    }
    .kpi-grid {
        gap:9px
    }
    .card {
        padding:14px
    }
    .kpi-value {
        font-size:23px
    }
    .plot-layout,.detail-hero,.three-col {
        grid-template-columns:1fr
    }
    .form-grid {
        grid-template-columns:1fr
    }
    .full {
        grid-column:auto
    }
    .section-head {
        align-items:flex-start
    }
    .toolbar .search-input {
        max-width:100%
    }
    .property-facts {
        grid-template-columns:1fr 1fr
    }
}
/* Print-specific rules: hide navigation and simplify colors. */

@media print {
    .sidebar,.topbar,.footer,.no-print {
        display:none!important
    }
    .main-area {
        width:100%
    }
    .content {
        padding:0
    }
    .card,.hero {
        break-inside:avoid;
        background:white;
        color:#111;
        border:1px solid #ddd
    }
    .muted,.hero p {
        color:#444
    }
}

/* Media library: image cards, previews, and metadata. */
.media-grid {
    grid-template-columns:repeat(auto-fill,minmax(245px,1fr));
    gap:18px
}
.media-card {
    padding:0;
    overflow:hidden
}
.media-card>a {
    display:block
}
.media-card img {
    display:block;
    width:100%;
    height:190px;
    object-fit:cover;
    background:#101722
}
.media-placeholder {
    height:190px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:10px;
    background:linear-gradient(135deg,#182435,#263b50);
    font-size:42px;
    color:#dfbd80
}
.media-placeholder small {
    font-size:10px;
    letter-spacing:2px
}
.media-card-body {
    padding:16px
}
.media-card-body h4 {
    margin:12px 0 6px;
    font:700 15px Manrope
}
.media-card-body p {
    font-size:12px;
    line-height:1.6
}
.media-card-body .toolbar {
    gap:8px
}
.media-card-body .status {
    font-size:10px
}

/* Unified per-plot profile: cover image, facts and linked media live together. */
.plot-profile-hero {
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
    gap:18px;
    align-items:stretch;
    margin-bottom:24px
}
.plot-cover-card {
    padding:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height:100%
}
.plot-cover-link {
    position:relative;
    display:block;
    min-height:300px;
    flex:1;
    background:linear-gradient(135deg,#101a28,#26384a)
}
.plot-cover-image {
    width:100%;
    height:100%;
    min-height:300px;
    max-height:440px;
    object-fit:cover;
    display:block
}
.cover-label {
    position:absolute;
    left:15px;
    bottom:15px;
    padding:7px 10px;
    background:#080d16d9;
    border:1px solid #ffffff24;
    border-radius:8px;
    color:#f1d7a3;
    font-size:9px;
    letter-spacing:1.4px;
    font-weight:700
}
.cover-caption {
    padding:13px 16px;
    color:#dce3ed
}
.cover-caption p {
    margin:5px 0 0;
    color:var(--muted);
    font-size:12px;
    line-height:1.5
}
.plot-thumb-row {
    display:flex;
    gap:8px;
    padding:0 13px 13px;
    overflow:auto
}
.plot-thumb-row a {
    flex:0 0 72px;
    height:54px;
    border-radius:8px;
    overflow:hidden;
    border:1px solid #344052
}
.plot-thumb-row img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}
.plot-cover-empty {
    min-height:340px;
    padding:30px;
    display:flex;
    flex:1;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
    gap:12px;
    background:radial-gradient(ellipse at 50% 35%,#26364a,#101722 70%)
}
.plot-cover-empty>span {
    font-size:58px;
    color:var(--gold)
}
.plot-cover-empty p {
    color:var(--muted);
    max-width:260px;
    line-height:1.6
}
.plot-main-info {
    display:flex;
    flex-direction:column;
    justify-content:center
}
.profile-actions {
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    margin-top:20px
}
.spec-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:25px
}
.profile-description {
    border-top:1px solid var(--line);
    margin-top:8px;
    padding-top:12px
}
.profile-description h4 {
    font:700 14px Manrope;
    margin:8px 0
}
.profile-description p {
    color:#b8c3d3;
    margin-bottom:0
}

@media(max-width:900px) {
    .plot-profile-hero {
        grid-template-columns:1fr
    }
    .plot-cover-link,.plot-cover-image {
        min-height:240px;
        max-height:360px
    }
}

@media(max-width:760px) {
    .spec-grid {
        grid-template-columns:1fr
    }
    .plot-cover-empty {
        min-height:240px
    }
}

/* Dark theme styling for the single-page plot editor and media manager */
.form-section {
    margin-bottom:16px;
    padding:23px
}
.form-section-title {
    display:flex;
    align-items:flex-start;
    gap:13px;
    margin:0 0 22px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line)
}
.form-section-title h3 {
    margin:0;
    font:750 17px Manrope,sans-serif
}
.form-section-title p {
    margin:5px 0 0;
    color:var(--muted);
    font-size:11px;
    line-height:1.5
}
.step-number {
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#d8b47718;
    border:1px solid #d8b47733;
    color:var(--gold);
    font-weight:800
}
.required {
    color:var(--red)
}
.checkbox-field label {
    display:flex;
    align-items:center;
    gap:9px
}
.checkbox-field input,.delete-media input {
    width:auto!important;
    accent-color:var(--gold)
}
.subsection-heading {
    font:700 13px Manrope;
    margin:0 0 13px;
    color:var(--text)
}
.existing-media-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(245px,1fr));
    gap:12px;
    margin-bottom:20px
}
.existing-media-item {
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    background:var(--panel2);
    min-width:0
}
.existing-media-item>img {
    display:block;
    width:100%;
    height:145px;
    object-fit:cover;
    background:#0b121c
}
.file-icon {
    height:145px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:8px;
    background:#0b121c;
    color:var(--gold);
    font-size:30px;
    font-weight:800
}
.file-icon small {
    font-size:9px;
    letter-spacing:1px;
    color:var(--muted)
}
.video-icon {
    color:var(--cyan)
}
.existing-media-fields {
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:7px
}
.existing-media-fields label {
    font-size:10px;
    color:var(--muted);
    font-weight:700
}
.existing-media-fields input {
    width:100%;
    min-width:0;
    border:1px solid #2b3749;
    border-radius:8px;
    padding:9px;
    color:var(--text);
    background:#0c121c
}
.media-meta {
    color:var(--muted);
    font-size:10px
}
.delete-media {
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:3px;
    color:var(--red)!important
}
.upload-panel {
    padding:17px;
    border:1px dashed #344055;
    border-radius:12px;
    background:#0c121c
}
.upload-note {
    font-size:11px;
    color:var(--muted);
    line-height:1.6;
    margin-top:13px
}
.empty-media-hint {
    padding:22px;
    border:1px dashed #344055;
    border-radius:12px;
    text-align:center;
    background:#0c121c;
    margin-bottom:18px
}
.empty-media-hint>span {
    font-size:30px;
    color:var(--gold)
}
.empty-media-hint b {
    display:block;
    margin:8px 0;
    color:var(--text)
}
.empty-media-hint p {
    margin:0;
    color:var(--muted);
    font-size:12px
}
.save-bar {
    position:sticky;
    bottom:12px;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:18px 0 4px;
    padding:16px 19px;
    border:1px solid #344055;
    border-radius:14px;
    background:rgba(14,20,30,.96);
    box-shadow:0 8px 28px #0005;
    backdrop-filter:blur(10px)
}
.save-bar b,.save-bar small {
    display:block
}
.save-bar b {
    font-size:13px;
    color:var(--text)
}
.save-bar small {
    font-size:11px;
    color:var(--muted);
    margin-top:4px;
    line-height:1.5
}
.page-intro {
    margin-top:3px
}
.page-intro h3 {
    font-size:18px
}
.page-intro p {
    max-width:650px;
    line-height:1.6
}
.area-calculator {
    margin-top:15px;
    padding:16px;
    border:1px solid #344055;
    border-radius:13px;
    background:linear-gradient(145deg,#101927,#0c121c)
}
.area-calculator h4 {
    margin:0 0 6px;
    color:var(--text);
    font-size:13px
}
.area-calculator .help {
    font-size:11px;
    color:var(--muted);
    line-height:1.6;
    margin:0 0 14px
}
.area-result {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:9px;
    margin-top:14px
}
.area-result-item {
    background:#080d15;
    border:1px solid #253043;
    border-radius:10px;
    padding:11px;
    min-width:0
}
.area-result-item small {
    display:block;
    color:var(--muted);
    font-size:14px;
    margin-bottom:6px
}
.area-result-item b {
    font-size:20px;
    overflow-wrap:anywhere;
    color:var(--gold)
}
.calc-inputs {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:13px
}
.calc-inputs[hidden] {
    display:none!important
}
.area-convert-note {
    font-size:11px;
    color:var(--muted);
    margin-top:9px
}
.area-tool-row {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    flex-wrap:wrap
}
.area-tool-row .field {
    flex:1;
    min-width:200px
}
.area-use-button {
    white-space:nowrap
}

@media(max-width:760px) {
    .form-section {
        padding:15px
    }
    .form-section-title {
        margin-bottom:16px
    }
    .save-bar {
        position:static;
        align-items:flex-start;
        flex-direction:column
    }
    .save-bar .toolbar {
        width:100%
    }
    .save-bar .toolbar .btn {
        flex:1
    }
    .existing-media-grid {
        grid-template-columns:1fr 1fr
    }
    .existing-media-item>img,.file-icon {
        height:115px
    }
    .area-result {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .calc-inputs {
        grid-template-columns:1fr
    }
    .area-tool-row {
        align-items:stretch
    }
    .area-use-button {
        width:100%
    }
}

/* Irregular plot area calculator: each triangle contributes base × perpendicular height ÷ 2. */
.irregular-triangles {
    display:grid;
    gap:10px;
    margin-top:10px
}
.irregular-triangle-row {
    display:grid;
    grid-template-columns:minmax(78px,.55fr) minmax(150px,1fr) minmax(180px,1.2fr) auto;
    align-items:end;
    gap:12px;
    padding:14px;
    border:1px solid var(--border,#303744);
    border-radius:10px;
    background:rgba(255,255,255,.025)
}
.irregular-triangle-row>b {
    padding-bottom:12px
}
.irregular-triangle-row .field {
    margin:0
}
.irregular-triangle-row .remove-triangle {
    white-space:nowrap;
    margin-bottom:1px
}
.irregular-triangle-row .remove-triangle:disabled {
    opacity:.4;
    cursor:not-allowed
}

@media(max-width:760px) {
    .irregular-triangle-row {
        grid-template-columns:1fr 1fr
    }
    .irregular-triangle-row>b {
        grid-column:1/-1;
        padding-bottom:0
    }
    .irregular-triangle-row .remove-triangle {
        grid-column:1/-1;
        justify-self:start
    }
}

/* Multi-sided irregular plot boundary-coordinate calculator */
.polygon-table-wrap {
    width:100%;
    overflow-x:auto
}
.polygon-table {
    width:100%;
    border-collapse:separate;
    border-spacing:0 8px;
    min-width:560px
}
.polygon-table th {
    text-align:left;
    font-size:.82rem;
    color:var(--muted,#aab3c2);
    font-weight:600;
    padding:4px 8px
}
.polygon-table td {
    padding:4px 6px
}
.polygon-table .polygon-point-label {
    font-weight:700;
    white-space:nowrap;
    padding-left:10px
}
.polygon-table input {
    width:100%;
    min-width:130px
}
.polygon-table .remove-point {
    white-space:nowrap
}
.polygon-table .remove-point:disabled {
    opacity:.4;
    cursor:not-allowed
}

/* Plot-only inventory cards: filters, cards, and responsive grid. */
.plot-filter-panel {
    margin-bottom:20px
}
.plot-filter-panel .toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap
}
.plot-card-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(265px,1fr));
    gap:18px;
    align-items:stretch
}
.plot-inventory-card {
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    border:1px solid #293548;
    border-radius:16px;
    background:linear-gradient(160deg,#151e2b,#0d131d);
    color:var(--text);
    text-decoration:none;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease
}
.plot-inventory-card:hover {
    transform:translateY(-3px);
    border-color:#b9965a;
    box-shadow:0 14px 35px #0003
}
.plot-card-cover {
    height:190px;
    position:relative;
    background:#111a27;
    overflow:hidden
}
.plot-card-cover>img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .3s ease
}
.plot-inventory-card:hover .plot-card-cover>img {
    transform:scale(1.035)
}
.plot-card-no-image {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:7px;
    background:radial-gradient(ellipse at 50% 20%,#29394d,#101722 72%);
    color:var(--muted)
}
.plot-card-no-image span {
    font-size:36px;
    color:var(--gold)
}
.plot-card-no-image b {
    font-size:13px;
    color:var(--text)
}
.plot-card-no-image small {
    font-size:10px
}
.plot-card-status {
    position:absolute;
    top:12px;
    left:12px;
    box-shadow:0 3px 12px #0004
}
.plot-card-body {
    padding:17px;
    display:flex;
    flex-direction:column;
    flex:1
}
.plot-card-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px
}
.plot-card-heading .eyebrow {
    font-size:9px
}
.plot-card-heading h3 {
    margin:4px 0 0;
    font:800 22px Manrope,sans-serif;
    color:var(--text)
}
.plot-card-arrow {
    color:var(--gold);
    font-size:20px
}
.plot-card-type {
    font-size:11px;
    color:var(--muted);
    margin-top:9px;
    min-height:17px
}
.plot-card-metrics {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:18px;
    padding:13px 0;
    border-top:1px solid #293548;
    border-bottom:1px solid #293548
}
.plot-card-metrics small {
    display:block;
    font-size:9px;
    letter-spacing:.8px;
    color:var(--muted);
    margin-bottom:7px
}
.plot-card-metrics b {
    font-size:13px;
    color:var(--text);
    overflow-wrap:anywhere
}
.plot-card-metrics>div:nth-child(2) b {
    color:var(--gold)
}
.plot-card-footer {
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    margin-top:auto;
    padding-top:14px;
    font-size:10px;
    color:var(--muted)
}
.plot-card-footer span:last-child {
    color:var(--gold);
    font-weight:700
}
.plot-empty-state {
    grid-column:1/-1;
    text-align:center;
    padding:42px
}
.plot-empty-state p {
    color:var(--muted);
    line-height:1.6
}
.plot-inventory-card[hidden] {
    display:none!important
}
.dashboard-plot-grid {
    grid-template-columns:repeat(auto-fill,minmax(245px,1fr))
}

@media(max-width:760px) {
    .plot-card-grid {
        grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
        gap:12px
    }
    .plot-card-cover {
        height:155px
    }
    .plot-card-body {
        padding:13px
    }
    .plot-filter-panel .toolbar,.plot-filter-panel form {
        width:100%
    }
    .plot-filter-panel input,.plot-filter-panel select {
        max-width:100%;
        flex:1
    }
}