/* ==========================================
   VENDOR PORTAL - TEAM MEMBERS
   担当者管理ページ
========================================== */

.vmem-page {
    --vm-blue: #0788f5;
    --vm-navy: #102f60;
    --vm-text: #345679;
    --vm-muted: #748ca7;
    --vm-border: #dceaf7;
  
    width: 100%;
    min-width: 0;
    padding-bottom: 75px;
    background: #f7fbff;
    color: var(--vm-navy);
  }
  
  .vmem-page *,
  .vmem-page *::before,
  .vmem-page *::after {
    box-sizing: border-box;
  }
  
  .vmem-container {
    width: min(100% - 36px, 1200px);
    max-width: 1200px;
    margin: 25px auto 0;
  }
  
  /* ==========================================
     共通カード
  ========================================== */
  
  .vmem-page .vmem-card {
    width: 100%;
    min-width: 0;
    margin: 0 0 20px;
    padding: 25px;
    border: 1px solid #deebf7;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 8px 32px rgba(32, 100, 172, .06);
  }
  
  /* ==========================================
     カード見出し
  ========================================== */
  
  .vmem-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 21px;
  }
  
  .vmem-header-main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
    min-width: 0;
  }
  
  .vmem-heading-icon {
    display: grid;
    place-items: center;
    flex: 0 0 49px;
    width: 49px;
    height: 49px;
    border-radius: 50%;
    background: linear-gradient(140deg, #50beff, #168cf0);
    color: #fff;
    box-shadow: 0 5px 13px rgba(15, 134, 232, .15);
  }
  
  .vmem-heading-icon svg {
    width: 25px;
    height: 25px;
  }
  
  .vmem-header-text {
    min-width: 0;
  }
  
  .vmem-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #168cf0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
  }
  
  .vmem-header-text h1,
  .vmem-header-text h2 {
    margin: 0 0 7px;
    color: #102f60;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.45;
  }
  
  .vmem-header-text p {
    margin: 0;
    color: #7089a6;
    font-size: 12px;
    line-height: 1.85;
  }
  
  .vmem-member-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border: 1px solid #d5eafa;
    border-radius: 25px;
    background: #f0f8ff;
    color: #087cda;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }
  
  .vmem-member-count span {
    color: #18a2f5;
    font-size: 9px;
  }
  
  /* ==========================================
     担当者権限の案内
  ========================================== */
  
  .vmem-role-notice {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid #d8e9f9;
    border-radius: 10px;
    background: #eef8ff;
  }
  
  .vmem-role-notice-icon {
    display: grid;
    place-items: center;
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #168cf0;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
  }
  
  .vmem-role-notice p {
    margin: 0;
    color: #476b8e;
    font-size: 12px;
    line-height: 1.9;
  }
  
  /* ==========================================
     メンバーテーブル
  ========================================== */
  
  .vmem-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c4dced #eef7ff;
  }
  
  .vmem-page .vmem-table {
    width: 100%;
    min-width: 850px;
    margin: 0;
    border: 1px solid #dce9f7;
border-collapse: collapse;
    border-spacing: 0;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
  }
  
  .vmem-page .vmem-table th,
  .vmem-page .vmem-table td {
    padding: 14px 15px;
    border: 0;
    border-right: 1px solid #e3edf7;
    border-bottom: 1px solid #e3edf7;
    color: #28496c;
    font-size: 12px;
    line-height: 1.75;
    vertical-align: middle;
    text-align: left;
  }
  
  .vmem-page .vmem-table thead th {
    padding: 15px;
    background: #eff7ff;
    color: #1b406a;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }
  
  .vmem-page .vmem-table tr > :last-child {
    border-right: 0;
  }
  
  .vmem-page .vmem-table tbody tr:last-child td {
    border-bottom: 0;
  }
  
  .vmem-page .vmem-table tbody tr:nth-child(even) {
    background: #fafcff;
  }
  
  .vmem-page .vmem-table tbody tr:hover {
    background: #f4faff;
  }
  
  .vmem-name-cell {
    min-width: 225px;
  }
  
  .vmem-member-name {
    color: #183e68;
    font-size: 13px;
    font-weight: 800;
  }
  
  /* 名前の編集フォーム */
  .vmem-page .vmem-name-form {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    vertical-align: middle;
  }
  
  .vmem-page .vmem-name-input {
    width: 125px;
    min-width: 90px;
    max-width: 160px;
    height: 37px;
    min-height: 37px;
    margin: 0;
    padding: 7px 10px;
    border: 1px solid #d2e1ef;
    border-radius: 7px;
    background: #fff;
    color: #214769;
    font-family: inherit;
    font-size: 12px;
  }
  
  .vmem-page .vmem-name-input:focus {
    outline: none;
    border-color: #168cf0;
    box-shadow: 0 0 0 3px rgba(22,140,240,.1);
  }
  
  .vmem-page .vmem-save-button {
    min-height: 35px;
    margin: 0;
    padding: 6px 11px;
    border: 1px solid #168cf0;
    border-radius: 7px;
    background: #fff;
    color: #087ce0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
  }
  
  .vmem-page .vmem-save-button:hover {
    background: #edf7ff;
  }
  
  /* 本人バッジ */
  .vmem-page .vmem-self-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 7px;
    padding: 3px 10px;
    border: 1px solid #cdeaff;
    border-radius: 20px;
    background: #e6f6ff;
    color: #0a86e3;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }
  
  /* 権限バッジ */
  .vmem-page .vmem-badge-admin,
  .vmem-page .vmem-badge-member {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }
  
  .vmem-page .vmem-badge-admin {
    border: 1px solid #cbe7f8;
    background: #e7f6ff;
    color: #087ad8;
  }
  
  .vmem-page .vmem-badge-member {
    border: 1px solid #e0e8f0;
    background: #f2f5f9;
    color: #637e97;
  }
  
  /* メール・日付 */
  .vmem-page .vmem-email {
    color: #315477;
    overflow-wrap: anywhere;
  }
  
  .vmem-page .vmem-date {
    color: #68819e;
    font-variant-numeric: tabular-nums;
  }
  
  /* ==========================================
     管理者切り替え・削除
  ========================================== */
  
  .vmem-page .vmem-actions {
    min-width: 200px;
  }
  
  .vmem-page .vmem-actions .vp-inline-form {
    display: inline-block;
    margin: 3px 5px 3px 0;
    vertical-align: middle;
  }
  
  .vmem-page .vmem-role-button,
  .vmem-page .vmem-delete-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 0;
    padding: 6px 10px;
    border-radius: 7px;
    background: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.45;
    white-space: nowrap;
    cursor: pointer;
  }
  
  .vmem-page .vmem-role-button {
    border: 1px solid #168cf0;
    color: #087de2;
  }
  
  .vmem-page .vmem-role-button:hover {
    background: #edf7ff;
  }
  
  .vmem-page .vmem-delete-button {
    border: 1px solid #f4aeb6;
    color: #eb4e65;
  }
  
  .vmem-page .vmem-delete-button:hover {
    background: #fff3f4;
  }
  
  .vmem-action-empty {
    color: #9aabba;
    font-size: 11px;
  }
  
  /* 最後の管理者 */
  .vmem-locked {
    max-width: 240px;
    padding: 9px 11px;
    border: 1px solid #f0e1ba;
    border-radius: 8px;
    background: #fffaf0;
  }
  
  .vmem-locked-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #a37b1d;
    font-size: 11px;
    font-weight: 800;
  }
  
  .vmem-locked-title span {
    font-size: 8px;
  }
  
  .vmem-locked p {
    margin: 5px 0 0;
    color: #99865b;
    font-size: 10px;
    line-height: 1.65;
  }
  
  /* ==========================================
     見積依頼アドレスの補足
  ========================================== */
  
  .vmem-mail-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 20px;
    padding: 19px 20px;
    border: 1px solid #cde7fa;
    border-left: 3px solid #168cf0;
    border-radius: 3px;
    background: #eef8ff;
  }
  
  .vmem-notice-icon {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    color: #168cf0;
  }
  
  .vmem-notice-icon svg {
    width: 25px;
    height: 25px;
  }
  
  .vmem-mail-notice h3 {
    margin: 0 0 9px;
    color: #194472;
    font-size: 14px;
    font-weight: 800;
  }
  
  .vmem-mail-notice p {
    margin: 0 0 7px;
    color: #527391;
    font-size: 12px;
    line-height: 1.85;
  }
  
  .vmem-mail-notice p:last-child {
    margin-bottom: 0;
  }
  
  .vmem-mail-notice a {
    color: #0780df;
    font-weight: 800;
    text-underline-offset: 3px;
  }
  
  /* ==========================================
     担当者管理ルール
  ========================================== */
  
  .vmem-rules {
    margin-top: 19px;
    padding: 17px 19px;
    border: 1px solid #e6edf5;
    border-radius: 5px;
    background: #fafcff;
  }
  
  .vmem-rules-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 11px;
  }
  
  .vmem-rules-heading > span {
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #e2f4ff;
    color: #168cf0;
    font-size: 13px;
    font-weight: 800;
  }
  
  .vmem-rules-heading h3 {
    margin: 0;
    color: #21486f;
    font-size: 13px;
    font-weight: 800;
  }
  
  .vmem-page .vmem-rules-list {
    margin: 0;
    padding-left: 20px;
    list-style: disc;
  }
  
  .vmem-page .vmem-rules-list li {
    margin: 0 0 6px;
    padding: 0;
    color: #6a819a;
    font-size: 11px;
    line-height: 1.85;
  }
  
  .vmem-page .vmem-rules-list li:last-child {
    margin-bottom: 0;
  }
  
  .vmem-page .vmem-rules-list li::marker {
    color: #168cf0;
  }
  
  /* ==========================================
     担当者招待カード
  ========================================== */
  
  .vmem-page .vmem-invite-card {
    margin-top: 19px;
  }
  
  .vmem-invite-body {
    padding-left: 65px;
  }
  
  .vmem-invite-form {
    display: flex;
    align-items: flex-end;
    gap: 13px;
    width: 100%;
  }
  
  .vmem-invite-input-group {
    flex: 1;
    min-width: 0;
  }
  
  .vmem-invite-label {
    display: block;
    margin-bottom: 8px;
    color: #274968;
    font-size: 12px;
    font-weight: 800;
  }
  
  .vmem-page .vmem-invite-input {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 10px 15px;
    border: 1px solid #cedeed;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: #224365;
    font-family: inherit;
    font-size: 14px;
  }
  
  .vmem-page .vmem-invite-input:focus {
    border-color: #168cf0;
    box-shadow: 0 0 0 4px rgba(22,140,240,.1);
  }
  
  .vmem-page .vmem-invite-input::placeholder {
    color: #9fb0c3;
  }
  
  .vmem-page .vmem-invite-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 46px;
    margin: 0;
    padding: 11px 22px;
    border: 1px solid #0878ed;
    border-radius: 9px;
    background: linear-gradient(180deg, #32a9ff, #087bf0);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 7px 17px rgba(14,130,225,.13);
    cursor: pointer;
  }
  
  .vmem-page .vmem-invite-submit:hover {
    filter: brightness(.97);
  }
  
  .vmem-invite-caption {
    margin-top: 11px;
    color: #8195ad;
    font-size: 11px;
    line-height: 1.85;
  }
  
  .vmem-invite-caption > span {
    margin-right: 5px;
    color: #168cf0;
  }
  
  .vmem-invite-caption strong {
    color: #51789d;
  }
  
  /* ==========================================
     タブレット
  ========================================== */
  
  @media (max-width: 950px) {
    .vmem-container {
      width: calc(100% - 28px);
    }
  
    .vmem-page .vmem-card {
      padding: 20px;
    }
  
    .vmem-invite-body {
      padding-left: 0;
    }
  }
  
  /* ==========================================
     スマートフォン
  ========================================== */
  
  @media (max-width: 640px) {
    .vmem-page {
      padding-bottom: 45px;
    }
  
    .vmem-container {
      width: calc(100% - 26px);
      margin-top: 17px;
    }
  
    .vmem-page .vmem-card {
      padding: 17px 13px;
      margin-bottom: 14px;
      border-radius: 12px;
    }
  
    .vmem-card-header {
      align-items: flex-start;
      gap: 12px;
    }
  
    .vmem-header-main {
      gap: 11px;
    }
  
    .vmem-heading-icon {
      flex-basis: 40px;
      width: 40px;
      height: 40px;
    }
  
    .vmem-heading-icon svg {
      width: 21px;
      height: 21px;
    }
  
    .vmem-header-text h1,
    .vmem-header-text h2 {
      font-size: 19px;
    }
  
    .vmem-header-text p {
      font-size: 11px;
    }
  
    .vmem-member-count {
      margin-left: 51px;
    }
  
    .vmem-page .vmem-table th,
    .vmem-page .vmem-table td {
      padding: 11px;
      font-size: 11px;
    }
  
    .vmem-mail-notice {
      gap: 9px;
      padding: 13px;
    }
  
    .vmem-mail-notice h3 {
      font-size: 12px;
    }
  
    .vmem-mail-notice p {
      font-size: 11px;
    }
  
    .vmem-rules {
      padding: 13px;
    }
  
    .vmem-invite-form {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }
  
    .vmem-page .vmem-invite-input {
      font-size: 16px;
    }
  
    .vmem-page .vmem-invite-submit {
      width: 100%;
    }
  
    .vmem-invite-caption {
      font-size: 10px;
    }
  }
  
  /* ==========================================
     アクセシビリティ
  ========================================== */
  
  .vmem-page a:focus-visible,
  .vmem-page button:focus-visible,
  .vmem-page input:focus-visible {
    outline: 3px solid #168cf0;
    outline-offset: 3px;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .vmem-page *,
    .vmem-page *::before,
    .vmem-page *::after {
      transition: none !important;
    }
  }
  
