:root{
    --ink:#12241F;
    --ink-soft:#57685F;
    --paper:#F6F4EC;
    --surface:#FFFFFF;
    --surface-sunk:#EEEADE;
    --line:#DFDACB;
    --line-soft:#E8E4D6;
    --forest:#0F332C;
    --forest-2:#184F44;
    --forest-3:#1F6357;
    --gold:#AB8A3E;
    --gold-light:#E4CE94;
    --gold-dim:#8C7237;
    --free:#3E8A61;
    --free-bg:#E7F1E7;
    --occ:#B23A30;
    --occ-bg:#F6E7E4;
    --partial:#BD8A2E;
    --partial-bg:#F7EFDC;
    --man:#33638A;
    --woman:#AD5F82;
    --radius:16px;
    --shadow-sm:0 2px 10px rgba(15,51,44,.06);
    --shadow-md:0 14px 40px rgba(15,51,44,.14);
    --shadow-lg:0 24px 70px rgba(15,51,44,.22);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; color:var(--ink);
    font-family:'Manrope', sans-serif; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    background-color:var(--paper);
    background-image: radial-gradient(rgba(15,51,44,.05) 1px, transparent 1px);
    background-size: 20px 20px;
  }
  ::-webkit-scrollbar{width:10px; height:10px;}
  ::-webkit-scrollbar-track{background:var(--paper);}
  ::-webkit-scrollbar-thumb{background:#CFC7AC; border-radius:99px; border:2px solid var(--paper);}
  ::-webkit-scrollbar-thumb:hover{background:var(--gold);}
  h1,h2,h3,.display{ font-family:'Fraunces', serif; font-weight:560; letter-spacing:-.015em; margin:0; }
  .mono{font-family:'IBM Plex Mono', monospace;}
  button{font-family:inherit; cursor:pointer;}
  a{color:inherit;}
  ::selection{background:var(--gold-light); color:var(--forest);}
  :focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  }

  /* ===== Header ===== */
  header.topbar{
    position:sticky; top:0; z-index:40;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
    padding:16px clamp(16px, 4vw, 34px);
    background:rgba(246,244,236,.86);
    backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid var(--line);
  }
  .brand{display:flex; align-items:center; gap:10px; min-width:0;}
  .brand .mark{
    width:38px;height:38px;border-radius:50%; position:relative; flex-shrink:0;
    background:radial-gradient(circle at 32% 28%, #2C6E5F, var(--forest) 70%);
    box-shadow:0 0 0 1px var(--gold-light), 0 6px 16px rgba(15,51,44,.25);
  }
  .brand .mark::after{
    content:""; position:absolute; inset:6px; border-radius:50%;
    border:1px solid rgba(228,206,148,.55);
  }
  .brand .name{font-family:'Fraunces',serif; font-size:20px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .brand .name small{display:block; font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dim); font-weight:600; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

  .top-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;}
  .lang-switch{display:flex; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px; box-shadow:var(--shadow-sm);}

  /* ===== Live Uzbekistan (Tashkent) clock in header ===== */
  .live-clock{
    display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line);
    border-radius:999px; padding:8px 14px; box-shadow:var(--shadow-sm);
  }
  .live-clock .lc-dot{
    width:7px; height:7px; border-radius:50%; background:var(--free); flex-shrink:0;
    box-shadow:0 0 0 3px var(--free-bg); animation:lcPulse 2s ease-in-out infinite;
  }
  @keyframes lcPulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }
  .live-clock .lc-time{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13px; color:var(--forest); letter-spacing:.02em; }
  .live-clock .lc-date{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-soft); padding-left:8px; border-left:1px solid var(--line); }
  @media (max-width:640px){
    .live-clock{ padding:7px 11px; gap:6px; }
    .live-clock .lc-date{ display:none; }
    .live-clock .lc-time{ font-size:12px; }
  }
  .lang-switch button{ border:none; background:transparent; padding:7px 13px; border-radius:999px; font-size:11.5px; font-weight:700; color:var(--ink-soft); letter-spacing:.05em; transition:.2s;}
  .lang-switch button.active{background:var(--forest); color:var(--gold-light);}

  .btn{
    border:1px solid var(--line); background:var(--surface); color:var(--ink);
    padding:10px 18px; border-radius:11px; font-size:13.5px; font-weight:700;
    display:inline-flex; align-items:center; gap:6px; transition:.18s; box-shadow:var(--shadow-sm);
  }
  .btn:hover{border-color:var(--gold); color:var(--forest); transform:translateY(-1px); box-shadow:var(--shadow-md);}
  .btn.primary{background:linear-gradient(135deg, var(--forest-3), var(--forest)); color:var(--gold-light); border-color:var(--forest); position:relative; overflow:hidden;}
  .btn.primary::after{
    content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(228,206,148,.35), transparent);
    transform:skewX(-20deg); transition:left .5s ease;
  }
  .btn.primary:hover::after{left:120%;}
  .btn.primary:hover{filter:brightness(1.08); color:#fff;}
  .btn.ghost{background:transparent; border-color:transparent; box-shadow:none;}
  .btn.danger{color:var(--occ); border-color:var(--occ-bg);}
  .btn.small{padding:7px 12px; font-size:11.5px;}

  .role-pill{
    display:flex; align-items:center; gap:9px; padding:6px 6px 6px 14px;
    background:var(--surface); border:1px solid var(--line); border-radius:999px; font-size:12px; font-weight:700; color:var(--forest); box-shadow:var(--shadow-sm);
  }

  /* ===== Hero ===== */
  .hero{
    position:relative; overflow:hidden; padding:96px 34px 84px; text-align:center;
    background:
      radial-gradient(ellipse at 20% -10%, rgba(228,206,148,.16), transparent 55%),
      radial-gradient(ellipse at 85% 0%, rgba(31,99,87,.55), transparent 50%),
      linear-gradient(175deg, var(--forest) 0%, #0B241F 100%);
    color:#F3EFE1;
  }
  .hero .frame{
    position:absolute; inset:18px; pointer-events:none;
  }
  .hero .frame i{
    position:absolute; width:26px; height:26px; border:1px solid rgba(228,206,148,.55);
  }
  .hero .frame i:nth-child(1){top:0; left:0; border-right:none; border-bottom:none;}
  .hero .frame i:nth-child(2){top:0; right:0; border-left:none; border-bottom:none;}
  .hero .frame i:nth-child(3){bottom:0; left:0; border-right:none; border-top:none;}
  .hero .frame i:nth-child(4){bottom:0; right:0; border-left:none; border-top:none;}
  .hero .seal{
    position:absolute; top:34px; right:34px; width:74px; height:74px; border-radius:50%; z-index:3;
    border:1px solid rgba(228,206,148,.5); display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono',monospace; font-size:8.5px; letter-spacing:.1em; text-align:center; color:var(--gold-light);
    background:radial-gradient(circle, rgba(228,206,148,.06), transparent 70%);
  }
  .hero .seal::before{
    content:""; position:absolute; inset:6px; border:1px solid rgba(228,206,148,.28); border-radius:50%;
  }
  .hero .seal span{position:relative; line-height:1.5;}
  .hero::after{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  }
  .hero-plan{
    position:absolute; inset:0; opacity:.14; pointer-events:none;
  }
  .hero-inner{position:relative; z-index:2;}
  .hero .eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:.3em; text-transform:uppercase;
    color:var(--gold-light); margin-bottom:20px; font-weight:600;
    display:inline-flex; align-items:center; gap:12px;
  }
  .hero .eyebrow::before, .hero .eyebrow::after{content:""; width:26px; height:1px; background:var(--gold-light); opacity:.6;}
  .hero h1{font-size:clamp(38px, 6.4vw, 66px); line-height:1.04; font-weight:560;}
  .hero h1 em{font-style:italic; font-weight:460; color:var(--gold-light);}
  .hero p.sub{max-width:580px; margin:22px auto 0; color:#CFCABA; font-size:16.5px; line-height:1.65;}
  .hero .stats{display:grid; grid-template-columns:repeat(4, auto); justify-content:center; gap:0; margin-top:46px; border-top:1px solid rgba(228,206,148,.2); padding-top:30px;}
  .hero .stat{text-align:center; padding:0 34px; border-right:1px solid rgba(228,206,148,.18);}
  .hero .stat:last-child{border-right:none;}
  .hero .stat .n{font-family:'Fraunces',serif; font-size:34px; font-weight:600; color:var(--gold-light);}
  .hero .stat .l{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#B8B2A0; font-weight:600; margin-top:4px; white-space:nowrap;}

  /* ===== Floor nav ===== */
  .ornament{display:flex; align-items:center; justify-content:center; gap:14px; margin:38px auto 0; max-width:280px; padding:0 34px;}
  .ornament span{flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--line));}
  .ornament span:last-child{background:linear-gradient(90deg, var(--line), transparent);}
  .ornament i{width:7px; height:7px; background:var(--gold); transform:rotate(45deg); flex-shrink:0;}
  .section-pad{max-width:1220px; margin:0 auto;}
  .floor-nav{ display:flex; justify-content:center; gap:10px; margin:44px 34px 8px; flex-wrap:wrap; }
  .floor-nav button{
    border:1px solid var(--line); background:var(--surface); padding:11px 26px; border-radius:999px;
    font-weight:700; font-size:13px; color:var(--ink-soft); transition:.18s; box-shadow:var(--shadow-sm);
  }
  .floor-nav button.active{background:var(--forest); color:var(--gold-light); border-color:var(--forest);}
  .floor-nav button:hover:not(.active){border-color:var(--gold); color:var(--forest);}

  .legend{display:flex; justify-content:center; gap:26px; flex-wrap:wrap; margin:22px 0 40px; font-size:12px; color:var(--ink-soft); font-weight:600;}
  .legend span{display:inline-flex; align-items:center; gap:8px;}
  .dot{width:10px;height:10px;border-radius:3px; display:inline-block; box-shadow:0 0 0 3px rgba(0,0,0,.03);}

  /* ===== Room grid ===== */
  .floor-wrap{padding:0 34px 90px; max-width:1220px; margin:0 auto;}
  .corridor-label{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--gold-dim); margin:32px 0 14px; display:flex; align-items:center; gap:12px; font-weight:700;
  }
  .corridor-label::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--line), transparent);}
  .room-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(168px,1fr)); gap:14px; }
  .room-card{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px 16px 14px; cursor:pointer; position:relative; overflow:hidden;
    transition:transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, border-color .2s ease;
    opacity:0; transform:translateY(12px) scale(.96); animation:roomIn .5s cubic-bezier(.2,.7,.3,1) forwards;
  }
  @keyframes roomIn{ to{opacity:1; transform:translateY(0) scale(1);} }
  .room-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--gold), var(--gold-light)); transform:scaleX(0); transform-origin:left;
    transition:transform .25s ease;
  }
  .room-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--gold);}
  .room-card:hover::before{transform:scaleX(1);}
  .room-card .top-row{display:flex; align-items:center; gap:10px;}
  .room-card .num-badge{
    width:42px; height:42px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    background:var(--forest); color:var(--gold-light); font-family:'Fraunces',serif; font-size:15px; font-weight:600;
    box-shadow:0 0 0 2px var(--surface), 0 0 0 3px rgba(171,138,62,.4);
  }
  .room-card.is-luks .num-badge{background:linear-gradient(140deg, var(--gold), var(--gold-dim)); color:var(--forest);}
  .room-card .num{font-family:'Fraunces',serif; font-size:24px; font-weight:600;}
  .room-card .type{font-size:11px; color:var(--ink-soft); margin-top:2px; text-transform:capitalize; font-weight:600;}
  .room-card .beds{display:flex; gap:4px; margin-top:12px;}
  .bed-chip{width:15px;height:19px;border-radius:4px; background:var(--free); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);}
  .bed-chip.man{background:var(--man);} .bed-chip.woman{background:var(--woman);} .bed-chip.empty{background:#E4E0D2;}
  .room-card .status-tag{ position:absolute; top:12px; right:12px; width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,.7);}
  .room-card .until{font-size:10px; color:var(--ink-soft); margin-top:9px; font-family:'IBM Plex Mono',monospace; font-weight:600;}
  .room-card .price-tag{
    margin-top:10px; display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:700;
    color:var(--gold-dim); background:#FBF6E9; padding:3px 8px; border-radius:6px; border:1px solid #EFE1BC;
  }
  .room-card.st-free{background:var(--free-bg);}
  .room-card.st-free .status-tag{background:var(--free);}
  .room-card.st-partial{background:var(--partial-bg);}
  .room-card.st-partial .status-tag{background:var(--partial);}
  .room-card.st-full{background:var(--occ-bg);}
  .room-card.st-full .status-tag{background:var(--occ);}

  /* ===== Modal ===== */
  .overlay{
    position:fixed; inset:0; background:rgba(15,36,31,.55); backdrop-filter:blur(3px);
    display:none; align-items:center; justify-content:center; z-index:100; padding:20px;
    padding-bottom:calc(20px + env(safe-area-inset-bottom));
  }
  .overlay.open{display:flex;}
  .modal{
    background:var(--surface); border-radius:20px; width:100%; max-width:490px; max-height:88vh; overflow-y:auto;
    box-shadow:var(--shadow-lg); animation:modalIn .25s cubic-bezier(.2,.8,.3,1); border:1px solid var(--line);
    position:relative;
  }
  .modal::before{
    content:""; position:absolute; top:0; left:0; right:0; height:4px; border-radius:20px 20px 0 0;
    background:linear-gradient(90deg, var(--forest), var(--gold), var(--forest));
  }
  .modal.wide{max-width:660px;}
  @keyframes modalIn{ from{opacity:0; transform:translateY(16px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);} }
  .modal-head{padding:24px 26px 16px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start;}
  .modal-head h3{font-size:23px;}
  .modal-head .close{background:none; border:none; font-size:20px; color:var(--ink-soft); line-height:1;}
  .modal-body{padding:22px 26px 26px;}
  .field{margin-bottom:15px;}
  .field label{display:block; font-size:11.5px; font-weight:700; color:var(--ink-soft); margin-bottom:7px; letter-spacing:.03em; text-transform:uppercase;}
  .field input, .field select{
    width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:10px; font-size:16px;
    font-family:inherit; background:var(--paper); color:var(--ink); transition:.15s;
  }
  .field input:focus, .field select:focus{outline:none; border-color:var(--gold); background:#fff; box-shadow:0 0 0 3px rgba(171,138,62,.12);}
  .row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .gender-pick{display:flex; gap:10px;}
  .gender-pick button{
    flex:1; padding:13px; border-radius:11px; border:1.5px solid var(--line); background:var(--paper);
    font-weight:700; font-size:13.5px; display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .gender-pick button .sw{width:12px;height:12px;border-radius:3px;}
  .gender-pick button[data-g="man"] .sw{background:var(--man);}
  .gender-pick button[data-g="woman"] .sw{background:var(--woman);}
  .gender-pick button.selected[data-g="man"]{border-color:var(--man); background:#e9f0f5; color:#204a68;}
  .gender-pick button.selected[data-g="woman"]{border-color:var(--woman); background:#f7ecf1; color:#7c3f5b;}

  .bed-row{
    display:flex; align-items:center; justify-content:space-between; padding:13px 15px; border:1.5px solid var(--line);
    border-radius:12px; margin-bottom:10px; background:var(--paper); flex-wrap:wrap; gap:10px;
  }
  .bed-row .who{display:flex; align-items:center; gap:11px;}
  .bed-row .sw{width:17px;height:21px;border-radius:5px; background:#E4E0D2;}
  .bed-row .sw.man{background:var(--man);} .bed-row .sw.woman{background:var(--woman);}
  .bed-row .info b{font-size:13.5px; display:block;}
  .bed-row .info span{font-size:11px; color:var(--ink-soft);}
  .bed-row .price{font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:700; color:var(--gold-dim); margin-top:2px; display:block;}
  .toggle-row{
    display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:linear-gradient(135deg,#FBF6E9,#F6EFDC);
    border:1px solid #EFE1BC; border-radius:12px; margin:16px 0 6px; gap:12px; flex-wrap:wrap;
  }
  .toggle-row > div:first-child{min-width:0; flex:1 1 180px;}
  .toggle-row .t{font-size:13px; font-weight:700; color:var(--forest);}
  .toggle-row .d{font-size:11px; color:var(--ink-soft); margin-top:2px;}
  .switch{position:relative; width:42px; height:24px; flex-shrink:0;}
  .switch input{opacity:0; width:0; height:0;}
  .slider{position:absolute; inset:0; background:#D6CFB6; border-radius:999px; transition:.2s; cursor:pointer;}
  .slider::before{content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.2);}
  .switch input:checked + .slider{background:var(--forest);}
  .switch input:checked + .slider::before{transform:translateX(18px);}

  .badge{display:inline-block; padding:4px 12px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;}
  .badge.free{background:var(--free-bg); color:var(--free);}
  .badge.partial{background:var(--partial-bg); color:var(--partial);}
  .badge.full{background:var(--occ-bg); color:var(--occ);}

  .price-summary{
    margin-top:6px; padding:14px 16px; background:var(--forest); border-radius:12px; color:var(--gold-light);
    display:flex; justify-content:space-between; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:13px;
    flex-wrap:wrap; gap:8px;
  }
  .price-summary b{font-family:'Fraunces',serif; font-size:18px; font-weight:600; color:#fff;}

  .role-select{display:flex; gap:10px; margin-bottom:18px;}
  .role-select button{
    flex:1; padding:15px 10px; border-radius:12px; border:1.5px solid var(--line); background:var(--paper); font-weight:700; font-size:13px;
  }
  .role-select button.selected{border-color:var(--gold); background:#FBF6E9; color:var(--gold-dim);}
  .err-msg{color:var(--occ); font-size:12px; margin-top:7px; display:none; font-weight:600;}

  /* ===== Admin dashboard ===== */
  .dash{max-width:1220px; margin:0 auto; padding:24px 34px 90px;}
  .dash-head{display:flex; align-items:center; justify-content:space-between; margin:26px 0 22px; flex-wrap:wrap; gap:12px;}
  .dash-head h2{font-size:28px;}
  .tabs{display:flex; gap:6px; background:var(--surface-sunk); padding:4px; border-radius:13px; border:1px solid var(--line);}
  .tabs button{padding:9px 18px; border:none; background:transparent; border-radius:10px; font-size:13px; font-weight:700; color:var(--ink-soft);}
  .tabs button.active{background:var(--forest); color:var(--gold-light);}

  .kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:30px;}
  .kpi{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px 20px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;}
  .kpi::after{content:""; position:absolute; top:0; left:0; width:3px; height:100%; background:linear-gradient(var(--gold), var(--gold-light));}
  .kpi .n{font-family:'Fraunces',serif; font-size:30px; font-weight:600;}
  .kpi .l{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); font-weight:700; margin-top:3px;}

  table.staff{width:100%; border-collapse:collapse; background:var(--surface); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line);}
  table.staff th{
    text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em; color:#F3EFE1;
    background:var(--forest); padding:14px 18px; font-weight:700;
  }
  table.staff td{padding:13px 18px; border-top:1px solid var(--line); font-size:13.5px;}
  table.staff tr:hover td{background:#FBF9F2;}
  table.staff td.sum{font-family:'IBM Plex Mono',monospace; font-weight:700;}
  table.staff tfoot td{font-weight:800; background:var(--surface-sunk); border-top:2px solid var(--gold);}
  .tag-daily{font-size:9.5px; background:var(--partial-bg); color:var(--partial); padding:2px 7px; border-radius:6px; margin-left:6px; font-weight:800; text-transform:uppercase;}

  footer.site{text-align:center; padding:40px 20px 60px; color:var(--ink-soft); font-size:12px; border-top:1px solid var(--line); margin-top:20px;}
  footer.site .fm{font-family:'Fraunces',serif; font-style:italic; color:var(--gold-dim); font-size:15px; display:block; margin-bottom:8px;}

  @media (max-width:640px){
    header.topbar{padding:12px 16px;}
    .top-actions{gap:8px;}
    .lang-switch button{padding:6px 10px; font-size:11px;}
    .hero{padding:52px 18px 40px;}
    .hero .frame{inset:10px; border-radius:16px;}
    .hero .stats{grid-template-columns:1fr 1fr; row-gap:22px; column-gap:0;}
    .hero .stat{padding:0 12px;}
    .hero .stat:nth-child(2){border-right:none;}
    .hero .stat:nth-child(1),.hero .stat:nth-child(3){border-right:1px solid rgba(228,206,148,.18);}
    .hero .stat .n{font-size:26px;}
    .hero .stat .l{font-size:9px; letter-spacing:.08em;}
    .hero p.sub{font-size:15px;}
    .hero .seal{display:none;}
    .floor-wrap{padding:0 14px 60px;}
    .floor-nav{margin:30px 14px 8px; gap:8px;}
    .floor-nav button{padding:9px 18px; font-size:12.5px;}
    .legend{gap:14px 18px; font-size:11px;}
    .room-grid{grid-template-columns:repeat(2, 1fr); gap:10px;}
    .room-card{padding:13px 12px 11px;}
    .room-card .num-badge{width:36px; height:36px; font-size:13px;}
    .dash{padding:16px 14px 70px;}
    .dash-head h2{font-size:23px;}
    .kpi-row{grid-template-columns:repeat(2, 1fr); gap:10px;}
    .kpi{padding:14px 15px;}
    .kpi .n{font-size:24px;}
    .row2{grid-template-columns:1fr;}
    .gender-pick{flex-direction:column;}
    table.staff th, table.staff td{padding:10px 12px; font-size:12.5px;}
    /* Wide data tables (8+ columns) become horizontally scrollable instead of squeezing/breaking layout */
    table.staff{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; border-radius:14px; }
    table.staff thead, table.staff tbody, table.staff tr{ display:table; width:100%; table-layout:auto; }
    .gallery-grid{ margin-top:18px; }

    /* Bottom-sheet style modals on phones: easier to reach, no floating card in the middle */
    .overlay{align-items:flex-end; padding:0;}
    .modal, .modal.wide{
      max-width:100%; width:100%; max-height:90vh; border-radius:22px 22px 0 0;
      border-left:none; border-right:none; border-bottom:none;
      padding-bottom:env(safe-area-inset-bottom);
    }
    .modal::before{border-radius:22px 22px 0 0;}
    @keyframes modalIn{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }
    .modal-head{padding:18px 18px 14px;}
    .modal-body{padding:16px 18px 22px;}
    .bed-row{padding:12px;}
    .bed-row .who{width:100%;}
    .bed-row > div[style*="flex"]{width:100%; justify-content:flex-start;}
    .bed-row .btn.small{flex:1; justify-content:center;}
  }

  /* ===== Photo gallery (2 symmetric cards, scales cleanly mobile <-> desktop) ===== */
  .gallery-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px, 2.2vw, 16px);
    margin:24px auto 0; max-width:1220px; padding:0 clamp(16px, 4vw, 34px); box-sizing:border-box;
  }
  .gallery-card{
    position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line);
    box-shadow:var(--shadow-sm); aspect-ratio:4/3; background:var(--surface-sunk);
  }
  .gallery-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
  .gallery-card:hover img{ transform:scale(1.04); }
  .gallery-card .cap{
    position:absolute; bottom:0; inset-x:0; padding:clamp(8px, 2vw, 12px) clamp(10px, 2.4vw, 16px);
    background:linear-gradient(transparent, rgba(15,51,44,.85));
    color:#fff; font-size:clamp(11px, 2.6vw, 13px); font-weight:700; line-height:1.3;
  }
  @media (max-width:480px){
    .gallery-grid{ gap:8px; }
    .gallery-card{ aspect-ratio:1/1; border-radius:12px; }
  }

  /* ===== Procedures & Payment Styling ===== */
  .proc-item{
    display:flex; align-items:center; justify-content:space-between; padding:10px 12px;
    border-bottom:1px solid var(--line-soft); gap:10px;
  }
  .proc-item:nth-child(even){ background:rgba(255,255,255,.4); }
  .proc-name{ font-weight:600; font-size:13.5px; flex:1; }
  .proc-price{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold-dim); font-weight:700; white-space:nowrap; }
  .counter-ctrl{ display:flex; align-items:center; gap:6px; }
  .counter-ctrl button{
    width:28px; height:28px; border-radius:8px; border:1px solid var(--line);
    background:var(--surface); font-weight:800; font-size:15px; display:flex;
    align-items:center; justify-content:center; color:var(--forest); transition:.15s;
  }
  .counter-ctrl button:hover{ background:var(--forest); color:var(--gold-light); }
  .counter-ctrl input{
    width:44px; text-align:center; padding:4px 2px; border:1px solid var(--line);
    border-radius:6px; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13.5px;
  }

  .pay-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
  .pay-field{ background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
  .pay-field label{ display:block; font-size:10.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; margin-bottom:4px; }
  .pay-field input{ width:100%; border:none; background:transparent; font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:700; color:var(--ink); }
  .pay-field input:focus{ outline:none; }
  .pay-field.debt{ background:#FDF2F0; border-color:#F2D3CD; }
  .pay-field.debt input{ color:var(--occ); }

  /* ===== Print receipt styling (Luxury Resort Design) ===== */
  #printReceipt{ display:none; }
  #printReport{ display:none; }
  @media print {
    @page {
      size: A4;
      margin: 12mm 11mm;
    }
    html, body { width:100%; height:auto; margin:0 !important; padding:0 !important; background:#fff !important; }
    /* Hide everything except the active print target without touching descendants' own
       display values (a previous blanket "display:block !important" on every descendant
       broke table/flex/grid layout and caused the clipping). */
    body > *:not(#printReceipt):not(#printReport) { display:none !important; }
    #printReceipt{ display:none !important; }
    #printReport{ display:none !important; }
    body.printing-receipt #printReceipt {
      display:block !important;
      position:static; width:100%; max-width:100%;
      background:#fff; color:#1a1a1a; font-family:'Manrope', 'Segoe UI', Arial, sans-serif;
      padding:0; margin:0; font-size:12px; line-height:1.45;
      box-sizing:border-box;
    }
    body.printing-report #printReport {
      display:block !important;
      position:static; width:100%; max-width:100%;
      background:#fff; color:#1a1a1a; font-family:'Manrope', 'Segoe UI', Arial, sans-serif;
      padding:0; margin:0; font-size:12px; line-height:1.45;
      box-sizing:border-box;
    }
    /* No single frame around the whole receipt (that's what caused clipping /
       ugly mid-border page breaks). Each section below has its own frame
       instead, and each frame is kept off page-break boundaries. */
    .pr-frame {
      border:none; padding:0; position:relative; background:#fff;
    }
    .pr-header {
      text-align:center; border:1.5px solid #0F332C; border-bottom:2px double #AB8A3E;
      padding:16px 18px 14px; margin-bottom:16px; border-radius:10px; position:relative;
      page-break-inside:avoid; break-inside:avoid;
    }
    .pr-logo { height:80px; max-width:220px; margin:0 auto 8px; display:block !important; object-fit:contain; }
    .pr-title { font-family:'Georgia', serif; font-size:20px; font-weight:800; text-transform:uppercase; letter-spacing:2px; color:#0F332C; margin-bottom:2px; }
    .pr-sub { font-size:10.5px; text-transform:uppercase; letter-spacing:3px; color:#AB8A3E; font-weight:700; }
    
    .pr-info-grid {
      display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; margin-bottom:18px;
      padding:14px 18px; border:1.5px solid #DFDACB; border-radius:10px; background:#FBF9F5;
      page-break-inside:avoid; break-inside:avoid;
    }
    .pr-info-item { font-size:11.5px; color:#333; }
    .pr-info-item b { color:#0F332C; font-weight:700; }
    
    .pr-section-title {
      font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px;
      color:#0F332C; margin:16px 0 8px; border-bottom:1px solid #0F332C; padding-bottom:4px;
      page-break-after:avoid; break-after:avoid;
    }
    
    .pr-main-table {
      width:100%; border-collapse:collapse; margin-bottom:16px;
      border:1.5px solid #0F332C; border-radius:10px; overflow:hidden;
    }
    .pr-main-table thead { display:table-header-group; } /* repeat header on every printed page */
    .pr-main-table tfoot { display:table-footer-group; }
    .pr-main-table tr { page-break-inside:avoid; break-inside:avoid; }
    .pr-main-table th {
      background:#0F332C; color:#F3EFE1; font-weight:700; text-transform:uppercase;
      font-size:10.5px; letter-spacing:0.5px; padding:10px 12px; text-align:left; border:1px solid #0F332C;
    }
    .pr-main-table td {
      border:1px solid #D1CBB9; padding:9px 12px; font-size:11.5px; color:#222; vertical-align:middle;
    }
    .pr-main-table tr:nth-child(even) td { background:#FAF8F3; }
    .pr-main-table td.num { text-align:right; font-family:'IBM Plex Mono', monospace; font-weight:600; }
    
    .pr-proc-name-wrap { display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:10px; }
    .pr-proc-title { font-weight:700; color:#0F332C; }
    .pr-circles { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
    .pr-circle {
      display:inline-block; width:15px; height:15px; border:1.6px solid #0F332C;
      border-radius:50%; text-align:center; line-height:13px; font-size:9px; font-weight:800; color:#0F332C;
      background:#fff; flex-shrink:0;
    }

    .pr-table-foot { border-top:2px solid #0F332C; background:#F5F1E6 !important; font-weight:800; }
    .pr-table-foot td { font-size:13px; font-weight:800; color:#0F332C; padding:12px; }

    .pr-pay-section {
      margin-top:16px; padding:14px 18px; border:1.5px solid #DFDACB; border-radius:10px; background:#FBF9F5;
      page-break-inside:avoid; break-inside:avoid;
    }
    .pr-pay-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; text-align:center; }
    .pr-pay-item { background:#fff; border:1px solid #E8E4D6; padding:8px 6px; border-radius:6px; }
    .pr-pay-item.debt-box { border-color:#F2D3CD; background:#FDF2F0; }
    .pr-pay-lbl { font-size:9.5px; text-transform:uppercase; font-weight:800; color:#666; margin-bottom:3px; letter-spacing:0.5px; }
    .pr-pay-val { font-family:'IBM Plex Mono', monospace; font-size:12.5px; font-weight:700; color:#0F332C; }
    .pr-pay-item.debt-box .pr-pay-val { color:#B23A30; }

    .pr-footer {
      margin-top:22px; display:flex; justify-content:space-between; align-items:flex-start;
      padding:14px 18px 10px; font-size:11px; border:1.5px solid #DFDACB; border-radius:10px;
      page-break-inside:avoid; break-inside:avoid;
    }
    .pr-sig { text-align:center; width:210px; border-top:1.5px solid #333; padding-top:6px; font-weight:700; color:#444; }

    /* Thank-you note gets its own frame too, and never splits across pages */
    #printReceipt > .pr-frame > div[style*="dashed"] {
      page-break-inside:avoid; break-inside:avoid;
    }
  }

  /* ===== Director Panel Sidebar & Views Styling ===== */
  .dir-layout {
    display: flex; gap: 24px; margin-top: 16px; align-items: flex-start;
  }
  .dir-sidebar {
    width: 240px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 12px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 4px;
    position: sticky; top: 80px;
  }
  .dir-sidebar-btn {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px;
    border: none; background: transparent; border-radius: 10px; font-weight: 700;
    font-size: 13px; color: var(--ink-soft); text-align: left; transition: .18s; cursor: pointer;
  }
  .dir-sidebar-btn:hover { background: var(--paper); color: var(--forest); }
  .dir-sidebar-btn.active { background: var(--forest); color: var(--gold-light); }
  
  .dir-main-content { flex: 1; min-width: 0; }
  .dir-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 20px; box-shadow: var(--shadow-sm); margin-bottom: 20px;
  }
  .dir-card-head {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
  }
  .dir-card-head h3 { font-size: 18px; margin: 0; }
  
  /* Visual Chart Bars */
  .chart-bar-wrap { margin-bottom: 12px; }
  .chart-bar-label { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
  .chart-bar-bg { height: 12px; background: var(--surface-sunk); border-radius: 99px; overflow: hidden; }
  .chart-bar-fill { height: 100%; border-radius: 99px; transition: width .5s ease; }
  
  /* Attendance table badge */
  .att-btn { padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; border: 1px solid var(--line); cursor: pointer; }
  .att-btn.present { background: var(--free-bg); color: var(--free); border-color: var(--free); }
  .att-btn.absent { background: var(--occ-bg); color: var(--occ); border-color: var(--occ); }
  .att-btn.vacation { background: var(--partial-bg); color: var(--partial); border-color: var(--partial); }

  @media (max-width: 860px) {
    .dir-layout { flex-direction: column; }
    .dir-sidebar { width: 100%; position: static; flex-direction: row; overflow-x: auto; padding: 8px; }
    .dir-sidebar-btn { white-space: nowrap; padding: 10px 14px; }
  }

  @media (max-width:420px){
    .brand .name{font-size:17px;}
    .brand .name small{display:none;}
    .hero h1{font-size:30px;}
    .hero .eyebrow{font-size:10px; letter-spacing:.22em;}
    .hero .eyebrow::before, .hero .eyebrow::after{width:16px;}
    .room-grid{grid-template-columns:repeat(2, 1fr); gap:8px;}
    .room-card .price-tag{font-size:9.5px; padding:2px 6px;}
    .kpi-row{grid-template-columns:1fr 1fr;}
    .role-pill{font-size:11px; padding:5px 5px 5px 11px;}
    .role-pill .btn.small{padding:5px 9px;}
  }


  /* ===== Reception mode chooser + daily-treatment workspace ===== */
  .reception-choice-intro{
    text-align:center; max-width:720px; margin:18px auto 24px; color:var(--ink-soft); font-size:14px; line-height:1.6;
  }
  .reception-choice-grid{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; max-width:900px; margin:20px auto 40px;
  }
  .reception-choice-card{
    border:1.5px solid var(--line); background:var(--surface); border-radius:20px; padding:28px 24px;
    text-align:left; min-height:190px; box-shadow:var(--shadow-sm); transition:.2s; color:var(--ink); position:relative; overflow:hidden;
  }
  .reception-choice-card::before{
    content:""; position:absolute; inset:0 auto 0 0; width:4px; background:linear-gradient(var(--gold),var(--forest-3));
  }
  .reception-choice-card:hover{ transform:translateY(-3px); border-color:var(--gold); box-shadow:var(--shadow-md); }
  .reception-choice-icon{ font-size:34px; display:block; margin-bottom:14px; }
  .reception-choice-card b{ display:block; font-family:'Fraunces',serif; font-size:24px; color:var(--forest); margin-bottom:8px; }
  .reception-choice-card span.desc{ display:block; color:var(--ink-soft); font-size:13px; line-height:1.55; font-weight:500; }
  .reception-view-toolbar{
    display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px; flex-wrap:wrap;
    padding:12px 14px; border:1px solid var(--line); background:var(--surface); border-radius:14px; box-shadow:var(--shadow-sm);
  }
  .reception-view-title{ font-family:'Fraunces',serif; font-size:21px; font-weight:600; color:var(--forest); }
  .daily-form-card{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:var(--shadow-sm); margin-bottom:20px; }
  .daily-form-head{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
  .daily-form-head h3{ font-size:20px; }
  .today-badge{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:700; padding:7px 11px; border-radius:999px; background:var(--free-bg); color:var(--forest); border:1px solid #CFE1D3; }
  .daily-gender-pick{display:flex; gap:10px;}
  .daily-gender-pick button{
    flex:1; padding:13px; border-radius:11px; border:1.5px solid var(--line); background:var(--paper);
    font-weight:700; font-size:13.5px; display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .daily-gender-pick button .sw{width:12px;height:12px;border-radius:3px;}
  .daily-gender-pick button[data-g="man"] .sw{background:var(--man);}
  .daily-gender-pick button[data-g="woman"] .sw{background:var(--woman);}
  .daily-gender-pick button.selected[data-g="man"]{border-color:var(--man); background:#e9f0f5; color:#204a68;}
  .daily-gender-pick button.selected[data-g="woman"]{border-color:var(--woman); background:#f7ecf1; color:#7c3f5b;}
  .daily-client-note{ font-size:12px; color:var(--ink-soft); margin-top:4px; }
  .daily-actions{ display:flex; gap:6px; flex-wrap:wrap; }
  @media (max-width:700px){
    .reception-choice-grid{grid-template-columns:1fr; gap:12px;}
    .reception-choice-card{min-height:150px; padding:22px 20px;}
    .daily-gender-pick{flex-direction:column;}
  }

  /* ===== Guest registration: spacious desktop + universal mobile ===== */
  #addGuestOverlay .guest-registration-modal{
    width:min(980px, calc(100vw - 40px));
    max-width:980px;
    max-height:92vh;
  }
  #addGuestOverlay .guest-registration-modal .modal-body{padding:24px 28px 30px;}
  #addGuestOverlay .guest-registration-modal .field input,
  #addGuestOverlay .guest-registration-modal .field select{min-height:50px;}
  #addGuestOverlay .guest-registration-modal .gender-pick button{min-height:50px;}
  #addGuestOverlay .guest-registration-modal .pay-field{padding:12px 14px; min-height:78px;}
  #addGuestOverlay .guest-registration-modal .pay-field input{font-size:15px;}
  .editable-total-wrap{display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:210px;}
  .editable-total-input{
    width:170px; max-width:52vw; border:1px solid rgba(228,206,148,.6); border-radius:9px;
    background:rgba(255,255,255,.10); color:#fff; padding:7px 10px; text-align:right;
    font-family:'Fraunces',serif; font-size:18px; font-weight:700; outline:none;
  }
  .editable-total-input:focus{background:#fff; color:var(--forest); border-color:var(--gold-light); box-shadow:0 0 0 3px rgba(228,206,148,.16);}
  .editable-total-wrap .currency{font-family:'Fraunces',serif; font-size:17px; font-weight:700; color:#fff; white-space:nowrap;}

  /* ===== Director: four separate room-price controls ===== */
  .room-price-options{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
  .room-price-option{
    width:100%; border:1.5px solid var(--line); border-radius:15px; background:var(--paper); padding:18px;
    text-align:left; display:flex; flex-direction:column; gap:7px; transition:.18s; box-shadow:var(--shadow-sm); color:var(--ink);
  }
  .room-price-option:hover{border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow-md);}
  .room-price-option .rpo-title{font-weight:800; font-size:13px; color:var(--forest); line-height:1.4;}
  .room-price-option .rpo-price{font-family:'IBM Plex Mono',monospace; font-size:18px; font-weight:800; color:var(--gold-dim);}
  .room-price-option .rpo-note{font-size:11px; color:var(--ink-soft); line-height:1.4;}
  .price-edit-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}

  @media (max-width:700px){
    #addGuestOverlay .guest-registration-modal{width:100%; max-width:100%; max-height:92vh; border-radius:22px 22px 0 0;}
    #addGuestOverlay .guest-registration-modal .modal-body{padding:16px 18px 24px;}
    #addGuestOverlay .guest-registration-modal .field input,
    #addGuestOverlay .guest-registration-modal .field select{min-height:48px;}
    .editable-total-wrap{width:100%; min-width:0; justify-content:space-between;}
    .editable-total-input{width:min(190px,60vw); max-width:60vw;}
    .room-price-options,.price-edit-grid{grid-template-columns:1fr;}
  }

/* ===== Attendance workspace ===== */
.reception-choice-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.attendance-choice-group{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap;min-width:315px;}
.attendance-choice-group .att-choice{
  border:1.5px solid var(--line);background:var(--surface);border-radius:9px;padding:8px 11px;
  font-size:11.5px;font-weight:800;transition:.16s;color:var(--ink-soft);box-shadow:none;
}
.attendance-choice-group .att-choice:hover{transform:translateY(-1px);border-color:var(--gold);}
.attendance-choice-group .att-choice.present.selected{background:var(--free-bg);border-color:var(--free);color:var(--free);}
.attendance-choice-group .att-choice.absent.selected{background:var(--occ-bg);border-color:var(--occ);color:var(--occ);}
.attendance-choice-group .att-choice.vacation.selected{background:var(--partial-bg);border-color:var(--partial);color:var(--partial);}
.attendance-save-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
.attendance-table td:last-child{text-align:right;}
.attendance-month-input{border:1.5px solid var(--line);background:var(--paper);border-radius:9px;padding:8px 10px;font:inherit;color:var(--ink);}
.attendance-unsaved{color:var(--partial);font-weight:700;}
.attendance-saved{color:var(--free);font-weight:700;}
.attendance-missing{color:var(--occ);font-weight:700;}

@media (max-width:760px){
  .attendance-choice-group{min-width:0;width:100%;justify-content:flex-start;}
  .attendance-choice-group .att-choice{flex:1;min-width:92px;}
  .attendance-table td:last-child{min-width:310px;}
  .attendance-save-row .btn{width:100%;justify-content:center;}
}

/* ===== v1.4: date-select attendance, payroll, archive ===== */
.attendance-date-input,
.attendance-month-input{
  border:1.5px solid var(--line); background:var(--paper); color:var(--ink);
  border-radius:10px; padding:8px 10px; min-height:38px; font-family:'IBM Plex Mono',monospace; font-weight:700;
}
.attendance-date-input:focus,.attendance-month-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(171,138,62,.12);background:#fff;}
.payroll-edit-input{
  width:150px; max-width:100%; padding:9px 10px; border:1.5px solid var(--line); border-radius:9px;
  background:#fff; text-align:right; font-family:'IBM Plex Mono',monospace; font-weight:800; color:var(--forest);
}
.payroll-edit-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(171,138,62,.12);}
.archive-tree{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:12px;}
.archive-tree>div{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px;}
.archive-tree b{color:var(--forest);}.archive-tree span{font-size:11px;color:var(--ink-soft);font-family:'IBM Plex Mono',monospace;}
@media(max-width:700px){
  .attendance-date-input,.attendance-month-input{width:100%;}
  .payroll-edit-input{width:130px;}
  #dirSubPayroll .dir-card-head>div:last-child{width:100%;}
}

/* ===== v1.5: credentials + payroll advance/bonus integration ===== */
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.settings-security-box{margin-top:8px;padding:15px;border:1px solid #eadfbe;border-radius:13px;background:linear-gradient(135deg,#fbf6e9,#f7f2e6);display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;}
.settings-security-box .btn{min-height:47px;justify-content:center;}
.payroll-summary-strip{display:grid;grid-template-columns:repeat(5,minmax(135px,1fr));gap:9px;margin:10px 0 14px;}
.payroll-summary-strip>div{border:1px solid var(--line);background:var(--paper);border-radius:11px;padding:10px 12px;display:flex;flex-direction:column;gap:3px;}
.payroll-summary-strip>div span{font-size:9.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);font-weight:800;}
.payroll-summary-strip>div b{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--forest);}
.payroll-summary-strip>div.warn{background:#fff4f1;border-color:#efc9c1;}.payroll-summary-strip>div.warn b{color:var(--occ);}
.payroll-table{min-width:1420px;}
.payroll-table th,.payroll-table td{padding:9px 8px;vertical-align:middle;}
.payroll-table .payroll-edit-input{width:118px;}
.payroll-advance-input{border-color:#d8c58b;background:#fffaf0;}
.payroll-bonus-input{border-color:#bcd8c7;background:#f3fbf6;}
.payroll-over-advance{font-size:9px;color:var(--occ);font-weight:800;margin-top:3px;white-space:nowrap;}
.payroll-expense-row td{background:#fbf6e9!important;}
@media(max-width:800px){
  .settings-grid{grid-template-columns:1fr;}
  .settings-security-box{align-items:stretch;}.settings-security-box .btn{width:100%;}
  .payroll-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:430px){.payroll-summary-strip{grid-template-columns:1fr 1fr;}.payroll-summary-strip>div{padding:8px;}}


/* ===== v1.7 FINAL: director focus mode + offline recovery key ===== */
.dir-main-content{position:relative;overflow-x:hidden;}
.director-focus-controls{position:absolute;top:4px;right:8px;z-index:12;display:flex;justify-content:flex-end;pointer-events:none;}
.director-focus-btn{pointer-events:auto;border:1.5px solid var(--line);background:var(--surface);color:var(--forest);border-radius:11px;padding:9px 12px;font-weight:800;font-size:12px;display:inline-flex;align-items:center;gap:7px;box-shadow:var(--shadow-sm);transition:.18s;}
.director-focus-btn:hover{border-color:var(--gold);box-shadow:var(--shadow-md);transform:translateY(-1px);}
#directorFocusIcon{font-size:18px;line-height:1;}
#tabDirector .dir-main-content>[id^="dirSub"]>.dir-card:first-child{padding-top:54px;}
#dirSubDashboard>.kpi-row:first-child{padding-top:48px;}
#tabDirector .dir-main-content table.staff{width:100%;max-width:100%;table-layout:fixed;white-space:normal;}
#tabDirector .dir-main-content table.staff th,#tabDirector .dir-main-content table.staff td{overflow-wrap:anywhere;word-break:normal;}
#tabDirector .dir-main-content .payroll-table{min-width:0!important;font-size:11px;}
#tabDirector .dir-main-content .payroll-table th,#tabDirector .dir-main-content .payroll-table td{padding:7px 4px;font-size:10.5px;line-height:1.25;}
#tabDirector .dir-main-content .payroll-table .payroll-edit-input{width:100%;min-width:0;padding:7px 4px;font-size:10.5px;}
#tabDirector .dir-main-content [style*="overflow-x:auto"]{max-width:100%;}
.settings-recovery-box{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--paper);}
.settings-recovery-box h4{margin:0 0 5px;font-family:'Fraunces',serif;font-size:17px;color:var(--forest);}
.settings-status-pill{min-height:46px;border:1px solid var(--line);border-radius:10px;padding:12px;background:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;}
.settings-status-pill.ok{background:var(--free-bg);border-color:#c6dfcf;color:var(--free);}
.settings-status-pill.warn{background:var(--partial-bg);border-color:#ead7a5;color:var(--partial);}
.forgot-password-btn{width:100%;justify-content:center;margin-top:6px;color:var(--gold-dim);}
body.director-focus-mode{overflow:hidden!important;background:var(--paper);}
body.director-focus-mode header.topbar,body.director-focus-mode #viewAdmin>.dash>.dash-head,body.director-focus-mode #tabDirector .dir-sidebar{display:none!important;}
body.director-focus-mode #viewAdmin{display:block!important;position:fixed;inset:0;z-index:999;background:var(--paper);overflow:hidden;}
body.director-focus-mode #viewAdmin>.dash{max-width:none!important;width:100%!important;height:100vh!important;margin:0!important;padding:0!important;}
body.director-focus-mode #tabDirector{display:block!important;height:100%;}
body.director-focus-mode #tabDirector .dir-layout{display:block!important;margin:0!important;height:100%;}
body.director-focus-mode #tabDirector .dir-main-content{position:fixed!important;inset:0!important;z-index:1001!important;width:100%!important;max-width:none!important;height:100vh!important;overflow-y:auto!important;overflow-x:hidden!important;background:var(--paper);padding:14px 16px 42px!important;}
body.director-focus-mode .director-focus-controls{position:fixed;top:12px;right:18px;z-index:1010;}
body.director-focus-mode .director-focus-btn{background:var(--forest);border-color:var(--forest);color:var(--gold-light);box-shadow:var(--shadow-lg);}
body.director-focus-mode #tabDirector .dir-card{width:100%;max-width:none;margin-left:0;margin-right:0;}
body.director-focus-mode #tabDirector [style*="overflow-x:auto"]{overflow-x:visible!important;}
body.director-focus-mode #tabDirector table.staff{display:table!important;width:100%!important;max-width:100%!important;min-width:0!important;table-layout:fixed!important;white-space:normal!important;overflow:visible!important;}
body.director-focus-mode #tabDirector table.staff thead{display:table-header-group!important;width:auto!important;}body.director-focus-mode #tabDirector table.staff tbody{display:table-row-group!important;width:auto!important;}body.director-focus-mode #tabDirector table.staff tfoot{display:table-footer-group!important;width:auto!important;}body.director-focus-mode #tabDirector table.staff tr{display:table-row!important;width:auto!important;}
body.director-focus-mode #tabDirector table.staff th,body.director-focus-mode #tabDirector table.staff td{padding:7px 5px!important;font-size:10.5px!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:normal!important;}
body.director-focus-mode #tabDirector .payroll-table .payroll-edit-input{width:100%!important;min-width:0!important;font-size:10px!important;padding:6px 3px!important;}
body.director-focus-mode #tabDirector .attendance-choice-group{min-width:0!important;justify-content:flex-start;}
@media(max-width:860px){.director-focus-controls{top:2px;right:4px;}.director-focus-btn{padding:8px 10px;}#directorFocusText{display:none;}#tabDirector .dir-main-content>[id^="dirSub"]>.dir-card:first-child{padding-top:50px;}#tabDirector .dir-main-content table.staff{display:table!important;overflow:visible!important;white-space:normal!important;table-layout:fixed!important;}#tabDirector .dir-main-content table.staff thead{display:table-header-group!important;width:auto!important;}#tabDirector .dir-main-content table.staff tbody{display:table-row-group!important;width:auto!important;}#tabDirector .dir-main-content table.staff tr{display:table-row!important;width:auto!important;}#tabDirector .dir-main-content table.staff th,#tabDirector .dir-main-content table.staff td{font-size:9.5px;padding:6px 3px;}}

.recovery-key-note{margin:-3px 0 15px;padding:10px 12px;border:1px solid #e5d6aa;border-radius:10px;background:#fffaf0;color:var(--ink-soft);font-size:11.5px;line-height:1.5;}
#resetRecoveryKey{background:#fff;cursor:pointer;}

/* ===== v1.7.1 HOTFIX: compact director tables, no clipped controls ===== */
/* The v1.7 fullscreen pass used equal fixed columns for every table. That made
   attendance controls overflow and forced staff names/actions onto extra lines.
   These rules give each important table deliberate column proportions. */
#tabDirector .dir-main-content table.staff th,
#tabDirector .dir-main-content table.staff td{
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  vertical-align:middle;
}

/* Staff: keep one employee on one compact visual row on normal desktop widths. */
#staffTable{table-layout:fixed!important;}
#staffTable th:nth-child(1),#staffTable td:nth-child(1){width:6%;text-align:center;}
#staffTable th:nth-child(2),#staffTable td:nth-child(2){width:28%;}
#staffTable th:nth-child(3),#staffTable td:nth-child(3){width:20%;}
#staffTable th:nth-child(4),#staffTable td:nth-child(4){width:24%;}
#staffTable th:nth-child(5),#staffTable td:nth-child(5){width:22%;}
#staffTable td:nth-child(2)>b{white-space:nowrap;font-size:12.5px;}
#staffTable td:nth-child(3){font-size:12px;}
#staffTable td:nth-child(4){white-space:nowrap;font-size:12px;}
#staffTable td:nth-child(4) .tag-daily{margin-left:5px;}
#staffTable td:nth-child(5)>div{
  display:grid!important;
  grid-template-columns:1fr 1fr;
  gap:5px!important;
  flex-wrap:nowrap!important;
  width:100%;
}
#staffTable td:nth-child(5) .btn{
  min-width:0!important;
  width:100%;
  padding:7px 5px;
  font-size:10.5px;
  white-space:nowrap;
  justify-content:center;
}
#staffTable .badge.partial{display:inline-block;margin:4px 0 0!important;padding:3px 7px;font-size:8.5px;white-space:normal;}

/* Daily attendance: reserve enough room for all three controls INSIDE the table. */
#dirAttendanceTable{table-layout:fixed!important;}
#dirAttendanceTable th:nth-child(1),#dirAttendanceTable td:nth-child(1){width:6%;text-align:center;}
#dirAttendanceTable th:nth-child(2),#dirAttendanceTable td:nth-child(2){width:30%;}
#dirAttendanceTable th:nth-child(3),#dirAttendanceTable td:nth-child(3){width:22%;}
#dirAttendanceTable th:nth-child(4),#dirAttendanceTable td:nth-child(4){width:42%;}
#dirAttendanceTable td:nth-child(2)>b{white-space:nowrap;font-size:12px;}
#dirAttendanceTable td:nth-child(3){font-size:11.5px;}
#dirAttendanceTable .attendance-choice-group{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px!important;
  width:100%;
  min-width:0!important;
  justify-content:stretch!important;
  flex-wrap:nowrap!important;
}
#dirAttendanceTable .attendance-choice-group .att-choice{
  min-width:0!important;
  width:100%;
  padding:7px 4px;
  font-size:10px;
  white-space:nowrap;
  line-height:1.15;
}

/* Reception uses the same attendance component; keep it equally stable. */
#receptionAttendanceTable .attendance-choice-group{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px!important;
  width:100%;
  min-width:0!important;
}
#receptionAttendanceTable .attendance-choice-group .att-choice{min-width:0!important;width:100%;white-space:nowrap;}

/* Other director tables: use controlled wrapping, not letter-by-letter breaking. */
#dirActiveGuestsTable,#dirGuestHistoryTable,#dirAttendanceHistoryTable,
#dirExpensesTable,#dirRevRoomsTable,#dirRevProcsTable{table-layout:fixed!important;}
#dirActiveGuestsTable{font-size:10.5px;}
#dirActiveGuestsTable th,#dirActiveGuestsTable td{padding:8px 5px!important;font-size:10.5px!important;line-height:1.3;}
#dirActiveGuestsTable th:nth-child(1){width:4%;}#dirActiveGuestsTable th:nth-child(2){width:18%;}
#dirActiveGuestsTable th:nth-child(3){width:12%;}#dirActiveGuestsTable th:nth-child(4){width:9%;}
#dirActiveGuestsTable th:nth-child(5){width:19%;}#dirActiveGuestsTable th:nth-child(6){width:13%;}
#dirActiveGuestsTable th:nth-child(7){width:13%;}#dirActiveGuestsTable th:nth-child(8){width:12%;}

#dirGuestHistoryTable th,#dirGuestHistoryTable td{padding:7px 4px!important;font-size:9.5px!important;line-height:1.25;}
#dirGuestHistoryTable .badge{padding:3px 6px;font-size:8px;white-space:normal;line-height:1.2;}
#dirGuestHistoryTable th:nth-child(1){width:4%;}#dirGuestHistoryTable th:nth-child(2){width:14%;}
#dirGuestHistoryTable th:nth-child(3){width:10%;}#dirGuestHistoryTable th:nth-child(4){width:11%;}
#dirGuestHistoryTable th:nth-child(5){width:10%;}#dirGuestHistoryTable th:nth-child(6){width:14%;}
#dirGuestHistoryTable th:nth-child(7){width:10%;}#dirGuestHistoryTable th:nth-child(8){width:10%;}
#dirGuestHistoryTable th:nth-child(9){width:9%;}#dirGuestHistoryTable th:nth-child(10){width:8%;}

#dirAttendanceHistoryTable th,#dirAttendanceHistoryTable td{padding:8px 7px!important;font-size:11px!important;}
#dirAttendanceHistoryTable th:nth-child(1){width:6%;}#dirAttendanceHistoryTable th:nth-child(2){width:17%;}
#dirAttendanceHistoryTable th:nth-child(3){width:31%;}#dirAttendanceHistoryTable th:nth-child(4){width:28%;}
#dirAttendanceHistoryTable th:nth-child(5){width:18%;}

/* Avoid unnecessary horizontal scrollbars in normal director cards. */
@media (min-width:861px){
  #tabDirector .dir-main-content .dir-card>div[style*="overflow-x:auto"]{overflow-x:hidden!important;}
  #tabDirector .dir-main-content table.staff{max-width:100%!important;min-width:0!important;}
  #staffTable,#dirAttendanceTable{font-size:12px;}
}

/* Focus mode keeps the same proportions instead of reverting to equal columns. */
body.director-focus-mode #staffTable td:nth-child(2)>b,
body.director-focus-mode #dirAttendanceTable td:nth-child(2)>b{white-space:nowrap!important;}
body.director-focus-mode #staffTable td:nth-child(5) .btn,
body.director-focus-mode #dirAttendanceTable .att-choice{font-size:10.5px!important;padding:7px 4px!important;}

/* On narrower devices, do not clip action buttons; stack only the action area. */
@media (max-width:860px){
  #staffTable td:nth-child(2)>b,#dirAttendanceTable td:nth-child(2)>b{white-space:normal;}
  #staffTable td:nth-child(5)>div{grid-template-columns:1fr;}
  #dirAttendanceTable .attendance-choice-group,#receptionAttendanceTable .attendance-choice-group{grid-template-columns:1fr;}
  #dirAttendanceTable .attendance-choice-group .att-choice,#receptionAttendanceTable .attendance-choice-group .att-choice{font-size:10px;padding:6px 4px;}
}

/* ===== v1.7.3: PAYROLL SPACING FIX =====
   Keep every original payroll column (№, +, -, ! included), but remove the
   wasted horizontal gaps around the narrow columns so the useful fields gain
   room. No payroll calculation/storage logic is changed. */
#payrollTable{
  table-layout:fixed!important;
  width:100%!important;
  min-width:0!important;
}
#payrollTable th,#payrollTable td{
  padding:7px 3px!important;
  font-size:10px!important;
  line-height:1.22;
  vertical-align:middle;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
/* Deliberately narrow only the truly narrow columns. Percentages total 100%. */
#payrollTable th:nth-child(1),#payrollTable td:nth-child(1){width:3%;text-align:center;padding-left:1px!important;padding-right:1px!important;}
#payrollTable th:nth-child(2),#payrollTable td:nth-child(2){width:18%;}
#payrollTable th:nth-child(3),#payrollTable td:nth-child(3){width:9%;}
#payrollTable th:nth-child(4),#payrollTable td:nth-child(4){width:10%;}
#payrollTable th:nth-child(5),#payrollTable td:nth-child(5),
#payrollTable th:nth-child(6),#payrollTable td:nth-child(6),
#payrollTable th:nth-child(7),#payrollTable td:nth-child(7){width:2.5%;text-align:center;padding-left:0!important;padding-right:0!important;}
#payrollTable th:nth-child(8),#payrollTable td:nth-child(8){width:10.5%;}
#payrollTable th:nth-child(9),#payrollTable td:nth-child(9){width:10.5%;}
#payrollTable th:nth-child(10),#payrollTable td:nth-child(10){width:8%;}
#payrollTable th:nth-child(11),#payrollTable td:nth-child(11){width:8%;}
#payrollTable th:nth-child(12),#payrollTable td:nth-child(12){width:7.5%;}
#payrollTable th:nth-child(13),#payrollTable td:nth-child(13){width:8%;}
#payrollTable td:nth-child(2)>b{font-size:10.5px;line-height:1.18;}
#payrollTable td:nth-child(4),#payrollTable td:nth-child(8),#payrollTable td:nth-child(12),#payrollTable td:nth-child(13){font-family:'IBM Plex Mono',monospace;font-size:9.5px!important;}
#payrollTable .payroll-edit-input{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  padding:6px 2px!important;
  font-size:9.5px!important;
  text-align:center;
}
#payrollTable td:nth-child(8)>div{font-size:7.8px!important;line-height:1.12!important;margin-top:2px;}
#payrollTable tfoot td{padding-top:8px!important;padding-bottom:8px!important;}

/* In focus mode use the same proportions; do not expand the tiny attendance columns. */
body.director-focus-mode #payrollTable th,
body.director-focus-mode #payrollTable td{padding:7px 3px!important;}
body.director-focus-mode #payrollTable th:nth-child(1),body.director-focus-mode #payrollTable td:nth-child(1){width:3%!important;}
body.director-focus-mode #payrollTable th:nth-child(2),body.director-focus-mode #payrollTable td:nth-child(2){width:18%!important;}
body.director-focus-mode #payrollTable th:nth-child(3),body.director-focus-mode #payrollTable td:nth-child(3){width:9%!important;}
body.director-focus-mode #payrollTable th:nth-child(4),body.director-focus-mode #payrollTable td:nth-child(4){width:10%!important;}
body.director-focus-mode #payrollTable th:nth-child(5),body.director-focus-mode #payrollTable td:nth-child(5),
body.director-focus-mode #payrollTable th:nth-child(6),body.director-focus-mode #payrollTable td:nth-child(6),
body.director-focus-mode #payrollTable th:nth-child(7),body.director-focus-mode #payrollTable td:nth-child(7){width:2.5%!important;padding-left:0!important;padding-right:0!important;}
body.director-focus-mode #payrollTable th:nth-child(8),body.director-focus-mode #payrollTable td:nth-child(8){width:10.5%!important;}
body.director-focus-mode #payrollTable th:nth-child(9),body.director-focus-mode #payrollTable td:nth-child(9){width:10.5%!important;}
body.director-focus-mode #payrollTable th:nth-child(10),body.director-focus-mode #payrollTable td:nth-child(10){width:8%!important;}
body.director-focus-mode #payrollTable th:nth-child(11),body.director-focus-mode #payrollTable td:nth-child(11){width:8%!important;}
body.director-focus-mode #payrollTable th:nth-child(12),body.director-focus-mode #payrollTable td:nth-child(12){width:7.5%!important;}
body.director-focus-mode #payrollTable th:nth-child(13),body.director-focus-mode #payrollTable td:nth-child(13){width:8%!important;}

@media(max-width:1100px){
  #payrollTable th,#payrollTable td{font-size:9.2px!important;padding:6px 2px!important;}
  #payrollTable td:nth-child(2)>b{font-size:9.7px;}
  #payrollTable .payroll-edit-input{font-size:8.8px!important;padding:5px 1px!important;}
  #payrollTable td:nth-child(8)>div{font-size:7px!important;}
}