/* NGU Homes lettings app — styles */
:root{
    --plum:#3a2a54; --plum-700:#2f2245; --magenta:#e6007e; --magenta-700:#c40069;
    --ink:#1e1b24; --slate:#6b6577; --line:#e7e4ec; --mist:#f5f4f7; --card:#fff;
    --pass:#1e9e6a; --pass-bg:#e8f6ef; --fail:#d64545; --fail-bg:#fbeceb;
    --warn:#b9770a; --warn-bg:#fbf2e2; --info:#2563c9; --info-bg:#eef4ff;
    --radius:14px; --shadow:0 1px 2px rgba(30,27,36,.06),0 8px 24px rgba(30,27,36,.06);
  }
  *{box-sizing:border-box}
  body{margin:0; background:var(--mist); color:var(--ink); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif; font-size:15px; line-height:1.5}
  .topbar{background:var(--card); border-bottom:1px solid var(--line); padding:12px 24px; display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:30}
  .logo{height:52px; display:block}
  .btn,.mini,.addbtn,.iconbtn,.pills button,.seg button,.step{transition:transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease}
  .btn:hover,.mini:hover,.addbtn:hover{transform:translateY(-1px)}
  .btn:active,.mini:active,.addbtn:active,.iconbtn:active{transform:translateY(1px) scale(.98)}
  .btn-primary:hover{box-shadow:0 6px 18px rgba(230,0,126,.35)}
  .btn-ghost:hover,.mini:hover{box-shadow:0 4px 12px rgba(30,27,36,.10)}
  .mini.go:hover{box-shadow:0 4px 14px rgba(58,42,84,.35)}
  .topbar nav{margin-left:auto; display:flex; gap:6px}
  .topbar nav a{color:var(--slate); font-weight:600; font-size:13px; text-decoration:none; padding:8px 12px; border-radius:9px; cursor:pointer}
  .topbar nav a.on{background:var(--mist); color:var(--ink)}

  .wrap{max-width:1100px; margin:0 auto; padding:24px}
  .wrap-apply{max-width:1160px; margin:0 auto; padding:24px; display:grid; grid-template-columns:1fr 360px; gap:24px; align-items:start}
  @media (max-width:920px){ .wrap-apply{grid-template-columns:1fr} .side{order:-1} }
  .hide{display:none}
  .backlink{display:inline-block; color:var(--slate); font-weight:600; font-size:13px; text-decoration:none; margin-bottom:14px; cursor:pointer}
  .backlink:hover{color:var(--ink)}

  .btn{border:0; border-radius:11px; font:inherit; font-weight:700; padding:11px 18px; cursor:pointer}
  .btn-primary{background:var(--magenta); color:#fff}
  .btn-primary:hover{background:var(--magenta-700)}
  .btn-primary:disabled{background:#e9bcd5; cursor:not-allowed}
  .btn-ghost{background:#fff; border:1px solid var(--line); color:var(--ink); font-weight:600}
  .btn-ghost:hover{border-color:#d6d1de}

  .phead{display:flex; align-items:flex-end; gap:16px; margin-bottom:18px; flex-wrap:wrap}
  .phead h1{font-size:22px; letter-spacing:-.02em; margin:0}
  .phead .count{color:var(--slate); font-size:13px; margin-left:2px}
  .phead .spacer{margin-left:auto}
  .toolbar{display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; align-items:center}
  .search{flex:1 1 280px; position:relative}
  .search input{width:100%; font:inherit; padding:11px 12px 11px 38px; border:1px solid var(--line); border-radius:11px; background:#fff}
  .search input:focus{outline:none; border-color:var(--magenta); box-shadow:0 0 0 3px rgba(230,0,126,.14)}
  .search .mag{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--slate)}
  .pills{display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:11px; padding:3px; gap:3px; flex-wrap:wrap}
  .pills button{border:0; background:transparent; color:var(--slate); font:inherit; font-weight:600; font-size:13px; padding:8px 13px; border-radius:8px; cursor:pointer}
  .pills button[aria-pressed="true"]{background:var(--plum); color:#fff}
  .plist{display:grid; gap:10px}
  .prow{display:grid; grid-template-columns:auto 1fr auto auto; gap:16px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow)}
  .prow.new{animation:flash 1.4s ease}
  @keyframes flash{0%{background:#fff6fb; border-color:var(--magenta)} 100%{background:#fff; border-color:var(--line)}}
  .pill{display:inline-flex; align-items:center; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:5px 10px; border-radius:999px; white-space:nowrap}
  .pill.av{background:var(--pass-bg); color:#14613f}
  .pill.ua{background:var(--warn-bg); color:#6b4e12}
  .pill.nr{background:#eee9f1; color:#5a5168}
  .paddr{font-weight:700; font-size:15px; letter-spacing:-.01em}
  .prowmeta{color:var(--slate); font-size:12.5px; margin-top:2px}
  .prowmeta b{color:var(--ink); font-weight:600}
  .pflag{display:inline-block; margin-left:8px; font-size:10.5px; font-weight:700; color:var(--magenta); text-transform:uppercase; letter-spacing:.04em}
  .pprice{text-align:right; white-space:nowrap}
  .pprice .pcm{font-weight:700; font-size:16px}
  .pprice .pw{color:var(--slate); font-size:12px}
  .pacts{display:flex; flex-direction:column; gap:6px}
  .mini{border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:9px; padding:7px 12px; font:inherit; font-weight:600; font-size:12.5px; cursor:pointer; white-space:nowrap}
  .mini.go{background:var(--plum); color:#fff; border-color:var(--plum)}
  .mini.go:hover{background:var(--plum-700)}
  .empty{text-align:center; color:var(--slate); padding:48px 20px; background:#fff; border:1px dashed var(--line); border-radius:14px}
  @media (max-width:720px){ .prow{grid-template-columns:1fr 1fr} .pprice{text-align:left} .pacts{flex-direction:row} }

  .panel{background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:26px 28px}
  .panel--narrow{max-width:880px; margin:0 auto}
  .panel h1{font-size:21px; margin:0 0 2px; letter-spacing:-.01em}
  .panel .sub, .page > .sub{color:var(--slate); margin:0 0 20px; font-size:13.5px}
  .group{border-top:1px solid var(--line); padding:20px 0 4px}
  .group:first-of-type{border-top:0; padding-top:0}
  .group h3{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--magenta); margin:0 0 14px; font-weight:700}
  .group h3 .muted{color:var(--slate); font-weight:600; text-transform:none; letter-spacing:0; margin-left:6px}
  .grid{display:grid; gap:14px 16px}
  .g2{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:1fr 1fr 1fr}
  @media (max-width:560px){ .g2,.g3{grid-template-columns:1fr} }
  .field label{display:block; font-weight:600; font-size:13px; margin:0 0 6px}
  .field .req{color:var(--magenta)}
  .field .hint{font-weight:500; color:var(--slate); font-size:11.5px}
  input,select,textarea{width:100%; font:inherit; color:var(--ink); background:#fcfbfd; border:1px solid var(--line); border-radius:10px; padding:11px 12px}
  input:focus,select:focus,textarea:focus{outline:none; border-color:var(--magenta); box-shadow:0 0 0 3px rgba(230,0,126,.14); background:#fff}
  input[readonly]{background:var(--mist); color:var(--slate)}
  textarea{resize:vertical; min-height:70px}
  .seg{display:inline-flex; background:var(--mist); border:1px solid var(--line); border-radius:10px; padding:3px; gap:3px; flex-wrap:wrap}
  .seg button{border:0; background:transparent; color:var(--slate); font:inherit; font-weight:600; font-size:13px; padding:7px 14px; border-radius:8px; cursor:pointer}
  .seg button[aria-pressed="true"]{background:#fff; color:var(--ink); box-shadow:var(--shadow)}
  .pcLookup{display:flex; gap:8px; align-items:flex-end}
  .pcLookup .field{flex:1}
  .lookupStatus{font-size:12px; color:var(--slate); margin-top:8px; min-height:16px}
  .nav{display:flex; align-items:center; gap:12px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line)}
  .nav .spacer{margin-left:auto}
  .navreason{font-size:12px; color:var(--fail); font-weight:600; max-width:240px; text-align:right}
  .legend{text-align:center; color:var(--slate); font-size:11.5px; margin-top:18px}
  .addbtn{border:1px dashed #cdc7d8; background:#fff; color:var(--plum); font:inherit; font-weight:600; border-radius:10px; padding:10px 14px; cursor:pointer}
  .addbtn:hover{border-color:var(--magenta); color:var(--magenta)}
  .iconbtn{border:1px solid var(--line); background:#fff; color:var(--slate); border-radius:10px; padding:11px 12px; cursor:pointer; font-weight:600}
  .iconbtn:hover{color:var(--fail); border-color:#f0c9c9}

  /* stepper + application */
  .stepper{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap}
  .step{flex:1 1 0; min-width:150px; display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; cursor:pointer; text-align:left}
  .step:hover{border-color:#d6d1de}
  .step .num{width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px; background:var(--mist); color:var(--slate); border:1px solid var(--line)}
  .step .lab{font-weight:600; font-size:13.5px; line-height:1.25}
  .step .lab span{display:block; font-weight:500; color:var(--slate); font-size:11.5px}
  .step.active{border-color:var(--magenta); box-shadow:0 0 0 1px var(--magenta)}
  .step.active .num{background:var(--magenta); color:#fff; border-color:var(--magenta)}
  .step.done .num{background:var(--pass); color:#fff; border-color:var(--pass)}
  .page{display:none}
  .page.show{display:block}
  .page > h2{font-size:19px; letter-spacing:-.01em; margin:0 0 2px}

  .person{border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; background:#fcfbfd}
  .prow1{display:grid; grid-template-columns:1.5fr 1fr .7fr .9fr auto; gap:10px; align-items:end}
  .prow2{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
  @media (max-width:560px){ .prow1{grid-template-columns:1fr 1fr} .prow2{grid-template-columns:1fr} }
  .incomecard{border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:12px; background:#fcfbfd}
  .ictitle{font-weight:700; font-size:14px; margin-bottom:12px}
  .ictitle span{color:var(--slate); font-weight:600; font-size:12px}
  .relcard{border:1px solid #d9d2ea; background:#faf8ff; border-radius:12px; padding:14px 16px; margin-bottom:14px}

  .callout{border-radius:12px; padding:13px 15px; font-size:13px; display:flex; gap:11px; align-items:flex-start; margin-top:14px; border:1px solid}
  .callout .ci{font-weight:800; flex:none}
  .callout.info{background:var(--info-bg); border-color:#cfe0ff; color:#1f3a66}
  .callout.warn{background:var(--warn-bg); border-color:#f0dcb4; color:#6b4e12}

  /* login */
  .loginwrap{min-height:calc(100vh - 0px); display:grid; place-items:center; padding:24px}
  .loginbox{background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); padding:36px 34px; width:100%; max-width:400px; text-align:center}
  .loginbox .logo{height:64px; margin:0 auto 22px}
  .loginbox h1{font-size:19px; margin:0 0 4px; letter-spacing:-.01em}
  .loginbox .sub{color:var(--slate); font-size:13px; margin:0 0 22px}
  .loginbox .field{text-align:left; margin-bottom:14px}
  .loginbox .btn{width:100%; margin-top:6px; padding:13px}
  .loginerr{color:var(--fail); font-size:12.5px; font-weight:600; min-height:18px; margin-top:10px}
  .topbar .userchip{margin-left:auto; display:flex; align-items:center; gap:10px; color:var(--slate); font-size:13px}
  .topbar .userchip b{color:var(--ink)}
  .topbar nav{margin-left:0}

  /* viewer edit rows */
  .viewer .vacts{display:flex; gap:6px}
  .viewer.editing{grid-template-columns:1fr; gap:10px}
  .veditgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr auto auto; gap:8px; align-items:center}
  @media (max-width:640px){ .veditgrid{grid-template-columns:1fr 1fr} }
  .callout.stop{background:var(--fail-bg); border-color:#f3c7c5; color:#8f2020}
  .callout.ok{background:var(--pass-bg); border-color:#bfe6d4; color:#14613f}
  .callout .ca{margin-left:auto; flex:none}
  .minibtn{border:0; border-radius:9px; background:var(--plum); color:#fff; font:inherit; font-weight:600; font-size:12.5px; padding:8px 13px; cursor:pointer; white-space:nowrap}
  .minibtn:hover{background:var(--plum-700)}

  .checks{display:grid; gap:10px}
  .check{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:#fcfbfd; cursor:pointer}
  .check input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--magenta); flex:none}
  .check .t{font-weight:600; font-size:13.5px}
  .check .d{color:var(--slate); font-size:12.5px}
  .check .opt{margin-left:auto; font-size:11px; font-weight:700; color:var(--slate); text-transform:uppercase}

  .side{position:sticky; top:88px; display:grid; gap:16px}
  .pcard{background:var(--plum); color:#fff; border-radius:18px; padding:20px; box-shadow:var(--shadow)}
  .pcard h4{margin:0 0 2px; font-size:15px}
  .pcard .addr{color:#cfc6e0; font-size:12.5px; margin-bottom:14px}
  .pcard .rent{font-size:26px; font-weight:700; letter-spacing:-.02em}
  .pcard .rent small{font-size:13px; font-weight:500; color:#cfc6e0}
  .pcard .pmeta{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; margin-top:16px; border-top:1px solid rgba(255,255,255,.14); padding-top:14px}
  .pcard .pmeta div span{display:block; color:#b7abcf; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em}
  .pcard .pmeta div b{font-weight:600; font-size:13px}
  .pcard .pmeta .hot b{color:#ff9ed1}

  .suit{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px 20px; box-shadow:var(--shadow)}
  .suit h4{margin:0 0 4px; font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--slate)}
  .verdict{display:flex; align-items:center; gap:12px; padding:14px; border-radius:12px; margin:8px 0 14px; background:var(--mist)}
  .verdict .dot{width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:800; color:#fff; background:var(--slate)}
  .verdict.pass{background:var(--pass-bg)} .verdict.pass .dot{background:var(--pass)}
  .verdict.fail{background:var(--fail-bg)} .verdict.fail .dot{background:var(--fail)}
  .verdict.warn{background:var(--warn-bg)} .verdict.warn .dot{background:var(--warn)}
  .verdict .vt{font-weight:700; font-size:14.5px}
  .verdict .vs{color:var(--slate); font-size:12.5px}
  .meter{height:8px; border-radius:6px; background:var(--line); overflow:hidden; margin:2px 0 4px}
  .meter i{display:block; height:100%; background:var(--pass); width:0}
  .mrow{display:flex; justify-content:space-between; font-size:12px; color:var(--slate); margin-bottom:12px}
  .brow{display:flex; align-items:center; gap:9px; font-size:12.5px; padding:7px 0; border-top:1px dashed var(--line)}
  .brow:first-child{border-top:0}
  .brow .ic{width:18px; height:18px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:11px; font-weight:800; color:#fff; background:var(--slate)}
  .brow.ok .ic{background:var(--pass)} .brow.warn .ic{background:var(--warn)} .brow.bad .ic{background:var(--fail)}
  .brow .bn{font-weight:600} .brow .bd{margin-left:auto; color:var(--slate)}
  .flags{display:grid; gap:8px}
  .flag{display:flex; align-items:center; gap:9px; font-size:13px}
  .flag .ic{width:18px; height:18px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:11px; font-weight:800; color:#fff; background:var(--slate)}
  .flag.ok .ic{background:var(--pass)} .flag.bad .ic{background:var(--fail)} .flag.warn .ic{background:var(--warn)}

  .scards{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
  .scard{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow); cursor:pointer}
  .scard:hover{border-color:#d6d1de}
  .scard.lock{opacity:.55}
  .scard h4{margin:0 0 4px; font-size:15px}
  .scard p{margin:0; color:var(--slate); font-size:12.5px}
  .scard .lk{float:right; font-size:11px; font-weight:700; color:var(--slate); text-transform:uppercase}
  .roleSwitch{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--slate)}
  .urow{display:grid; grid-template-columns:1fr auto auto auto; gap:14px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:8px}
  .urow .un{font-weight:700}
  .urow .ue{color:var(--slate); font-size:12.5px}
  .badge{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 9px; border-radius:999px}
  .badge.admin{background:#efe7fb; color:#5a2da0}
  .badge.staff{background:var(--mist); color:var(--slate)}
  .badge.active{background:var(--pass-bg); color:#14613f}
  .badge.off{background:var(--fail-bg); color:#8f2020}
  @media (max-width:560px){ .urow{grid-template-columns:1fr 1fr} }

  /* property detail */
  .dhead{display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; margin-bottom:16px}
  .dhead h1{font-size:22px; margin:0 0 4px; letter-spacing:-.02em}
  .dhead .daddr{color:var(--slate); font-size:13.5px}
  .dhead .dprice{margin-left:auto; text-align:right}
  .dhead .dprice .pcm{font-size:24px; font-weight:700}
  .dhead .dprice .pw{color:var(--slate); font-size:13px}
  .dcols{display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start}
  @media (max-width:820px){ .dcols{grid-template-columns:1fr} }
  .dgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px 20px}
  .dgrid div span{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--slate)}
  .dgrid div b{font-weight:600}
  .viewer{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:11px 14px; border:1px solid var(--line); border-radius:11px; margin-bottom:8px; background:#fcfbfd}
  .viewer .vn{font-weight:700; font-size:13.5px}
  .viewer .vsub{color:var(--slate); font-size:12px}
  .viewer .vdate{color:var(--slate); font-size:12px}
  .lha{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow)}
  .ratetable{width:100%; border-collapse:collapse; font-size:13px}
  .ratetable th,.ratetable td{text-align:left; padding:8px 6px; border-bottom:1px solid var(--line)}
  .ratetable th{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); font-weight:700}
  .ratetable tr.match{background:var(--pass-bg)}
  .ratetable tr.match td{font-weight:700}
  .rateverdict{margin-top:12px; font-size:12.5px; padding:10px 12px; border-radius:10px}
  .rateverdict.ok{background:var(--pass-bg); color:#14613f}
  .rateverdict.gap{background:var(--warn-bg); color:#6b4e12}

  /* settings editor */
  .editrow{display:flex; gap:8px; margin-bottom:8px; align-items:center}
  .editrow input{flex:1}
  .setbody{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow); max-width:760px}
  .setbody h1{font-size:19px; margin:0 0 4px}
  .setbody .sub{margin-bottom:18px}
  .rateedit{display:grid; grid-template-columns:1.4fr repeat(5,1fr); gap:8px; align-items:center; margin-bottom:8px}
  .rateedit input{padding:8px}
  .rateedit .rlabel{font-weight:600; font-size:12.5px}
  .rateedit.head span{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--slate); font-weight:700}
  @media (max-width:640px){ .rateedit{grid-template-columns:1fr 1fr 1fr} }
  .logrow{font-size:12.5px; padding:9px 0; border-bottom:1px solid var(--line); display:flex; gap:12px}
  .logrow .lt{color:var(--slate); white-space:nowrap}