:root{
	--ink:#17153F; --soft:#55527E; --line:#E4E2F2; --paper:#F6F5FC;
	--brand:#5653E8; --pink:#E85D75; --aqua:#1AA6A0; --gold:#C8892A; --danger:#D14343;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',sans-serif;
      color:var(--ink); background:var(--paper); font-size:15px; }
button{ font:inherit; cursor:pointer; border:0; border-radius:8px; }
input,select,textarea{ font:inherit; }

/* ---- sign in ---- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2em; }
.login-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:2.2em; width:100%; max-width:380px;
             box-shadow:0 12px 40px rgba(23,21,63,0.08); }
.login-logo{ width:130px; height:auto; display:block; margin:0 auto 1.6em; }
.login-card h1{ font-size:1.05em; margin:0 0 1.4em; text-align:center; text-transform:uppercase; letter-spacing:.12em; color:var(--soft); }
.login-card label{ display:block; font-size:.78em; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:1em; }
.login-card input{ display:block; width:100%; margin-top:.4em; padding:.7em .8em; border:1px solid var(--line);
                   border-radius:8px; font-weight:400; text-transform:none; letter-spacing:0; }
.login-card button{ width:100%; background:var(--brand); color:#fff; padding:.85em; font-weight:700; }
.err{ color:var(--danger); font-size:.82em; min-height:1.2em; margin-bottom:.5em; }

/* ---- chrome ---- */
.topbar{ display:flex; align-items:center; gap:1em; background:#fff; border-bottom:1px solid var(--line); padding:.7em 1.2em; }
.topbar-logo{ width:96px; height:auto; display:block; }
.topbar-title{ font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.8em; color:var(--soft); }
.spacer{ flex:1; }
.who{ font-size:.82em; color:var(--soft); }
.ghost{ background:transparent; border:1px solid var(--line); padding:.5em .9em; font-size:.82em; color:var(--ink); }
.ghost:hover{ background:var(--paper); }

.toolbar{ display:flex; gap:.8em; align-items:center; padding:.8em 1.2em; background:#fff; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.tabs{ display:flex; gap:.3em; }
.tab{ background:transparent; padding:.5em 1em; font-size:.85em; color:var(--soft); border:1px solid transparent; }
.tab.active{ background:var(--paper); color:var(--brand); font-weight:700; border-color:var(--line); }
#search{ flex:1; min-width:200px; padding:.6em .8em; border:1px solid var(--line); border-radius:8px; }

/* ---- layout ---- */
.layout{ display:grid; grid-template-columns:minmax(320px,420px) 1fr; height:calc(100vh - 108px); }
.list-pane{ overflow-y:auto; border-right:1px solid var(--line); background:#fff; }
.detail-pane{ overflow-y:auto; padding:1.4em 1.6em; }
.empty{ padding:3em 1.5em; text-align:center; color:var(--soft); font-size:.9em; }

.row{ padding:.9em 1.1em; border-bottom:1px solid var(--line); cursor:pointer; }
.row:hover{ background:var(--paper); }
.row.sel{ background:#EEEDFC; border-left:3px solid var(--brand); padding-left:calc(1.1em - 3px); }
.row-top{ display:flex; align-items:center; gap:.5em; margin-bottom:.25em; }
.row-num{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; }
.row-sub{ font-size:.8em; color:var(--soft); }

.pill{ font-size:.68em; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
       padding:.25em .6em; border-radius:999px; white-space:nowrap; }
.pill.gold{ background:#FBF0DA; color:#7A5312; }
.pill.diamond{ background:#DEF6F4; color:#0E6864; }
.pill.business{ background:#EEEDFC; color:var(--brand); }
.pill.pending_review{ background:#FFF3D6; color:#8A6100; }
.pill.awaiting_documents{ background:#F0EFF7; color:var(--soft); }
.pill.esim_activated,.pill.sim_shipped{ background:#DEF6F4; color:#0E6864; }
.pill.additional_verification{ background:#FFF3D6; color:#8A6100; }
.pill.declined{ background:#FBE3E3; color:#9B2C2C; }
.pill.pending_payment,.pill.pending{ background:#F0EFF7; color:var(--soft); }

/* ---- detail ---- */
.card{ background:#fff; border:1px solid var(--line); border-radius:13px; padding:1.2em 1.3em; margin-bottom:1.1em; }
.card h2{ font-size:.76em; text-transform:uppercase; letter-spacing:.1em; color:var(--soft); margin:0 0 .9em; }
.kv{ display:grid; grid-template-columns:minmax(140px,190px) 1fr; gap:.45em 1em; font-size:.88em; }
.kv dt{ color:var(--soft); }
.kv dd{ margin:0; word-break:break-word; }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

.docs{ display:flex; gap:.8em; flex-wrap:wrap; }
.doc{ width:210px; }
.doc img{ width:100%; height:140px; object-fit:cover; border:1px solid var(--line); border-radius:9px; background:var(--paper); display:block; }
.doc a{ font-size:.76em; color:var(--brand); text-decoration:none; display:block; margin-top:.35em; }

.actions{ display:flex; gap:.6em; flex-wrap:wrap; align-items:center; }
.actions select,.actions textarea{ padding:.6em .7em; border:1px solid var(--line); border-radius:8px; }
.actions select{ min-width:250px; }
.actions textarea{ width:100%; min-height:64px; resize:vertical; }
.btn{ background:var(--brand); color:#fff; padding:.7em 1.2em; font-weight:700; font-size:.85em; }
.btn.warn{ background:var(--pink); }
.btn:disabled{ opacity:.55; cursor:default; }

.hist{ font-size:.82em; }
.hist li{ padding:.4em 0; border-bottom:1px solid var(--line); list-style:none; }
.hist ul{ margin:0; padding:0; }
.note{ font-size:.82em; color:var(--soft); margin-top:.6em; }
.flash{ padding:.7em 1em; border-radius:9px; font-size:.85em; margin-bottom:1em; }
.flash.ok{ background:#DEF6F4; color:#0E6864; }
.flash.bad{ background:#FBE3E3; color:#9B2C2C; }

@media (max-width:900px){
	.layout{ grid-template-columns:1fr; height:auto; }
	.list-pane{ max-height:44vh; border-right:0; border-bottom:1px solid var(--line); }
}

/* ---- members portal extras ---- */
.login-card .intro{ font-size:.86em; color:var(--soft); line-height:1.55; margin:0 0 1.2em; text-align:center; }
.login-card .sub{ font-size:.82em; text-align:center; margin:.9em 0 0; color:var(--soft); }
.login-card .sub a{ color:var(--brand); }
.account{ max-width:820px; margin:0 auto; padding:1.6em 1.2em 3em; }
.order{ border:1px solid var(--line); border-radius:11px; padding:1em 1.1em; margin-bottom:.9em; }
.order-top{ display:flex; align-items:center; gap:.5em; margin-bottom:.7em; flex-wrap:wrap; }
.order-num{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700; font-size:1.05em; }