/* ==========================================
   VENDOR PORTAL - LOGO MANAGEMENT
========================================== */

.vlog-page {
    --vlog-blue: #0788f5;
    --vlog-navy: #102f60;
    --vlog-muted: #758ca6;
    --vlog-line: #dce9f6;
  
    width: 100%;
    min-width: 0;
    padding-bottom: 75px;
    background: #f7fbff;
    color: var(--vlog-navy);
  }
  
  .vlog-page *,
  .vlog-page *::before,
  .vlog-page *::after {
    box-sizing: border-box;
  }
  
  .vlog-container {
    width: min(100% - 36px, 1200px);
    margin: 27px auto 0;
  }
  
  /* ページ見出し */
  .vlog-page-heading {
    margin-bottom: 23px;
  }
  
  .vlog-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: #168cf0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
  }
  
  .vlog-title-row {
    display: flex;
    align-items: center;
    gap: 17px;
  }
  
  .vlog-main-icon,
  .vlog-section-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: #fff;
    background: linear-gradient(135deg, #50bfff, #087eeb);
  }
  
  .vlog-main-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
  }
  
  .vlog-main-icon svg {
    width: 31px;
    height: 31px;
  }
  
  .vlog-page-heading h1 {
    margin: 0;
    color: #103565;
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 800;
  }
  
  .vlog-page-heading p {
    margin: 7px 0 0;
    color: #7089a5;
    font-size: 13px;
    line-height: 1.85;
  }
  
  /* 共通カード */
  .vlog-page .vlog-card,
  .vlog-rules-card {
    margin-bottom: 20px;
    padding: 27px;
    border: 1px solid #dfebf7;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 9px 32px rgba(36, 104, 171, .055);
  }
  
  /* アップロードルール */
  .vlog-rules-card {
    background: linear-gradient(135deg, #f0f9ff, #fff);
  }
  
  .vlog-rules-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
  }
  
  .vlog-rules-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: #e2f2ff;
    color: #168cf0;
  }
  
  .vlog-rules-icon svg {
    width: 23px;
    height: 23px;
  }
  
  .vlog-rules-heading h2 {
    margin: 0;
    color: #1b4470;
    font-size: 17px;
    font-weight: 800;
  }
  
  .vlog-rules-heading p {
    margin: 4px 0 0;
    color: #738da8;
    font-size: 12px;
  }
  
  .vlog-rules-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  
  .vlog-rule-item {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding: 17px;
    border: 1px solid #dbeafa;
    border-radius: 5px;
    background: rgba(255, 255, 255, .9);
  }
  
  .vlog-rule-label {
    color: #7591aa;
    font-size: 11px;
    font-weight: 700;
  }
  
  .vlog-rule-item strong {
    color: #174875;
    font-size: 14px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  
  .vlog-rule-item small {
    color: #8b9db0;
    font-size: 11px;
    line-height: 1.7;
  }
  
  .vlog-rules-footer {
    margin: 15px 0 0;
    color: #637f9a;
    font-size: 12px;
    line-height: 1.8;
  }
  
  /* セクション見出し */
  .vlog-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 23px;
  }
  
  .vlog-card-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
  }
  
  .vlog-section-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
  }
  
  .vlog-section-icon svg {
    width: 24px;
    height: 24px;
  }
  
  .vlog-card-heading h2 {
    margin: 0;
    color: #153c6c;
    font-size: 21px;
    font-weight: 800;
  }
  
  .vlog-card-heading p {
    margin: 5px 0 0;
    color: #758da8;
    font-size: 12px;
    line-height: 1.8;
  }
  
  .vlog-status,
  .vlog-count {
    flex-shrink: 0;
    padding: 7px 13px;
    border-radius: 25px;
    background: #eff3f7;
    color: #768ba2;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }
  
  .vlog-status.is-registered {
    background: #e8f8ef;
    color: #15966e;
  }
  
  .vlog-count {
    background: #e9f5ff;
    color: #087fdf;
  }
  
  /* 画像プレビュー + アップロード */
  .vlog-upload-layout {
    display: grid;
    grid-template-columns: minmax(250px, 38%) minmax(0, 1fr);
    align-items: stretch;
    gap: 23px;
    padding: 10px;
  }
  
  .vlog-preview-area,
  .vlog-upload-area {
    min-width: 0;
  }
  
  .vlog-small-label {
    display: block;
    margin-bottom: 11px;
    color: #315576;
    font-size: 12px;
    font-weight: 800;
  }
  
  .vlog-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 230px;
    padding: 20px;
    border: 1px solid #dce9f6;
    border-radius: 5px;
    background-color: #f8fbff;
    background-image:
      linear-gradient(45deg, #edf3f8 25%, transparent 25%),
      linear-gradient(-45deg, #edf3f8 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #edf3f8 75%),
      linear-gradient(-45deg, transparent 75%, #edf3f8 75%);
    background-size: 20px 20px;
    background-position:
      0 0, 0 10px, 10px -10px, -10px 0;
  }
  
  .vlog-preview-image {
    display: block;
    max-width: 100%;
    max-height: 190px;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  
  .vlog-preview-empty {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  
  .vlog-empty-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: #e5f2fe;
    color: #8db6d9;
  }
  
  .vlog-empty-icon svg {
    width: 29px;
    height: 29px;
  }
  
  .vlog-preview-empty strong {
    color: #647e9a;
    font-size: 13px;
  }
  
  .vlog-preview-empty small {
    color: #91a4b7;
    font-size: 11px;
    line-height: 1.7;
  }
  
  /* フォーム */
  .vlog-upload-area h3 {
    margin: 2px 0 6px;
    color: #23486e;
    font-size: 16px;
    font-weight: 800;
  }
  
  .vlog-upload-area > p {
    margin: 0 0 17px;
    color: #8196ad;
    font-size: 12px;
    line-height: 1.8;
  }
  
  .vlog-upload-form {
    display: block;
  }
  
  .vlog-file-box {
    padding: 17px;
    border: 1px dashed #b8d6ee;
    border-radius: 5px;
    background: #f5faff;
    margin-bottom: 5px;
  }
  
  .vlog-file-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 18px;
    border: 1px solid #afd5f6;
    border-radius: 8px;
    background: #fff;
    color: #087ee0;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
  }
  
  .vlog-file-label > span {
    font-size: 18px;
    line-height: 1;
  }
  
  .vlog-file-label:hover {
    background: #eaf6ff;
  }
  
  .vlog-page .vlog-file-input {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 12px 0 0;
    color: #496985;
    font-family: inherit;
    font-size: 12px;
  }
  
  .vlog-file-input::file-selector-button {
    padding: 7px 11px;
    margin-right: 10px;
    border: 1px solid #c8dff2;
    border-radius: 7px;
    background: #fff;
    color: #1a74be;
    font: inherit;
    cursor: pointer;
  }
  
  .vlog-file-box small {
    display: block;
    margin-top: 9px;
    color: #8a9fb3;
    font-size: 11px;
  }
  
  /* 承諾チェック */
  .vlog-page .vlog-consent {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 16px 0;
    color: #506d8a;
    font-size: 12px;
    line-height: 1.85;
    cursor: pointer;
  }
  
  .vlog-page .vlog-consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    margin: 2px 0 0;
    accent-color: #168cf0;
    cursor: pointer;
  }
  
  .vlog-page .logo-req {
    color: #e64b63;
    font-weight: 800;
  }
  
  /* 操作ボタン */
  .vlog-form-actions {
    margin-top: 16px;
  }
  
  .vlog-page .vlog-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 0;
    padding: 11px 25px;
    border: 1px solid #0783ed;
    border-radius: 9px;
    background: linear-gradient(180deg, #36acff, #087dec);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 7px 18px rgba(9, 125, 225, .16);
    cursor: pointer;
  }
  
  .vlog-page .vlog-primary-button:hover {
    filter: brightness(.97);
  }
  
  .vlog-page .vlog-delete-form {
    display: inline-block;
    margin: 14px 0 0;
  }
  
  .vlog-page .vlog-delete-button {
    min-height: 38px;
    padding: 8px 15px;
    border: 1px solid #eeb8c0;
    border-radius: 8px;
    background: #fff;
    color: #d94d62;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }
  
  .vlog-page .vlog-delete-button:hover {
    background: #fff2f4;
  }
  
  .vlog-consented {
    margin: 12px 0 0;
    color: #168866;
    font-size: 11px;
    line-height: 1.8;
  }
  
  /* サービスごとのロゴ */
  .vlog-page .vlog-service-list {
    display: grid;
    gap: 17px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .vlog-page .vlog-service-item {
    margin: 0;
    padding: 23px;
    border: 1px solid #dfebf7;
    border-radius: 0px;
    background: #fbfdff;
  }
  
  .vlog-service-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 19px;
    border-bottom: 1px solid #e7eff8;
    padding: 10px;
  }
  
  .vlog-service-header h3 {
    margin: 0 0 8px;
    color: #183f6d;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.6;
  }
  
  .vlog-category {
    display: inline-flex;
    padding: 5px 11px;
    border-radius: 20px;
    background: #edf5ff;
    color: #4c7ba6;
    font-size: 11px;
    font-weight: 700;
  }
  
  /* サービス未登録 */
  .vlog-empty-services {
    padding: 45px 20px;
    border: 1px dashed #d2e3f3;
    border-radius: 12px;
    background: #f8fbff;
    text-align: center;
  }
  
  .vlog-empty-services > span {
    color: #8fb8dd;
    font-size: 35px;
  }
  
  .vlog-empty-services p {
    margin: 8px 0 0;
    color: #8195ab;
    font-size: 13px;
  }
  
  /* ページ最下部 */
  .vlog-bottom-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 7px 20px;
    border: 1px solid #d9eafa;
    border-radius: 5px;
    background: #edf7ff;
  }
  
  .vlog-bottom-note > span {
    flex-shrink: 0;
    color: #168cf0;
    font-size: 22px;
    line-height: 1;
  }
  
  .vlog-bottom-note p {
    margin: 0;
    color: #587899;
    font-size: 12px;
    line-height: 1.85;
  }
  
  .vlog-bottom-note a {
    color: #087ddd;
    font-weight: 700;
  }
  
  /* タブレット */
  @media (max-width: 950px) {
    .vlog-rules-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  
    .vlog-upload-layout {
      grid-template-columns: minmax(180px, 35%) minmax(0, 1fr);
      gap: 16px;
    }
  
    .vlog-page .vlog-card,
    .vlog-rules-card {
      padding: 20px;
    }
  }
  
  /* スマートフォン */
  @media (max-width: 640px) {
    .vlog-page {
      padding-bottom: 45px;
    }
  
    .vlog-container {
      width: calc(100% - 26px);
      margin-top: 19px;
    }
  
    .vlog-title-row {
      align-items: flex-start;
      gap: 11px;
    }
  
    .vlog-main-icon {
      width: 47px;
      height: 47px;
      border-radius: 13px;
    }
  
    .vlog-main-icon svg {
      width: 25px;
      height: 25px;
    }
  
    .vlog-page-heading h1 {
      font-size: 22px;
    }
  
    .vlog-page-heading p {
      font-size: 11px;
    }
  
    .vlog-page .vlog-card,
    .vlog-rules-card {
      margin-bottom: 14px;
      padding: 17px 14px;
      border-radius: 12px;
    }
  
    .vlog-rules-grid {
      grid-template-columns: 1fr;
      gap: 9px;
    }
  
    .vlog-rule-item {
      padding: 13px;
    }
  
    .vlog-card-header {
      align-items: flex-start;
      gap: 9px;
    }
  
    .vlog-card-heading {
      align-items: flex-start;
      gap: 10px;
    }
  
    .vlog-section-icon {
      width: 39px;
      height: 39px;
    }
  
    .vlog-section-icon svg {
      width: 21px;
      height: 21px;
    }
  
    .vlog-card-heading h2 {
      font-size: 17px;
    }
  
    .vlog-card-heading p {
      font-size: 11px;
    }
  
    .vlog-upload-layout {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  
    .vlog-preview {
      min-height: 175px;
    }
  
    .vlog-page .vlog-service-item {
      padding: 15px 12px;
    }
  
    .vlog-service-header h3 {
      font-size: 15px;
    }
  
    .vlog-page .vlog-file-input {
      font-size: 11px;
    }
  
    .vlog-page .vlog-primary-button {
      width: 100%;
    }
  
    .vlog-bottom-note {
      padding: 13px;
      gap: 9px;
    }
  
    .vlog-bottom-note p {
      font-size: 11px;
    }
  }
  
  /* フォーカス */
  .vlog-page a:focus-visible,
  .vlog-page button:focus-visible,
  .vlog-page input:focus-visible,
  .vlog-page label:focus-within {
    outline: 2px solid #168cf0;
    outline-offset: 3px;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .vlog-page *,
    .vlog-page *::before,
    .vlog-page *::after {
      transition: none !important;
    }
  }
  
/* ==========================================
   VENDOR PORTAL - ADVERTISEMENT
   広告申込・掲載管理
========================================== */

.vads-page {
    --vads-blue: #0788f5;
    --vads-navy: #102f60;
    --vads-text: #395a7b;
    --vads-muted: #7a90aa;
    --vads-line: #dceaf7;
  
    width: 100%;
    min-width: 0;
    padding-bottom: 75px;
    background: #f6fbff;
    color: var(--vads-navy);
  }
  
  .vads-page,
  .vads-page *,
  .vads-page *::before,
  .vads-page *::after {
    box-sizing: border-box;
  }
  
  .vads-container {
    width: min(100% - 36px, 1200px);
    margin: 26px auto 0;
  }
  
  /* ページヘッダー */
  .vads-top {
    margin-bottom: 22px;
  }
  
  .vads-back {
    display: inline-block;
    margin-bottom: 20px;
    color: #1682df;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
  }
  
  .vads-back:hover {
    text-decoration: underline;
  }
  
  .vads-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  
  .vads-title-main {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
  }
  
  .vads-title-icon {
    display: grid;
    place-items: center;
    flex: 0 0 57px;
    width: 57px;
    height: 57px;
    border-radius: 16px;
    background: linear-gradient(135deg, #4bbaff, #087af0);
    color: #fff;
    box-shadow: 0 7px 20px rgba(16, 127, 230, .17);
  }
  
  .vads-title-icon svg {
    width: 28px;
    height: 28px;
  }
  
  .vads-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #168cf0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
  }
  
  .vads-title-main h1 {
    margin: 0;
    color: #102f60;
    font-size: clamp(23px, 2.8vw, 30px);
    font-weight: 800;
  }
  
  .vads-title-main p {
    margin: 7px 0 0;
    color: #7189a5;
    font-size: 12px;
    line-height: 1.8;
  }
  
  .vads-title-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    flex-shrink: 0;
  }
  
  .vads-page .vads-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 35px;
    padding: 8px 19px;
    border: 1px solid #087bea;
    border-radius: 9px;
    background: linear-gradient(180deg, #35aaff, #0879ea);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 7px 17px rgba(18, 129, 232, .14);
  }
  
  .vads-page .vads-primary-button:hover {
    filter: brightness(.97);
  }
  
  /* 共通カード */
  .vads-page .vads-card {
    min-width: 0;
    margin: 0 0 19px;
    padding: 25px;
    border: 1px solid #deebf7;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 9px 30px rgba(36, 104, 174, .055);
  }
  
  .vads-section-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 21px;
  }
  
  .vads-heading-main {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
  }
  
  .vads-section-head-split {
    justify-content: space-between;
  }
  
  .vads-section-icon {
    display: grid;
    place-items: center;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: linear-gradient(135deg, #46b7ff, #087fee);
    color: #fff;
  }
  
  .vads-section-icon svg {
    width: 23px;
    height: 23px;
  }
  
  .vads-section-head h2 {
    margin: 0;
    color: #143a6a;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.5;
  }
  
  .vads-section-head p {
    margin: 5px 0 0;
    color: #7d92aa;
    font-size: 12px;
    line-height: 1.75;
  }
  
  .vads-date-note {
    padding: 6px 13px;
    border-radius: 20px;
    background: #edf6ff;
    color: #557fa4;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }
  
  /* 広告案内 */
  .vads-guide-card {
    background: linear-gradient(160deg, #fff 60%, #f5fbff 100%);
  }
  
  .vads-guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 13px;
  }
  
  .vads-guide-item {
    min-width: 0;
    padding: 10px 20px;
    border: 1px solid #e0edf9;
    border-radius: 5px;
    background: #f8fbff;
  }
  
  .vads-guide-label {
    display: block;
    margin-bottom: 10px;
    color: #168cf0;
    font-size: 11px;
    font-weight: 800;
  }
  
  .vads-guide-item strong {
    display: block;
    margin-bottom: 8px;
    color: #183e70;
    font-size: 17px;
    font-weight: 800;
  }
  
  .vads-guide-item p {
    margin: 0;
    color: #6b86a2;
    font-size: 12px;
    line-height: 1.85;
  }
  
  .vads-guide-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 17px;
  }
  
  .vads-guide-detail {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 17px;
    border: 1px solid #dcebf8;
    border-radius: 5px;
    background: #fff;
  }
  
  .vads-detail-icon {
    display: grid;
    place-items: center;
    flex: 0 0 35px;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    background: #e8f5ff;
    color: #1287e7;
  }
  
  .vads-detail-icon svg {
    width: 20px;
    height: 20px;
  }
  
  .vads-guide-detail h3 {
    margin: 0 0 8px;
    color: #24466e;
    font-size: 13px;
    font-weight: 800;
  }
  
  .vads-guide-detail p {
    margin: 0;
    color: #607c99;
    font-size: 12px;
    line-height: 1.95;
  }
  
  /* 申込フロー */
  .vads-flow-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .vads-flow-steps li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-width: 0;
    padding: 10px;
    border: 1px solid #e2edf8;
    border-radius: 5px;
    background: #fafcff;
  }
  
  .vads-step-num {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e4f3ff;
    color: #087fe7;
    font-size: 12px;
    font-weight: 900;
  }
  
  .vads-flow-steps strong {
    color: #2a4e76;
    font-size: 13px;
  }
  
  .vads-flow-steps p {
    margin: 7px 0 0;
    color: #8094ac;
    font-size: 11px;
    line-height: 1.8;
  }
  
  /* 警告・空状態 */
  .vads-warning {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 18px;
    padding: 19px 21px;
    border: 1px solid #f0dfac;
    border-radius: 12px;
    background: #fffbf0;
  }
  
  .vads-warning-icon {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f8c95c;
    color: #795100;
    font-weight: 900;
  }
  
  .vads-warning-content strong {
    color: #936719;
    font-size: 14px;
  }
  
  .vads-warning-content p {
    margin: 6px 0;
    color: #8a754d;
    font-size: 12px;
    line-height: 1.85;
  }
  
  .vads-warning-link {
    display: inline-block;
    margin-top: 7px;
    color: #b67a16;
    font-size: 12px;
    font-weight: 800;
  }
  
  .vads-empty-notice {
    margin-bottom: 18px;
    padding: 15px 18px;
    border: 1px solid #d7e9fb;
    border-radius: 5px;
    background: #edf7ff;
    color: #567b9a;
    font-size: 12px;
    line-height: 1.8;
  }
  
  .vads-empty-notice > span {
    margin-right: 7px;
    color: #168cf0;
    font-weight: 900;
  }
  
  .vads-empty {
    padding: 32px 20px;
    border: 1px dashed #d3e4f4;
    border-radius: 5px;
    background: #f9fcff;
    color: #7f96ac;
    font-size: 13px;
    text-align: center;
  }
  
  /* 横スクロールテーブル */
  .vads-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c4d9e9 #f0f8ff;
  }
  
  .vads-page .vads-table {
    width: 100%;
    margin: 0;
    border: 1px solid #dce8f5;
border-collapse: collapse;
    border-spacing: 0;
    border-radius: 5px;
    background: #fff;
  }
  
  .vads-page .vads-table th,
  .vads-page .vads-table td {
    padding: 13px 14px;
    border: 0;
    border-right: 1px solid #e3edf7;
    border-bottom: 1px solid #e3edf7;
    color: #345676;
    font-size: 12px;
    line-height: 1.85;
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
  }
  
  .vads-page .vads-table thead th {
    background: #edf7ff;
    color: #24466c;
    font-weight: 800;
    white-space: nowrap;
  }
  
  .vads-page .vads-table tr > :last-child {
    border-right: 0;
  }
  
  .vads-page .vads-table tbody tr:last-child td {
    border-bottom: 0;
  }
  
  .vads-page .vads-table tbody tr:hover {
    background: #f8fcff;
  }
  
  .vads-slots-table {
    min-width: 620px;
  }
  
  .vads-category-name strong {
    color: #214973;
    font-size: 13px;
  }
  
  .vads-slot-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    padding: 6px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
  }
  
  .vads-slot-status.is-open {
    background: #e8f8f0;
    color: #14966f;
  }
  
  .vads-slot-status.is-full {
    background: #fff1ed;
    color: #d86a4e;
  }
  
  /* 集計カード */
  .vads-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 15px;
  }
  
  .vads-metric {
    min-width: 0;
    padding: 7px 20px;
    border: 1px solid #dceaf8;
    border-radius: 5px;
    background: #f3f9ff;
  }
  
  .vads-metric:nth-child(2) {
    background: #f7faff;
  }
  
  .vads-metric-fee.is-free {
    border-color: #d2eee0;
    background: #effbf5;
  }
  
  .vads-metric-fee.is-paid {
    border-color: #d6e7fc;
    background: #edf5ff;
  }
  
  .vads-metric-label {
    margin-bottom: 12px;
    color: #65819f;
    font-size: 12px;
    font-weight: 800;
  }
  
  .vads-metric-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px;
  }
  
  .vads-metric-value strong {
    color: #104e92;
    font-size: clamp(24px, 3vw, 35px);
    font-weight: 600;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  
  .vads-metric-value span {
    color: #7189a1;
    font-size: 12px;
    font-weight: 800;
  }
  
  .vads-metric-fee.is-free .vads-metric-value strong {
    color: #12855f;
  }
  
  .vads-summary-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    padding: 15px 18px;
    border: 1px solid #d7eafb;
    border-radius: 5px;
    background: #f2f9ff;
  }
  
  .vads-summary-note-icon {
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #168cf0;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
  }
  
  .vads-summary-note strong {
    display: block;
    color: #2b537b;
    font-size: 12px;
  }
  
  .vads-summary-note p {
    margin: 5px 0 0;
    color: #6886a1;
    font-size: 12px;
    line-height: 1.8;
  }
  
  /* 申込一覧 */
  .vads-list-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 15px;
  }
  
  .vads-list-heading h3 {
    margin: 0;
    color: #16416d;
    font-size: 16px;
    font-weight: 800;
  }
  
  .vads-list-heading span {
    padding: 5px 11px;
    border-radius: 20px;
    background: #eaf5ff;
    color: #087cdb;
    font-size: 11px;
    font-weight: 800;
  }
  
  .vads-applications-table {
    min-width: 1080px;
  }
  
  .vads-page .vads-applications-table td {
    vertical-align: top;
  }
  
  .vads-service-name {
    display: block;
    color: #244976;
    font-size: 12px;
  }
  
  .vads-sub {
    margin-top: 5px;
    color: #8498ad;
    font-size: 11px;
    line-height: 1.75;
  }
  
  .vads-headline {
    min-width: 150px;
  }
  
  .vads-month-count {
    white-space: nowrap;
  }
  
  .vads-month-count strong {
    color: #10569d;
  }
  
  .vads-live-label {
    display: inline-block;
    margin-top: 7px;
    padding: 3px 9px;
    border-radius: 15px;
    background: #e7f8f0;
    color: #15916c;
    font-size: 10px;
    font-weight: 800;
  }
  
  .vads-page .vads-ad-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }
  
  .vads-pending-mark {
    margin-top: 7px;
    color: #c18327;
    font-size: 10px;
    font-weight: 800;
  }
  
  .vads-actions {
    min-width: 145px;
  }
  
  .vads-page .vads-actions form {
    display: block;
    margin: 6px 0 0;
  }
  
  .vads-page .vads-actions a {
    text-decoration: none;
  }
  
  .vads-page .vads-outline-button,
  .vads-page .vads-danger-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 34px;
    margin: 0 0 6px;
    padding: 7px 10px;
    border-radius: 7px;
    background: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
    cursor: pointer;
  }
  
  .vads-page .vads-outline-button {
    border: 1px solid #168cf0;
    color: #087fe0;
  }
  
  .vads-page .vads-outline-button:hover {
    background: #edf7ff;
  }
  
  .vads-page .vads-danger-button {
    border: 1px solid #f0bac2;
    color: #d94c62;
  }
  
  .vads-page .vads-danger-button:hover {
    background: #fff2f4;
  }
  
  .vads-detail-row td {
    padding: 12px !important;
    background: #fcfdff;
  }
  
  .vads-review-note {
    padding: 14px 17px;
    border: 1px solid #efcfcd;
    border-radius: 9px;
    background: #fff6f5;
    color: #9b5c58;
    font-size: 12px;
    line-height: 1.85;
  }
  
  .vads-review-note strong {
    color: #b54d4e;
  }
  
  .vads-revision-note {
    padding: 15px 17px;
    border: 1px solid #f0dfb5;
    border-radius: 9px;
    background: #fffbf1;
    color: #846b38;
    font-size: 12px;
    line-height: 1.85;
  }
  
  .vads-revision-note > strong {
    color: #9d7121;
  }
  
  .vads-revision-note p {
    margin: 7px 0;
  }
  
  .vads-change-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 6px;
    overflow-wrap: anywhere;
  }
  
  .vads-change-line strong {
    color: #925f17;
  }
  
  /* レスポンシブ */
  @media (max-width: 950px) {
    .vads-guide-grid,
    .vads-flow-steps {
      grid-template-columns: 1fr;
    }
  
    .vads-guide-details {
      grid-template-columns: 1fr;
    }
  
    .vads-title-row {
      align-items: flex-start;
      flex-direction: column;
    }
  
    .vads-title-actions {
      justify-content: flex-start;
    }
  }
  
  @media (max-width: 640px) {
    .vads-page {
      padding-bottom: 45px;
    }
  
    .vads-container {
      width: calc(100% - 26px);
      margin-top: 18px;
    }
  
    .vads-page .vads-card {
      margin-bottom: 14px;
      padding: 17px 14px;
      border-radius: 12px;
    }
  
    .vads-title-icon {
      flex-basis: 45px;
      width: 45px;
      height: 45px;
    }
  
    .vads-title-icon svg {
      width: 23px;
      height: 23px;
    }
  
    .vads-title-main h1 {
      font-size: 22px;
    }
  
    .vads-title-main p {
      font-size: 11px;
    }
  
    .vads-title-actions {
      width: 100%;
    }
  
    .vads-page .vads-primary-button {
      flex: 1;
    }
  
    .vads-section-head {
      align-items: flex-start;
      gap: 10px;
    }
  
    .vads-section-icon {
      flex-basis: 36px;
      width: 36px;
      height: 36px;
    }
  
    .vads-section-icon svg {
      width: 19px;
      height: 19px;
    }
  
    .vads-section-head h2 {
      font-size: 17px;
    }
  
    .vads-section-head p {
      font-size: 11px;
    }
  
    .vads-guide-item,
    .vads-guide-detail {
      padding: 15px;
    }
  
    .vads-metrics {
      grid-template-columns: 1fr;
      gap: 10px;
    }
  
    .vads-metric {
      padding: 17px;
    }
  
    .vads-metric-value strong {
      font-size: 28px;
    }
  
    .vads-page .vads-table th,
    .vads-page .vads-table td {
      padding: 11px;
      font-size: 11px;
    }
  
    .vads-warning {
      padding: 14px;
    }
  
    .vads-summary-note {
      padding: 13px;
    }
  }
  
  /* アクセシビリティ */
  .vads-page a:focus-visible,
  .vads-page button:focus-visible,
  .vads-page input:focus-visible,
  .vads-page [tabindex="0"]:focus-visible {
    outline: 3px solid #168cf0;
    outline-offset: 3px;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .vads-page *,
    .vads-page *::before,
    .vads-page *::after {
      transition: none !important;
    }
  }
  
