body:not(.has-app-shell) { background: var(--color-surface-mist); color: var(--color-text); }
.navbar {
  min-height: 64px;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
  background: rgb(255 255 255 / 96%);
}
.retained-brand { width: 176px; height: 54px; display: grid; place-items: center; overflow: hidden; }
.retained-brand .brand-logo { width: 168px; height: auto; }
.me-container, .admin-container { max-width: var(--content-max); }
.me-hero, .summary-card, .table-card, .admin-card, .modal-card {
  border-color: var(--color-border);
  box-shadow: var(--shadow-control);
}
.me-hero { background: linear-gradient(90deg, var(--color-surface), var(--color-spectrum-soft)); }
.summary-card--blue, .summary-card--violet { border-top-color: var(--color-brand-bright); }
/* Company details have a header and field grid, unlike the usage statistic cards. */
#company-info-section .summary-card { display: block; }
#company-info-section #ci-name { overflow-wrap: anywhere; }
.tab.active { color: var(--color-brand-deep); border-bottom-color: var(--color-brand-bright); }
.btn-sm:not(.danger), .month-nav-btn { border-color: var(--color-border-strong); }
.btn-sm:not(.outline):not(.danger) { background: var(--color-brand-deep); color: #fff; }
.btn-sm:not(.outline):not(.danger):hover { background: var(--color-brand-deep-hover); }
table thead { background: var(--color-surface-subtle); }
tbody tr:hover td { background: color-mix(in srgb, var(--color-brand-bright) 5%, white) !important; }

/* Frame 5:558 — the administration surface uses the shared Lumify desktop shell. */
@media (min-width: 1021px) {
  body.has-app-shell { min-height: 100vh; background: #dff2ff url("/static/assets/figma/frame1/page-background.png") center bottom / cover no-repeat fixed; }
  body.has-app-shell .app-sidebar { width: 235px; padding: 20px 18px 16px; background: transparent; border: 0; }
  body.has-app-shell .app-sidebar__header { min-height: 79px; }
  body.has-app-shell .app-sidebar__brand { width: 180px; height: 58px; }
  body.has-app-shell .app-sidebar__hide { display: none; }
  body.has-app-shell .app-sidebar__nav { gap: 2px; }
  body.has-app-shell .app-nav-item { min-height: 40px; padding: 10px 12px; color: #545454; border-radius: 8px; font-size: 14px; }
  body.has-app-shell .app-nav-item.is-active { color: #1e1e1e; background: #fff; box-shadow: none; }
  body.has-app-shell .app-nav-item svg { width: 16px; height: 16px; }
  body.has-app-shell .app-sidebar__footer { border-top: 1px solid #e8e8e8; padding: 16px 12px 0; }
  body.has-app-shell .app-main { height: min(848px, calc(100dvh - 40px)); min-height: 0; margin: 20px 20px 20px 235px; border: 0; border-radius: 28px; background: linear-gradient(180deg, #fff 0%, rgb(255 255 255 / 77%) 100%); box-shadow: none; }
  body.has-app-shell .app-container.admin-container { width: 100%; max-width: none; padding: 24px; }
  body.has-app-shell .app-container.me-container { width: 100%; max-width: none; padding: 38px 36px 40px; }

  body.has-app-shell .beta-figma-brand { display: grid; width: 154px; height: 52px; grid-template-columns: 33px 1fr; grid-template-rows: 24px 16px; column-gap: 7px; align-items: center; }
  body.has-app-shell .beta-figma-brand > img { width: 33px; height: 39px; grid-row: 1 / 3; object-fit: cover; }
  body.has-app-shell .beta-figma-brand span { display: block; width: 89px; height: 24px; }
  body.has-app-shell .beta-figma-brand span img { display: block; width: 89px; height: 24px; }
  body.has-app-shell .beta-figma-brand small { color: #4f4f4f; font-size: 10px; line-height: 16px; white-space: nowrap; }

  .admin-container { position: relative; }
  .admin-container .page-header-row {
    position: static;
    margin: 0 0 var(--space-6);
  }
  .admin-page-heading { display: block; }

  .tab-bar { width: 100%; }
  .tab-bar-primary { height: 30px; margin: 0; gap: 46px; }
  .tab-bar-primary .tab { padding: 0; color: #111; border: 0; font-size: 20px; font-weight: 500; line-height: 24px; }
  .tab-bar-primary .tab.active { color: #4172e4; }
  .tab-bar-sub { min-height: 42px; margin: 0 0 12px; gap: 46px; border-bottom: 1px solid #dedede; }
  .tab-bar-sub .tab { height: 42px; margin: 0; padding: 0; color: #666; border-bottom: 3px solid transparent; font-size: 15px; font-weight: 500; line-height: 32px; }
  .tab-bar-sub .tab.active { color: #111; border-bottom-color: #4172e4; }

  .table-card { overflow: visible; border-radius: 0; background: transparent; box-shadow: none; }
  .users-filter-bar { min-height: 34px; padding: 0; border: 0; background: transparent; }
  .users-filter-bar .filter-label { display: none; }
  .filter-segment { gap: 0; }
  .filter-segment-btn { width: 80px; height: 28px; padding: 0; border: .5px solid #c8c8c8; border-radius: 0; color: #737373; background: rgb(254 254 255 / 88%); font-size: 14px; font-weight: 400; }
  .filter-segment-btn:first-child { border-radius: 2px 0 0 2px; }
  .filter-segment-btn:last-child { border-radius: 0 2px 2px 0; }
  .filter-segment-btn.active { border-color: #4172e4; color: #fff; background: #4172e4; }
  .filter-count { display: none; }
  .table-card table { margin-top: 13px; font-size: 14px; }
  .table-card thead { height: 54px; background: rgb(232 239 247 / 40%); }
  .table-card th { height: 54px; padding: 0 16px; color: #8a8a8a; font-size: 12px; font-weight: 400; letter-spacing: -.2px; text-transform: none; white-space: nowrap; }
  .table-card td { height: 54px; padding: 0 16px; color: #333; border-top: 1px solid #dedede; vertical-align: middle; }
  .table-card tbody tr:hover td { background: rgb(255 255 255 / 58%) !important; }
  .badge { padding: 0; color: #333; background: transparent; font-size: 14px; font-weight: 400; }
  .badge-active::before, .badge-inactive::before { display: inline-block; width: 11px; height: 11px; margin-right: 8px; border-radius: 50%; background: #55c96f; content: ""; vertical-align: -1px; }
  .badge-inactive::before { background: #d4d4d4; }
  .badge-owner, .badge-admin, .badge-operator, .badge-super_admin, .badge-company_owner, .badge-company_member, .badge-warn { color: #333; background: transparent; }
  .action-btns { gap: 18px; }
  .action-btns .btn-sm { min-height: 0; padding: 0; border: 0; color: #4172e4; background: transparent; font-size: 14px; font-weight: 400; }
  .action-btns .btn-sm:hover { color: #2c5cc5; background: transparent; }

  /* Frame 11:284 — account usage keeps the Sidebar but uses the Frame's content rhythm. */
  .me-container { position: relative; }
  .me-hero { margin: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .me-hero-inner { min-height: 53px; padding: 0; gap: 16px; }
  .me-hero-avatar { width: 53px; height: 53px; border: 0; background: linear-gradient(145deg, #d9e8fb, #8db8ec); box-shadow: inset 0 0 0 1px rgb(32 74 126 / 8%); color: #fff; font-size: 24px; }
  .me-hero-avatar-ring, .me-hero-deco { display: none; }
  .me-hero-name { color: #111; font-size: 24px; font-weight: 500; line-height: 29px; }
  .me-hero-meta { gap: 8px; margin-top: 2px; }
  .me-hero-uname { color: #4172e4; font-size: 15px; }
  .me-hero .badge { color: #333; font-size: 14px; }
  #company-info-section { margin: 20px 0 18px !important; }

  .control-strip { min-height: 42px; margin: 26px 0 12px; border-bottom: 1px solid #dedede; }
  .control-strip .tab-bar { gap: 46px; width: auto; }
  .control-strip .tab { height: 42px; margin: 0; padding: 0; color: #666; border-bottom: 3px solid transparent; font-size: 15px; font-weight: 500; line-height: 32px; }
  .control-strip .tab.active { color: #111; border-bottom-color: #4172e4; }
  .me-container .month-nav { gap: var(--space-3); padding: 0; margin: 0 0 6px auto; }
  .me-container .month-selector { display: inline-flex; align-items: center; height: var(--control-height-md); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); }
  .me-container .month-nav-btn { display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--color-text-secondary); background: transparent; }
  .me-container .month-nav-btn:hover:not(:disabled) { background: var(--color-surface-subtle); border-color: var(--color-brand-bright); }
  .me-container .month-nav-btn:disabled { color: var(--color-text-muted); cursor: not-allowed; }
  .me-container .month-nav-btn img { display: block; width: 20px; height: 20px; }
  .me-container .month-nav-btn--prev img { transform: scaleX(-1); }
  .me-container .month-label { min-width: 102px; color: var(--color-text); font-size: var(--font-size-md); font-weight: 600; text-align: center; }
  .me-container #export-csv-btn { min-height: var(--control-height-md); margin-left: 0; }
  .me-container #export-csv-btn img { display: block; width: 18px; height: 18px; }

  .me-container .summary-cards { gap: var(--space-5); margin: 0 0 var(--space-6); }
  .me-container .summary-card { display: grid; min-height: 120px; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: 24px 1fr; column-gap: 12px; padding: 20px; border: 1px solid var(--color-border); border-top-width: 1px; border-radius: var(--radius-md); background: linear-gradient(180deg, #DFEBF9, #FFFFFF); box-shadow: none; }
  .summary-card-icon { display: grid; width: 24px; height: 24px; grid-column: 1; grid-row: 1; margin: 0; place-items: center; border-radius: 0; background: transparent !important; color: #333 !important; }
  .summary-card-icon img { display: block; width: 24px; height: 24px; }
  .summary-label { display: flex; grid-column: 2; grid-row: 1; align-items: center; margin: 0; color: #333; font-size: 14px; font-weight: 500; letter-spacing: -.2px; text-transform: none; }
  .summary-value { grid-column: 1 / -1; grid-row: 2; align-self: end; margin: 0 0 1px; color: #111; font-size: 32px; font-weight: 600; }
  .summary-unit { color: #333; font-size: 14px; }

  .me-container .table-card { margin-top: 0; }
  .me-container .table-scroll { max-height: 396px; border-radius: 0; }
  .me-container .table-card table { margin-top: 0; }
  .me-container .table-card thead { height: 53px; background: rgb(232 239 247 / 40%); }
  .me-container .table-card th { height: 53px; padding: 0 20px; color: #8a8a8a; font-size: 12px; font-weight: 400; letter-spacing: -.2px; text-transform: none; }
  .me-container .table-card td { height: 53px; padding: 0 20px; color: #555; border-top: 1px solid #dedede; }
}

.admin-table-wrap { overflow-x: auto; }
.admin-table-wrap > table { min-width: 860px; }

/* ── Company 管理関連 ────────────────────────────────────── */
.company-name { font-weight: 600; color: #0F172A; }
.quota-near-limit { color: #C2410C; font-weight: 600; }
.quota-exceeded   { color: #DC2626; font-weight: 700; }
.badge-plan { background: #EFF6FF; color: #2563EB; }

.company-quota { min-width: 140px; }
.company-quota-track { height: 4px; margin-top: 7px; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-surface-subtle); }
.company-quota-fill { display: block; height: 100%; border-radius: inherit; background: var(--color-brand-bright); }
.quota-near-limit .company-quota-fill { background: var(--color-warning); }
.quota-exceeded .company-quota-fill { background: var(--color-danger); }

/* Company table actions retain a compact secondary control at desktop scale. */
#companies-tbody .action-btns .company-action-button {
  min-height: var(--control-height-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-brand-deep);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1;
}

#companies-tbody .action-btns .company-action-button:hover {
  border-color: var(--color-brand-bright);
  color: var(--color-brand-deep);
  background: var(--color-surface-subtle);
}

#companies-tbody .action-btns .company-action-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-focus-ring) 62%, transparent);
  outline-offset: 2px;
}