/* PBM Cloud account app layout: a Deep Slate sidebar and a sticky Paper
   header around projects and their sharing (tokens in pbm.css). */
#root{min-height:100%}
.shell{display:grid; grid-template-columns:256px minmax(0,1fr); min-height:100%}

/* ---- sidebar ---- */
.sidebar{position:sticky; top:0; height:100vh; display:flex; flex-direction:column; background:var(--sidebar-bg); box-shadow:1px 0 0 rgba(18,24,38,.5), 14px 0 40px -30px rgba(18,24,38,.6); color:var(--sidebar-text-strong); padding:18px 14px 14px; overflow-y:auto; z-index:20}
.sb-brand{display:flex; align-items:center; gap:10px; padding:4px 8px 18px; font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.12em; color:var(--sidebar-text-strong)}
.sb-brand:hover{color:var(--sidebar-text-strong)}
.sb-mark{width:26px; height:26px; border-radius:6px; background:url(pbm-mark.svg) center/contain no-repeat; flex:none}
.sb-nav{display:grid; gap:2px}
.sb-group{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--sidebar-text-faint); padding:16px 12px 8px; margin-top:6px; border-top:1px solid var(--sidebar-line)}
.sb-nav a{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; border-radius:8px; color:var(--sidebar-text-strong); font-size:14px; font-weight:500; transition:background .18s ease, transform .18s cubic-bezier(.2,.7,.2,1)}
.sb-nav a:hover{background:var(--sidebar-hover); transform:translateX(3px); color:var(--sidebar-text-strong)}
.sb-nav a.active{background:var(--sidebar-active-bg); box-shadow:inset 3px 0 0 var(--sidebar-accent); font-weight:600}
.sb-nav a .n{font-family:var(--mono); font-size:10.5px; color:#A3B9FF}
.sb-nav a.sub{padding-left:22px; font-size:13.5px; color:var(--sidebar-text-muted)}
.sb-nav a.sub.active{color:var(--sidebar-text-strong)}
.sb-project{padding:10px 12px 4px; font-size:15px; font-weight:700; color:var(--sidebar-text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sb-foot{margin-top:auto; padding:14px 8px 0; border-top:1px solid var(--sidebar-line); display:grid; gap:10px}
.sb-user{display:flex; align-items:center; gap:10px; min-width:0}
.avatar{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--sidebar-input-bg); color:#A3B9FF; font-family:var(--mono); font-size:12px; font-weight:600; flex:none}
.sb-user .who{min-width:0}
.sb-user b{display:block; font-size:13px; color:var(--sidebar-text-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sb-user .who > span{display:block; font-size:11.5px; color:var(--sidebar-text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sb-actions{display:flex; justify-content:space-between; align-items:center}
.sb-link{background:none; border:0; color:var(--sidebar-text-muted); font-size:12.5px; cursor:pointer; padding:4px 0}
.sb-link:hover{color:var(--sidebar-text-strong)}
.sb-icon{width:32px; height:32px; display:grid; place-items:center; border-radius:8px; border:0; background:transparent; color:var(--sidebar-text-muted); cursor:pointer}
.sb-icon:hover{background:var(--sidebar-hover); color:var(--sidebar-text-strong)}
.sb-icon svg{width:17px; height:17px}

/* ---- header ---- */
.main-col{min-width:0; display:flex; flex-direction:column}
.topbar{position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:12px; padding:14px 40px; background:var(--header-bg); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); min-height:64px}
.menu-btn{display:none; width:36px; height:36px; place-items:center; border:1px solid var(--line); border-radius:8px; background:var(--card); cursor:pointer; flex:none}
.menu-btn svg{width:18px; height:18px}
.crumbs{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); min-width:0}
.crumbs a{color:var(--text-muted)}
.crumbs a:hover{color:var(--ember)}
.crumbs b{color:var(--text-strong); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topbar .spacer{flex:1}
.chip{font-family:var(--mono); font-size:12px; color:var(--text-muted); border:1px solid var(--line); border-radius:999px; padding:6px 12px; background:var(--card); white-space:nowrap}
.content{padding:30px 40px 64px; display:grid; gap:24px; align-content:start; max-width:1320px; width:100%}
.content > *{min-width:0}

.page-head{display:flex; align-items:flex-end; gap:16px 24px; flex-wrap:wrap}
.page-head .t{display:grid; gap:6px; min-width:0}
.page-head h1{font-size:26px; font-weight:700; letter-spacing:-.01em}
.page-head p{color:var(--text-muted); font-size:13.5px; max-width:70ch}
.page-head .actions{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap}
.eyebrow{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint)}

.tabs{display:flex; gap:10px; flex-wrap:wrap}
.tabs a{border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:999px; padding:8px 16px; font-weight:500; font-size:13.5px; display:inline-flex; gap:8px; align-items:center}
.tabs a:hover{background:var(--hover-tint); color:var(--text)}
.tabs a.active{border-color:var(--ember); color:var(--ember); background:var(--card-3); font-weight:600}
.tabs a .n{font-family:var(--mono); font-size:11px; color:var(--text-faint)}

/* ---- sign in ---- */
.auth-wrap{min-height:100vh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.auth-hero{background:var(--hero-bg); color:#F6F4F1; padding:48px 56px; display:flex; flex-direction:column; gap:28px; position:relative; overflow:hidden}
.auth-hero .sb-brand{padding:0}
.auth-hero h1{color:#F6F4F1; font-size:clamp(28px, 3.4vw, 40px); font-weight:700; letter-spacing:-.015em; max-width:16ch; margin-top:auto}
.auth-hero p{color:#A9B1C0; max-width:48ch; font-size:15px; line-height:1.6}
.flows{display:grid; gap:12px; margin-top:4px}
.flow{display:grid; grid-template-columns:92px 1fr; gap:14px; align-items:baseline; padding-top:12px; border-top:1px solid rgba(163,170,187,.2); font-size:14px; color:#D8DEE8}
.flow b{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#A3B9FF; font-weight:500}
.flow .badge{margin-left:8px; background:rgba(163,170,187,.16); color:#A9B1C0}
.auth-hero .grid-art{position:absolute; inset:auto -60px -80px auto; width:420px; opacity:.16; pointer-events:none}
.auth-panel{display:grid; place-items:center; padding:40px 24px}
.auth-card{width:min(420px, 100%); padding:32px; display:grid; gap:18px}
.auth-card h2{font-size:22px; font-weight:700}
.auth-card .switch{font-size:13.5px; color:var(--text-muted)}
.auth-card .switch button{background:none; border:0; padding:0; color:var(--ember); font-weight:600; cursor:pointer}
.auth-card .switch a{color:var(--ember); font-weight:600; text-decoration:none}
.auth-card .switch a:hover{text-decoration:underline}
.auth-card .switch.forgot{margin-top:-10px; text-align:right}
.auth-card > p.muted{font-size:14px; line-height:1.55}
.form-error{color:var(--bad); font-size:13px; background:var(--bad-bg); border-radius:8px; padding:9px 12px}

/* ---- project list ---- */
.p-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:18px}
.pcard{display:flex; flex-direction:column; overflow:hidden; transition:transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease}
.pcard:hover{transform:translateY(-4px); box-shadow:0 34px 60px -30px rgba(18,24,38,.45); border-color:var(--ember-line)}
.pcard-art{height:96px; background:var(--hero-bg); position:relative; overflow:hidden}
.pcard-art svg{position:absolute; right:-10px; bottom:-18px; width:190px; opacity:.9}
.pcard-art .role{position:absolute; left:16px; top:14px; background:rgba(18,24,38,.55); color:#F6F4F1; backdrop-filter:blur(6px)}
.pcard-body{padding:16px 18px 18px; display:grid; gap:10px; flex:1}
.pcard h3{font-size:17px; font-weight:600}
.pcard h3 a{color:var(--text-strong)}
.pcard h3 a:hover{color:var(--ember)}
.pcard p{color:var(--text-muted); font-size:13px}
.pcard .stats{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; padding:10px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.pcard .stats div{display:grid; gap:2px}
.pcard .stats b{font-family:var(--mono); font-size:16px; font-weight:600; color:var(--text-strong)}
.pcard .stats span{font-size:11px; color:var(--text-faint)}
.pcard .acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:4px}
.new-card{display:grid; place-items:center; align-content:center; gap:10px; padding:28px; border:1.5px dashed var(--line); border-radius:10px; color:var(--text-muted); background:transparent; cursor:pointer; min-height:220px; text-align:center}
.new-card:hover{border-color:var(--ember); color:var(--ember)}
.new-card svg{width:28px; height:28px}
.new-card b{font-size:15px; color:inherit}

/* ---- project overview ---- */
.kpi-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr))}
.kpi{padding:16px 18px 18px}
.kpi .l{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); margin-bottom:8px}
.kpi .v{font-family:var(--mono); font-size:22px; font-weight:600; color:var(--text-strong)}
.kpi .s{font-size:12px; color:var(--text-muted); margin-top:6px}
.launch{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.lcard{display:grid; grid-template-columns:auto 1fr; gap:16px; padding:22px; align-items:start}
.lcard .ico{width:48px; height:48px; border-radius:10px; display:grid; place-items:center; background:var(--ember-soft); color:var(--ember)}
.lcard .ico svg{width:24px; height:24px}
.lcard h3{font-size:16px; font-weight:600}
.lcard p{color:var(--text-muted); font-size:13px; margin:4px 0 14px}
.lcard .meta{font-family:var(--mono); font-size:11.5px; color:var(--text-faint); margin-bottom:14px}

/* ---- sections ---- */
.section{padding:22px 22px 20px}
.section-head{display:flex; align-items:flex-start; gap:12px 16px; flex-wrap:wrap; margin-bottom:16px}
.section-head .t{flex:1; min-width:240px}
.section-head h2{font-size:16px; font-weight:600}
.section-head p{color:var(--text-muted); font-size:13px; margin-top:4px; max-width:75ch}
.inline-form{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; padding:16px; border:1px solid var(--line-soft); border-radius:10px; background:var(--card-3); margin-bottom:16px}
.inline-form .field{flex:1 1 200px}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:8px}
table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; padding:10px 14px; font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); background:var(--card-soft); white-space:nowrap}
td{padding:11px 14px; border-top:1px solid var(--line-soft); vertical-align:middle}
tbody tr{transition:background .16s, box-shadow .16s}
tbody tr:hover{background:var(--hover-tint); box-shadow:inset 3px 0 0 var(--ember)}
td.n,th.n{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}
td.d{font-family:var(--mono); white-space:nowrap; color:var(--text-muted)}
td .sub{display:block; font-family:var(--mono); font-size:11px; color:var(--text-faint)}
.row-actions{display:flex; gap:6px; justify-content:flex-end}
.empty{padding:34px 20px; text-align:center; color:var(--text-muted); display:grid; justify-items:center; gap:10px}
.empty svg{width:34px; height:34px; color:var(--text-faint)}
.empty h3{font-size:16px}
.empty p{max-width:52ch; font-size:13.5px}

.secret{display:grid; gap:12px; padding:16px; border:1px solid var(--ember-line); border-radius:10px; background:var(--ember-soft); margin-bottom:16px}
.secret .head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.secret .head b{color:var(--text-strong)}
.secret .row{display:flex; gap:8px; align-items:center}
.secret code,pre.code{flex:1; min-width:0; font-family:var(--mono); font-size:12px; background:var(--card); border:1px solid var(--line); border-radius:7px; padding:9px 11px; overflow-x:auto; white-space:pre; margin:0; color:var(--text-strong)}
.secret .lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted)}
.steps{margin:0; padding-left:1.2em; display:grid; gap:10px; color:var(--text); font-size:13.5px}
.steps li > .row{margin-top:6px}
.loading{display:grid; place-items:center; padding:80px}
.scrim{position:fixed; inset:0; background:rgba(18,24,38,.45); z-index:15}

@media (max-width:1100px){ .launch{grid-template-columns:1fr} }
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed; left:0; top:0; bottom:0; width:270px; transform:translateX(-100%); transition:transform .22s ease}
  .sidebar.open{transform:none}
  .menu-btn{display:grid}
  .topbar{padding:10px 16px}
  .content{padding:22px 16px 48px}
  .auth-wrap{grid-template-columns:1fr}
  .auth-hero{padding:32px 24px}
  .auth-hero h1{margin-top:12px}
  .p-grid{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr; gap:4px}
}

/* long secrets and commands scroll inside their own box, never widen the page */
.secret{grid-template-columns:minmax(0,1fr)}
.secret .row > *:not(code):not(pre){flex:none}
.steps li{min-width:0}
@media (max-width:900px){ .sidebar:not(.open){box-shadow:none} }

/* product icons */
.lcard .pico{width:52px; height:52px; border-radius:12px; box-shadow:0 12px 24px -14px rgba(18,24,38,.7)}
.sb-ic{display:inline-flex; align-items:center; gap:10px}
.sb-ic img{width:20px; height:20px; border-radius:5px}

/* ---- plans and billing ---- */
.price-note{display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:11px 14px; border:1px dashed var(--warn); border-radius:10px; background:var(--warn-bg); color:var(--text); font-size:13px}
.lic-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.tier-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px}
.h2{font-size:19px; font-weight:700}
.billing{display:inline-flex; padding:3px; border:1px solid var(--line); border-radius:999px; background:var(--card)}
.billing button{border:0; background:transparent; border-radius:999px; padding:7px 14px; font-weight:600; font-size:13px; color:var(--text-muted); cursor:pointer}
.billing button span{font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ember); margin-left:6px}
.billing button[aria-pressed="true"]{background:var(--text-strong); color:var(--bg)}
.billing button[aria-pressed="true"] span{color:#A3B9FF}
.tiers{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:stretch}
.tier{position:relative; display:flex; flex-direction:column; gap:12px; padding:22px 20px 20px}
.tier.featured{border-color:var(--ember); box-shadow:0 30px 60px -36px rgba(85,117,224,.45), 0 0 0 1px var(--ember)}
.tier.picked{outline:2px solid var(--ember); outline-offset:2px}
.tier-flag{position:absolute; top:-11px; left:20px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:var(--btn-grad); color:var(--btn-ink); border-radius:999px; padding:3px 10px}
.tier-head{display:flex; align-items:center; gap:12px; min-height:52px}
.tier-head h3{font-size:16px; font-weight:600}
.tier-head .badge{margin-top:4px}
.tier-ic{width:46px; height:46px; border-radius:11px; box-shadow:0 10px 22px -14px rgba(18,24,38,.8); flex:none}
.trio{display:flex; flex:none}
.trio img{width:32px; height:32px; border-radius:8px; box-shadow:0 0 0 2px var(--card)}
.trio img + img{margin-left:-9px}
.tier-blurb{color:var(--text-muted); font-size:13px; min-height:3.2em}
.tier-price{display:flex; align-items:baseline; gap:8px; padding-top:10px; border-top:1px solid var(--line-soft)}
.tier-price b{font-family:var(--mono); font-size:30px; font-weight:600; color:var(--text-strong); letter-spacing:-.02em}
.tier-price span{font-family:var(--mono); font-size:11px; color:var(--text-faint)}
.tier-bill{font-family:var(--mono); font-size:11.5px; color:var(--text-faint); margin-top:-6px}
.tier .btn{justify-content:center}
.tier ul{list-style:none; margin:2px 0 0; padding:0; display:grid; gap:8px; font-size:13px; color:var(--text)}
.tier li{display:grid; grid-template-columns:14px 1fr; gap:8px; line-height:1.45}
.tier li::before{content:""; width:8px; height:5px; border-left:2px solid var(--ember); border-bottom:2px solid var(--ember); transform:rotate(-45deg) translate(2px,-1px); margin-top:.45em}
.req-form .inline-form{margin-bottom:0}
.req-total{flex:1 1 auto; font-size:13.5px; color:var(--text-muted); align-self:center}
.req-total b{font-family:var(--mono); color:var(--text-strong)}
.req-actions{display:flex; gap:10px; margin-left:auto}
.ent-card{display:grid; grid-template-columns:1.3fr 1fr auto; gap:28px; align-items:center; padding:26px 28px; background:var(--hero-bg); border-color:transparent; color:#E3E6EC}
.ent-card .eyebrow{color:#9AA5B1}
.ent-card h2{color:#F6F4F1; font-size:20px; margin:6px 0 8px}
.ent-card p{color:#A9B1C0; font-size:13.5px; max-width:56ch}
.ent-card ul{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:13px}
.ent-card li::before{content:"—"; color:#7C9CFF; margin-right:9px}
.included{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.included div{display:grid; gap:6px; padding:16px 18px; border:1px solid var(--line); border-radius:10px; background:var(--card-3)}
.included b{font-size:13.5px; color:var(--text-strong)}
.included span{font-size:12.5px; color:var(--text-muted)}
@media (max-width:1240px){ .tiers,.included{grid-template-columns:repeat(2,minmax(0,1fr))} .ent-card{grid-template-columns:1fr 1fr} }
@media (max-width:700px){ .tiers,.included,.lic-row,.ent-card{grid-template-columns:1fr} .req-actions{margin-left:0} }

/* ---- send feedback ---- */
.fb-wrap{position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:16px; background:rgba(18,24,38,.45)}
.fb-card{width:min(460px,100%); padding:24px; display:grid; gap:14px}
.fb-card h2{font-size:18px; font-weight:700; margin:4px 0}
.fb-card p.muted{font-size:13px}
.fb-card textarea{width:100%; min-height:120px; resize:vertical; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font:inherit; font-size:14px; color:var(--text-strong)}
.fb-card textarea:focus{outline:2px solid var(--ember-line); outline-offset:1px; border-color:var(--ember)}
.fb-acts{display:flex; justify-content:flex-end; gap:10px}