/* ==========================================================================
   MyArea — IBM Carbon Design System (Gray 10 / White theme)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    --cds-background:#ffffff; --cds-background-hover:#e8e8e8;
    --cds-layer:#f4f4f4; --cds-layer-hover:#e8e8e8; --cds-layer-accent:#e0e0e0;
    --cds-field:#f4f4f4; --cds-border-subtle:#e0e0e0; --cds-border-strong:#8d8d8d;
    --cds-border-interactive:#0f62fe;
    --cds-text-primary:#161616; --cds-text-secondary:#525252; --cds-text-placeholder:#a8a8a8;
    --cds-text-helper:#6f6f6f; --cds-text-on-color:#ffffff;
    --cds-link-primary:#0f62fe; --cds-link-primary-hover:#0043ce;
    --cds-interactive:#0f62fe;
    --cds-button-primary:#0f62fe; --cds-button-primary-hover:#0050e6; --cds-button-primary-active:#002d9c;
    --cds-button-secondary:#393939; --cds-button-secondary-hover:#4c4c4c;
    --cds-button-danger:#da1e28; --cds-button-danger-hover:#b81922;
    --cds-support-error:#da1e28; --cds-support-success:#24a148; --cds-support-warning:#f1c21b;
    --cds-icon-primary:#161616; --cds-icon-secondary:#525252;
    --cds-header-bg:#161616; --cds-header-border:#393939; --cds-header-text:#f4f4f4; --cds-header-text-secondary:#c6c6c6;
    --sp-01:.125rem; --sp-02:.25rem; --sp-03:.5rem; --sp-04:.75rem; --sp-05:1rem;
    --sp-06:1.5rem; --sp-07:2rem; --sp-08:2.5rem; --sp-09:3rem; --sp-10:4rem;
    --cds-ease-productive:cubic-bezier(.2,0,.38,.9); --cds-ease-entrance:cubic-bezier(0,0,.38,.9);
    --dur-fast:70ms; --dur-mod:110ms; --dur-slow:240ms;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:400;font-size:.875rem;line-height:1.375rem;letter-spacing:.16px;background:var(--cds-layer);color:var(--cds-text-primary);-webkit-font-smoothing:antialiased;}
a{color:var(--cds-link-primary);text-decoration:none;}
a:hover{color:var(--cds-link-primary-hover);text-decoration:underline;}
.app-shell{display:flex;flex-direction:column;min-height:100vh;}
.cds-icon{display:inline-block;vertical-align:middle;flex-shrink:0;}

/* UI Shell header */
.navbar{display:flex;align-items:stretch;background:var(--cds-header-bg);border-bottom:1px solid var(--cds-header-border);height:3rem;min-height:3rem;padding:0;position:sticky;top:0;z-index:8000;}
.navbar-brand{display:flex;align-items:center;gap:var(--sp-03);padding:0 var(--sp-05);color:var(--cds-header-text);font-weight:600;font-size:.875rem;letter-spacing:.1px;white-space:nowrap;}
.navbar-brand:hover{color:#fff;text-decoration:none;}
.navbar-brand .brand-mark{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;color:var(--cds-interactive);}
.navbar-brand .brand-sub{color:var(--cds-header-text-secondary);font-weight:400;}
.navbar-links{display:flex;align-items:stretch;flex:1;}
.navbar-links a{display:flex;align-items:center;gap:var(--sp-03);padding:0 var(--sp-05);color:var(--cds-header-text-secondary);font-size:.875rem;border-bottom:2px solid transparent;transition:background var(--dur-mod) var(--cds-ease-productive),color var(--dur-mod);}
.navbar-links a:hover{background:#2c2c2c;color:#fff;text-decoration:none;}
.navbar-links a.active{color:#fff;border-bottom-color:var(--cds-interactive);background:#262626;}
.navbar-right{display:flex;align-items:stretch;}
.navbar-right a{display:flex;align-items:center;gap:var(--sp-03);padding:0 var(--sp-05);color:var(--cds-header-text-secondary);font-size:.875rem;transition:background var(--dur-mod);}
.navbar-right a:hover{background:#2c2c2c;color:#fff;text-decoration:none;}

/* Layout */
.container{max-width:1056px;margin:0 auto;padding:var(--sp-07) var(--sp-05);width:100%;}
.footer{margin-top:auto;padding:var(--sp-05);color:var(--cds-text-helper);font-size:.75rem;border-top:1px solid var(--cds-border-subtle);background:var(--cds-background);}
h1{font-size:1.75rem;line-height:2.25rem;font-weight:400;letter-spacing:0;margin:0 0 var(--sp-05);}
h2{font-size:1.25rem;line-height:1.75rem;font-weight:400;margin:0 0 var(--sp-04);}
h3{font-size:1rem;line-height:1.375rem;font-weight:600;margin:0 0 var(--sp-03);}
.page-head{display:flex;align-items:center;gap:var(--sp-04);margin-bottom:var(--sp-02);}
.page-head .cds-icon{color:var(--cds-icon-secondary);}
.section-heading{display:flex;align-items:center;gap:var(--sp-03);margin:var(--sp-08) 0 var(--sp-05);font-size:1.25rem;font-weight:400;color:var(--cds-text-primary);}
.section-heading .cds-icon{color:var(--cds-icon-secondary);}
.muted{color:var(--cds-text-secondary);}
.small{font-size:.75rem;line-height:1rem;}
.back-link{display:inline-flex;align-items:center;gap:var(--sp-03);margin-bottom:var(--sp-05);font-size:.875rem;}

/* Buttons */
.btn,.btn-secondary,.btn-danger,.btn-outline,button.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--sp-09);min-height:3rem;padding:calc(.875rem - 1px) var(--sp-05);font-family:inherit;font-size:.875rem;line-height:1.125rem;letter-spacing:.16px;border:1px solid transparent;border-radius:0;cursor:pointer;transition:background var(--dur-mod) var(--cds-ease-productive),border-color var(--dur-mod);text-align:left;max-width:20rem;}
.btn .cds-icon,.btn-secondary .cds-icon,.btn-danger .cds-icon,.btn-outline .cds-icon{margin-left:var(--sp-05);}
.btn{background:var(--cds-button-primary);color:var(--cds-text-on-color);}
.btn:hover{background:var(--cds-button-primary-hover);color:#fff;text-decoration:none;}
.btn:active{background:var(--cds-button-primary-active);}
.btn-secondary{background:var(--cds-button-secondary);color:#fff;}
.btn-secondary:hover{background:var(--cds-button-secondary-hover);color:#fff;text-decoration:none;}
.btn-danger{background:var(--cds-button-danger);color:#fff;}
.btn-danger:hover{background:var(--cds-button-danger-hover);color:#fff;text-decoration:none;}
.btn-outline{background:transparent;color:var(--cds-link-primary);border-color:var(--cds-button-primary);}
.btn-outline:hover{background:rgba(15,98,254,.08);color:var(--cds-link-primary-hover);text-decoration:none;}
.btn-link{background:none;color:var(--cds-link-primary);min-height:auto;padding:0;border:none;cursor:pointer;font-size:.875rem;font-family:inherit;}
.btn-sm{min-height:2rem;padding:0 var(--sp-04);font-size:.75rem;gap:var(--sp-04);max-width:none;}
.btn:focus,.btn-secondary:focus,.btn-danger:focus,.btn-outline:focus,input:focus,select:focus,textarea:focus,a:focus,button:focus{outline:2px solid var(--cds-interactive);outline-offset:-2px;}

/* Forms */
label{display:block;margin-bottom:var(--sp-05);font-size:.75rem;line-height:1rem;color:var(--cds-text-secondary);font-weight:400;}
input,select,textarea{width:100%;margin-top:var(--sp-03);height:2.5rem;padding:0 var(--sp-05);font-family:inherit;font-size:.875rem;color:var(--cds-text-primary);background:var(--cds-field);border:none;border-bottom:1px solid var(--cds-border-strong);border-radius:0;transition:background var(--dur-mod);}
textarea{height:auto;min-height:5rem;padding:var(--sp-04) var(--sp-05);resize:vertical;line-height:1.4;}
input::placeholder,textarea::placeholder{color:var(--cds-text-placeholder);}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 32 32'%3E%3Cpath fill='%23161616' d='M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--sp-05) center;padding-right:var(--sp-08);}
.check{display:flex;align-items:center;gap:var(--sp-03);font-size:.875rem;color:var(--cds-text-primary);}
.check input{width:1rem;height:1rem;margin:0;flex-shrink:0;}

/* Tiles/cards */
.card,.tile{background:var(--cds-background);border:1px solid var(--cds-border-subtle);padding:var(--sp-06);margin-bottom:var(--sp-06);border-radius:0;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:1px;background:var(--cds-border-subtle);border:1px solid var(--cds-border-subtle);}
.card-grid>*{margin:0;}
.listing-card{position:relative;background:var(--cds-background);border:none;padding:var(--sp-05);transition:background var(--dur-mod) var(--cds-ease-productive);}
.listing-card:hover{background:var(--cds-layer);}
.listing-card.featured{box-shadow:inset 3px 0 0 var(--cds-interactive);}
.listing-card h3{display:flex;align-items:center;gap:var(--sp-03);font-size:.875rem;}
.listing-card .desc{font-size:.875rem;color:var(--cds-text-secondary);margin:var(--sp-03) 0;}
.listing-card .meta{font-size:.75rem;color:var(--cds-text-helper);}
.ribbon{position:absolute;top:var(--sp-05);right:var(--sp-05);display:inline-flex;align-items:center;gap:var(--sp-02);background:#161616;color:#fff;font-size:.6875rem;letter-spacing:.32px;padding:var(--sp-02) var(--sp-03);text-transform:uppercase;}
.card-actions{display:flex;flex-wrap:wrap;gap:0;margin-top:var(--sp-04);}
.chip{display:inline-flex;align-items:center;gap:var(--sp-03);padding:var(--sp-03) var(--sp-05);min-height:2rem;background:transparent;color:var(--cds-link-primary);font-size:.75rem;border:1px solid transparent;transition:background var(--dur-mod);}
.chip:hover{background:rgba(15,98,254,.08);text-decoration:none;}
.chip.danger{color:var(--cds-button-danger);}
.chip.danger:hover{background:rgba(218,30,40,.08);}
.chip .cds-icon{color:currentColor;}

/* Explore grid */
.explore-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--cds-border-subtle);border:1px solid var(--cds-border-subtle);}
.explore-card{display:flex;flex-direction:column;gap:var(--sp-03);background:var(--cds-background);padding:var(--sp-06);min-height:9rem;color:var(--cds-text-primary);transition:background var(--dur-mod) var(--cds-ease-productive);position:relative;}
.explore-card:hover{background:var(--cds-layer);text-decoration:none;}
.explore-card::after{content:'';position:absolute;right:var(--sp-05);bottom:var(--sp-05);width:1rem;height:1rem;opacity:0;transform:translateX(-4px);background:var(--cds-interactive);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M18 6l-1.43 1.393L24.15 15H4v2h20.15l-7.58 7.573L18 26l10-10z'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M18 6l-1.43 1.393L24.15 15H4v2h20.15l-7.58 7.573L18 26l10-10z'/%3E%3C/svg%3E") no-repeat center/contain;transition:opacity var(--dur-slow) var(--cds-ease-entrance),transform var(--dur-slow) var(--cds-ease-entrance);}
.explore-card:hover::after{opacity:1;transform:translateX(0);}
.explore-card .explore-icon{color:var(--cds-interactive);}
.explore-title{font-weight:600;font-size:1rem;color:var(--cds-text-primary);}
.explore-desc{font-size:.75rem;color:var(--cds-text-secondary);}

/* Guide hero */
.guide-hero{background:var(--cds-background);border:1px solid var(--cds-border-subtle);border-left:3px solid var(--cds-interactive);padding:var(--sp-07);margin-bottom:var(--sp-07);}
.guide-eyebrow{display:inline-flex;align-items:center;gap:var(--sp-03);text-transform:uppercase;letter-spacing:.32px;font-size:.75rem;color:var(--cds-text-secondary);margin:0 0 var(--sp-03);}
.guide-eyebrow .cds-icon{color:var(--cds-interactive);}
.guide-hero h1{margin:0 0 var(--sp-02);font-size:2rem;line-height:2.5rem;}
.guide-actions{display:flex;flex-wrap:wrap;gap:var(--sp-05);margin-top:var(--sp-05);}

/* Tags */
.badge,.tag{display:inline-flex;align-items:center;gap:var(--sp-02);height:1.5rem;padding:0 var(--sp-03);border-radius:.9375rem;background:#d0e2ff;color:#0043ce;font-size:.75rem;letter-spacing:.16px;}
.tag-gray{background:var(--cds-layer-accent);color:var(--cds-text-primary);}
.tag-green{background:#a7f0ba;color:#0e6027;}
.tag-red{background:#ffd7d9;color:#a2191f;}

/* Tables */
.table{width:100%;border-collapse:collapse;background:var(--cds-background);font-size:.875rem;}
.table th,.table td{text-align:left;padding:var(--sp-04) var(--sp-05);border-bottom:1px solid var(--cds-border-subtle);vertical-align:middle;}
.table th{background:var(--cds-layer);font-weight:600;font-size:.75rem;letter-spacing:.16px;color:var(--cds-text-primary);height:3rem;}
.table tbody tr{transition:background var(--dur-fast);}
.table tbody tr:hover{background:var(--cds-layer);}
.table .inline-form{display:inline-block;margin:0;}
.table .inline-form select{height:2rem;margin:0;}
.cost-table td strong{font-weight:600;}

/* Auth */
.auth-wrap{display:flex;min-height:calc(100vh - 3rem);align-items:stretch;}
.auth-aside{flex:1;background:var(--cds-header-bg);color:#fff;padding:var(--sp-10) var(--sp-09);display:none;flex-direction:column;justify-content:space-between;}
.auth-aside .brand-lg{display:flex;align-items:center;gap:var(--sp-04);font-size:1.25rem;font-weight:600;}
.auth-aside .brand-lg .cds-icon{color:var(--cds-interactive);}
.auth-aside h2{font-size:2.25rem;line-height:2.75rem;font-weight:300;color:#fff;max-width:22ch;}
.auth-aside .aside-foot{color:var(--cds-header-text-secondary);font-size:.75rem;}
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--sp-07) var(--sp-05);background:var(--cds-layer);}
.auth-card{width:100%;max-width:24rem;background:var(--cds-background);padding:var(--sp-07);border:1px solid var(--cds-border-subtle);margin:0;}
.auth-card h1{font-size:1.25rem;font-weight:600;}
.auth-card .btn{width:100%;max-width:none;margin-top:var(--sp-03);}
.auth-alt{margin-top:var(--sp-05);font-size:.875rem;color:var(--cds-text-secondary);}

/* Alerts */
.alert{display:flex;align-items:flex-start;gap:var(--sp-04);padding:var(--sp-05);margin-bottom:var(--sp-05);border-left:3px solid;font-size:.875rem;}
.alert .cds-icon{flex-shrink:0;margin-top:1px;}
.alert-error{background:#fff1f1;border-color:var(--cds-support-error);color:#161616;}
.alert-error .cds-icon{color:var(--cds-support-error);}
.alert-success{background:#defbe6;border-color:var(--cds-support-success);color:#161616;}
.alert-success .cds-icon{color:var(--cds-support-success);}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--cds-border-subtle);border:1px solid var(--cds-border-subtle);margin:var(--sp-05) 0 var(--sp-08);}
.stat-card{background:var(--cds-background);padding:var(--sp-06);display:flex;flex-direction:column;gap:var(--sp-03);}
.stat-card .stat-head{display:flex;align-items:center;gap:var(--sp-03);color:var(--cds-text-secondary);font-size:.75rem;text-transform:uppercase;letter-spacing:.32px;}
.stat-num{font-size:2.625rem;line-height:2.75rem;font-weight:300;color:var(--cds-text-primary);}
.admin-nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;background:var(--cds-border-subtle);border:1px solid var(--cds-border-subtle);}
.admin-nav a{display:flex;align-items:center;gap:var(--sp-04);background:var(--cds-background);padding:var(--sp-05);color:var(--cds-text-primary);font-size:.875rem;transition:background var(--dur-mod);}
.admin-nav a:hover{background:var(--cds-layer);text-decoration:none;}
.admin-nav a .cds-icon{color:var(--cds-icon-secondary);}

/* Info */
.info-block{margin-bottom:var(--sp-05);}
.info-block h2{font-size:1rem;font-weight:600;}
.info-body p{margin:var(--sp-04) 0;color:var(--cds-text-secondary);}
.info-body ul{margin:var(--sp-04) 0;padding-left:var(--sp-06);}
.info-body li{margin:var(--sp-03) 0;color:var(--cds-text-secondary);}
.info-body strong{color:var(--cds-text-primary);font-weight:600;}

/* My Home */
.home-card{margin-bottom:var(--sp-05);}
.home-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-05);}
.home-head h2{display:flex;align-items:center;gap:var(--sp-03);margin:0 0 var(--sp-02);font-size:1.125rem;font-weight:600;}
.home-head h2 .cds-icon{color:var(--cds-icon-secondary);}
.member-list{list-style:none;padding:0;margin:var(--sp-05) 0;border-top:1px solid var(--cds-border-subtle);}
.member-row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-05);padding:var(--sp-04) 0;border-bottom:1px solid var(--cds-border-subtle);}
.modal{position:fixed;inset:0;background:rgba(22,22,22,.5);display:flex;align-items:center;justify-content:center;padding:var(--sp-05);z-index:9000;}
.modal-card{background:var(--cds-background);padding:var(--sp-07);width:100%;max-width:32rem;max-height:90vh;overflow-y:auto;}
.modal-card h2{font-size:1.25rem;font-weight:400;}

/* Filters */
.filters{display:flex;gap:var(--sp-05);margin-bottom:var(--sp-06);flex-wrap:wrap;align-items:flex-end;}
.filters input,.filters select{flex:1;margin-top:var(--sp-03);}
.filters>label{flex:1 1 220px;margin-bottom:0;}
.search-field{position:relative;flex:1 1 100%;}
.search-field .cds-icon{position:absolute;left:var(--sp-05);top:50%;transform:translateY(-50%);color:var(--cds-icon-secondary);pointer-events:none;}
.search-field input{margin:0;padding-left:var(--sp-09);}
.avatar{width:96px;height:96px;object-fit:cover;margin-bottom:var(--sp-05);border-radius:0;}

/* Weather */
.weather-now{display:flex;align-items:center;gap:var(--sp-06);border-left:3px solid var(--cds-interactive);}
.wx-icon{color:var(--cds-interactive);}
.wx-temp{font-size:3rem;line-height:1;font-weight:300;}
.wx-detail{line-height:1.5;}
.wx-detail .wx-row{display:flex;align-items:center;gap:var(--sp-03);color:var(--cds-text-secondary);font-size:.75rem;}
.forecast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1px;background:var(--cds-border-subtle);border:1px solid var(--cds-border-subtle);}
.forecast-card{background:var(--cds-background);padding:var(--sp-05);text-align:center;display:flex;flex-direction:column;gap:var(--sp-03);align-items:center;}
.fc-day{font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.32px;}
.fc-icon{color:var(--cds-icon-secondary);}
.fc-temp{font-weight:400;font-size:1rem;}
.fc-temp .lo{color:var(--cds-text-helper);}
.fc-sum{font-size:.6875rem;color:var(--cds-text-helper);}

/* Motion */
@keyframes cds-fade-up{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.explore-grid .explore-card,.stat-card,.listing-card{animation:cds-fade-up var(--dur-slow) var(--cds-ease-entrance) both;}
.explore-grid .explore-card:nth-child(2){animation-delay:30ms;}
.explore-grid .explore-card:nth-child(3){animation-delay:60ms;}
.explore-grid .explore-card:nth-child(4){animation-delay:90ms;}
.explore-grid .explore-card:nth-child(5){animation-delay:120ms;}
.explore-grid .explore-card:nth-child(6){animation-delay:150ms;}
.explore-grid .explore-card:nth-child(n+7){animation-delay:180ms;}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}

/* Responsive */
@media (min-width:768px){.auth-aside{display:flex;}}
@media (max-width:672px){
.navbar{height:auto;min-height:3rem;flex-wrap:wrap;}
.navbar-links{order:3;flex-basis:100%;border-top:1px solid var(--cds-header-border);overflow-x:auto;}
.navbar-links a{padding:var(--sp-04) var(--sp-05);white-space:nowrap;}
.navbar-brand{flex:1;}
.container{padding:var(--sp-05);}
h1{font-size:1.5rem;line-height:2rem;}
.guide-hero h1{font-size:1.625rem;line-height:2.125rem;}
.weather-now{flex-direction:column;text-align:center;align-items:flex-start;}
.home-head{flex-direction:column;}
}