/* ==========================================
   VENDOR PORTAL - COMPANY SETTINGS
========================================== */

.vset-page {
    --vset-blue: #168cf0;
    --vset-navy: #102f60;
    --vset-text: #355777;
    --vset-muted: #728ba5;
    --vset-border: #dce9f6;
  
    width: 100%;
    min-width: 0;
    padding-bottom: 80px;
    background: #f7fbff;
    color: var(--vset-navy);
  }
  
  .vset-page *,
  .vset-page *::before,
  .vset-page *::after {
    box-sizing: border-box;
  }
  
  .vset-container {
    width: min(100% - 36px, 1200px);
    margin: 27px auto 0;
  }
  
  /* ==========================================
     ページタイトル
  ========================================== */
  
  .vset-page-header {
    margin-bottom: 25px;
  }
  
  .vset-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--vset-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
  }
  
  .vset-page-title {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .vset-title-icon {
    display: grid;
    place-items: center;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: 17px;
    background: linear-gradient(135deg, #50bdff, #087bf0);
    color: #fff;
    box-shadow: 0 7px 20px rgba(17, 130, 227, .16);
  }
  
  .vset-title-icon svg {
    width: 29px;
    height: 29px;
  }
  
  .vset-page-title h1 {
    margin: 0;
    color: #113461;
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 800;
  }
  
  .vset-page-title p {
    margin: 7px 0 0;
    color: #728ba5;
    font-size: 13px;
    line-height: 1.8;
  }
  
  /* ==========================================
     共通カード
  ========================================== */
  
  .vset-page .vset-card {
    margin-bottom: 20px;
    padding: 28px 30px;
    border: 1px solid #deebf8;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 9px 32px rgba(35, 102, 171, .055);
  }
  
  .vset-card-header,
  .vset-card-header-main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  
  .vset-card-header {
    margin-bottom: 24px;
  }
  
  .vset-card-header-split {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .vset-card-header-main {
    min-width: 0;
  }
  
  .vset-section-icon {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #48b9ff, #087fea);
    color: #fff;
  }
  
  .vset-section-icon svg {
    width: 24px;
    height: 24px;
  }
  
  .vset-section-label {
    display: block;
    margin: 1px 0 5px;
    color: #168cf0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
  }
  
  .vset-card-header h2 {
    margin: 0;
    color: #153b69;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.5;
  }
  
  .vset-card-header p {
    margin: 6px 0 0;
    color: #718ba6;
    font-size: 12px;
    line-height: 1.8;
  }
  
  /* ==========================================
     現在の窓口アドレス
  ========================================== */
  
  .vset-current-email {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 25px;
    padding: 22px 25px;
    border: 1px solid #cce6fa;
    border-radius: 5px;
    background: linear-gradient(120deg, #edf8ff, #f8fcff);
  }
  
  .vset-current-email > div {
    min-width: 0;
  }
  
  .vset-current-email > div > span {
    display: block;
    margin-bottom: 9px;
    color: #6788a8;
    font-size: 12px;
    font-weight: 700;
  }
  
  .vset-current-email strong {
    display: block;
    color: #0b579c;
    font-size: clamp(17px, 2vw, 23px);
    font-weight: 800;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  
  .vset-email-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 22px;
    background: #e1f7ed;
    color: #168d66;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }
  
  .vset-email-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
  }
  
  .vset-email-status.is-unset {
    background: #fff0e7;
    color: #c77a38;
  }
  
  /* ==========================================
     フォーム
  ========================================== */
  
  .vset-form {
    display: block;
  }
  
  .vset-form-field {
    margin-bottom: 16px;
  }
  
  .vset-form-field label {
    display: block;
    margin-bottom: 10px;
    color: #24496e;
    font-size: 13px;
    font-weight: 800;
  }
  
  .vset-page .vset-input {
    display: block;
    width: 100%;
    min-height: 49px;
    margin: 0;
    padding: 12px 15px;
    border: 1px solid #cddfee;
    border-radius: 9px;
    background: #fff;
    color: #24476b;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
  }
  
  .vset-page .vset-input::placeholder {
    color: #9aacbe;
  }
  
  .vset-page .vset-input:focus {
    border-color: #168cf0;
    box-shadow: 0 0 0 4px rgba(22, 140, 240, .1);
  }
  
  /* 補足案内 */
  .vset-info-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 17px 0;
    padding: 5px 18px;
    border: 1px solid #d5eafb;
    border-radius: 5px;
    background: #f0f8ff;
  }
  
  .vset-info-note > span {
    display: grid;
    place-items: center;
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #168cf0;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
  }
  
  .vset-info-note p {
    margin: 0;
    color: #557895;
    font-size: 12px;
    line-height: 1.9;
  }
  
  /* 保存ボタン */
  .vset-page .vset-button-primary,
  .vset-page .vset-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 0;
    padding: 11px 25px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s, box-shadow .2s;
  }
  
  .vset-page .vset-button-primary {
    border: 1px solid #0879e9;
    background: linear-gradient(180deg, #38aaff, #087cf0);
    color: #fff;
    box-shadow: 0 7px 18px rgba(15, 126, 223, .15);
  }
  
  .vset-page .vset-button-primary:hover {
    filter: brightness(.97);
  }
  
  .vset-page .vset-button-secondary {
    border: 1px solid #168cf0;
    background: #fff;
    color: #087fdf;
  }
  
  .vset-page .vset-button-secondary:hover {
    background: #edf7ff;
  }
  
  /* ==========================================
     注文ルート
  ========================================== */
  
  .vset-route-options {
    display: grid;
    gap: 13px;
  }
  
  .vset-route-option {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 21px;
    border: 1px solid #dbe8f6;
    border-radius: 5px;
    background: #fafcff;
    cursor: pointer;
    transition: border-color .2s, background .2s;
  }
  
  .vset-route-option:hover {
    border-color: #91c9f5;
    background: #f4faff;
  }
  
  .vset-route-option:has(input:checked) {
    border-color: #168cf0;
    background: #f0f8ff;
    box-shadow: 0 0 0 1px rgba(22,140,240,.08);
  }
  
  .vset-page .vset-route-option input[type="radio"] {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: #168cf0;
    cursor: pointer;
  }
  
  .vset-route-content {
    display: block;
    min-width: 0;
  }
  
  .vset-route-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 9px;
  }
  
  .vset-route-heading strong {
    color: #183e6c;
    font-size: 15px;
    font-weight: 800;
  }
  
  .vset-route-description {
    display: block;
    color: #627f9c;
    font-size: 12px;
    line-height: 1.95;
  }
  
  .vset-recommended {
    padding: 4px 10px;
    border-radius: 20px;
    background: #e4f7ed;
    color: #11936c;
    font-size: 10px;
    font-weight: 800;
  }
  
  /* ==========================================
     個人の通知設定
  ========================================== */
  
  .vset-notify-option {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    padding: 21px;
    border: 1px solid #dce9f7;
    border-radius: 5px;
    background: #f8fbff;
    cursor: pointer;
  }
  
  .vset-notify-option:has(input:checked) {
    border-color: #b7defa;
    background: #f0f8ff;
  }
  
  .vset-page .vset-notify-option input[type="checkbox"] {
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    margin: 2px 0 0;
    accent-color: #168cf0;
    cursor: pointer;
  }
  
  .vset-notify-option > span {
    min-width: 0;
  }
  
  .vset-notify-option strong {
    display: block;
    margin-bottom: 8px;
    color: #1c456d;
    font-size: 14px;
    font-weight: 800;
  }
  
  .vset-notify-option small {
    display: block;
    color: #69839e;
    font-size: 12px;
    line-height: 1.9;
  }
  
  .vset-notify-address {
    display: inline-block;
    max-width: 100%;
    margin-top: 12px;
    padding: 8px 13px;
    border: 1px solid #deebf8;
    border-radius: 7px;
    background: #fff;
    color: #31618b;
    font-size: 12px;
    font-weight: 700;
    overflow-wrap: anywhere;
  }
  
  /* ==========================================
     担当者一覧
  ========================================== */
  
  .vset-page .vset-members-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 39px;
    padding: 8px 15px;
    border: 1px solid #168cf0;
    border-radius: 8px;
    background: #fff;
    color: #087fde;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
  }
  
  .vset-page .vset-members-link:hover {
    background: #edf7ff;
  }
  
  .vset-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #c8dfef #f2f8ff;
  }
  
  .vset-page .vset-table {
    width: 100%;
    min-width: 630px;
    margin: 0;
    border: 1px solid #deebf7;
border-collapse: collapse;
    border-spacing: 0;
    border-radius: 5px;
    background: #fff;
  }
  
  .vset-page .vset-table th,
  .vset-page .vset-table td {
    padding: 15px 17px;
    border: 0;
    border-right: 1px solid #e3edf7;
    border-bottom: 1px solid #e3edf7;
    color: #345676;
    font-size: 12px;
    line-height: 1.8;
    text-align: left;
    vertical-align: middle;
  }
  
  .vset-page .vset-table thead th {
    background: #edf7ff;
    color: #23496e;
    font-weight: 800;
    white-space: nowrap;
  }
  
  .vset-page .vset-table tr > :last-child {
    border-right: 0;
  }
  
  .vset-page .vset-table tbody tr:last-child td {
    border-bottom: 0;
  }
  
  .vset-page .vset-table tbody tr:nth-child(even) {
    background: #fbfdff;
  }
  
  .vset-page .vset-table td strong {
    color: #21476e;
    font-weight: 800;
  }
  
  .vset-email-cell {
    overflow-wrap: anywhere;
  }
  
  .vset-self-badge,
  .vset-unconfirmed {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }
  
  .vset-self-badge {
    background: #e5f5ff;
    color: #0782e6;
  }
  
  .vset-unconfirmed {
    background: #fff5e4;
    color: #c4882e;
  }
  
  .vset-notify-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }
  
  .vset-notify-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
  }
  
  .vset-notify-badge.is-on {
    background: #e8f8ef;
    color: #12936b;
  }
  
  .vset-notify-badge.is-off {
    background: #f1f4f7;
    color: #8495a8;
  }
  
  .vset-table-note {
    margin-bottom: 0;
  }
  
  /* ==========================================
     レスポンシブ
  ========================================== */
  
  @media (max-width: 950px) {
    .vset-page .vset-card {
      padding: 23px;
    }
  }
  
  @media (max-width: 640px) {
    .vset-page {
      padding-bottom: 45px;
    }
  
    .vset-container {
      width: calc(100% - 26px);
      margin-top: 19px;
    }
  
    .vset-page-title {
      align-items: flex-start;
      gap: 11px;
    }
  
    .vset-title-icon {
      flex-basis: 45px;
      width: 45px;
      height: 45px;
      border-radius: 13px;
    }
  
    .vset-title-icon svg {
      width: 23px;
      height: 23px;
    }
  
    .vset-page-title h1 {
      font-size: 23px;
    }
  
    .vset-page-title p {
      font-size: 11px;
    }
  
    .vset-page .vset-card {
      margin-bottom: 14px;
      padding: 18px 15px;
      border-radius: 12px;
    }
  
    .vset-card-header,
    .vset-card-header-main {
      gap: 10px;
    }
  
    .vset-section-icon {
      flex-basis: 38px;
      width: 38px;
      height: 38px;
    }
  
    .vset-section-icon svg {
      width: 20px;
      height: 20px;
    }
  
    .vset-card-header h2 {
      font-size: 17px;
    }
  
    .vset-card-header p {
      font-size: 11px;
    }
  
    .vset-current-email {
      align-items: flex-start;
      padding: 16px;
    }
  
    .vset-current-email strong {
      font-size: 16px;
    }
  
    .vset-page .vset-input {
      font-size: 16px;
    }
  
    .vset-page .vset-button-primary,
    .vset-page .vset-button-secondary {
      width: 100%;
    }
  
    .vset-route-option,
    .vset-notify-option {
      padding: 15px;
      gap: 11px;
    }
  
    .vset-route-heading strong {
      font-size: 13px;
    }
  
    .vset-route-description {
      font-size: 11px;
    }
  
    .vset-info-note {
      padding: 13px;
      gap: 9px;
    }
  
    .vset-info-note p {
      font-size: 11px;
    }
  
    .vset-page .vset-members-link {
      margin-left: 48px;
    }
  }
  
  /* アクセシビリティ */
  .vset-page a:focus-visible,
  .vset-page button:focus-visible,
  .vset-page input:focus-visible,
  .vset-page [tabindex="0"]:focus-visible {
    outline: 3px solid #168cf0;
    outline-offset: 3px;
  }
  
  @media (prefers-reduced-motion: reduce) {
    .vset-page *,
    .vset-page *::before,
    .vset-page *::after {
      transition: none !important;
    }
  }
  /* Company dashboard — scoped so that the shared navigation/footer remain unchanged */
