:root { color-scheme: light; --ink:#18201d; --muted:#6d7772; --line:#e5e9e6; --soft:#f5f7f5; --green:#184e3b; --green-soft:#e6f1ec; --white:#fff; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:#fafbfa; color:var(--ink); }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:250px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; padding:28px 20px; background:#f0f3f1; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:0 10px 28px; font-weight:700; font-size:18px; }
.brand-mark { width:34px; height:34px; display:inline-grid; place-items:center; border-radius:9px; background:var(--green); color:white; font-weight:750; }
nav { display:grid; gap:6px; }
.nav-item { border:0; border-radius:9px; padding:12px; text-align:left; background:transparent; color:#53605a; cursor:default; }
.nav-item.active { background:var(--white); color:var(--ink); box-shadow:0 1px 2px rgba(20,35,28,.06); font-weight:650; }
.nav-item small { display:block; margin-top:3px; color:#929b97; font-size:11px; }
.logout-button { margin-top:auto; border:0; background:transparent; padding:10px; color:var(--muted); text-align:left; cursor:pointer; }
.language-toggle { min-width:48px; height:34px; padding:0 11px; border:1px solid #d7ddd9; border-radius:8px; background:white; color:var(--green); font-size:12px; font-weight:700; cursor:pointer; }
.main-content { width:min(1060px,calc(100% - 64px)); margin:0 auto; padding:54px 0 80px; }
.page-header,.detail-header { display:flex; justify-content:space-between; align-items:flex-start; gap:30px; margin-bottom:32px; }
h1,h2,h3,h4,p { margin-top:0; }
h1 { margin-bottom:7px; font-size:30px; letter-spacing:-.035em; }
h2 { margin-bottom:0; font-size:17px; }
h3 { margin:3px 0 0; font-size:17px; }
.shareholder-name-pair { display:flex; flex-wrap:wrap; column-gap:24px; row-gap:3px; }
h4 { margin:0 0 8px; font-size:13px; color:var(--muted); }
.eyebrow { margin-bottom:8px; color:var(--green); font-size:12px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
.muted { color:var(--muted); }
.search-box { height:50px; display:flex; align-items:center; gap:10px; padding:0 16px; background:white; border:1px solid #dce2de; border-radius:11px; box-shadow:0 1px 2px rgba(20,35,28,.03); }
.search-box span { font-size:23px; color:var(--muted); }
.search-box input { flex:1; min-width:0; border:0; outline:0; color:var(--ink); background:transparent; }
.section-heading,.panel-title { display:flex; align-items:center; justify-content:space-between; margin:30px 0 12px; }
.section-heading span,.panel-title span { color:var(--muted); font-size:13px; }
.company-list,.panel { background:white; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.company-row { width:100%; min-height:76px; display:grid; grid-template-columns:minmax(220px,1fr) auto 170px 14px; align-items:center; gap:20px; padding:14px 18px; border:0; border-bottom:1px solid var(--line); background:white; text-align:left; cursor:pointer; color:var(--ink); }
.company-row:last-child { border-bottom:0; }
.company-row:hover { background:#fafcfa; }
.company-row-main { display:grid; gap:5px; }
.company-name-line { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.detail-company-name { gap:12px; }
.name-status-badge { display:inline-flex; width:max-content; padding:3px 7px; border-radius:999px; font-size:10px; font-weight:700; white-space:nowrap; }
.name-status-approved { background:#e7f4ec; color:#286641; }
.name-status-pending { background:#fff2d8; color:#8a5a00; }
.company-row-main small,.company-row time { color:var(--muted); font-size:12px; }
.company-row time { text-align:right; }
.row-arrow { color:#9ba39f; font-size:23px; }
.status-badge { display:inline-flex; width:max-content; padding:6px 9px; border-radius:999px; background:#edf1ef; color:#4b5751; font-size:11px; font-weight:700; white-space:nowrap; }
.status-documents_under_review,.status-approved,.status-completed { background:var(--green-soft); color:var(--green); }
.status-failed,.status-on_hold { background:#faece9; color:#9a3e2e; }
.empty-state { padding:44px; text-align:center; color:var(--muted); }
.error-state { color:#9a3e2e; }
.back-button { margin-bottom:26px; padding:0; border:0; background:transparent; color:var(--green); cursor:pointer; }
.panel { margin-top:18px; padding:22px; overflow:visible; }
.panel-title { margin:0 0 18px; }
.shareholder-grid { display:grid; gap:14px; }
.shareholder-card { border:1px solid var(--line); border-radius:10px; padding:18px; }
.shareholder-heading { display:flex; justify-content:space-between; gap:20px; }
.shareholder-heading small { color:var(--muted); }
.shareholder-heading > strong { color:var(--green); }
dl { display:flex; flex-wrap:wrap; gap:22px 36px; margin:20px 0; padding:16px 0; border-block:1px solid var(--line); }
dt { margin-bottom:4px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
dd { margin:0; font-size:13px; }
.document-list { display:grid; }
.document-row { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:54px; padding:10px 0; border-bottom:1px solid var(--line); }
.document-row:last-child { border-bottom:0; }
.document-row span:first-child { display:grid; gap:4px; }
.document-row strong { font-size:13px; }
.document-row small { color:var(--muted); font-size:11px; }
.document-link { color:var(--green); font-size:12px; font-weight:650; text-decoration:none; white-space:nowrap; }
.not-received { color:#9aa29e; font-size:12px; white-space:nowrap; }
.timeline { display:grid; }
.timeline-item { position:relative; display:grid; grid-template-columns:16px 1fr; gap:12px; padding-bottom:24px; }
.timeline-item:not(:last-child)::before { content:""; position:absolute; left:5px; top:13px; bottom:0; width:1px; background:var(--line); }
.timeline-dot { position:relative; z-index:1; width:11px; height:11px; margin-top:3px; border:3px solid var(--green-soft); border-radius:50%; background:var(--green); }
.timeline-item p { margin:5px 0; color:var(--muted); font-size:13px; }
.timeline-item time { color:#939b97; font-size:11px; }
.timeline-pending { opacity:.52; }
.timeline-pending .timeline-dot { border-color:#edf0ee; background:#b7bfbb; }
.timeline-current strong { color:var(--green); }
.timeline-current .timeline-dot { box-shadow:0 0 0 4px var(--green-soft); }
.timeline-exception .timeline-dot { border-color:#faece9; background:#9a3e2e; }
.login-body { min-height:100vh; display:grid; place-items:center; padding:24px; background:#f1f4f2; }
.login-card { position:relative; width:min(410px,100%); padding:38px; border:1px solid var(--line); border-radius:15px; background:white; box-shadow:0 18px 50px rgba(24,38,31,.08); }
.login-language { position:absolute; top:24px; right:24px; }
.login-card .brand-mark { margin-bottom:25px; }
.login-form { display:grid; gap:16px; margin-top:28px; }
.login-form label { display:grid; gap:7px; font-size:12px; font-weight:650; }
.login-form input { height:45px; padding:0 12px; border:1px solid #d7ddd9; border-radius:8px; outline:0; }
.login-form input:focus { border-color:var(--green); box-shadow:0 0 0 3px var(--green-soft); }
.primary-button { height:46px; border:0; border-radius:8px; background:var(--green); color:white; font-weight:700; cursor:pointer; }
.primary-button:disabled { opacity:.65; }
.form-error { margin:0; color:#a64031; font-size:12px; }
@media (max-width:760px) {
  .app-shell { display:block; }
  .sidebar { position:static; width:100%; height:auto; padding:16px; }
  .sidebar-brand { padding:0 4px 14px; }
  nav { grid-template-columns:1fr; }
  .nav-item:not(.active),.logout-button { display:none; }
  .main-content { width:calc(100% - 28px); padding:28px 0 60px; }
  .company-row { grid-template-columns:1fr auto; gap:8px; }
  .company-row time,.row-arrow { display:none; }
  .detail-header { display:grid; }
  .panel { padding:16px; }
  dl { display:grid; grid-template-columns:1fr 1fr; }
}