/* ==============================================================
   PassportLens — shared "portal" layout for signed-in pages
   (studio, account, clients/CRM, admin, pricing, activate, invite)
   Loads after theme.css.
   ============================================================== */

body{background:var(--bg-2);}
.topbar{position:sticky; top:0; z-index:40; background:var(--navy); color:#fff; border-bottom:1px solid rgba(255,255,255,.08);}
.topbar .brand .brand-name{color:#fff;}
.topbar .brand svg [fill="#351C15"]{fill:#FFB500;} .topbar .brand svg [stroke="#FFB500"]{stroke:#351C15;} .topbar .brand svg circle[fill="#FFB500"],.topbar .brand svg rect[fill="#FFB500"]:not(:first-child){fill:#351C15;}
.topbar .btn.ghost{border-color:rgba(255,255,255,.35); color:#fff;} .topbar .btn.ghost:hover{background:rgba(255,255,255,.1); border-color:#fff;}
.topbar-inner{max-width:1240px; margin:0 auto; padding:0 20px; height:64px; display:flex; align-items:center; gap:22px;}
.topbar .brand svg{height:30px;}
.topnav{display:flex; gap:4px; margin-left:8px;}
.topnav a{padding:8px 12px; border-radius:var(--r-sm); font-weight:600; font-size:14px; color:rgba(255,255,255,.8);}
.topnav a:hover{background:rgba(255,255,255,.1); color:#fff;}
.topnav a.active{background:var(--gold); color:var(--navy);}
.topbar-right{margin-left:auto; display:flex; align-items:center; gap:12px;}
@media (max-width:720px){
  .topbar-inner{height:58px; gap:10px;}
  .topnav a{padding:7px 9px; font-size:13px;}
  .brand .brand-name{display:none;}
}

.page{max-width:1240px; margin:0 auto; padding:28px 20px 60px;}
.page-title{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px;}
.page-title h1{font-size:28px;}
.page-title p{color:var(--text-2); margin-top:4px;}

.notice{background:var(--info-soft); border:1px solid #BFD5EE; color:var(--info); border-radius:var(--r); padding:12px 16px; font-size:14px; margin-bottom:18px;}
.notice.warn{background:var(--warn-soft); border-color:#F3DDAE; color:var(--warn);}
.notice.bad{background:var(--bad-soft); border-color:#F2C2C2; color:var(--bad);}
.notice.ok{background:var(--ok-soft); border-color:#BFE3CC; color:var(--ok);}
.notice a{font-weight:700; text-decoration:underline; text-underline-offset:2px;}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:14px; margin-bottom:22px;}
.stat{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px 18px;}
.stat b{display:block; font-family:var(--font-head); font-size:26px; font-weight:800; color:var(--navy); line-height:1.1;}
.stat span{font-size:13px; color:var(--mut);}

.table-wrap{overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:var(--r);}
table.data{width:100%; border-collapse:collapse; font-size:14px;}
table.data th,table.data td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle;}
table.data th{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); font-weight:700; background:var(--bg-2);}
table.data tr:last-child td{border-bottom:0;}
table.data tr.click{cursor:pointer;} table.data tr.click:hover td{background:var(--bg-2);}
table.data td.num{text-align:right; font-variant-numeric:tabular-nums;}
.empty{padding:26px; text-align:center; color:var(--mut); font-size:14px;}

.stack{display:grid; gap:10px;}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:560px){ .two{grid-template-columns:1fr;} }
.btn-row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:900px){ .grid-2{grid-template-columns:1fr;} }
.card h3{font-size:17px; margin-bottom:6px;}
.card .card-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px;}
.pill-row{display:flex; gap:8px; flex-wrap:wrap;}

.spinner{width:34px; height:34px; border-radius:50%; border:3px solid var(--line-2); border-top-color:var(--gold); animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--navy); color:#fff; padding:12px 18px; border-radius:var(--r-pill); font-size:14px; font-weight:600; box-shadow:var(--shadow-lg); z-index:90; max-width:calc(100% - 32px);}
.toast.bad{background:var(--bad);} .toast.ok{background:var(--ok);}

.modal{position:fixed; inset:0; background:rgba(53,28,21,.45); display:flex; align-items:center; justify-content:center; padding:20px; z-index:80;}
.modal .card{width:min(100%, 520px); max-height:90vh; overflow:auto;}
.modal[hidden]{display:none;}

/* simple tabs */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:20px; overflow-x:auto;}
.tabs button{border:0; background:transparent; padding:10px 14px; font-weight:600; color:var(--text-2); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap;}
.tabs button.on{color:var(--navy); border-bottom-color:var(--gold);}
.tab-panel[hidden]{display:none;}

.auth-view .auth-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; max-width:1000px; margin:40px auto;}
.auth-copy h1{font-size:clamp(28px,4vw,42px); margin-top:14px;}
.auth-copy p{color:var(--text-2); font-size:17px; margin-top:14px;}
.auth-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;}
.auth-card{padding:28px; display:grid; gap:14px;}
.auth-card h2{font-size:22px;}
@media (max-width:860px){ .auth-view .auth-grid{grid-template-columns:1fr; gap:24px; margin:16px auto;} }
.center{text-align:center;}