.vdash-page{--vd-blue:#168cf0;--vd-deep:#103662;--vd-ink:#385a7a;--vd-muted:#758da6;--vd-line:#dce9f6;background:#f6faff;padding-bottom:88px;min-width:0;color:var(--vd-deep)}
.vdash-page,.vdash-page *,.vdash-page *::before,.vdash-page *::after{box-sizing:border-box}
.vdash-container{width:min(calc(100% - 40px),1200px);margin:30px auto 0}
.vdash-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:23px}
.vdash-eyebrow{display:block;margin-bottom:7px;color:#168cf0;font-size:11px;letter-spacing:.16em;font-weight:800}
.vdash-heading h1{margin:0;color:#102e5b;font-size:clamp(25px,3vw,34px);line-height:1.4;font-weight:800}
.vdash-heading p{margin:8px 0 0;color:#728aa3;font-size:13px;line-height:1.8}
.vdash-heading-mark{display:grid;place-items:center;flex:0 0 62px;height:62px;border-radius:17px;background:linear-gradient(140deg,#65c8ff,#1385ed);color:#fff;box-shadow:0 10px 24px rgba(12,113,210,.13)}
.vdash-heading-mark svg{width:29px;height:29px}
.vdash-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:22px}
.vdash-overview-card{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 10px 20px;
    border: 1px solid #dbeafb;
    border-radius: 5px;
    background: linear-gradient(145deg, #fff, #f2f9ff);
    box-shadow: 0 8px 25px rgba(29, 100, 174, .06);
    text-decoration: none;
    transition: transform .2s, border-color .2s;
}
.vdash-overview-card:hover{transform:translateY(-2px);border-color:#a6d1f5}
.vdash-overview-caption{color:#65829d;font-size:12px;font-weight:700}
.vdash-overview-value{color:#104e92;font-weight:600;font-size:clamp(27px,3vw,39px);line-height:1.3;font-variant-numeric:tabular-nums}
.vdash-overview-value small{font-size:13px;margin-left:5px;color:#7892ab}
.vdash-overview-action{margin-top:3px;color:#117cda;font-size:11px;font-weight:800}
.vdash-page .vdash-todo{display:flex;align-items:stretch;flex-wrap:wrap;gap:12px;margin:0 0 22px;padding:17px 19px;border:1px solid #dce9f8;border-radius:14px;background:#fff;box-shadow:0 6px 22px rgba(31,97,157,.04)}
.vdash-page .vp-todo-none{margin:0;color:#24846c;font-size:13px;font-weight:700}
.vdash-page .vp-todo-card{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 270px;
    min-width: 0;
    padding: 9px 18px;
    border: 1px solid #fae1cf;
    border-radius: 5px;
    background: #ffffef;
    text-decoration: none;
    margin-bottom: 10px;
}
.vdash-page .vp-todo-num{font-size:25px;line-height:1.2;font-weight:900;color:#087ce4}
.vdash-page .vp-todo-text{font-size:13px;color:#416a91}
.vdash-page .vdash-tabs{
    display: flex;
    gap: 5px;
    align-items: stretch;
    width: 100%;
    margin: 0 0 18px;
    padding: 7px;
    border: 1px solid #dfebf7;
    border-radius: 5px;
    background: #fff;
    overflow-x: auto;
    scrollbar-width: thin;
    box-shadow: 0 6px 20px rgba(37, 99, 158, .04);
}
.vdash-page .vdash-tabs .vp-tab{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:1 0 auto;min-height:46px;padding:10px 14px;border:0;border-radius:9px;color:#6b85a0;background:transparent;text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap}
.vdash-page .vdash-tabs .vp-tab:hover{background:#f1f8ff;color:#087de0}
.vdash-page .vdash-tabs .vp-tab.active{
    color: #fff !important;
    background: linear-gradient(135deg, #45b4ff, #087dec);
    box-shadow: 0 5px 14px rgba(22, 129, 225, .13);
}
.vdash-page .vp-tab-count{display:inline-grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border-radius:20px;background:#e6f4ff;color:#087edd;font-size:10px}
.vdash-page .vp-tab.active .vp-tab-count{color:#087edd;background:#fff}
.vdash-page .vdash-filter{display:flex;align-items:end;flex-wrap:wrap;gap:14px;margin-bottom:18px;padding:19px 21px;border:1px solid #dfebf7;border-radius:14px;background:#fff;box-shadow:0 7px 22px rgba(35,104,166,.04)}
.vdash-page .vp-filter-item{display:flex;flex:1 1 165px;flex-direction:column;gap:7px;min-width:0}
.vdash-page .vp-field-label{font-weight:800;color:#315373;font-size:12px}
.vdash-page .vdash-filter select{width:100%;min-height:44px;padding:9px 34px 9px 12px;border:1px solid #cfe0f0;border-radius:8px;background:#fff;color:#325577;font-family:inherit;font-size:13px}
.vdash-page .vp-filter-actions{display:flex;align-items:center;gap:8px}
.vdash-page .vp-filter-note{margin:-6px 0 18px;color:#587999;font-size:12px;line-height:1.8}
.vdash-page .vdash-panel{min-width:0;margin:0 0 21px;padding:24px 25px 27px;border:1px solid #dfebf7;border-radius:5px;background:#fff;box-shadow:0 9px 28px rgba(35,103,169,.055)}
.vdash-page .vp-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;margin:0 0 18px;padding-bottom:17px;border-bottom:1px solid #e8f0f8}
.vdash-page .vp-panel-head h2{position:relative;margin:0;padding-left:15px;color:#153b6d;font-size:20px;line-height:1.5;font-weight:800}
.vdash-page .vp-panel-head h2::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:3px;background:linear-gradient(#58c3ff,#0c83eb)}
.vdash-page .vp-panel-note{color:#8195ac;font-size:11px;line-height:1.8}
.vdash-page .vp-panel-head-sub{border:0;padding:0;margin:-8px 0 15px}
.vdash-page .vdash-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#c8dcef #eff7ff}
.vdash-page .vdash-table{width:100%;min-width:780px;margin:0;border:1px solid #dce9f6;border-collapse:separate;border-spacing:0;border-radius:5px;background:#fff}
.vdash-page .vdash-table th,.vdash-page .vdash-table td{padding:13px 14px;border:0;border-right:1px solid #e8eff7;border-bottom:1px solid #e8eff7;font-size:12px;line-height:1.75;text-align:left;vertical-align:middle;color:#395979;overflow-wrap:anywhere}
.vdash-page .vdash-table thead th{background:#eff7ff;color:#234972;font-size:11px;font-weight:800;white-space:nowrap}
.vdash-page .vdash-table tr>:last-child{border-right:0}
.vdash-page .vdash-table tbody tr:last-child>*{border-bottom:0}
.vdash-page .vdash-table tbody tr:nth-child(even){background:#fbfdff}
.vdash-page .vdash-table tbody tr.vp-attention{background:#fff9ee}
.vdash-page .vdash-table .num{text-align:right;font-variant-numeric:tabular-nums}
.vdash-page .vdash-table .nowrap{white-space:nowrap}
.vdash-page .vp-sub{margin-top:4px;color:#849bb1;font-size:11px;line-height:1.75}
.vdash-page .vp-status{display:inline-flex;align-items:center;padding:5px 10px;border-radius:20px;font-size:11px;font-weight:800;white-space:nowrap}
.vdash-page .vdash-table .actions{min-width:125px;text-align:center}
.vdash-page .vdash-table .actions .vp-btn,.vdash-page .vp-panel-head .vp-btn{display:inline-flex;justify-content:center;align-items:center;min-height:34px;margin:2px;padding:7px 12px;border-radius:8px;text-decoration:none;white-space:nowrap;font-size:11px;font-weight:800}
.vdash-page .vdash-table .actions .vp-btn:not(.vp-btn-sub),.vdash-page .vp-btn-key{background:linear-gradient(135deg,#42b4ff,#087eeb);color:#fff;border:1px solid #087ee9}
.vdash-page .vdash-table .actions .vp-btn-sub{border:1px solid #a9d4f4;background:#fff;color:#087bdc}
.vdash-page .vdash-empty{padding:35px 18px;text-align:center;color:#8096ac;background:#f8fbff;border:1px dashed #d8e8f6;border-radius:10px;font-size:13px}
.vdash-page .vp-foot{color:#8196aa;font-size:11px;line-height:1.95;margin:16px 0 0}
.vdash-page a:focus-visible,.vdash-page select:focus-visible,.vdash-page [tabindex="0"]:focus-visible{outline:3px solid #168cf0;outline-offset:3px}
@media(max-width:850px){.vdash-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.vdash-page .vdash-panel{padding:20px}.vdash-page .vdash-tabs .vp-tab{flex-grow:0}}
@media(max-width:600px){.vdash-container{width:calc(100% - 26px);margin-top:19px}.vdash-heading h1{font-size:25px}.vdash-heading p{font-size:11px}.vdash-heading-mark{flex-basis:48px;height:48px}.vdash-overview{grid-template-columns:1fr;gap:9px}.vdash-overview-card{padding:15px 18px;gap:3px}.vdash-overview-value{font-size:29px}.vdash-page .vdash-todo{padding:12px}.vdash-page .vdash-filter{padding:15px}.vdash-page .vdash-panel{padding:17px 13px;margin-bottom:14px}.vdash-page .vp-panel-head h2{font-size:18px}.vdash-page .vdash-table th,.vdash-page .vdash-table td{padding:10px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.vdash-page *{transition:none!important}}