:root{
      --blue0:#073a8a;
      --blue1:#0a4fc7;
      --blue2:#0a3e98;
      --orange:#f59a2a;
      --white:#ffffff;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: #0f172a;
      background: #ffffff;
      min-height:100vh;
      display:flex;
      flex-direction:column;
    }

    /* Background photo */
    .page-bg{display:none;}

    /* Top nav */
    .topbar{
      position:sticky;
      top:0;
      z-index:50;
      background: linear-gradient(180deg, rgba(12,88,210,1) 0%, rgba(6,64,158,1) 100%);
      border-bottom: 1px solid rgba(255,255,255,.15);
    }
    .topbar-inner{
      max-width: 1200px;
      margin: 0 auto;
      display:flex;
      align-items:center;
      gap: 34px;
      padding: 16px 28px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap: 12px;
      text-decoration:none;
      color: var(--white);
      font-weight: 800;
      letter-spacing:.2px;
      font-size: 22px;
      text-shadow: 0 1px 0 rgba(0,0,0,.25);
    }
    .brand img{height:40px; width:auto; display:block}

    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-left: 24px;
      flex: 1;
      min-width: 0;
    }
    .nav-left,
    .nav-right{
      display:flex;
      align-items:center;
      gap: 38px;
    }
    .nav-right{gap:28px; margin-left:auto;}
    .nav a{
      position:relative;
      text-decoration:none;
      color: var(--orange);
      font-weight: 700;
      font-size: 18px;
      padding: 6px 2px;
      opacity: .98;
    }
    .nav a:hover{opacity:1}
    .nav a.active::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-6px;
      height:3px;
      background: var(--orange);
      border-radius: 3px;
    }

    /* Avatar menu (when logged in) */
    details.avatar-menu{position:relative;}
    details.avatar-menu > summary{
      list-style:none;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0;
      margin:0;
    }
    details.avatar-menu > summary::-webkit-details-marker{display:none}
    .avatar-btn{
      width:40px;
      height:40px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.22);
      overflow:hidden;
      box-shadow: 0 10px 20px rgba(0,0,0,.25);
      background: rgba(2, 8, 22, .20);
    }
    .avatar-btn img{width:100%; height:100%; object-fit:cover; display:block}
    .avatar-dropdown{
      position:absolute;
      right:0;
      top: 54px;
      width: 210px;
      background: rgba(10, 34, 84, 0.92);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 14px;
      box-shadow: 0 18px 40px rgba(0,0,0,.35);
      padding: 10px;
    }
    .avatar-dropdown a{
      display:block;
      color:#fff;
      text-decoration:none;
      padding: 10px 10px;
      border-radius: 10px;
      font-weight: 800;
      font-size: 14px;
      opacity: .98;
    }
    .avatar-dropdown a:hover{background: rgba(0,0,0,.18)}
    .avatar-dropdown .sep{height:1px; background: rgba(255,255,255,.14); margin: 6px 0;}

    /* Modal dialog */
    dialog{max-width:none; color: #fff;}
    dialog::backdrop{background: rgba(0,0,0,.55);}

    /* Toasts */
    .toast-container{position:fixed;top:84px;right:18px;z-index:999;display:flex;flex-direction:column;gap:10px;width:min(360px, calc(100% - 36px));pointer-events:none;}
    .toast{pointer-events:auto;background: rgba(10, 34, 84, 0.92);-webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px);border: 1px solid rgba(255,255,255,.14);border-radius: 14px;box-shadow: 0 18px 40px rgba(0,0,0,.35);padding: 12px 14px;display:flex;align-items:flex-start;gap: 10px;color:#fff;}
    .toast .dot{width:10px;height:10px;border-radius:999px;flex:0 0 auto;margin-top:4px;background: rgba(245,154,42,.95);box-shadow: 0 0 0 3px rgba(245,154,42,.16);}
    .toast.error .dot{background: rgba(255, 92, 92, .95); box-shadow: 0 0 0 3px rgba(255,92,92,.16)}
    .toast.success .dot{background: rgba(90, 255, 154, .95); box-shadow: 0 0 0 3px rgba(90,255,154,.16)}
    .toast .msg{font-weight:800; font-size:14px; line-height:1.25;}
    .toast button{margin-left:auto;border:0;background: transparent;color: rgba(255,255,255,.75);cursor:pointer;font-weight:900;font-size: 14px;padding: 2px 6px;}
    .toast button:hover{color:#fff}

    /* Language switch */
    .lang-switch{display:inline-flex; align-items:center; gap:10px}
    .lang-switch a{font-size:14px; font-weight:900; letter-spacing:.2px}
    .lang-switch .sep{opacity:.55; color: rgba(255,255,255,.65)}

    /* Filters / tabs */
    .filters{
      background: rgba(2, 8, 22, .28);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 16px;
      padding: 14px;
      box-shadow: 0 10px 24px rgba(0,0,0,.25);
      margin-bottom: 16px;
    }
    .filters .btn{width:auto; min-width:0}
    .tabs{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      margin: 8px 0 16px;
    }
    .tab{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(0,0,0,.12);
      background: #fff;
      color:#111;
      text-decoration:none;
      font-weight: 900;
      font-size: 13px;
      opacity: 1;
      transition: .15s ease;
    }
    .tab:hover{background: var(--orange); color:#fff; border-color: var(--orange);}
    .tab.active{background: var(--orange); color:#fff; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(245,154,42,.14)}

    .split{
      display:grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 18px;
      align-items:start;
    }
    .split > aside.panel{position:sticky; top:184px;}
    @media (max-width: 980px){
      .split{grid-template-columns: 1fr}
      .split > aside.panel{position:static;}
    }
    @media (max-width: 760px){
      .topbar-inner{padding: 12px 14px; gap: 18px; flex-wrap:wrap}
      .brand{font-size: 18px}
      .brand img{height:28px}
      .nav{margin-left:0; width:100%; flex-wrap:wrap; gap: 10px}
      .nav-left, .nav-right{gap: 16px; flex-wrap:wrap}
      .nav a{font-size: 15px}
      main{padding: 72px 14px 70px}
      .toast-container{top: 74px; right: 12px}
    }

    main{
      flex: 1;
      display:block;
      width:100%;
      padding: 32px 18px 32px;
    }

    /* Hero card (Home) */
    .hero-card{
      width: min(90vw, 1400px);
      background: rgba(10, 34, 84, 0.88);
      -webkit-backdrop-filter: blur(7px);
      backdrop-filter: blur(7px);
      border-radius: 18px;
      padding: 56px 64px;
      text-align: center;
      box-shadow: 0 18px 40px rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.10);
    }
    .hero-title{
      font-size: 54px;
      line-height: 1.15;
      font-weight: 900;
      color: var(--orange);
      text-shadow: 0 2px 0 rgba(0,0,0,.25);
      margin: 0 0 14px 0;
    }
    .hero-title .accent{font-style: italic}
    .hero-sub{
      font-size: 18px;
      font-weight: 700;
      opacity: .95;
      margin: 0 0 26px 0;
    }
    .hero-actions{
      display:flex;
      align-items:center;
      justify-content:center;
      gap: 18px;
      flex-wrap: wrap;
    }
    .demo-creds{
      margin-top: 18px;
      font-weight: 700;
      font-size: 14px;
      opacity: .95;
      color: #fff;
    }
    .demo-creds-label{color: rgba(255,255,255,.85); margin-right: 6px;}
    .demo-creds-value{color: rgba(255,255,255,.95);}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 12px 28px;
      border-radius: 9px;
      background: #f28f1f;
      color:#fff;
      text-decoration:none;
      font-weight: 800;
      font-size: 17px;
      box-shadow: 0 8px 18px rgba(0,0,0,.25);
      border: 1px solid rgba(0,0,0,.08);
    }
    .btn:hover{background:#e27f12}
    .btn.btn-added{
      background: #d97706;
      box-shadow: 0 8px 18px rgba(0,0,0,.28);
    }

    /* Shared content styles (Experiences / Services / Auth) */
    .content-card{
      width: 90%;
      margin-left: 5%;
      margin-right: 5%;
      max-width: none;
      background: rgba(10, 34, 84, 0.50);
      -webkit-backdrop-filter: blur(7px);
      backdrop-filter: blur(7px);
      border-radius: 18px;
      padding: 22px 22px;
      box-shadow: 0 18px 40px rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.10);
    }
    .page-title{
      margin: 0 0 14px 0;
      font-size: 34px;
      line-height: 1.15;
      font-weight: 900;
      color: var(--orange);
      text-shadow: 0 2px 0 rgba(0,0,0,.25);
    }
    .muted{opacity:.92}

    .grid2{display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px;}
    .grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px;}
    @media (max-width: 860px){
      .grid2{grid-template-columns:1fr}
      .grid3{grid-template-columns:1fr}
    }

    label{display:block; font-weight:800; margin: 8px 0 6px;}
    .input{
      width:100%;
      min-height:44px;
      min-height:44px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(4, 10, 26, .35);
      color: #fff;
      outline:none;
    }
    .input::placeholder{color: rgba(255,255,255,.65)}
    .input:focus{border-color: rgba(245,154,42,.65); box-shadow: 0 0 0 3px rgba(245,154,42,.18)}
    select.input{appearance:none}

    .tag{
      display:inline-flex;
      align-items:center;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(0,0,0,.18);
      font-weight: 800;
      font-size: 12px;
      margin-right: 8px;
      margin-top: 8px;
    }

    .tiles{display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}
    @media (max-width: 980px){.tiles{grid-template-columns: repeat(2, 1fr);}}
    @media (max-width: 640px){.tiles{grid-template-columns: 1fr;}}
    .tile{
      display:block;
      position: relative;
      text-decoration:none;
      color: inherit;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(2, 8, 22, .28);
      box-shadow: 0 10px 24px rgba(0,0,0,.25);
      overflow:hidden;
    }
    .tile-body{padding: 14px 14px 16px;}
    .tile-link{display:block; text-decoration:none; color:inherit}
    .tile-actions{padding: 0 14px 14px;}
    .btn-addexp{display:block; width:100%; border:none; cursor:pointer; padding: 10px 12px; border-radius: 14px; background: var(--orange); color:#09111f; font-weight: 900; letter-spacing:.2px; box-shadow: 0 10px 18px rgba(0,0,0,.20);}
    .btn-addexp:hover{filter: brightness(.95);}

    .tile-title{font-weight:900; font-size: 16px; line-height: 1.2;}
    .tile-meta{opacity:.9; font-weight:700; font-size: 12px; margin-top: 6px;}
    .tile-desc{opacity:.92; margin-top: 10px; font-size: 13px; line-height: 1.35;}
    .tile img{width:100%; height:160px; object-fit:cover; display:block;}
    .tile:hover{transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.18); transition: transform .16s ease, box-shadow .16s ease;}
    .badge-featured{
      position:absolute;
      top: 12px;
      right: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(242, 143, 31, .92);
      color: #fff;
      font-weight: 900;
      font-size: 12px;
      box-shadow: 0 10px 20px rgba(0,0,0,.25);
      letter-spacing: .2px;
    }

    .panel{
      background: rgba(2, 8, 22, .28);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 16px;
      padding: 16px;
      box-shadow: 0 10px 24px rgba(0,0,0,.25);
    }

    .table{width:100%; border-collapse: collapse; margin-top: 10px;}
    .table th,.table td{padding: 10px 10px; border-bottom: 1px solid rgba(255,255,255,.12); vertical-align: top; font-size: 13px;}
    .table th{font-size: 12px; text-transform: uppercase; letter-spacing: .4px; opacity: .9;}

    .hr{height:1px; background: rgba(255,255,255,.14); border:0; margin: 16px 0;}

    /* Responsive helpers for shared content */
    .grid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;}
    @media (max-width: 980px){.grid{grid-template-columns: repeat(2, minmax(0, 1fr));}}
    @media (max-width: 640px){.grid{grid-template-columns: 1fr;}}
    @media (max-width: 560px){
      .hero-card{padding: 34px 22px}
      .hero-title{font-size: 34px}
      .hero-sub{font-size: 16px}
      .btn{min-width: 0; width: 100%}
      .hero-actions{width:100%}
      .content-card{padding: 18px 18px}
      .page-title{font-size: 28px}
    }

    /* Footer */
    .footer{
      background: linear-gradient(180deg, rgba(10,72,185,1) 0%, rgba(6,58,146,1) 100%);
      border-top: 1px solid rgba(255,255,255,.15);
    }
    .footer-inner{
      max-width:1200px;
      margin:0 auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 18px;
      padding: 16px 18px;
    }
    .footer-brand{display:flex; align-items:center; gap:12px; opacity:.95; flex:1}
    .footer-brand img{height:30px; width:auto}
    .footer-brand span{font-weight:800; font-size:20px; letter-spacing:.2px}
    .footer-links{
      display:flex;
      align-items:center;
      justify-content:center;
      gap: 14px;
      font-weight: 700;
      opacity: .95;
      flex:1;
    }
    .footer-links a{color:#fff; text-decoration:none}
    .footer-links a:hover{text-decoration:underline}
    .dot{opacity:.8}

    .social{display:flex; align-items:center; justify-content:flex-end; gap: 18px; flex:1;}
    .social a{display:inline-flex; align-items:center; justify-content:center; color:#fff; text-decoration:none; opacity:.95}
    .social a:hover{opacity:1; transform: translateY(-1px)}
    .social svg{width:26px; height:26px; fill: currentColor}
    .social .wechat{color:#70d64a}

    /* Small screens */
    @media (max-width: 860px){
      .topbar-inner{gap:18px; flex-wrap:wrap}
      .nav{margin-left:0; width:100%;}
      .nav-left{flex-wrap:wrap; gap:18px}
      .nav-right{gap:18px}
      .nav a{font-size:16px}
      .footer-inner{flex-direction:column; align-items:flex-start}
    }
  
    /* Badges & chips */
    .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
      background: rgba(255,166,77,.16); border: 1px solid rgba(255,166,77,.35); color:#ffa64d; font-size:12px; line-height:1;}
    .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color:#fff; font-size:12px; line-height:1;}
    .chip-muted{background: rgba(255,255,255,.06); color: rgba(255,255,255,.82);}
    .btn-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color:#fff; cursor:pointer; transition: .15s ease;}
    .btn-icon:hover{background: rgba(255,255,255,.12);}
    .btn-danger{border-color: rgba(255,82,82,.35); background: rgba(255,82,82,.14);}
    .btn-danger:hover{background: rgba(255,82,82,.20);}
    .btn-icon:disabled{opacity:.55; cursor:not-allowed;}

    /* Empty states */
    .empty-state{padding:18px;border-radius:18px;background: rgba(10,34,84,.55); border:1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(10px); text-align:center;}
    .empty-state h3{margin:0 0 8px 0; color:#ffa64d;}

    .page-shell{width:min(92%, 1480px); margin: 0 auto 32px auto;}
    .page-shell.flush-top{margin-top:0;}
    .page-shell > .subnav-bar:first-child{margin-top:0;}
    .page-header{width:min(92%, 1280px); margin:26px auto 18px auto; text-align:center; padding: 0 12px;}
    .page-header h1{margin:0; color:#f28f1f; font-size:clamp(30px, 4vw, 42px); font-weight:900; line-height:1.08; letter-spacing:.2px;}
    .page-header p{margin:10px auto 0 auto; color:#37507f; font-weight:600; font-size:16px; max-width:820px; line-height:1.45;}
    .filter-actions{display:flex; align-items:stretch; gap:12px;}
    .filter-actions .btn{height:44px; padding-top:0; padding-bottom:0;}
    .tile-actions .btn, .tile-actions .btn-addexp{min-height:44px;}
    .hero-home-bg{width:min(92%, 1480px); margin:0 auto; min-height:calc(100vh - 180px); display:flex; align-items:center; justify-content:center; background:url("../img/burj_khalifa_bg.png") center/cover no-repeat; border-radius:24px; box-shadow:0 18px 40px rgba(0,0,0,.18);}
    .hero-card-home{display:flex; flex-direction:column; gap:18px; align-items:center; width:min(92vw, 1280px); background:linear-gradient(180deg, rgba(10,34,84,.76), rgba(10,34,84,.88));}
    .hero-badge{display:inline-flex; align-items:center; justify-content:center; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.18); color:#fff; font-weight:800; font-size:13px;}
    .btn-secondary-light{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); color:#fff; box-shadow:none;}
    .btn-secondary-light:hover{background:rgba(255,255,255,.24); color:#fff;}
    .hero-stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; width:min(760px, 100%); margin-top:6px;}
    .hero-stat{padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); display:flex; flex-direction:column; gap:4px;}
    .hero-stat strong{font-size:28px; color:#fff; line-height:1;}
    .hero-stat span{font-size:13px; color:rgba(255,255,255,.86); font-weight:700;}
    .home-page{display:flex; flex-direction:column; gap:34px;}
    .home-section{width:min(92%, 1480px); margin:0 auto;}
    .home-intro-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px;}
    .home-info-card,.home-cta-band{padding:26px; border-radius:24px; background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88)); border:1px solid rgba(0,0,0,.08); box-shadow:0 14px 34px rgba(0,0,0,.08);}
    .home-info-card h3,.home-cta-band h2,.home-section-head h2{margin:0; color:#0a2254; font-size:28px; font-weight:900;}
    .home-info-card p,.home-cta-band p,.home-section-head p{margin:10px 0 0 0; color:#37507f; font-size:15px; line-height:1.6; font-weight:600;}
    .home-checklist{margin:16px 0 0 0; padding:0 0 0 18px; color:#0a2254; font-weight:700; display:grid; gap:10px;}
    .home-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
    .home-section-head{display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:14px;}
    .home-cta-band{display:flex; align-items:center; justify-content:space-between; gap:24px;}
    .home-tiles-4{grid-template-columns:repeat(4,1fr);}
    .tile-link{display:flex; flex-direction:column; color:inherit; text-decoration:none; height:100%;}
    .tile img{width:100%; height:210px; object-fit:cover; border-radius:16px; border:1px solid rgba(255,255,255,.12); margin-bottom:12px;}
    @media (max-width: 1100px){.home-tiles-4{grid-template-columns:repeat(2,1fr);} .home-cta-band,.home-section-head{flex-direction:column; align-items:flex-start;} .home-intro-grid{grid-template-columns:1fr;}}
    @media (max-width: 760px){.hero-stats{grid-template-columns:1fr;} .home-tiles-4,.home-tiles-3{grid-template-columns:1fr;}}
    .subnav-bar{position:sticky; top:72px; z-index:900; background: rgba(255,255,255,.94); border:1px solid rgba(0,0,0,.08); border-top:none; border-radius:0 0 22px 22px; padding:18px; margin:0 auto 20px auto; box-shadow:0 10px 26px rgba(0,0,0,.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}
    .subnav-title{margin:0 0 12px 0; color:#0a2254; font-size:28px; font-weight:900;}
    .tile{display:flex; flex-direction:column; height:100%; min-height:100%; background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));}
    .tile-body{display:flex; flex-direction:column; flex:1; gap:8px;}
    .tile-actions{margin-top:auto; padding-top:14px; display:flex; gap:10px; align-items:stretch;}
    .tile-actions .btn{min-height:46px;}
    .tile-actions form{width:100%; display:flex;}
    .tile-actions .btn, .tile-actions .btn-addexp{width:100%; text-align:center; justify-content:center; display:inline-flex;}
    .btn-map{display:inline-flex; align-items:center; justify-content:center; margin-top:8px; padding:6px 10px; border-radius:8px; background:#f28f1f; color:#fff; text-decoration:none; font-size:12px; font-weight:800;}
    .city-marker{width:18px; height:18px; border-radius:50%; background:#f28f1f; border:3px solid rgba(255,255,255,.95); box-shadow:0 4px 10px rgba(0,0,0,.25);}

    .empty-state p{margin:0 0 14px 0; color: rgba(255,255,255,.86);}
    .empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

    /* Calendar layout polish */
    .agenda-group{margin: 14px 0 18px 0;}
    .agenda-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin: 0 0 10px 0;}
    .agenda-title h3{margin:0;font-size:16px;color:#ffa64d;}
    .agenda-list{display:flex;flex-direction:column;gap:10px;}
    .agenda-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:18px;
      background: rgba(10,34,84,.55); border:1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px);}
    .agenda-main{flex:1;min-width:0;}
    .agenda-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
    .agenda-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
    .agenda-time{font-variant-numeric: tabular-nums; color: rgba(255,255,255,.86); font-size: 13px;}
    .agenda-name{margin:0;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .agenda-sub{margin:3px 0 0 0;color: rgba(255,255,255,.78); font-size: 13px;}

    /* Responsive polish */
    @media (max-width: 860px){
      .agenda-item{flex-direction:column;}
      .agenda-right{justify-content:flex-start;}
    }


    /* v35 visual readability polish */
    body{background:#f5f7fb;}

    /* Header: brand/navigation left, languages/auth right */
    .topbar-inner{
      max-width:none;
      width:100%;
      padding:14px 5%;
      gap:24px;
      justify-content:flex-start;
    }
    .brand{
      background:#fff;
      border-radius:10px;
      padding:5px 10px;
      box-shadow:0 6px 16px rgba(0,0,0,.12);
      flex:0 0 auto;
      min-width:0;
    }
    .brand img{height:34px; max-width:180px; object-fit:contain;}
    .nav{margin-left:18px; flex:1; display:flex; justify-content:space-between; align-items:center;}
    .nav-left{justify-content:flex-start;}
    .nav-right{margin-left:auto; justify-content:flex-end;}

    /* Full-width filter/submenu bar */
    .page-shell > .subnav-bar{
      width:100vw;
      margin-left:calc(50% - 50vw);
      margin-right:calc(50% - 50vw);
      border-left:0;
      border-right:0;
      border-radius:0;
      padding:22px 5%;
      background:#fff;
      border-top:1px solid rgba(245,154,42,.22);
      border-bottom:1px solid rgba(245,154,42,.30);
      box-shadow:0 10px 28px rgba(15,23,42,.08);
    }
    .subnav-bar label{color:#0f172a;}
    .subnav-bar .input{
      background:#fff;
      color:#0f172a;
      border:2px solid var(--orange);
      border-radius:10px;
      min-height:46px;
      box-shadow:0 4px 12px rgba(15,23,42,.06);
    }
    .subnav-bar .input::placeholder{color:#6b7280; opacity:1;}
    .subnav-bar .input:focus{
      background:#fff3dc;
      color:#0f172a;
      border-color:#e27f12;
      box-shadow:0 0 0 4px rgba(245,154,42,.18);
    }
    .subnav-bar select.input{color:#0f172a;}
    .subnav-bar .filter-actions .btn{height:46px;}

    /* Cards: stronger contrast and product-like readability */
    .tile{
      background:#fff;
      color:#0f172a;
      border:1px solid rgba(15,23,42,.10);
      box-shadow:0 12px 28px rgba(15,23,42,.12);
      display:flex;
      flex-direction:column;
      min-height:100%;
    }
    .tile-link{display:flex; flex-direction:column; flex:1;}
    .tile-body{display:flex; flex-direction:column; flex:1;}
    .tile-title{color:#0f172a;}
    .tile-meta{color:#334155; opacity:1;}
    .tile-desc{color:#334155; opacity:1;}
    .tile-actions{margin-top:auto; display:flex; gap:10px; align-items:stretch;}
    .tile-actions form{width:100%; display:flex;}
    .tile-actions .btn,
    .tile-actions .btn-addexp{
      min-height:46px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      line-height:1.15;
    }
    .btn-addexp{color:#08111f;}

    /* Tags: white + orange border */
    .tag{
      background:#fff;
      color:#0f172a;
      border:1.5px solid var(--orange);
      box-shadow:0 2px 6px rgba(245,154,42,.10);
    }

    /* Secondary buttons inside cards should remain readable on white cards */
    .tile-actions .btn[style*="rgba(255,255,255"]{
      background:#fff !important;
      color:#0f172a !important;
      border:1.5px solid var(--orange) !important;
      box-shadow:none !important;
    }
    .tile-actions .btn[style*="rgba(255,255,255"]:hover{
      background:var(--orange) !important;
      color:#fff !important;
    }

    @media (max-width: 860px){
      .topbar-inner{padding:12px 16px;}
      .brand img{height:30px; max-width:150px;}
      .nav{margin-left:0;}
      .page-shell > .subnav-bar{padding:18px 16px;}
    }


    /* v36 DEMO VISUAL POLISH - actual demo CSS lives in this base.html, not main.css */
    /* filters-bar alias kept intentionally so grep -r "filters-bar" can confirm this patch is deployed */
    .filters-bar{}

    body{background:#f5f7fb !important;}

    .topbar-inner{
      max-width:none !important;
      width:100% !important;
      padding:14px 5% !important;
      gap:24px !important;
      justify-content:flex-start !important;
    }
    .topbar .brand{
      background:#fff !important;
      border-radius:12px !important;
      padding:6px 12px !important;
      box-shadow:0 8px 18px rgba(0,0,0,.16) !important;
      flex:0 0 auto !important;
    }
    .topbar .brand img{
      height:34px !important;
      max-width:190px !important;
      object-fit:contain !important;
    }
    .topbar .nav{
      margin-left:18px !important;
      flex:1 !important;
      display:flex !important;
      justify-content:space-between !important;
      align-items:center !important;
    }
    .topbar .nav-left{justify-content:flex-start !important;}
    .topbar .nav-right{margin-left:auto !important; justify-content:flex-end !important;}

    .page-shell > .subnav-bar{
      width:100vw !important;
      margin-left:calc(50% - 50vw) !important;
      margin-right:calc(50% - 50vw) !important;
      border-left:0 !important;
      border-right:0 !important;
      border-radius:0 !important;
      padding:22px 5% !important;
      background:#fff !important;
      border-top:1px solid rgba(245,154,42,.22) !important;
      border-bottom:1px solid rgba(245,154,42,.34) !important;
      box-shadow:0 10px 28px rgba(15,23,42,.08) !important;
    }
    .subnav-bar label{color:#0f172a !important;}
    .subnav-bar .input,
    .subnav-bar input.input,
    .subnav-bar select.input{
      background:#fff !important;
      color:#0f172a !important;
      border:2px solid var(--orange) !important;
      border-radius:10px !important;
      min-height:46px !important;
      box-shadow:0 4px 12px rgba(15,23,42,.06) !important;
    }
    .subnav-bar .input::placeholder{color:#6b7280 !important; opacity:1 !important;}
    .subnav-bar .input:focus,
    .subnav-bar input.input:focus,
    .subnav-bar select.input:focus{
      background:#fff3dc !important;
      color:#0f172a !important;
      border-color:#e27f12 !important;
      box-shadow:0 0 0 4px rgba(245,154,42,.18) !important;
      outline:none !important;
    }
    .subnav-bar .filter-actions .btn{height:46px !important;}

    .tile{
      background:#fff !important;
      color:#0f172a !important;
      border:1px solid rgba(15,23,42,.10) !important;
      box-shadow:0 12px 28px rgba(15,23,42,.12) !important;
      display:flex !important;
      flex-direction:column !important;
      min-height:100% !important;
    }
    .tile-link{display:flex !important; flex-direction:column !important; flex:1 !important; color:inherit !important; text-decoration:none !important;}
    .tile-body{display:flex !important; flex-direction:column !important; flex:1 !important;}
    .tile-title{color:#0f172a !important;}
    .tile-meta{color:#334155 !important; opacity:1 !important;}
    .tile-desc{color:#334155 !important; opacity:1 !important;}
    .tile-actions{margin-top:auto !important; display:flex !important; gap:10px !important; align-items:stretch !important;}
    .tile-actions form{width:100% !important; display:flex !important;}
    .tile-actions .btn,
    .tile-actions .btn-addexp{
      min-height:46px !important;
      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      text-align:center !important;
      line-height:1.15 !important;
    }
    .tile-actions .btn[style*='rgba(255,255,255']{
      background:#fff !important;
      color:#0f172a !important;
      border:1.5px solid var(--orange) !important;
      box-shadow:none !important;
    }
    .tile-actions .btn[style*='rgba(255,255,255']:hover{
      background:var(--orange) !important;
      color:#fff !important;
    }
    .btn-addexp{color:#08111f !important;}

    .tag{
      background:#fff !important;
      color:#0f172a !important;
      border:1.5px solid var(--orange) !important;
      box-shadow:0 2px 6px rgba(245,154,42,.10) !important;
    }

    .tab{background:#fff !important; color:#0f172a !important; border:1.5px solid rgba(245,154,42,.75) !important;}
    .tab.active,.tab:hover{background:var(--orange) !important; color:#fff !important; text-decoration:none !important;}

/* =========================================================
   v37 DEMO CSS EXTRACTION + VISUAL POLISH
   This file is intentionally loaded by app/templates/demo/base.html.
   Do not re-add demo CSS inline in base.html.
   ========================================================= */

/* Main menu: brand/nav left, language/auth right */
.topbar-inner{
  width:100%;
  max-width:none;
  padding-left:5%;
  padding-right:5%;
  justify-content:flex-start;
}
.topbar .brand{
  background:#fff !important;
  padding:6px 10px !important;
  border-radius:10px !important;
  box-shadow:0 6px 18px rgba(0,0,0,.16) !important;
  flex:0 0 auto;
}
.topbar .brand img{height:38px !important; width:auto !important; display:block !important;}
.topbar .nav{margin-left:26px !important; display:flex !important; align-items:center !important; width:100% !important;}
.topbar .nav-left{display:flex !important; align-items:center !important; justify-content:flex-start !important; gap:30px !important;}
.topbar .nav-right{margin-left:auto !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:18px !important;}
.lang-switch{display:inline-flex !important; align-items:center !important; gap:8px !important;}
.lang-switch a{font-size:20px !important; line-height:1 !important; text-decoration:none !important; padding:4px 2px !important;}

/* Sticky filter submenu: full width and high contrast */
.page-shell > .subnav-bar,
.subnav-bar{
  width:100% !important;
  max-width:none !important;
  margin:0 0 28px 0 !important;
  padding:18px 5% !important;
  border-radius:0 !important;
  background:#f8fafc !important;
  border-top:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-bottom:1px solid rgba(15,23,42,.12) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.08) !important;
}
.subnav-bar .filters,
.subnav-bar form,
.subnav-bar .tabs{max-width:1400px; margin-left:auto; margin-right:auto;}
.subnav-bar label{color:#111827 !important; font-weight:800 !important;}
.subnav-bar .input,
.subnav-bar input,
.subnav-bar select,
.subnav-bar textarea{
  background:#fff !important;
  color:#111827 !important;
  border:2px solid var(--orange) !important;
  border-radius:10px !important;
  min-height:46px !important;
  box-shadow:none !important;
}
.subnav-bar .input::placeholder,
.subnav-bar input::placeholder{color:#6b7280 !important; opacity:1 !important;}
.subnav-bar .input:focus,
.subnav-bar input:focus,
.subnav-bar select:focus,
.subnav-bar textarea:focus{
  background:#fff3df !important;
  outline:none !important;
  border-color:var(--orange) !important;
  box-shadow:0 0 0 4px rgba(245,154,42,.16) !important;
}
.subnav-bar .filter-actions .btn,
.subnav-bar .btn{min-height:46px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;}

/* Service category tabs */
.subnav-bar .tab,
.tabs .tab,
a.tab{
  background:#fff !important;
  color:#111827 !important;
  border:2px solid var(--orange) !important;
  border-radius:999px !important;
  min-height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.subnav-bar .tab.active,
.tabs .tab.active,
a.tab.active,
.subnav-bar .tab:hover,
.tabs .tab:hover,
a.tab:hover{
  background:var(--orange) !important;
  color:#fff !important;
}

/* Cards: readable white product tiles */
.tile,
.experience-card,
.service-card{
  background:#fff !important;
  color:#111827 !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:18px !important;
  box-shadow:0 12px 30px rgba(15,23,42,.10) !important;
  overflow:hidden !important;
}
.tile-title,
.tile-meta,
.tile-desc,
.tile-body,
.tile-body p,
.tile-body div{color:#111827;}
.tile-desc{color:#334155 !important;}
.tile-meta{color:#475569 !important;}
.tile-actions{margin-top:auto !important; display:flex !important; align-items:stretch !important; gap:10px !important;}
.tile-actions form{width:100% !important; display:flex !important;}
.tile-actions .btn,
.tile-actions .btn-addexp,
.btn-addexp{
  min-height:46px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1.15 !important;
}

/* Tags: white with orange border */
.tag,
.tags .tag,
.tile .tag{
  background:#fff !important;
  color:#111827 !important;
  border:1.5px solid var(--orange) !important;
  border-radius:999px !important;
  padding:5px 10px !important;
  font-weight:800 !important;
}

/* General page contrast */
body{background:#f1f5f9 !important;}
.page-header h1,
.section-header h1{color:var(--orange) !important;}
.page-header p,
.section-header p{color:#475569 !important;}

@media (max-width: 760px){
  .topbar-inner{padding-left:16px !important; padding-right:16px !important; gap:14px !important;}
  .topbar .nav{margin-left:0 !important; flex-wrap:wrap !important;}
  .topbar .nav-left,.topbar .nav-right{gap:14px !important;}
  .page-shell > .subnav-bar,.subnav-bar{padding-left:16px !important; padding-right:16px !important;}
}


/* =========================================================
   v38 DEMO VISUAL POLISH - REAL OVERRIDES
   Loaded by app/templates/demo/base.html with ?v=38.
   These selectors intentionally match the current templates.
   ========================================================= */

/* Header: logo/nav left, language/auth right */
.topbar-inner{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:14px 5% !important;
  display:flex !important;
  align-items:center !important;
  gap:28px !important;
}
.topbar .brand{
  flex:0 0 auto !important;
  background:#fff !important;
  padding:5px 10px !important;
  border-radius:10px !important;
  box-shadow:0 8px 22px rgba(0,0,0,.18) !important;
}
.topbar .brand img{
  height:36px !important;
  width:auto !important;
  display:block !important;
}
.topbar .nav{
  flex:1 1 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  margin-left:22px !important;
  min-width:0 !important;
}
.topbar .nav-left,
.topbar .nav-right{
  display:flex !important;
  align-items:center !important;
}
.topbar .nav-left{justify-content:flex-start !important; gap:34px !important;}
.topbar .nav-right{justify-content:flex-end !important; gap:22px !important; margin-left:auto !important;}
.lang-switch{display:inline-flex !important; align-items:center !important; gap:8px !important;}
.lang-switch a{font-size:20px !important; line-height:1 !important; padding:3px 2px !important;}
.lang-switch .sep{opacity:.45 !important; color:#fff !important;}

/* Page and filter submenu */
main{display:block !important; width:100% !important;}
.page-shell{width:100% !important; max-width:none !important; margin:0 0 42px 0 !important; padding:0 !important;}
.page-shell > .page-header,
.page-shell > .tiles,
.page-shell > .services-layout,
.page-shell > .empty-state,
.page-shell > .content-card{
  width:90% !important;
  max-width:1480px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.page-header{padding:30px 0 22px !important; text-align:center !important;}
.page-header h1{color:var(--orange) !important; font-size:34px !important; line-height:1.12 !important; margin:0 0 8px !important;}
.page-header p{color:#1e3a8a !important; font-size:17px !important; font-weight:700 !important; margin:0 !important;}

.subnav-bar{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:18px 5% !important;
  border-radius:0 !important;
  background:#f8fafc !important;
  border:0 !important;
  border-bottom:1px solid rgba(15,23,42,.12) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.08) !important;
}
.subnav-bar form,
.subnav-bar .grid3,
.subnav-bar .tabs,
.subnav-bar > div{
  max-width:1480px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.subnav-bar label{color:#111827 !important; font-weight:900 !important;}
.subnav-bar .input,
.subnav-bar input,
.subnav-bar select,
.subnav-bar textarea{
  background:#fff !important;
  color:#111827 !important;
  border:2px solid var(--orange) !important;
  border-radius:10px !important;
  min-height:46px !important;
  height:46px !important;
  padding:10px 12px !important;
  box-shadow:none !important;
  opacity:1 !important;
}
.subnav-bar .input::placeholder,
.subnav-bar input::placeholder{color:#6b7280 !important; opacity:1 !important;}
.subnav-bar .input:focus,
.subnav-bar input:focus,
.subnav-bar select:focus,
.subnav-bar textarea:focus{
  background:#fff3df !important;
  color:#111827 !important;
  outline:none !important;
  border-color:var(--orange) !important;
  box-shadow:0 0 0 4px rgba(245,154,42,.18) !important;
}
.subnav-bar .btn,
.subnav-bar button.btn{
  min-height:46px !important;
  height:46px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Service tabs */
.subnav-bar .tab,
.tabs .tab,
a.tab{
  background:#fff !important;
  color:#111827 !important;
  border:2px solid var(--orange) !important;
  border-radius:999px !important;
  min-height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
}
.subnav-bar .tab.active,
.tabs .tab.active,
a.tab.active,
.subnav-bar .tab:hover,
.tabs .tab:hover,
a.tab:hover{
  background:var(--orange) !important;
  color:#fff !important;
}

/* Cards and tags */
body{background:#f1f5f9 !important; color:#111827 !important;}
.tile,
.experience-card,
.service-card{
  background:#fff !important;
  color:#111827 !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:18px !important;
  box-shadow:0 12px 30px rgba(15,23,42,.13) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
.tile:hover{transform:translateY(-4px) !important; box-shadow:0 18px 42px rgba(15,23,42,.17) !important;}
.tile-link{display:flex !important; flex-direction:column !important; flex:1 !important; color:inherit !important; text-decoration:none !important;}
.tile-body{display:flex !important; flex-direction:column !important; flex:1 !important; color:#111827 !important;}
.tile-body, .tile-body p, .tile-body div, .tile-title, .tile-meta, .tile-desc{color:#111827 !important;}
.tile-desc{color:#334155 !important;}
.tile-meta{color:#475569 !important; opacity:1 !important;}
.tag,
.tags .tag,
.tile .tag{
  background:#fff !important;
  color:#111827 !important;
  border:1.5px solid var(--orange) !important;
  border-radius:999px !important;
  padding:5px 10px !important;
  font-weight:800 !important;
}
.tile-actions{margin-top:auto !important; display:flex !important; align-items:stretch !important; gap:10px !important; padding:0 14px 14px !important;}
.tile-actions form{width:100% !important; display:flex !important;}
.tile-actions .btn,
.tile-actions .btn-addexp,
.btn-addexp{
  width:100% !important;
  min-height:46px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1.15 !important;
}

@media (max-width: 760px){
  .topbar-inner{padding-left:16px !important; padding-right:16px !important; gap:14px !important;}
  .topbar .nav{margin-left:0 !important; flex-wrap:wrap !important;}
  .topbar .nav-left,.topbar .nav-right{gap:14px !important;}
  .subnav-bar{padding-left:16px !important; padding-right:16px !important;}
  .page-shell > .page-header,.page-shell > .tiles,.page-shell > .services-layout,.page-shell > .empty-state,.page-shell > .content-card{width:94% !important;}
}


/* =========================================================
   v53 NEUTRAL LUXURY REDESIGN
   Neutral palette for China-facing presentation.
   ========================================================= */
:root{
  --blue0:#2f3a3d !important;
  --blue1:#3f4a4d !important;
  --blue2:#1f2628 !important;
  --orange:#9f742e !important;
  --orange-dark:#7b571f !important;
  --white:#ffffff !important;
  --rsf-ink:#222624 !important;
  --rsf-muted:#6f746f !important;
  --rsf-bg:#f4f1ea !important;
  --rsf-panel:#ffffff !important;
  --rsf-panel-soft:#ebe6dc !important;
  --rsf-border:rgba(84,76,61,.18) !important;
  --rsf-shadow:0 18px 45px rgba(40,34,25,.10) !important;
}
body{background:var(--rsf-bg) !important;color:var(--rsf-ink) !important;}
.topbar{background:#ffffff !important;border-bottom:1px solid var(--rsf-border) !important;box-shadow:0 8px 28px rgba(37,32,25,.08) !important;}
.topbar-inner{background:#fff !important;}
.topbar .brand{background:#fff !important;border:1px solid var(--rsf-border) !important;box-shadow:0 8px 22px rgba(37,32,25,.08) !important;}
.nav a{color:var(--rsf-ink) !important;text-shadow:none !important;}
.nav a:hover{color:var(--orange) !important;}
.nav a.active::after{background:var(--orange) !important;}
.lang-switch .sep{color:#b5aa9a !important;}
.avatar-btn{border-color:var(--rsf-border) !important;background:#fff !important;}
.page-header h1,.section-title,.home-section h2{color:var(--orange) !important;}
.page-header p,.home-section p,.muted{color:#4f5a55 !important;}
.hero,.home-hero,.hero-full{background-color:var(--rsf-bg) !important;}
.hero-card,.home-hero-card,.content-card,.tile,.service-card,.experience-card,.builder-card,.filters-panel,.subnav-bar,.detail-card,.reviews-section,.home-info-card,.home-row-card{
  background:rgba(255,255,255,.88) !important;
  color:var(--rsf-ink) !important;
  border:1px solid var(--rsf-border) !important;
  box-shadow:var(--rsf-shadow) !important;
}
.hero-card h1,.home-hero-card h1{color:var(--orange) !important;text-shadow:none !important;}
.hero-card p,.home-hero-card p{color:#38413d !important;text-shadow:none !important;}
.btn,.button,.primary-btn,.tile .btn,button[type="submit"]{background:var(--orange) !important;border-color:var(--orange) !important;color:#fff !important;box-shadow:0 12px 26px rgba(159,116,46,.20) !important;}
.btn:hover,.button:hover,.primary-btn:hover,button[type="submit"]:hover{background:var(--orange-dark) !important;border-color:var(--orange-dark) !important;color:#fff !important;}
.btn.ghost,.button.ghost,.secondary-btn{background:#fff !important;color:var(--orange) !important;border-color:var(--orange) !important;box-shadow:none !important;}
.tag,.pill,.badge{background:#fff !important;border:1.5px solid var(--orange) !important;color:var(--rsf-ink) !important;}
.amenity,.amenity-pill{background:#f7f3eb !important;border-color:#bca272 !important;color:#4b4438 !important;}
.input,input,select,textarea{background:#fff !important;color:var(--rsf-ink) !important;border-color:rgba(159,116,46,.55) !important;}
.input:focus,input:focus,select:focus,textarea:focus{background:#fffaf0 !important;border-color:var(--orange) !important;box-shadow:0 0 0 4px rgba(159,116,46,.12) !important;}
.filters-toggle,.service-nav{background:#fff !important;border-color:var(--rsf-border) !important;box-shadow:0 8px 22px rgba(37,32,25,.06) !important;}
.service-nav a,.tab-btn,.tabs a{background:#fff !important;color:var(--rsf-ink) !important;border:1.5px solid var(--orange) !important;}
.service-nav a.active,.tab-btn.active,.tabs a.active,.service-nav a:hover,.tab-btn:hover,.tabs a:hover{background:var(--orange) !important;color:#fff !important;}
.footer{background:#fff !important;border-top:1px solid var(--rsf-border) !important;color:var(--rsf-ink) !important;}
.footer a{color:var(--rsf-ink) !important;}
.footer a:hover{color:var(--orange) !important;}
.footer-brand{background:#fff !important;border:1px solid var(--rsf-border) !important;border-radius:12px !important;padding:6px 10px !important;box-shadow:0 8px 20px rgba(37,32,25,.08) !important;}
.hotel-stars,.star,.rating-stars{color:var(--orange) !important;}
.map-mini,.service-mini-map{border:1px solid var(--rsf-border) !important;background:#f7f3eb !important;}