:root {
      --blue:#35438E;
      --blue2:#4655A5;
      --orange:#F79044;
      --off:#F4F4F5;
      --white:#FFFFFF;
      --text:#20222A;
      --muted:#737681;
      --line:#E6E7EC;
      --danger:#C84C4C;
      --success:#2F7D5B;
      --shadow:0 18px 50px rgba(35,45,95,.10);
    }

    * { box-sizing:border-box; }
    html,body { margin:0; min-height:100%; }
    body {
      background:var(--off);
      color:var(--text);
      font-family:"Be Vietnam Pro",sans-serif;
    }
    button,input,select,textarea { font:inherit; }
    button { cursor:pointer; }
    .hidden { display:none !important; }

    .loading {
      min-height:100vh;
      display:grid;
      place-items:center;
      padding:24px;
    }
    .loading-card {
      width:min(430px,100%);
      background:#fff;
      border-radius:22px;
      padding:34px;
      text-align:center;
      box-shadow:var(--shadow);
    }
    .spinner {
      width:34px;height:34px;border-radius:50%;
      border:4px solid #E8E9EF;border-top-color:var(--blue);
      margin:0 auto 18px;
      animation:spin .8s linear infinite;
    }
    @keyframes spin { to { transform:rotate(360deg); } }

    .login-page {
      min-height:100vh;
      display:grid;
      place-items:center;
      padding:24px;
    }
    .login-card {
      width:min(470px,100%);
      background:#fff;
      border-radius:24px;
      padding:38px;
      box-shadow:var(--shadow);
    }
    .logo-mark {
      width:58px;height:58px;border-radius:18px;
      display:grid;place-items:center;
      background:linear-gradient(135deg,var(--orange),var(--blue));
      color:#fff;
      font:700 21px "Lexend Deca";
      margin-bottom:22px;
    }
    h1,h2,h3 { font-family:"Lexend Deca",sans-serif; }
    .login-card h1 {
      margin:0;
      font-size:30px;
      color:var(--blue);
    }
    .subtitle {
      color:var(--muted);
      line-height:1.6;
      margin:8px 0 0;
    }
    .accent-line {
      width:54px;height:4px;border-radius:99px;
      background:var(--orange);
      margin:20px 0 26px;
    }
    #googleButton { min-height:44px; }
    .login-note {
      margin-top:24px;
      color:var(--muted);
      font-size:12px;
    }
    .error-box {
      margin-top:18px;
      padding:13px 14px;
      border-left:4px solid var(--danger);
      background:#FFF4F4;
      color:#8B3131;
      border-radius:10px;
      font-size:13px;
    }

    .shell {
      min-height:100vh;
      display:grid;
      grid-template-columns:245px minmax(0,1fr);
    }
    .side {
      background:linear-gradient(180deg,#35438E,#2F397B);
      color:#fff;
      padding:26px 18px;
      position:sticky;
      top:0;
      height:100vh;
      overflow:auto;
    }
    .brand {
      padding:4px 8px 24px;
    }
    .brand-name {
      font:700 21px "Lexend Deca";
    }
    .brand-sub {
      margin-top:4px;
      font-size:11px;
      color:rgba(255,255,255,.70);
    }
    .nav {
      display:grid;
      gap:7px;
    }
    .nav button {
      width:100%;
      border:0;
      border-radius:11px;
      background:transparent;
      color:rgba(255,255,255,.83);
      text-align:left;
      padding:11px 12px;
      font-size:13px;
      font-weight:600;
    }
    .nav button:hover,.nav button.active {
      background:rgba(255,255,255,.12);
      color:#fff;
    }
    .side-bottom {
      margin-top:28px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.13);
    }
    .side-bottom button {
      border:1px solid rgba(255,255,255,.25);
      color:#fff;
      background:transparent;
      border-radius:10px;
      width:100%;
      padding:10px;
      font-weight:600;
    }

    .main {
      padding:28px;
      min-width:0;
    }
    .top {
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
      margin-bottom:24px;
    }
    .top h1 {
      margin:0;
      color:var(--blue);
      font-size:28px;
    }
    .who {
      color:var(--muted);
      font-size:13px;
      margin-top:5px;
    }
    .pill {
      border-radius:999px;
      background:#fff;
      color:var(--blue);
      padding:8px 12px;
      font-size:12px;
      font-weight:700;
      box-shadow:0 7px 24px rgba(35,45,95,.08);
      white-space:nowrap;
    }

    .grid {
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:15px;
    }
    .grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .card {
      background:#fff;
      border:1px solid rgba(53,67,142,.06);
      border-radius:17px;
      padding:20px;
      box-shadow:0 10px 34px rgba(35,45,95,.06);
    }
    .card h3 {
      margin:0 0 12px;
      font-size:16px;
      color:var(--blue);
    }
    .muted { color:var(--muted); }
    .metric-label {
      color:var(--muted);
      font-size:12px;
    }
    .metric {
      margin-top:8px;
      font:700 25px "Lexend Deca";
      color:var(--text);
    }
    .section { margin-top:16px; }
    .status {
      display:inline-flex;
      padding:6px 9px;
      border-radius:999px;
      background:#EEF0FB;
      color:var(--blue);
      font-size:11px;
      font-weight:700;
    }
    .claimed {
      display:inline-flex;
      padding:7px 10px;
      border-radius:9px;
      background:#E9F5EF;
      color:var(--success);
      font-size:12px;
      font-weight:800;
    }

    .btn {
      border:0;
      border-radius:11px;
      background:var(--orange);
      color:#fff;
      padding:10px 15px;
      font-weight:700;
      font-size:13px;
    }
    .btn:hover { filter:brightness(.97); }
    .btn:disabled { opacity:.55; cursor:not-allowed; }
    .btn.alt {
      background:#EEF0F8;
      color:var(--blue);
    }
    .btn.blue {
      background:var(--blue);
    }
    .row {
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }

    .formgrid {
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }
    label {
      display:block;
      margin-bottom:6px;
      font-size:12px;
      font-weight:700;
      color:#555A69;
    }
    input,select,textarea {
      width:100%;
      border:1px solid #D9DBE5;
      border-radius:10px;
      padding:10px 11px;
      background:#fff;
      color:var(--text);
      outline:none;
    }
    input:focus,select:focus,textarea:focus {
      border-color:var(--blue);
      box-shadow:0 0 0 3px rgba(53,67,142,.09);
    }
    textarea { min-height:90px; resize:vertical; }

    .table-wrap { overflow:auto; }
    table {
      width:100%;
      border-collapse:collapse;
      font-size:12px;
    }
    th,td {
      padding:10px 9px;
      border-bottom:1px solid var(--line);
      text-align:left;
      white-space:nowrap;
    }
    th { color:var(--muted); font-weight:700; }

    .toast {
      position:fixed;
      right:22px;
      bottom:22px;
      z-index:9999;
      max-width:390px;
      padding:13px 16px;
      border-radius:12px;
      color:#fff;
      background:var(--blue);
      font-size:13px;
      font-weight:600;
      box-shadow:0 16px 40px rgba(20,25,60,.20);
    }
    .toast.error { background:var(--danger); }

    .modal {
      position:fixed;inset:0;
      z-index:9000;
      background:rgba(21,25,44,.45);
      display:grid;
      place-items:center;
      padding:20px;
    }
    .modalbox {
      width:min(430px,100%);
      background:#fff;
      border-radius:20px;
      padding:26px;
      box-shadow:0 28px 80px rgba(20,25,60,.26);
    }

    #bridgeContainer {
      position:fixed;
      width:1px;height:1px;
      opacity:0;
      pointer-events:none;
      overflow:hidden;
      left:-9999px;top:-9999px;
    }

    @media(max-width:980px) {
      .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    }
    @media(max-width:760px) {
      .shell { grid-template-columns:1fr; }
      .side {
        position:relative;
        height:auto;
        padding:18px;
      }
      .nav {
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
      .main { padding:18px; }
      .top { flex-direction:column; }
      .grid,.grid.two,.formgrid { grid-template-columns:1fr; }
    }
  
    .official-logo-horizontal {
      display:block;
      width:min(230px, 70vw);
      height:auto;
      object-fit:contain;
    }
    .official-logo-icon {
      display:block;
      width:48px;
      height:48px;
      object-fit:contain;
    }
    .login-logo {
      display:flex;
      justify-content:center;
      margin-bottom:14px;
    }
    .sidebar-brand-logo {
      width:145px;
      max-width:100%;
      height:auto;
      object-fit:contain;
      display:block;
    }

    :root {
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
    }

    html, body {
      overscroll-behavior-y: contain;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      padding-top: var(--safe-top);
      padding-bottom: var(--safe-bottom);
    }
    button, .btn, input, select, textarea {
      touch-action: manipulation;
    }

    .pull-refresh {
      position: fixed;
      top: calc(var(--safe-top) + 8px);
      left: 50%;
      transform: translate(-50%, -70px);
      z-index: 99999;
      padding: 9px 14px;
      border-radius: 999px;
      background:#fff;
      color:#35438E;
      font-size:12px;
      font-weight:700;
      box-shadow:0 10px 28px rgba(53,67,142,.20);
      opacity:0;
      pointer-events:none;
      transition:.18s ease;
    }
    .pull-refresh.show {
      opacity:1;
      transform:translate(-50%,0);
    }
    .pull-refresh .pr-spinner {
      display:inline-block;
      width:13px;
      height:13px;
      margin-right:7px;
      border:2px solid rgba(53,67,142,.18);
      border-top-color:#35438E;
      border-radius:50%;
      vertical-align:-2px;
    }
    .pull-refresh.refreshing .pr-spinner {
      animation:baikSpin .7s linear infinite;
    }
    @keyframes baikSpin { to { transform:rotate(360deg); } }

    @media (max-width: 760px) {
      body { font-size:14px; }
      .grid, .grid.two, .formgrid {
        grid-template-columns:1fr !important;
      }
      .row {
        flex-wrap:wrap;
        gap:8px;
      }
      .card {
        border-radius:16px;
        padding:14px;
      }
      input, select, textarea, button, .btn {
        min-height:44px;
        font-size:16px;
      }
      .table-wrap {
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
      }
      table { min-width:720px; }
      .modal-card, .modal-content {
        width:calc(100vw - 24px) !important;
        max-height:calc(100vh - 40px - var(--safe-top) - var(--safe-bottom));
        overflow:auto;
      }
      .sidebar-brand-logo {
        width:125px;
      }
    }

  
    /* ===== BAIK PEOPLE MOBILE APP UI V2 ===== */
    :root{
      --baik-blue:#35438E;
      --baik-blue-2:#4A579B;
      --baik-orange:#F79044;
      --baik-bg:#F6F7F9;
      --baik-card:#FFFFFF;
      --baik-text:#1F2430;
      --baik-muted:#7A8191;
      --baik-line:#E9EBF1;
      --baik-soft-blue:#EEF1FB;
      --baik-soft-orange:#FFF3E8;
      --baik-radius:18px;
      --baik-shadow:0 8px 28px rgba(39,48,92,.08);
    }

    body{
      background:var(--baik-bg);
      color:var(--baik-text);
    }

    .card{
      border:1px solid var(--baik-line);
      box-shadow:var(--baik-shadow);
      background:var(--baik-card);
    }

    .metric{
      color:var(--baik-text);
    }

    .muted,
    .metric-label{
      color:var(--baik-muted)!important;
    }

    .btn.blue,
    button.blue{
      background:var(--baik-blue);
      border-color:var(--baik-blue);
      color:#fff;
    }

    .btn.alt,
    button.alt{
      background:#fff;
      border:1px solid var(--baik-line);
      color:var(--baik-blue);
    }

    .mobile-app-header,
    .mobile-bottom-nav,
    .mobile-more-sheet,
    .mobile-install-banner{
      display:none;
    }

    .mobile-app-content{
      display:none;
    }

    .mobile-summary-card{
      display:grid;
      gap:10px;
    }

    .mobile-kv{
      display:flex;
      justify-content:space-between;
      gap:14px;
      padding:11px 0;
      border-bottom:1px solid var(--baik-line);
    }
    .mobile-kv:last-child{border-bottom:0}
    .mobile-kv .k{color:var(--baik-muted);font-size:13px}
    .mobile-kv .v{font-weight:700;text-align:right;min-width:0;overflow-wrap:anywhere}

    .compact-table-cards{
      display:none;
    }

    .mobile-action-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
    }

    .mobile-action{
      border:1px solid var(--baik-line);
      background:#fff;
      border-radius:16px;
      padding:14px;
      min-height:88px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      box-shadow:0 5px 18px rgba(39,48,92,.05);
    }
    .mobile-action strong{
      color:var(--baik-blue);
      font-size:14px;
    }
    .mobile-action span{
      color:var(--baik-muted);
      font-size:12px;
    }

    @media (max-width: 760px){
      body{
        padding-bottom:calc(78px + var(--safe-bottom));
        background:var(--baik-bg);
      }

      /* Hide desktop sidebar and convert to app chrome */
      .sidebar{
        display:none!important;
      }

      .app,
      .shell,
      .main,
      .content,
      .content-wrap{
        width:100%!important;
        max-width:none!important;
        margin:0!important;
        padding-left:0!important;
      }

      .mobile-app-header{
        display:flex;
        position:sticky;
        top:0;
        z-index:1000;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:12px 16px 10px;
        background:rgba(246,247,249,.94);
        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
        border-bottom:1px solid rgba(233,235,241,.9);
      }

      .mobile-app-brand{
        display:flex;
        align-items:center;
        gap:9px;
        min-width:0;
      }
      .mobile-app-brand img{
        width:34px;
        height:34px;
        object-fit:contain;
      }
      .mobile-app-brand .t1{
        font-family:'Lexend Deca',sans-serif;
        font-size:15px;
        font-weight:700;
        color:var(--baik-blue);
        line-height:1.15;
      }
      .mobile-app-brand .t2{
        font-size:11px;
        color:var(--baik-muted);
        line-height:1.15;
      }

      .mobile-app-header .avatar-pill{
        width:34px;
        height:34px;
        border-radius:50%;
        background:var(--baik-soft-blue);
        color:var(--baik-blue);
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight:800;
        font-size:13px;
      }

      .mobile-bottom-nav{
        display:grid;
        position:fixed;
        left:10px;
        right:10px;
        bottom:calc(8px + var(--safe-bottom));
        z-index:1500;
        grid-template-columns:repeat(5,minmax(0,1fr));
        gap:4px;
        padding:7px;
        border:1px solid rgba(231,234,242,.95);
        border-radius:22px;
        background:rgba(255,255,255,.97);
        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
        box-shadow:0 12px 34px rgba(39,48,92,.16);
      }

      .mobile-bottom-nav button{
        min-height:52px;
        border:0;
        background:transparent;
        border-radius:16px;
        color:#8A91A0;
        font-size:10px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        padding:5px 3px;
      }
      .mobile-bottom-nav button .mi{
        width:25px;
        height:25px;
        border-radius:8px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:15px;
        font-weight:800;
      }
      .mobile-bottom-nav button.active{
        color:var(--baik-blue);
        background:var(--baik-soft-blue);
      }
      .mobile-bottom-nav button.active .mi{
        color:var(--baik-blue);
      }

      .mobile-more-sheet{
        position:fixed;
        inset:0;
        z-index:3000;
        background:rgba(23,28,45,.28);
        align-items:flex-end;
        justify-content:center;
        padding:12px;
      }
      .mobile-more-sheet.show{
        display:flex;
      }
      .mobile-more-panel{
        width:100%;
        max-height:78vh;
        overflow:auto;
        background:#fff;
        border-radius:24px 24px 18px 18px;
        padding:12px 14px 18px;
        box-shadow:0 20px 60px rgba(21,27,55,.24);
      }
      .mobile-more-handle{
        width:44px;
        height:5px;
        border-radius:999px;
        background:#D7DAE3;
        margin:2px auto 13px;
      }
      .mobile-more-title{
        font-family:'Lexend Deca',sans-serif;
        color:var(--baik-blue);
        font-weight:700;
        margin-bottom:12px;
      }
      .mobile-more-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
      }
      .mobile-more-item{
        border:1px solid var(--baik-line);
        border-radius:16px;
        padding:14px;
        background:#fff;
        color:var(--baik-text);
        text-align:left;
        min-height:72px;
      }
      .mobile-more-item strong{
        display:block;
        color:var(--baik-blue);
        margin-bottom:4px;
        font-size:14px;
      }
      .mobile-more-item span{
        color:var(--baik-muted);
        font-size:11px;
      }

      .mobile-install-banner{
        position:fixed;
        left:12px;
        right:12px;
        bottom:calc(82px + var(--safe-bottom));
        z-index:1400;
        background:#fff;
        border:1px solid var(--baik-line);
        border-radius:18px;
        padding:12px 13px;
        box-shadow:0 14px 38px rgba(39,48,92,.15);
        align-items:center;
        gap:10px;
      }
      .mobile-install-banner.show{
        display:flex;
      }
      .mobile-install-banner img{
        width:38px;
        height:38px;
        object-fit:contain;
        flex:0 0 auto;
      }
      .mobile-install-banner .txt{
        min-width:0;
        flex:1;
      }
      .mobile-install-banner .txt strong{
        display:block;
        color:var(--baik-blue);
        font-size:13px;
      }
      .mobile-install-banner .txt span{
        display:block;
        color:var(--baik-muted);
        font-size:11px;
        margin-top:2px;
      }
      .mobile-install-banner .install-btn{
        min-height:36px;
        border:0;
        border-radius:12px;
        background:var(--baik-blue);
        color:white;
        padding:0 12px;
        font-size:12px;
        font-weight:700;
      }
      .mobile-install-banner .close-install{
        min-height:32px;
        width:32px;
        border:0;
        background:transparent;
        color:#9298A5;
        font-size:18px;
      }

      /* Compact page content */
      .main-content,
      #content,
      .content-area{
        padding:14px 12px 18px!important;
      }

      h1{
        font-size:28px!important;
        line-height:1.12!important;
        margin-bottom:5px!important;
      }
      h2{
        font-size:21px!important;
        line-height:1.2!important;
      }
      h3{
        font-size:16px!important;
        line-height:1.25!important;
      }

      .grid{
        gap:10px!important;
      }
      .card{
        padding:13px!important;
        border-radius:17px!important;
        box-shadow:0 6px 20px rgba(39,48,92,.06)!important;
      }
      .metric{
        font-size:24px!important;
      }
      .metric-label{
        font-size:11px!important;
      }
      .section{
        margin-top:12px!important;
      }
      .btn,
      button{
        min-height:40px!important;
        border-radius:12px!important;
        font-size:13px!important;
      }

      /* No horizontal scroll tables on mobile */
      .table-wrap{
        overflow:visible!important;
      }
      table{
        min-width:0!important;
        width:100%!important;
        table-layout:fixed!important;
      }
      th,
      td{
        white-space:normal!important;
        word-break:break-word!important;
        overflow-wrap:anywhere!important;
        padding:8px 6px!important;
        font-size:11px!important;
        vertical-align:top!important;
      }
      th{
        font-size:10px!important;
      }

      /* Hide lower priority columns progressively rather than sideways scroll */
      table th:nth-child(n+6),
      table td:nth-child(n+6){
        display:none;
      }

      /* generic card-list replacement helper */
      .compact-table-cards{
        display:grid;
        gap:9px;
      }

      .mobile-record-card{
        border:1px solid var(--baik-line);
        border-radius:15px;
        background:#fff;
        padding:12px;
      }
      .mobile-record-title{
        color:var(--baik-blue);
        font-weight:800;
        font-size:13px;
        margin-bottom:7px;
      }
      .mobile-record-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:7px 12px;
      }
      .mobile-record-grid .mrg span{
        display:block;
        color:var(--baik-muted);
        font-size:10px;
        margin-bottom:2px;
      }
      .mobile-record-grid .mrg strong{
        display:block;
        color:var(--baik-text);
        font-size:12px;
        overflow-wrap:anywhere;
      }
    }

    @media (min-width:761px) and (max-width:1180px){
      .grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
      }
      .sidebar{
        width:210px!important;
      }
    }

    @media (min-width:1181px){
      .main-content,
      #content,
      .content-area{
        max-width:1600px;
      }
    }

  
/* BAIK People V1.4 Morning Safe — minimal mobile hotfix */
@media (max-width:760px){
  .side,
  aside.side,
  .sidebar{
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    height:0 !important;
    overflow:hidden !important;
    position:absolute !important;
    pointer-events:none !important;
  }

  .shell{
    display:block !important;
    width:100% !important;
    min-height:100vh !important;
  }

  .main{
    width:100% !important;
    min-width:0 !important;
    padding:12px 12px 22px !important;
  }

  .top{
    display:none !important;
  }

  html,body,#app{
    min-height:100%;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    background:#F6F7F9 !important;
  }
}


/* Minimal navigation architecture V1.5 */
.hub-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;
}
.hub-action-card{
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  padding:16px;
  text-align:left;
  cursor:pointer;
  color:inherit;
  box-shadow:0 6px 20px rgba(39,48,92,.045);
  transition:.15s ease;
}
.hub-action-card:hover{
  transform:translateY(-1px);
  border-color:#CCD3EA;
  box-shadow:0 9px 24px rgba(39,48,92,.07);
}
.hub-action-card strong{
  display:block;
  font-size:15px;
  color:#35438E;
}
.hub-action-card > span{
  display:block;
  margin-top:6px;
  font-size:12px;
  line-height:1.45;
  color:#747B8B;
}
.hub-action-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.hub-action-card.disabled{
  opacity:.62;
  cursor:default;
}
.hub-action-card.disabled:hover{
  transform:none;
  box-shadow:0 6px 20px rgba(39,48,92,.045);
}
@media(max-width:760px){
  .hub-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .hub-action-card{
    padding:14px;
  }
}