/* ===== 押下フィードバック ===== */
  .btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
  }
  @keyframes btn-spin { to { transform: rotate(360deg); } }
  .btn-busy { opacity: 0.75; cursor: wait !important; pointer-events: none; }
  .btn-success {
    background: linear-gradient(135deg, #6dad7e, #5a9a6a) !important;
    color: #fff !important;
    border-color: #5a9a6a !important;
    box-shadow: 0 0 16px rgba(109,173,126,0.4) !important;
    pointer-events: none;
  }
  .btn-error {
    background: linear-gradient(135deg, #d97a7a, #b85050) !important;
    color: #fff !important;
    border-color: #b85050 !important;
    box-shadow: 0 0 16px rgba(217,122,122,0.4) !important;
    pointer-events: none;
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }

  :root {
    /* === ベース === */
    --bg-deep:       #0a0608;
    --bg-card:       #15101a;
    --bg-elev:       #1f1820;
    --line:          #2a1f2a;
    --line-soft:     #1a1419;

    /* === メインアクセント === */
    --rose-gold:     #b9856a;
    --rose-gold-l:   #d6a48a;
    --rose-gold-d:   #8a5e48;
    --champagne:     #e8d5c4;
    --gold-classic:  #c4a062;

    /* === サブアクセント === */
    --pink:          #d4a5b5;
    --pink-glow:     #f0c4d2;
    --pink-d:        #a37683;

    /* === メダル === */
    --gold-1st:      #e8c466;
    --silver-2nd:    #c8c8c8;
    --bronze-3rd:    #c08b5c;

    /* === テキスト === */
    --text:          #f5ebe0;
    --text-dim:      #b8a89a;
    --text-sub:      #8a7a72;

    /* === システム === */
    --danger:        #d97a7a;
    --ok:            #8eb59a;
    --warn:          #d8b97a;

    /* === 後方互換エイリアス === */
    --bg:            var(--bg-deep);
    --bg-soft:       var(--bg-card);
    --gold:          var(--rose-gold);
    --gold-d:        var(--rose-gold-d);
    --gold-l:        var(--rose-gold-l);
    --gold-soft:     var(--rose-gold-d);
    --gold-dim:      var(--rose-gold-d);
    --card:          var(--bg-card);
    --sub:           var(--text-sub);
    --text-soft:     var(--text-dim);
    --success:       var(--ok);

    /* === レイアウト === */
    --container-max: 480px;
    --padding-x:     20px;
    --tap:           48px;
    --btn:           56px;
    --radius-sm:     8px;
    --radius-md:     12px;
    --radius-lg:     16px;
  }

  html, body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    background:
      radial-gradient(ellipse at 30% -10%, rgba(185, 133, 106, 0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 100%, rgba(212, 165, 181, 0.06) 0%, transparent 50%),
      var(--bg-deep);
    color: var(--text);
  }
  html { font-size: 16px; }
  body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', 'Sarabun', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }
  body[data-lang="th"] {
    font-family: 'Sarabun', 'Noto Sans JP', sans-serif;
  }

  button { font-family: inherit; cursor: pointer; touch-action: manipulation; }
  input, select { font-family: inherit; font-size: 16px; }

  /* === コンテナ === */
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--padding-x);
  }

  /* === 言語バー === */
  .lang-bar {
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-card) 100%);
    border-bottom: 1px solid var(--rose-gold-d);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 56px;
  }
  .lang-bar-inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 10px var(--padding-x);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
  }
  .lang-bar button {
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--line);
    color: var(--text-sub);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    min-width: 48px;
    min-height: 36px;
    letter-spacing: 0.1em;
    transition: all 0.2s;
  }
  .lang-bar button.active {
    background: linear-gradient(135deg, var(--rose-gold-l), var(--rose-gold));
    border-color: var(--champagne);
    color: var(--bg-deep);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(185, 133, 106, 0.3);
  }

  /* === 統合ヘッダー（ダッシュボード用：A5 + JP/TH + ログアウト 1行） === */
  .app-header-unified {
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-deep) 100%);
    border-bottom: 1px solid var(--rose-gold-d);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  .app-header-unified .app-header-inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 12px var(--padding-x);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    min-height: 56px;
  }
  .app-header-unified .brand {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    letter-spacing: 0.3em;
    color: var(--champagne);
    text-shadow: 0 0 8px rgba(232, 213, 196, 0.4);
    font-weight: 400;
    display: flex;
    align-items: center;
  }
  /* === ロゴ画像（ヘッダー） === */
  .header-logo-img {
    height: 36px;
    width: auto;
    display: none;
    filter: drop-shadow(0 0 8px rgba(232, 196, 102, 0.3));
  }
  .header-logo-img.is-loaded { display: inline-block; }
  .header-logo-img.is-loaded + .header-logo-fallback { display: none; }

  /* === ロゴ画像（ログイン画面） === */
  .login-brand-logo {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    display: none;
    filter: drop-shadow(0 0 16px rgba(232, 196, 102, 0.4));
  }
  .login-brand-logo.login-brand-logo-sm {
    width: 96px;
    height: 96px;
  }
  .login-brand-logo.is-loaded { display: block; }
  .login-brand-logo.is-loaded + .login-brand-fallback { display: none; }
  .app-header-unified .lang-toggle {
    display: flex;
    justify-content: center;
    gap: 6px;
  }
  .app-header-unified .lang-toggle button {
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--line);
    color: var(--text-sub);
    padding: 6px 12px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    min-width: 42px;
    min-height: 36px;
    letter-spacing: 0.1em;
    transition: all 0.2s;
  }
  .app-header-unified .lang-toggle button.active {
    background: linear-gradient(135deg, var(--rose-gold-l), var(--rose-gold));
    border-color: var(--champagne);
    color: var(--bg-deep);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(185, 133, 106, 0.3);
  }
  .app-header-unified .logout-btn {
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--line);
    color: var(--text-dim);
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    min-height: 36px;
    letter-spacing: 0.1em;
    transition: all 0.2s;
  }
  .app-header-unified .logout-btn:hover {
    border-color: var(--rose-gold);
    color: var(--rose-gold-l);
  }

  /* === 旧アプリヘッダー（ログイン画面では未使用、後方互換） === */
  .app-header {
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: 56px;
    z-index: 30;
    background: linear-gradient(180deg, var(--bg-deep) 0%, rgba(21, 16, 26, 0.96) 100%);
    border-bottom: 1px solid var(--rose-gold-d);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 56px;
  }
  .app-header-inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 14px var(--padding-x);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .brand {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 26px;
    letter-spacing: 0.4em;
    color: var(--champagne);
    text-shadow: 0 0 12px rgba(232, 213, 196, 0.4);
  }
  .logout-btn {
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--line);
    color: var(--text-dim);
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    letter-spacing: 0.1em;
    min-height: 40px;
    box-shadow:
      0 2px 6px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: all 0.2s;
  }
  .logout-btn:hover {
    border-color: var(--rose-gold);
    color: var(--rose-gold-l);
  }

  /* === ボトムナビ === */
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-deep) 100%);
    border-top: 1px solid var(--rose-gold-d);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
    display: flex;
    z-index: 50;
    padding-bottom: env(safe-area-inset-bottom);
    max-width: var(--container-max);
    margin: 0 auto;
  }
  .bottom-nav-2row {
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav-2row .bn-row {
    display: flex;
    width: 100%;
    border-bottom: 1px solid var(--line-soft);
  }
  .bottom-nav-2row .bn-row:last-child { border-bottom: none; }
  .bn-item {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-sub);
    padding: 12px 4px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    min-height: 54px;
    letter-spacing: 0.05em;
    position: relative;
    border-top: 3px solid transparent;
    white-space: nowrap;
    transition: all 0.25s;
  }
  .bn-item.active {
    color: var(--rose-gold-l);
    border-top-color: var(--rose-gold);
    background: linear-gradient(180deg, rgba(185, 133, 106, 0.12) 0%, transparent 100%);
    text-shadow: 0 0 8px rgba(185, 133, 106, 0.3);
  }
  .bn-badge {
    position: absolute;
    top: 6px;
    right: 8px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 700;
    min-width: 18px;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.2;
  }

  /* === ページラップ（統合ヘッダー 56px 分のみ） === */
  .page-wrap {
    padding-bottom: 100px;
    min-height: calc(100vh - 56px);
  }
  [data-view="admin-dashboard"] .page-wrap {
    padding-bottom: 150px;
  }

  /* tabs-wrap も統合ヘッダー直下に来るように（旧 2 段構造から 1 段に） */
  .tabs-wrap { top: 56px; }

  /* === ボトムシート（残置・未使用） === */
  .bottom-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 60;
  }
  .bottom-sheet-backdrop.show { display: block; }
  .bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--rose-gold);
    border-radius: 16px 16px 0 0;
    padding: 16px 20px calc(32px + env(safe-area-inset-bottom));
    z-index: 70;
    max-width: var(--container-max);
    margin: 0 auto;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    box-sizing: border-box;
  }
  .bottom-sheet.show { transform: translateY(0); }

  /* === ログイン画面 === */
  .login-screen {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px var(--padding-x);
    position: relative;
  }
  .login-screen > * {
    width: 100%;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }
  .back-btn {
    position: absolute;
    top: 16px;
    left: var(--padding-x);
    background: transparent;
    border: none;
    color: var(--rose-gold-l);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 8px 4px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto !important;
    max-width: none !important;
  }
  .back-btn:hover { color: var(--champagne); }

  .logo {
    text-align: center;
    margin: 0 auto 32px;
  }
  .logo h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 56px;
    letter-spacing: 0.5em;
    color: var(--champagne);
    margin-left: 0.5em;
    line-height: 1;
    text-shadow:
      0 0 12px rgba(232, 213, 196, 0.6),
      0 0 24px rgba(185, 133, 106, 0.4);
  }
  .logo .tag {
    font-family: 'Cormorant Garamond', serif;
    font-size: 12px;
    letter-spacing: 0.5em;
    color: var(--rose-gold);
    margin-top: 10px;
    text-transform: uppercase;
    font-weight: 500;
    text-shadow: 0 0 8px rgba(185, 133, 106, 0.3);
  }

  /* === ロールカード（高級コスメパッケージ風） === */
  .role-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .role-card {
    position: relative;
    background: linear-gradient(145deg, var(--bg-elev) 0%, var(--bg-card) 100%);
    border: 1px solid var(--rose-gold-d);
    border-radius: var(--radius-lg);
    padding: 36px 24px 28px;
    min-height: 150px;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .role-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
    pointer-events: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .role-card::after { display: none; }
  .role-card > .c1, .role-card > .c2 { display: none; }
  .role-card:hover {
    border-color: var(--rose-gold);
    transform: translateY(-2px);
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.6),
      0 0 16px rgba(185, 133, 106, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  .role-card:active {
    transform: translateY(2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  }
  .role-card .icon {
    font-size: 40px;
    color: var(--rose-gold-l);
    filter: drop-shadow(0 0 8px rgba(214, 164, 138, 0.5));
    margin-bottom: 12px;
    line-height: 1;
  }
  .role-card .label-jp {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 22px;
    color: var(--champagne);
    letter-spacing: 0.3em;
    font-weight: 600;
    margin-top: 14px;
    text-align: center;
  }

  /* === ログインボックス === */
  .login-box {
    position: relative;
    background: linear-gradient(145deg, var(--bg-elev) 0%, var(--bg-card) 100%);
    border: 1px solid var(--rose-gold-d);
    border-radius: var(--radius-lg);
    padding: 36px 22px 32px;
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  .login-box::before,
  .login-box::after,
  .login-box > .c1,
  .login-box > .c2 { display: none; }

  .login-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 22px;
    color: var(--champagne);
    text-align: center;
    letter-spacing: 0.4em;
    margin-bottom: 22px;
    text-shadow: 0 0 12px rgba(232, 213, 196, 0.3);
  }
  .login-subtitle {
    text-align: center;
    font-size: 13px;
    color: var(--text-sub);
    letter-spacing: 0.25em;
    margin-bottom: 24px;
  }

  /* === フォーム === */
  .form-group { margin-bottom: 18px; }
  .form-group label {
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 500;
  }
  .input-field {
    width: 100%;
    height: var(--tap);
    background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-elev) 100%);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 0 14px;
    font-size: 16px;
    border-radius: var(--radius-md);
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.3),
      0 1px 0 rgba(255, 255, 255, 0.03);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .input-field:focus {
    outline: none;
    border-color: var(--rose-gold);
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.3),
      0 0 0 3px rgba(185, 133, 106, 0.15);
  }
  .input-field.pin {
    height: var(--btn);
    text-align: center;
    letter-spacing: 0.5em;
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    font-size: 28px;
    color: var(--champagne);
    font-weight: 700;
    text-shadow: 0 0 8px rgba(232, 213, 196, 0.3);
  }

  .select-wrap { position: relative; }
  .staff-select {
    width: 100%;
    height: var(--tap);
    background: linear-gradient(145deg, var(--bg-card) 0%, var(--bg-elev) 100%);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 0 36px 0 14px;
    font-size: 16px;
    border-radius: var(--radius-md);
    appearance: none;
    -webkit-appearance: none;
    background-image:
      linear-gradient(145deg, var(--bg-card) 0%, var(--bg-elev) 100%),
      linear-gradient(45deg, transparent 50%, var(--rose-gold) 50%),
      linear-gradient(135deg, var(--rose-gold) 50%, transparent 50%);
    background-position:
      0 0,
      calc(100% - 18px) 50%,
      calc(100% - 13px) 50%;
    background-size:
      100% 100%,
      5px 5px,
      5px 5px;
    background-repeat: no-repeat;
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.3),
      0 1px 0 rgba(255, 255, 255, 0.03);
  }
  .staff-select:focus {
    outline: none;
    border-color: var(--rose-gold);
    box-shadow:
      inset 0 2px 4px rgba(0, 0, 0, 0.3),
      0 0 0 3px rgba(185, 133, 106, 0.15);
  }
  .staff-select option {
    background-color: var(--bg-deep);
    color: var(--text);
    padding: 12px;
    font-size: 16px;
    font-weight: 500;
  }
  .staff-select option:checked {
    background-color: var(--rose-gold);
    color: var(--bg-deep);
  }

  /* === サブミットボタン === */
  .submit-btn {
    width: 100%;
    height: var(--btn);
    margin-top: 12px;
    background: linear-gradient(135deg,
      var(--rose-gold-l) 0%,
      var(--rose-gold) 50%,
      var(--rose-gold-d) 100%);
    color: var(--bg-deep);
    border: none;
    border-radius: var(--radius-md);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.3em;
    box-shadow:
      0 4px 16px rgba(185, 133, 106, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    transition: all 0.2s;
  }
  .submit-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 100%);
    pointer-events: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  .submit-btn:hover { filter: brightness(1.06); }
  .submit-btn:active {
    transform: scale(0.98);
    box-shadow:
      0 2px 8px rgba(185, 133, 106, 0.3),
      inset 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  .submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

  .error-msg {
    margin-top: 14px;
    color: var(--danger);
    font-size: 14px;
    text-align: center;
    min-height: 1.4em;
  }

  /* === 廃止: 上部タブ === */
  .tabs-wrap { display: none !important; }

  /* === ページ === */
  .page {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 28px 20px 56px;
    box-sizing: border-box;
  }
  .page-title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: 22px;
    letter-spacing: 0.4em;
    color: var(--champagne);
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rose-gold-d);
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(232, 213, 196, 0.3);
  }
  .placeholder {
    color: var(--text-sub);
    font-size: 14px;
    text-align: center;
    padding: 40px 20px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    margin-top: 20px;
  }
  .tab-content { animation: fadeIn 0.25s ease-out; }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
  }

  /* === Ranking === */
  .month-display {
    font-family: 'Cormorant Garamond', serif;
    color: var(--champagne);
    font-size: 18px;
    letter-spacing: 0.2em;
    text-align: center;
    display: block;
    margin-bottom: 24px;
    text-shadow: 0 0 6px rgba(232, 213, 196, 0.25);
  }

  /* === ランキング種別タブ（高級コスメチケット風） === */
  .rank-type-tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    background: transparent;
    border: none;
    margin: 0 0 20px 0;
    padding: 0;
  }
  .rank-type-tab {
    position: relative;
    flex: none;
    width: 100%;
    background: linear-gradient(145deg, var(--bg-elev) 0%, var(--bg-card) 100%);
    border: 1px solid var(--line);
    padding: 10px 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    color: var(--text-dim);
    border-radius: 8px;
    min-height: 42px;
    cursor: pointer;
    letter-spacing: 0.05em;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
      0 2px 4px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    text-align: center;
  }
  .rank-type-tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 100%);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    pointer-events: none;
  }
  .rank-type-tab:active { transform: scale(0.96); }
  .rank-type-tab.active {
    background: linear-gradient(145deg,
      var(--rose-gold-l) 0%,
      var(--rose-gold) 50%,
      var(--rose-gold-d) 100%);
    border: 1px solid var(--champagne);
    color: var(--bg-deep);
    font-weight: 700;
    box-shadow:
      0 4px 12px rgba(185, 133, 106, 0.4),
      0 0 16px rgba(212, 165, 181, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
  }
  .rank-type-tab.active::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 100%);
  }
  .rank-type-tab.active::after { display: none; }

  /* === セクションタイトル === */
  .section-title {
    font-family: 'Cormorant Garamond', serif;
    color: var(--champagne);
    font-size: 14px;
    letter-spacing: 0.3em;
    font-weight: 400;
    margin: 28px 0 16px;
    text-transform: uppercase;
  }
  .section-newcomer {
    background: linear-gradient(90deg,
      transparent,
      rgba(212, 165, 181, 0.15),
      rgba(185, 133, 106, 0.15),
      transparent);
    padding: 16px;
    border-radius: var(--radius-sm);
    text-align: center;
    color: var(--champagne);
    font-size: 16px;
    letter-spacing: 0.4em;
    margin: 32px 0 16px;
    border: 1px solid var(--rose-gold-d);
    text-transform: none;
    text-shadow: 0 0 8px rgba(232, 213, 196, 0.3);
  }
  .newcomer-star {
    margin-right: 8px;
    filter: drop-shadow(0 0 6px rgba(240, 196, 210, 0.7));
  }
  .newcomer-note {
    font-size: 11px;
    color: var(--danger);
    margin-top: 4px;
    letter-spacing: 0.03em;
    line-height: 1.4;
  }

  /* === ランキング行 === */
  .rank-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
  }
  .rank-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    background: linear-gradient(145deg, var(--bg-elev) 0%, var(--bg-card) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    min-height: 76px;
    position: relative;
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: transform 0.2s;
  }
  .rank-row:active { transform: scale(0.99); }

  /* === 1位: シャンパンゴールド・大型 === */
  .rank-row.r1 {
    margin-top: 28px;
    background: linear-gradient(135deg,
      rgba(232, 196, 102, 0.25) 0%,
      rgba(185, 133, 106, 0.18) 40%,
      rgba(21, 16, 26, 0.8) 100%);
    border: 2px solid var(--gold-1st);
    box-shadow:
      0 0 32px rgba(232, 196, 102, 0.35),
      0 4px 16px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
    padding: 24px 22px;
    min-height: 110px;
  }
  .rank-row.r1::before {
    content: "♔";
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 30px;
    color: var(--gold-1st);
    text-shadow: 0 0 16px rgba(232, 196, 102, 0.8), 0 0 4px #fff;
    background: var(--bg-deep);
    padding: 0 12px;
    border-radius: 50%;
    line-height: 1;
  }
  .rank-row.r1 .rank-num {
    font-size: 80px;
    color: var(--gold-1st);
    font-weight: 900;
    text-shadow:
      0 0 16px rgba(232, 196, 102, 0.5),
      0 2px 4px rgba(0, 0, 0, 0.4);
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    line-height: 1;
  }
  .rank-row.r1 .rank-name {
    font-size: 22px;
    color: var(--champagne);
    font-weight: 700;
    letter-spacing: 0.05em;
  }
  .rank-row.r1 .rank-points {
    font-size: 28px;
    color: var(--gold-1st);
    font-weight: 700;
    font-family: 'Noto Sans JP', -apple-system, system-ui, sans-serif;
  }

  /* === 2位: シルバー === */
  .rank-row.r2 {
    margin-top: 22px;
    background: linear-gradient(135deg,
      rgba(200, 200, 200, 0.15) 0%,
      rgba(160, 160, 160, 0.08) 50%,
      rgba(21, 16, 26, 0.8) 100%);
    border: 2px solid var(--silver-2nd);
    box-shadow:
      0 0 24px rgba(200, 200, 200, 0.2),
      0 4px 12px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    padding: 20px;
    min-height: 92px;
  }
  .rank-row.r2::before {
    content: "②";
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    color: var(--silver-2nd);
    background: var(--bg-deep);
    padding: 0 10px;
    border-radius: 50%;
    line-height: 1;
  }
  .rank-row.r2 .rank-num {
    font-size: 64px;
    color: var(--silver-2nd);
    font-weight: 900;
    text-shadow: 0 0 12px rgba(200, 200, 200, 0.4);
    font-family: 'Noto Sans JP', -apple-system, system-ui, sans-serif;
    line-height: 1;
  }
  .rank-row.r2 .rank-name {
    font-size: 19px;
    color: var(--silver-2nd);
    font-weight: 700;
  }
  .rank-row.r2 .rank-points {
    font-size: 24px;
    color: var(--silver-2nd);
    font-weight: 700;
    font-family: 'Noto Sans JP', -apple-system, system-ui, sans-serif;
  }

  /* === 3位: ブロンズ === */
  .rank-row.r3 {
    margin-top: 22px;
    background: linear-gradient(135deg,
      rgba(192, 139, 92, 0.15) 0%,
      rgba(160, 100, 40, 0.08) 50%,
      rgba(21, 16, 26, 0.8) 100%);
    border: 2px solid var(--bronze-3rd);
    box-shadow:
      0 0 24px rgba(192, 139, 92, 0.2),
      0 4px 12px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 18px;
    min-height: 84px;
  }
  .rank-row.r3::before {
    content: "③";
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    color: var(--bronze-3rd);
    background: var(--bg-deep);
    padding: 0 10px;
    border-radius: 50%;
    line-height: 1;
  }
  .rank-row.r3 .rank-num {
    font-size: 56px;
    color: var(--bronze-3rd);
    font-weight: 900;
    text-shadow: 0 0 10px rgba(192, 139, 92, 0.4);
    font-family: 'Noto Sans JP', -apple-system, system-ui, sans-serif;
    line-height: 1;
  }
  .rank-row.r3 .rank-name {
    font-size: 18px;
    color: var(--bronze-3rd);
    font-weight: 700;
  }
  .rank-row.r3 .rank-points {
    font-size: 22px;
    color: var(--bronze-3rd);
    font-weight: 700;
    font-family: 'Noto Sans JP', -apple-system, system-ui, sans-serif;
  }

  /* === 4位以下 === */
  .rank-row:not(.r1):not(.r2):not(.r3) .rank-num {
    font-size: 36px;
    color: var(--rose-gold-l);
    font-weight: 900;
    font-family: 'Noto Sans JP', -apple-system, system-ui, sans-serif;
    line-height: 1;
    text-align: center;
  }
  .rank-row:not(.r1):not(.r2):not(.r3) .rank-name {
    font-size: 16px;
    color: var(--text);
    font-weight: 600;
  }
  .rank-row:not(.r1):not(.r2):not(.r3) .rank-points {
    font-size: 20px;
    color: var(--rose-gold-l);
    font-weight: 700;
    font-family: 'Noto Sans JP', -apple-system, system-ui, sans-serif;
  }

  /* === デフォルト rank-num/points フォールバック === */
  .rank-num {
    font-family: 'Noto Sans JP', -apple-system, system-ui, sans-serif;
    font-weight: 900;
    font-size: 36px;
    color: var(--rose-gold-l);
    text-align: center;
    line-height: 1;
  }
  .rank-name {
    font-size: 16px;
    letter-spacing: 0.05em;
    font-weight: 600;
  }
  .rank-points {
    font-family: 'Noto Sans JP', -apple-system, system-ui, sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--rose-gold-l);
    text-align: right;
    line-height: 1;
    white-space: nowrap;
  }
  .rank-points small {
    font-size: 11px;
    color: var(--text-sub);
    margin-left: 4px;
    letter-spacing: 0.2em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 600;
  }

  /* === YOU バッジ === */
  .rank-row.me {
    border-left: 4px solid var(--pink) !important;
    background: linear-gradient(145deg,
      rgba(212, 165, 181, 0.15) 0%,
      rgba(21, 16, 26, 0.8) 100%);
  }
  .rank-row.me::after {
    content: "YOU";
    position: absolute;
    top: -10px;
    right: 12px;
    background: linear-gradient(135deg, var(--pink-glow), var(--pink));
    color: var(--bg-deep);
    font-size: 10px;
    padding: 3px 10px;
    letter-spacing: 0.25em;
    font-weight: 800;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(212, 165, 181, 0.5);
  }

  /* === NEW バッジ === */
  .new-badge {
    display: inline-block;
    font-size: 11px;
    background: linear-gradient(135deg, var(--pink-glow) 0%, var(--pink) 50%, var(--rose-gold) 100%);
    color: var(--bg-deep);
    padding: 3px 10px;
    margin-left: 10px;
    letter-spacing: 0.2em;
    font-weight: 800;
    border-radius: 4px;
    vertical-align: middle;
    box-shadow: 0 2px 8px rgba(240, 196, 210, 0.5);
    animation: newGlow 2s ease-in-out infinite;
  }
  @keyframes newGlow {
    0%, 100% { box-shadow: 0 2px 8px rgba(240, 196, 210, 0.5); }
    50%      { box-shadow: 0 2px 16px rgba(240, 196, 210, 0.9), 0 0 24px rgba(212, 165, 181, 0.6); }
  }

  .empty-state {
    color: var(--text-sub);
    text-align: center;
    padding: 30px;
    font-size: 14px;
  }
  .rank-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
  }
  .rank-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(232, 196, 102, 0.2);
    border-top-color: var(--gold-1st, #e8c466);
    border-radius: 50%;
    animation: rank-spin 0.8s linear infinite;
  }
  @keyframes rank-spin { to { transform: rotate(360deg); } }
  .rank-loading-text {
    color: var(--rose-gold-l, var(--text-sub));
    font-size: 13px;
    letter-spacing: 0.2em;
    font-weight: 600;
  }

  /* === 日次入力（Phase 8） === */
  .daily-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
  }
  .date-input {
    flex: 1;
    background: linear-gradient(145deg, var(--bg-card), var(--bg-elev));
    border: 1px solid var(--line);
    color: var(--text);
    padding: 12px 14px;
    font-size: 16px;
    font-family: inherit;
    border-radius: var(--radius-md);
    min-height: 48px;
    color-scheme: dark;
  }
  .btn-load {
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--rose-gold-d);
    color: var(--rose-gold-l);
    padding: 12px 18px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-md);
    letter-spacing: 0.1em;
    min-height: 48px;
    transition: all 0.2s;
  }
  .btn-load:hover {
    border-color: var(--rose-gold);
    color: var(--champagne);
  }

  /* モード切替トグル */
  .mode-toggle {
    display: flex;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 4px;
    margin-bottom: 20px;
  }
  .mode-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-sub);
    padding: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    letter-spacing: 0.1em;
    min-height: 44px;
    transition: all 0.2s;
  }
  .mode-btn.active {
    background: linear-gradient(135deg, var(--rose-gold-l), var(--rose-gold));
    color: var(--bg-deep);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(185, 133, 106, 0.3);
  }

  /* 一括入力グリッド */
  .daily-grid-wrap {
    overflow-x: auto;
    overflow-y: visible;
    margin: 0 -20px 20px;
    padding: 0 20px;
    -webkit-overflow-scrolling: touch;
    max-width: calc(100% + 40px);
  }
  .daily-grid {
    border-collapse: separate;
    border-spacing: 4px;
    font-size: 13px;
    width: max-content;
    min-width: 100%;
  }
  .daily-grid th, .daily-grid td {
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--line);
    padding: 0;
    text-align: center;
    vertical-align: middle;
    border-radius: 6px;
  }
  .daily-grid th {
    background: var(--bg-card);
    color: var(--rose-gold-l);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.1em;
    padding: 10px 6px;
  }
  .daily-grid th.staff-col, .daily-grid td.staff-col {
    text-align: left;
    padding: 0 12px;
    width: 90px;
    min-width: 90px;
    position: sticky;
    left: 0;
    background: var(--bg-card);
    z-index: 5;
    color: var(--champagne);
    font-size: 14px;
    font-weight: 600;
  }
  .daily-grid td.staff-col {
    padding: 12px;
  }
  .daily-grid input[type="number"] {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--text);
    text-align: center;
    font-size: 15px;
    font-family: inherit;
    font-weight: 600;
    padding: 0 2px;
    -moz-appearance: textfield;
  }
  .daily-grid input[type="number"]::-webkit-outer-spin-button,
  .daily-grid input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .daily-grid input[type="number"]:focus {
    background: rgba(185, 133, 106, 0.15);
    color: var(--rose-gold-l);
    outline: none;
    border-radius: 6px;
  }
  .daily-grid input[type="checkbox"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: var(--rose-gold);
  }
  .save-all-btn {
    margin-top: 20px;
  }

  /* 個別フォーム */
  .form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding: 12px 16px;
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }
  .form-row label {
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
    letter-spacing: 0.1em;
  }
  .form-row input[type="number"] {
    width: 100px;
    text-align: right;
    padding: 8px 12px;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    color: var(--rose-gold-l);
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    height: 40px;
  }
  .form-row.toggle-row input[type="checkbox"] {
    width: 28px;
    height: 28px;
    cursor: pointer;
    accent-color: var(--rose-gold);
  }

  /* === スタッフ管理 (Phase 8.1) === */
  .staff-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
  }
  .btn-add-staff {
    background: linear-gradient(135deg, var(--rose-gold-l), var(--rose-gold));
    color: var(--bg-deep);
    border: none;
    padding: 12px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--radius-md);
    cursor: pointer;
    letter-spacing: 0.1em;
    box-shadow: 0 2px 8px rgba(185, 133, 106, 0.3);
    min-height: 44px;
  }
  .staff-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .staff-card {
    display: flex;
    align-items: stretch;
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--line);
    padding: 16px 18px;
    border-radius: var(--radius-md);
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.2s;
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.03);
  }
  .staff-card:active { transform: scale(0.99); }
  .staff-card.is-hidden { opacity: 0.5; }
  .staff-card-main { flex: 1; min-width: 0; }
  .staff-card-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--champagne);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .staff-card-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .badge-role,
  .badge-fl,
  .badge-sns,
  .badge-hidden {
    display: inline-block;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    border-radius: 12px;
  }
  .badge-role.manager {
    background: linear-gradient(135deg, var(--gold-1st), var(--rose-gold));
    color: var(--bg-deep);
  }
  .badge-role.staff {
    background: var(--bg-deep);
    border: 1px solid var(--rose-gold-d);
    color: var(--rose-gold-l);
  }
  .badge-fl {
    background: var(--pink);
    color: var(--bg-deep);
  }
  /* === 雇用形態バッジ === */
  .staff-emp-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
    border-radius: 10px;
  }
  .staff-emp-badge.badge-ft {
    background: linear-gradient(135deg, #e8c466, #d4a850);
    color: #2a1e10;
    box-shadow: 0 0 6px rgba(232,196,102,0.3);
  }
  .staff-emp-badge.badge-pt {
    background: linear-gradient(135deg, #b9856a, #8b5e3c);
    color: #fff;
  }
  .staff-emp-badge.badge-fl {
    background: var(--bg-deep);
    border: 1px solid var(--rose-gold-l);
    color: var(--rose-gold-l);
  }
  .badge-sns.ok {
    background: rgba(142, 181, 154, 0.2);
    border: 1px solid var(--ok);
    color: var(--ok);
  }
  .badge-sns.ng {
    background: rgba(217, 122, 122, 0.15);
    border: 1px solid var(--danger);
    color: var(--danger);
  }
  .badge-hidden {
    background: var(--danger);
    color: #fff;
  }
  .staff-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    background: var(--bg-deep);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
  }
  .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
  }
  .info-label {
    color: var(--text-sub);
    letter-spacing: 0.1em;
    font-weight: 600;
  }
  .info-value {
    color: var(--text);
    font-weight: 700;
    font-family: 'Noto Sans JP', system-ui, sans-serif;
  }
  .staff-card-arrow {
    display: flex;
    align-items: center;
    padding-left: 10px;
    color: var(--rose-gold);
    font-size: 24px;
    font-weight: 300;
  }

  /* === スタッフ「マイ」タブ === */
  .my-status-page { padding-top: 16px; }
  .my-header { text-align: center; margin-bottom: 24px; }
  .my-greeting {
    font-size: 22px;
    font-weight: 700;
    color: var(--champagne);
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    text-shadow: 0 0 8px rgba(232, 213, 196, 0.4);
  }
  .my-date {
    font-size: 13px;
    color: var(--rose-gold-l);
    letter-spacing: 0.15em;
    font-weight: 600;
  }

  .my-score-card {
    background: linear-gradient(135deg,
      rgba(232, 196, 102, 0.15) 0%,
      rgba(185, 133, 106, 0.10) 50%,
      rgba(20, 16, 26, 0.85) 100%);
    border: 2px solid var(--gold-1st);
    border-radius: var(--radius-lg);
    padding: 28px 20px 24px;
    text-align: center;
    margin-bottom: 28px;
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.5),
      0 0 32px rgba(232, 196, 102, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
  }
  .my-score-label {
    font-size: 12px;
    color: var(--champagne);
    letter-spacing: 0.4em;
    font-weight: 700;
    margin-bottom: 8px;
    font-family: 'Cormorant Garamond', serif;
  }
  .my-score-main {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: 16px;
  }
  .my-score-value {
    font-size: 72px;
    font-weight: 900;
    color: var(--gold-1st);
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    text-shadow: 0 0 20px rgba(232, 196, 102, 0.6);
    line-height: 1;
  }
  .my-score-unit {
    font-size: 24px;
    font-weight: 700;
    color: var(--gold-1st);
    letter-spacing: 0.15em;
  }
  .my-score-rank {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(232, 196, 102, 0.3);
  }
  .my-rank-num {
    font-size: 32px;
    font-weight: 900;
    color: var(--champagne);
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    line-height: 1;
  }
  .my-rank-sep {
    font-size: 14px;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    font-weight: 600;
  }
  .my-rank-total {
    font-size: 18px;
    color: var(--text);
    font-weight: 700;
  }
  .my-rank-of {
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 0.1em;
  }

  .my-tile-section-title {
    font-size: 11px;
    color: var(--rose-gold-l);
    letter-spacing: 0.3em;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .my-tile-section-title.minus { color: var(--danger); }
  .my-tile-section { margin-bottom: 24px; }
  .my-tile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .my-tile {
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--rose-gold-d);
    border-radius: var(--radius-md);
    padding: 16px 8px;
    text-align: center;
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  .my-tile-label {
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 0.15em;
    font-weight: 600;
    margin-bottom: 8px;
  }
  .my-tile-value {
    font-size: 32px;
    font-weight: 900;
    color: var(--champagne);
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    line-height: 1;
    margin-bottom: 4px;
  }
  .my-tile-unit {
    font-size: 11px;
    color: var(--text-sub);
    letter-spacing: 0.15em;
  }

  .my-sub-section { margin-bottom: 20px; }
  .my-sub-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px;
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }
  .my-sub-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--bg-deep);
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    font-size: 12px;
  }
  .my-sub-label {
    color: var(--text-sub);
    font-weight: 600;
    letter-spacing: 0.05em;
  }
  .my-sub-value {
    color: var(--rose-gold-l);
    font-weight: 800;
    font-size: 14px;
    font-family: 'Noto Sans JP', system-ui, sans-serif;
  }
  .my-sub-value.danger { color: var(--danger); }
  .my-sub-grid.penalty .my-sub-item {
    border-color: rgba(217, 122, 122, 0.3);
  }
  .my-penalty-section { margin-bottom: 20px; }

  /* === 打刻 (Phase 11) === */
  .att-card {
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--rose-gold-d);
    border-radius: var(--radius-lg);
    padding: 18px 18px 16px;
    margin-bottom: 24px;
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  .att-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
  .att-card-title {
    font-size: 13px;
    color: var(--champagne);
    letter-spacing: 0.2em;
    font-weight: 700;
  }
  .att-card-status {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 4px 12px;
    border-radius: 12px;
  }
  .att-card-status.not-started {
    background: var(--bg-deep);
    border: 1px solid var(--text-sub);
    color: var(--text-sub);
  }
  .att-card-status.working {
    background: rgba(142, 181, 154, 0.2);
    border: 1px solid var(--ok);
    color: var(--ok);
  }
  .att-card-status.finished {
    background: rgba(232, 196, 102, 0.15);
    border: 1px solid var(--gold-1st);
    color: var(--gold-1st);
  }
  .att-card-times {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
  }
  .att-time-row {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background: var(--bg-deep);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
  }
  .att-time-label {
    font-size: 10px;
    color: var(--text-sub);
    letter-spacing: 0.15em;
    margin-bottom: 4px;
    font-weight: 600;
  }
  .att-time-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--rose-gold-l);
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    line-height: 1;
  }
  .att-action-btn {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2em;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    min-height: 48px;
  }
  .att-action-btn.clock-in {
    background: linear-gradient(135deg, var(--ok), #6a9b78);
    color: var(--bg-deep);
    box-shadow: 0 4px 12px rgba(142, 181, 154, 0.3);
  }
  .att-action-btn.clock-out {
    background: linear-gradient(135deg, var(--danger), #b85a5a);
    color: #fff;
    box-shadow: 0 4px 12px rgba(217, 122, 122, 0.35);
  }
  .att-action-btn:active { transform: scale(0.99); }

  /* 管理者打刻一覧 */
  .att-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .att-row:active { transform: scale(0.99); }
  .att-row-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--champagne);
    letter-spacing: 0.05em;
  }
  .att-row-times {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    font-weight: 700;
  }
  .att-row-in   { color: var(--ok); font-size: 14px; }
  .att-row-out  { color: var(--rose-gold-l); font-size: 14px; }
  .att-row-sep  { color: var(--text-sub); font-size: 12px; }
  .att-row-note {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--text-sub);
    letter-spacing: 0.05em;
  }

  /* === モーダル === */
  .modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 200;
  }
  .modal-backdrop.show { display: block; }
  .modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 420px;
    max-height: 85vh;
    background: linear-gradient(145deg, var(--bg-card), var(--bg-elev));
    border: 1px solid var(--rose-gold-d);
    border-radius: var(--radius-lg);
    z-index: 210;
    overflow: hidden;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
  }
  .modal.show { display: flex; }
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
  }
  .modal-title {
    font-size: 16px;
    color: var(--champagne);
    font-weight: 700;
    letter-spacing: 0.2em;
  }
  .modal-close {
    background: transparent;
    border: none;
    color: var(--rose-gold);
    font-size: 28px;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
  }
  .modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
  }
  .btn-delete-staff {
    width: 100%;
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: 12px;
    font-family: inherit;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    margin-top: 8px;
    min-height: 44px;
  }
  .btn-delete-staff:hover {
    background: rgba(217, 122, 122, 0.1);
  }

  /* === ポイントルール (Phase 8.2) === */
  .rule-btn-wrap {
    margin-bottom: 16px;
    text-align: right;
  }
  .rule-btn {
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--rose-gold-d);
    color: var(--rose-gold-l);
    padding: 10px 18px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-md);
    letter-spacing: 0.1em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.03);
    min-height: 40px;
    transition: all 0.2s;
  }
  .rule-btn:hover {
    border-color: var(--rose-gold);
    color: var(--champagne);
  }
  .rule-btn:active { transform: scale(0.97); }
  .rule-icon { font-size: 16px; }

  .rule-modal { max-width: 440px; }

  .rule-section { margin-bottom: 24px; }
  .rule-section-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3em;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    text-align: center;
    margin-bottom: 12px;
  }
  .rule-section-title.plus {
    background: linear-gradient(135deg, rgba(232, 196, 102, 0.2), rgba(185, 133, 106, 0.15));
    color: var(--gold-1st);
    border: 1px solid var(--gold-1st);
  }
  .rule-section-title.minus {
    background: linear-gradient(135deg, rgba(217, 122, 122, 0.2), rgba(185, 90, 90, 0.15));
    color: var(--danger);
    border: 1px solid var(--danger);
  }
  .rule-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    margin-bottom: 6px;
  }
  .rule-label {
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
    letter-spacing: 0.05em;
  }
  .rule-value {
    font-size: 18px;
    font-weight: 700;
    font-family: 'Noto Sans JP', -apple-system, system-ui, sans-serif;
    min-width: 60px;
    text-align: right;
  }
  .rule-value.plus  { color: var(--gold-1st); }
  .rule-value.minus { color: var(--danger); }
  .rule-unit {
    font-size: 12px;
    color: var(--text-sub);
    letter-spacing: 0.1em;
    min-width: 30px;
    text-align: right;
  }
  .rule-note {
    margin-top: 16px;
    padding: 12px;
    background: rgba(185, 133, 106, 0.1);
    border: 1px solid var(--rose-gold-d);
    border-radius: var(--radius-md);
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
    letter-spacing: 0.05em;
    line-height: 1.6;
  }

  /* === ポイントルール編集 (Phase 8.3) === */
  .rule-value-cell {
    text-align: right;
    min-width: 80px;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
  }
  .rule-edit-input {
    width: 78px;
    padding: 6px 8px;
    background: var(--bg-deep);
    border: 1px solid var(--rose-gold);
    color: var(--rose-gold-l);
    font-size: 16px;
    font-weight: 700;
    font-family: 'Noto Sans JP', -apple-system, system-ui, sans-serif;
    border-radius: var(--radius-sm);
    text-align: right;
  }
  .rule-edit-input:focus {
    outline: none;
    border-color: var(--champagne);
    box-shadow: 0 0 0 2px rgba(232, 213, 196, 0.2);
  }
  .btn-edit-rules {
    width: 100%;
    background: linear-gradient(135deg, var(--rose-gold-l), var(--rose-gold));
    color: var(--bg-deep);
    border: none;
    padding: 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--radius-md);
    cursor: pointer;
    letter-spacing: 0.2em;
    margin-top: 16px;
    min-height: 50px;
    box-shadow: 0 2px 8px rgba(185, 133, 106, 0.3);
  }
  .rule-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
  }
  .rule-actions .btn-sub {
    flex: 1;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text);
    padding: 12px;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    min-height: 48px;
    letter-spacing: 0.1em;
  }
  .rule-actions .submit-btn {
    flex: 2;
    margin-top: 0;
  }

  /* === 申請ワークフロー (Phase 10) === */
  .filter-tabs {
    display: flex;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    padding: 4px;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-sub);
    padding: 10px 8px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    letter-spacing: 0.05em;
    min-height: 44px;
    white-space: nowrap;
    transition: all 0.2s;
  }
  .filter-tab.active {
    background: linear-gradient(135deg, var(--rose-gold-l), var(--rose-gold));
    color: var(--bg-deep);
    font-weight: 700;
  }
  .filter-tab .cnt {
    display: inline-block;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
    font-weight: 700;
    min-width: 18px;
  }
  .filter-tab.active .cnt {
    background: var(--bg-deep);
    color: var(--rose-gold);
  }

  .request-card {
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--line);
    border-left: 4px solid var(--warn);
    padding: 16px;
    margin-bottom: 12px;
    border-radius: var(--radius-md);
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.03);
  }
  .request-card.status-approved  { border-left-color: var(--ok); }
  .request-card.status-rejected  { border-left-color: var(--danger); }
  .request-card.status-cancelled { border-left-color: var(--text-sub); opacity: 0.6; }

  .request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px;
  }
  .request-staff {
    font-size: 17px;
    color: var(--champagne);
    font-weight: 700;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .request-type {
    padding: 4px 12px;
    font-size: 11px;
    letter-spacing: 0.15em;
    font-weight: 700;
    border-radius: 4px;
    white-space: nowrap;
  }
  .request-type.absent_today   { background: var(--danger); color: #fff; }
  .request-type.absent_advance { background: var(--warn);   color: var(--bg-deep); }
  .request-type.early_leave    { background: #5a8bb0;       color: #fff; }

  .request-meta {
    font-size: 12px;
    color: var(--text-sub);
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }
  .request-meta .date {
    color: var(--text);
    font-weight: 600;
  }

  .request-reason {
    background: var(--bg-deep);
    border: 1px solid var(--line);
    padding: 12px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    word-break: break-word;
  }

  .request-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }
  .btn-danger {
    background: var(--danger);
    color: #fff;
    border: none;
    padding: 10px 18px;
    font-family: inherit;
    font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer;
    min-height: 40px;
    letter-spacing: 0.1em;
  }
  .btn-ok {
    background: var(--ok);
    color: #fff;
    border: none;
    padding: 10px 18px;
    font-family: inherit;
    font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer;
    min-height: 40px;
    letter-spacing: 0.1em;
  }

  .request-status {
    text-align: right;
    color: var(--text-sub);
    font-size: 12px;
    margin-top: 8px;
  }
  .request-status-badge {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }
  .request-status-badge.pending   { background: var(--warn);     color: var(--bg-deep); }
  .request-status-badge.approved  { background: var(--ok);       color: #fff; }
  .request-status-badge.rejected  { background: var(--danger);   color: #fff; }
  .request-status-badge.cancelled { background: var(--text-sub); color: #fff; }

  /* 代理申請ボタン (Phase 10.1) */
  .proxy-btn { margin-bottom: 16px; }

  /* === 5 タイプ申請 (Phase 10.2) === */
  .multi-date-input {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
  }
  .btn-add-date {
    background: linear-gradient(135deg, var(--rose-gold-l), var(--rose-gold));
    color: var(--bg-deep);
    border: none;
    padding: 0 16px;
    font-family: inherit;
    font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer;
    min-height: 48px;
    white-space: nowrap;
  }
  .date-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
  }
  .date-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--rose-gold-d);
    color: var(--rose-gold-l);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
  }
  .date-chip button {
    background: transparent;
    border: none;
    color: var(--danger);
    cursor: pointer;
    padding: 0 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
  }

  .request-type.reservation   { background: #8b6da3; color: #fff; }
  .request-type.shift_request { background: #4a8b6d; color: #fff; }

  .request-details {
    background: rgba(212, 165, 181, 0.08);
    border: 1px solid var(--rose-gold-d);
    color: var(--text);
    font-size: 13px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    line-height: 1.7;
  }
  .request-details span { white-space: nowrap; }

  /* === スタッフ管理モード切替 (Phase 10.3) === */
  .staff-mode-toggle {
    display: flex;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 4px;
    margin-bottom: 20px;
  }
  .staff-mode-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-sub);
    padding: 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    letter-spacing: 0.1em;
    min-height: 50px;
    transition: all 0.2s;
  }
  .staff-mode-btn.active {
    background: linear-gradient(135deg, var(--rose-gold-l), var(--rose-gold));
    color: var(--bg-deep);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(185, 133, 106, 0.3);
  }
  .staff-add-form {
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--line);
    padding: 16px;
    border-radius: var(--radius-md);
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.03);
  }

  /* === カレンダーグリッド (Phase 10.3) === */
  .cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 10px;
    margin-bottom: 8px;
  }
  .cal-header button {
    background: transparent;
    border: 1px solid var(--rose-gold-d);
    color: var(--rose-gold-l);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
  }
  .cal-header span {
    color: var(--champagne);
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 15px;
  }
  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 8px;
  }
  .cal-day-head {
    text-align: center;
    font-size: 11px;
    color: var(--text-sub);
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 4px 0;
  }
  .cal-day-head.sun { color: var(--danger); }
  .cal-day-head.sat { color: #5a8bb0; }
  .cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-deep);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: all 0.15s;
  }
  .cal-day:not(.cal-empty):active { transform: scale(0.92); }
  .cal-day.cal-empty { background: transparent; border: none; cursor: default; }
  .cal-day.selected {
    background: linear-gradient(135deg, var(--rose-gold-l), var(--rose-gold));
    color: var(--bg-deep);
    font-weight: 800;
    border-color: var(--champagne);
    box-shadow: 0 2px 8px rgba(185, 133, 106, 0.4);
  }
  .cal-day.today { box-shadow: inset 0 0 0 2px var(--gold-1st); }
  .cal-day.today.selected {
    box-shadow:
      inset 0 0 0 2px var(--gold-1st),
      0 2px 8px rgba(185, 133, 106, 0.4);
  }
  .cal-selected-info {
    margin-top: 12px;
    text-align: center;
    color: var(--rose-gold-l);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
  }
  .cal-selected-info span {
    color: var(--champagne);
    font-size: 20px;
    font-weight: 800;
    margin: 0 4px;
  }

  /* === レスポンシブ === */
  @media (min-width: 768px) {
    :root { --container-max: 480px; }
  }
  @media (max-width: 360px) {
    :root { --padding-x: 16px; }
    .rank-type-tab { padding: 12px 6px; font-size: 11px; }
    .logo h1 { font-size: 48px; }
    .rank-row.r1 .rank-num { font-size: 68px; }
    .rank-row.r2 .rank-num { font-size: 56px; }
    .rank-row.r3 .rank-num { font-size: 48px; }
  }
  @media (max-width: 320px) {
    .login-title { font-size: 20px; letter-spacing: 0.3em; }
    .rank-row { grid-template-columns: 50px 1fr auto; gap: 10px; padding: 14px; }
  }

  /* === シフトプリセット (Phase 12.1) === */
  .shift-preset-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
  }
  .preset-btn {
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--rose-gold-d);
    color: var(--text);
    padding: 10px 8px;
    font-family: inherit;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
  }
  .preset-btn:active { transform: scale(0.97); }
  .preset-btn.active {
    background: linear-gradient(135deg, var(--rose-gold-l), var(--rose-gold));
    border-color: var(--champagne);
    color: var(--bg-deep);
    box-shadow: 0 4px 12px rgba(185, 133, 106, 0.4);
  }
  .preset-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
  }
  .preset-btn.active .preset-label { font-weight: 800; }
  .preset-time {
    font-size: 10px;
    color: var(--text-sub);
    letter-spacing: 0.05em;
    font-family: 'Noto Sans JP', system-ui, sans-serif;
  }
  .preset-btn.active .preset-time {
    color: var(--bg-deep);
    opacity: 0.7;
  }

  /* === 申請カード内 予約情報（シンプル版） === */
  .resv-extra-info {
    background: var(--bg-deep);
    border: 1px solid var(--line);
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .extra-label {
    display: inline-block;
    width: 60px;
    color: var(--text-sub);
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  /* === 予約 日付ナビ + 一覧（シンプル版） === */
  .date-nav {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    gap: 10px;
    align-items: center;
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--rose-gold-d);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 14px;
  }
  .date-nav-btn {
    background: var(--bg-deep);
    border: 1px solid var(--rose-gold-d);
    color: var(--rose-gold-l);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
  }
  .date-nav-btn:active { transform: scale(0.95); }
  .date-nav-center { text-align: center; }
  .date-nav-date {
    font-size: 20px;
    font-weight: 800;
    color: var(--champagne);
    letter-spacing: 0.1em;
    margin-bottom: 4px;
  }
  .date-nav-count {
    font-size: 12px;
    color: var(--rose-gold-l);
    letter-spacing: 0.15em;
    font-weight: 600;
  }
  .btn-today {
    display: block;
    margin: 0 auto 18px;
    background: transparent;
    border: 1px solid var(--rose-gold-d);
    color: var(--rose-gold-l);
    padding: 8px 24px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    cursor: pointer;
    letter-spacing: 0.2em;
  }
  .resv-day-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .resv-card {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--line);
    border-left: 4px solid var(--rose-gold);
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  .resv-card:active { transform: scale(0.99); }
  .resv-card-time {
    font-size: 22px;
    font-weight: 800;
    color: var(--rose-gold-l);
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    line-height: 1;
  }
  .resv-card-info { min-width: 0; }
  .resv-card-staff {
    font-size: 16px;
    font-weight: 700;
    color: var(--champagne);
    margin-bottom: 4px;
  }
  .resv-card-customer {
    font-size: 13px;
    color: var(--text);
    margin-bottom: 2px;
  }
  .resv-card-course {
    font-size: 11px;
    color: var(--text-sub);
    letter-spacing: 0.1em;
  }
  .resv-card-arrow {
    color: var(--rose-gold);
    font-size: 22px;
  }

  /* === Phase 12: 予約 & シフト === */
  .day-detail-section {
    margin-top: 20px;
    padding: 16px;
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--rose-gold-d);
    border-radius: var(--radius-md);
  }
  .day-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: 16px;
    color: var(--champagne);
    font-weight: 700;
    letter-spacing: 0.1em;
  }
  .btn-add-small {
    background: linear-gradient(135deg, var(--rose-gold-l), var(--rose-gold));
    color: var(--bg-deep);
    border: none;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer;
    letter-spacing: 0.1em;
  }
  .cal-day { position: relative; }
  .cal-day-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: var(--rose-gold);
    color: var(--bg-deep);
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 8px;
    min-width: 14px;
    text-align: center;
  }
  .cal-day-req {
    position: absolute;
    top: 2px;
    right: 2px;
    color: var(--pink);
    font-size: 10px;
  }
  .resv-item, .shift-item {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    cursor: pointer;
  }
  .resv-time, .shift-time {
    font-size: 14px;
    font-weight: 700;
    color: var(--rose-gold-l);
    min-width: 90px;
  }
  .resv-info, .shift-staff { flex: 1; }
  .resv-staff {
    font-size: 14px;
    font-weight: 700;
    color: var(--champagne);
  }
  .resv-customer {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 2px;
  }
  .shift-actions { margin-bottom: 14px; }
  .btn-copy {
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--rose-gold-d);
    color: var(--rose-gold-l);
    padding: 10px 18px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    letter-spacing: 0.1em;
  }
  .shift-req-title {
    margin-top: 14px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--pink);
    letter-spacing: 0.2em;
    font-weight: 700;
  }
  .shift-req-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(212, 165, 181, 0.1);
    border: 1px solid var(--pink-d);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--pink-glow);
    font-weight: 700;
  }
  .shift-req-add {
    font-size: 11px;
    background: var(--pink);
    color: var(--bg-deep);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 700;
  }
  .my-shift-list { margin-top: 16px; }
  .my-shift-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 14px;
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
  }
  .my-shift-date {
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
  }
  .my-shift-time {
    font-size: 14px;
    color: var(--rose-gold-l);
    font-weight: 700;
  }

  /* ===== マイタブ内 申請履歴セクション ===== */
  .my-history-section {
    margin-top: 24px;
    padding: 16px;
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }
  .my-history-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
  }
  .my-section-title {
    font-size: 12px; letter-spacing: 0.25em; font-weight: 700;
    color: var(--rose-gold-l);
  }
  .btn-link-small {
    background: transparent; border: 1px solid var(--rose-gold-l);
    color: var(--rose-gold-l); padding: 4px 14px;
    font-family: inherit; font-size: 11px; font-weight: 600;
    border-radius: 12px; cursor: pointer; letter-spacing: 0.15em;
  }
  .my-recent-history { display: flex; flex-direction: column; gap: 6px; }
  .my-history-item {
    padding: 10px 14px;
    background: var(--bg-deep);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    font-size: 12px;
  }
  .my-history-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 4px;
  }
  .my-history-type {
    font-weight: 700; color: var(--champagne); letter-spacing: 0.05em;
  }
  .my-history-status {
    padding: 2px 10px; font-size: 10px; font-weight: 700;
    letter-spacing: 0.15em; border-radius: 10px;
  }
  .my-history-status.status-pending   { background: var(--rose-gold-l); color: var(--bg-deep); }
  .my-history-status.status-approved  { background: #8eb59a; color: #fff; }
  .my-history-status.status-rejected  { background: var(--danger); color: #fff; }
  .my-history-status.status-cancelled { background: var(--text-sub); color: var(--bg-deep); }
  .my-history-date {
    font-size: 11px; color: var(--text-dim); letter-spacing: 0.1em;
  }

  /* スタッフ予約タブ: 閲覧専用カード */
  .resv-card-readonly { cursor: default; }
  .resv-card-readonly:active { transform: none; }

  /* ===== ランキング 管理者ボタン3つ (1行 grid) ===== */
  .ranking-admin-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
  }
  /* Phase 15: 確定/リセット/履歴ボタンを追加して 6 個になったので 2 行 × 3 列 */
  .ranking-admin-buttons .btn-rank-admin:nth-child(n+4) {
    /* 4-6 番目は 2 行目に自動的に並ぶ */
  }
  /* 過去ランキング履歴一覧/詳細スタイル */
  .history-list { display: flex; flex-direction: column; gap: 8px; }
  .history-row {
    background: var(--bg-card);
    border: 1px solid var(--border-soft, #2a1f2a);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    cursor: pointer;
  }
  .history-row:active { transform: scale(0.99); }
  .history-cycle { font-weight: 700; color: var(--rose-gold-l); }
  .history-meta  { font-size: 11px; color: #8a7a72; margin-top: 4px; }
  .history-detail-cycle { font-weight: 700; color: var(--rose-gold-l); margin: 12px 0 4px; }
  .history-detail-meta  { font-size: 11px; color: #8a7a72; margin-bottom: 12px; }
  .history-detail-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .btn-edit-history {
    background: var(--rose-gold-l, #c89090);
    border: none; color: #1a1a1a;
    padding: 6px 14px; border-radius: var(--radius-md, 8px);
    font-family: inherit; font-size: 12px; font-weight: 700;
    cursor: pointer;
  }
  .btn-edit-history:active { transform: scale(0.98); }
  .history-edit-note {
    font-size: 11px; color: #8a7a72; margin: 8px 0 12px;
    padding: 8px 10px; background: rgba(200,144,144,0.08);
    border-left: 3px solid var(--rose-gold-l, #c89090);
    border-radius: 4px;
  }
  .history-section { margin-top: 16px; }
  .history-section-title { color: var(--rose-gold-l); border-bottom: 1px solid var(--border-soft, #2a1f2a); padding-bottom: 4px; }
  .btn-rank-admin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 8px;
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--rose-gold-l);
    color: var(--rose-gold-l);
    border-radius: var(--radius-md);
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
    min-height: 60px;
  }
  .btn-rank-admin:active {
    transform: scale(0.96);
    background: var(--bg-card);
  }
  .btn-rank-admin .btn-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 1.2;
  }

  /* ===== 賞品画像アップロード ===== */
  .prize-image-upload-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .btn-upload-img {
    padding: 10px 14px;
    background: linear-gradient(135deg, var(--rose-gold-l), var(--rose-gold-l));
    color: var(--bg-deep);
    border: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer;
    letter-spacing: 0.1em;
  }
  .btn-upload-img:disabled { opacity: 0.6; cursor: wait; }
  .btn-upload-img:active:not(:disabled) { transform: scale(0.97); }

  /* prize-image-preview は既存定義あり (80x80) → 上書きで大きく */
  .prize-image-upload-wrap .prize-image-preview {
    width: 100%;
    max-width: 200px;
    height: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    display: block;
  }

  /* ===== サイクル設定モーダル ===== */
  .cycle-warning {
    padding: 10px 14px;
    background: rgba(217, 122, 122, 0.1);
    border: 1px solid rgba(217, 122, 122, 0.3);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--danger);
    margin-bottom: 16px;
    letter-spacing: 0.05em;
    line-height: 1.5;
  }
  .form-hint {
    font-size: 11px;
    color: var(--text-sub);
    margin-top: 4px;
  }
  .cycle-preview {
    padding: 12px 14px;
    background: var(--bg-deep);
    border: 1px solid var(--rose-gold-l);
    border-radius: var(--radius-sm);
    margin: 12px 0;
  }
  .cycle-preview-title {
    font-size: 11px;
    color: var(--rose-gold-l);
    letter-spacing: 0.15em;
    margin-bottom: 8px;
    font-weight: 700;
  }
  .cycle-preview-row {
    font-size: 12px;
    color: var(--champagne);
    padding: 4px 0;
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    letter-spacing: 0.05em;
  }

  /* ===== サイクル情報バー ===== */
  .cycle-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-deep);
    border: 1px solid var(--rose-gold-l);
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--rose-gold-l);
    font-weight: 600;
    letter-spacing: 0.1em;
  }
  .cycle-remaining {
    color: var(--gold-1st);
    font-weight: 800;
  }

  /* ===== ランキング Top5 豪華カード ===== */
  .ranking-top5 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
  }
  .top5-card {
    position: relative;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform 0.2s;
    overflow: hidden;
  }
  .top5-card:active { transform: scale(0.98); }
  .top5-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
  }

  /* 1位 ゴールド */
  .top5-gold {
    background: linear-gradient(135deg, #2a1f0e 0%, #443014 50%, #2a1f0e 100%);
    border: 3px solid #e8c466;
    box-shadow:
      0 0 24px rgba(232, 196, 102, 0.5),
      0 0 48px rgba(232, 196, 102, 0.3),
      inset 0 0 24px rgba(232, 196, 102, 0.1);
    animation: gold-glow 2.5s ease-in-out infinite;
  }
  @keyframes gold-glow {
    0%, 100% { box-shadow: 0 0 24px rgba(232,196,102,0.5), 0 0 48px rgba(232,196,102,0.3), inset 0 0 24px rgba(232,196,102,0.1); }
    50%      { box-shadow: 0 0 36px rgba(232,196,102,0.8), 0 0 72px rgba(232,196,102,0.5), inset 0 0 32px rgba(232,196,102,0.2); }
  }

  /* キラキラパーティクル */
  .sparkles {
    position: absolute; inset: 0; pointer-events: none;
  }
  .sparkles span {
    position: absolute;
    width: 6px; height: 6px;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 8px #fff, 0 0 16px #ffd700;
    animation: sparkle 2s infinite;
  }
  .sparkles span:nth-child(1) { top: 10%; left: 15%; animation-delay: 0s; }
  .sparkles span:nth-child(2) { top: 60%; left: 80%; animation-delay: 0.5s; }
  .sparkles span:nth-child(3) { top: 30%; left: 75%; animation-delay: 1s; }
  .sparkles span:nth-child(4) { top: 80%; left: 25%; animation-delay: 1.5s; }
  @keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1.2) rotate(180deg); }
  }

  /* 2位 シルバー */
  .top5-silver {
    background: linear-gradient(135deg, #1a1a20 0%, #2f2f38 50%, #1a1a20 100%);
    border: 2px solid #c0c0d0;
    box-shadow: 0 0 18px rgba(192,192,208,0.4), inset 0 0 16px rgba(192,192,208,0.08);
    animation: silver-glow 3s ease-in-out infinite;
  }
  @keyframes silver-glow {
    0%, 100% { box-shadow: 0 0 18px rgba(192,192,208,0.4), inset 0 0 16px rgba(192,192,208,0.08); }
    50%      { box-shadow: 0 0 28px rgba(192,192,208,0.6), inset 0 0 22px rgba(192,192,208,0.15); }
  }

  /* 3位 ブロンズ */
  .top5-bronze {
    background: linear-gradient(135deg, #1f1612 0%, #3a2820 50%, #1f1612 100%);
    border: 2px solid #cd7f32;
    box-shadow: 0 0 16px rgba(205,127,50,0.4), inset 0 0 14px rgba(205,127,50,0.1);
    animation: bronze-glow 3s ease-in-out infinite;
  }
  @keyframes bronze-glow {
    0%, 100% { box-shadow: 0 0 16px rgba(205,127,50,0.4), inset 0 0 14px rgba(205,127,50,0.1); }
    50%      { box-shadow: 0 0 24px rgba(205,127,50,0.6), inset 0 0 20px rgba(205,127,50,0.18); }
  }

  /* 4-5位 ローズゴールド */
  .top5-rose {
    background: linear-gradient(135deg, #1a1218 0%, #2a1f24 50%, #1a1218 100%);
    border: 1px solid var(--rose-gold-l);
    box-shadow: 0 0 12px rgba(214, 164, 138, 0.3);
  }

  .top5-rank-badge {
    display: inline-block;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    border-radius: 14px;
    white-space: nowrap;
  }
  .top5-rank-gold   { background: linear-gradient(135deg, #ffd700, #e8c466); color: #2a1f0e; }
  .top5-rank-silver { background: linear-gradient(135deg, #d8d8e0, #a8a8b8); color: #1a1a20; }
  .top5-rank-bronze { background: linear-gradient(135deg, #cd7f32, #a86620); color: #fff; }
  .top5-rank-rose   { background: linear-gradient(135deg, #b9856a, #8b5e3c); color: #fff; }

  .top5-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--champagne);
    letter-spacing: 0.1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .top5-points {
    font-size: 26px;
    font-weight: 900;
    color: var(--gold-1st);
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    line-height: 1;
    white-space: nowrap;
  }
  .top5-pt {
    font-size: 12px;
    margin-left: 4px;
    letter-spacing: 0.1em;
    font-weight: 700;
  }
  .top5-prize {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(255,255,255,0.2);
  }
  .top5-prize-main {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .top5-prize-info {
    flex: 1;
    min-width: 0;
  }
  .top5-prize-amount {
    font-size: 18px;
    font-weight: 800;
    color: #06c755;
    letter-spacing: 0.05em;
    font-family: 'Noto Sans JP', system-ui, sans-serif;
  }
  .top5-prize-item {
    font-size: 14px;
    color: var(--champagne);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .top5-prize-item::before {
    content: '🎁';
    font-size: 16px;
  }
  .top5-prize-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gold-1st);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    flex-shrink: 0;
  }
  .top5-prize-placeholder {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(232,196,102,0.1), rgba(185,133,106,0.1));
    border: 1px dashed var(--rose-gold-l);
    border-radius: var(--radius-sm);
    font-size: 30px;
    flex-shrink: 0;
  }

  /* 6位以降 (通常カード) — 既存 .rank-row のスタイルを継承 */
  .ranking-rest {
    display: flex; flex-direction: column; gap: 4px;
  }

  .badge-you {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.2em;
    border-radius: 8px;
    background: var(--gold-1st);
    color: var(--bg-deep);
    vertical-align: middle;
  }

  /* ===== 賞品設定モーダル ===== */
  .prize-cycle-info {
    padding: 12px;
    background: var(--bg-deep);
    border: 1px solid var(--rose-gold-l);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--rose-gold-l);
    letter-spacing: 0.1em;
    font-weight: 600;
  }
  .prize-rank-list {
    display: flex; flex-direction: column; gap: 12px;
  }
  .prize-rank-card {
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--bg-elev);
    border: 1px solid var(--line);
  }
  .prize-rank-card.prize-rank-1 { border-color: #e8c466; box-shadow: 0 0 8px rgba(232,196,102,0.2); }
  .prize-rank-card.prize-rank-2 { border-color: #c0c0d0; }
  .prize-rank-card.prize-rank-3 { border-color: #cd7f32; }
  .prize-rank-card.prize-rank-4,
  .prize-rank-card.prize-rank-5 { border-color: var(--rose-gold-l); }

  .prize-rank-header {
    font-size: 16px; font-weight: 800;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
    color: var(--champagne);
  }
  .prize-input-group { margin-bottom: 8px; }
  .prize-input-group label {
    display: block;
    font-size: 11px;
    color: var(--text-sub);
    margin-bottom: 4px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .prize-image-preview {
    width: 80px; height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-top: 8px;
    border: 1px solid var(--line);
  }
  .btn-save-prize {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    background: linear-gradient(135deg, var(--rose-gold-l), var(--rose-gold-l));
    color: var(--bg-deep);
    border: none;
    font-family: inherit;
    font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer;
    letter-spacing: 0.1em;
  }

  /* ===== コピートースト ===== */
  .copy-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, #6dad7e, #5a9a6a);
    color: #fff;
    padding: 12px 24px;
    border-radius: 24px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.1em;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
  }
  .copy-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* ===== 予約カードのLINEボタン ===== */
  .resv-line-btn {
    background: linear-gradient(135deg, #06c755, #04a047);
    color: #fff;
    border: none;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    border-radius: 16px;
    cursor: pointer;
    letter-spacing: 0.05em;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(6,199,85,0.3);
  }
  .resv-line-btn:active { transform: scale(0.96); }
  .resv-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* ===== 承認後 LINE 転送モーダル ===== */
  .line-offer-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pd-fadeIn 0.2s ease-out;
  }
  .line-offer-modal {
    width: 92%;
    max-width: 440px;
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 2px solid #06c755;
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 32px rgba(6,199,85,0.2);
    animation: pd-scaleIn 0.25s ease-out;
  }
  .lom-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px; padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }
  .lom-title {
    font-size: 16px; font-weight: 800;
    color: #06c755; letter-spacing: 0.1em;
  }
  .lom-close {
    background: var(--bg-deep);
    border: 1px solid var(--line);
    color: var(--text-sub);
    width: 32px; height: 32px;
    border-radius: 50%;
    font-size: 18px; cursor: pointer; font-family: inherit;
  }
  .lom-subtitle {
    font-size: 13px;
    color: var(--rose-gold-l);
    margin-bottom: 12px;
    letter-spacing: 0.1em;
    font-weight: 600;
  }
  .lom-preview {
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px;
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    font-size: 12px;
    color: var(--champagne);
    white-space: pre-wrap;
    line-height: 1.7;
    margin-bottom: 14px;
    max-height: 200px;
    overflow-y: auto;
  }
  .lom-copy-btn {
    width: 100%;
    background: linear-gradient(135deg, #06c755, #04a047);
    color: #fff;
    border: none;
    padding: 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--radius-md);
    cursor: pointer;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(6,199,85,0.3);
  }
  .lom-copy-btn:active { transform: scale(0.98); }
  .lom-skip-btn {
    width: 100%;
    background: transparent;
    color: var(--text-sub);
    border: 1px solid var(--line);
    padding: 10px;
    font-family: inherit;
    font-size: 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    letter-spacing: 0.1em;
  }

  /* ===== フォールバック表示 ===== */
  .copy-fallback-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1001;
    display: flex; align-items: center; justify-content: center;
  }
  .copy-fallback-content {
    width: 90%; max-width: 400px;
    background: var(--bg-card);
    border: 1px solid var(--rose-gold-l);
    border-radius: var(--radius-md);
    padding: 16px;
  }
  .copy-fallback-content textarea {
    width: 100%; height: 150px;
    background: var(--bg-deep);
    color: var(--champagne);
    border: 1px solid var(--line);
    padding: 8px;
    font-family: monospace;
    font-size: 11px;
    margin: 10px 0;
    border-radius: 4px;
  }
  .copy-fallback-title {
    font-size: 13px; font-weight: 700;
    color: var(--rose-gold-l);
  }
  .copy-fallback-content button {
    width: 100%; padding: 10px;
    background: var(--rose-gold-l);
    color: var(--bg-deep);
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
  }

  /* ===== ランキング行クリック ===== */
  .rank-row-clickable { cursor: pointer; transition: transform 0.15s, opacity 0.15s; }
  .rank-row-clickable:active { transform: scale(0.98); opacity: 0.85; }

  /* ===== ポイント詳細モーダル ===== */
  .point-detail-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: pd-fadeIn 0.2s ease-out;
  }
  .point-detail-modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 92%; max-width: 480px;
    max-height: 88vh; overflow-y: auto;
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 2px solid var(--gold-1st);
    border-radius: var(--radius-lg);
    padding: 20px;
    z-index: 1001;
    box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 32px rgba(232,196,102,0.2);
    animation: pd-scaleIn 0.25s ease-out;
  }
  @keyframes pd-fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pd-scaleIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  .pd-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rose-gold-l);
    margin-bottom: 16px;
  }
  .pd-name {
    font-size: 22px; font-weight: 800; color: var(--champagne);
    letter-spacing: 0.1em;
  }
  .pd-close {
    background: var(--bg-deep); border: 1px solid var(--line);
    color: var(--text-sub); font-size: 22px;
    width: 36px; height: 36px; border-radius: 50%;
    cursor: pointer; font-family: inherit; line-height: 1;
  }
  .pd-summary {
    text-align: center;
    padding: 16px;
    background: linear-gradient(135deg, rgba(232,196,102,0.1), rgba(20,16,26,0.6));
    border: 1px solid var(--gold-1st);
    border-radius: var(--radius-md);
    margin-bottom: 18px;
  }
  .pd-rank {
    font-size: 12px; color: var(--rose-gold-l);
    letter-spacing: 0.3em; margin-bottom: 6px; font-weight: 600;
  }
  .pd-total { display: flex; align-items: baseline; justify-content: center; gap: 6px; }
  .pd-total-num {
    font-size: 42px; font-weight: 900; color: var(--gold-1st);
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    text-shadow: 0 0 16px rgba(232,196,102,0.4);
    line-height: 1;
  }
  .pd-total-unit { font-size: 16px; color: var(--gold-1st); font-weight: 700; letter-spacing: 0.15em; }
  .pd-section { margin-bottom: 16px; }
  .pd-section-title {
    font-size: 11px; color: var(--rose-gold-l);
    letter-spacing: 0.3em; font-weight: 700;
    margin-bottom: 8px; padding-left: 4px;
  }
  .pd-section-title.pd-section-minus { color: var(--danger); }
  .pd-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px; align-items: center;
    padding: 10px 14px;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 5px;
    font-size: 13px;
  }
  .pd-row.pd-negative { border-color: rgba(217,122,122,0.3); }
  .pd-label { color: var(--text, var(--champagne)); font-weight: 600; letter-spacing: 0.05em; }
  .pd-calc { color: var(--text-dim); font-size: 11px; font-family: 'Noto Sans JP', system-ui, sans-serif; }
  .pd-sub {
    color: var(--rose-gold-l); font-weight: 700; font-size: 14px;
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    min-width: 65px; text-align: right;
  }
  .pd-row.pd-negative .pd-sub { color: var(--danger); }
  .pd-final {
    display: flex; justify-content: center; align-items: baseline; gap: 8px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(232,196,102,0.15), rgba(185,133,106,0.08));
    border: 2px solid var(--gold-1st);
    border-radius: var(--radius-md);
    margin-top: 8px;
  }
  .pd-final-label { font-size: 12px; color: var(--gold-1st); letter-spacing: 0.3em; font-weight: 700; }
  .pd-final-num { font-size: 26px; font-weight: 900; color: var(--gold-1st); font-family: 'Noto Sans JP', system-ui, sans-serif; }
  .pd-final-unit { font-size: 14px; color: var(--gold-1st); font-weight: 700; letter-spacing: 0.15em; }

  /* === 日別ポイント詳細 === */
  .daily-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .daily-card {
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .daily-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(232, 196, 102, 0.08), transparent);
    border-bottom: 1px solid var(--line-soft);
  }
  .daily-date {
    font-size: 14px;
    font-weight: 700;
    color: var(--champagne);
    letter-spacing: 0.05em;
  }
  .daily-total {
    font-size: 16px;
    font-weight: 800;
    font-family: 'Noto Sans JP', system-ui, sans-serif;
  }
  .daily-total-positive { color: var(--gold-1st); }
  .daily-total-negative { color: var(--danger); }
  .daily-total-zero     { color: var(--text-sub); }
  .daily-card-body { padding: 8px 14px 12px; }
  .daily-item-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 5px 0;
    font-size: 12px;
    border-bottom: 1px dashed var(--line-soft);
  }
  .daily-item-row:last-child { border-bottom: none; }
  .daily-item-label {
    color: var(--text);
    font-weight: 600;
  }
  .daily-item-calc {
    color: var(--text-dim);
    font-size: 11px;
    font-family: 'Noto Sans JP', system-ui, sans-serif;
  }
  .daily-item-sub {
    color: var(--rose-gold-l);
    font-weight: 700;
    min-width: 55px;
    text-align: right;
    font-family: 'Noto Sans JP', system-ui, sans-serif;
  }
  .daily-item-row.daily-negative .daily-item-sub { color: var(--danger); }
  .daily-no-data {
    font-size: 12px;
    color: var(--text-sub);
    text-align: center;
    padding: 8px 0;
  }
  .my-daily-section {
    margin-top: 24px;
    padding: 16px;
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }
  .my-daily-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }
  .month-select {
    background: var(--bg-deep);
    border: 1px solid var(--rose-gold-d);
    color: var(--rose-gold-l);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
  }
  .pd-tabs {
    display: flex;
    gap: 8px;
    margin: 14px 0;
  }
  .pd-tab {
    flex: 1;
    padding: 8px;
    background: var(--bg-deep);
    border: 1px solid var(--line);
    color: var(--text-sub);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.1em;
  }
  .pd-tab.active {
    background: linear-gradient(135deg, var(--rose-gold-l), var(--rose-gold));
    color: var(--bg-deep);
    border-color: var(--rose-gold);
  }
  .pd-daily-month-wrap {
    margin-bottom: 12px;
    text-align: center;
  }

  /* === 日次入力 一括 2テーブル分割 === */
  .daily-bulk-section { margin-bottom: 24px; }
  .daily-bulk-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--rose-gold-l);
    letter-spacing: 0.15em;
    margin-bottom: 10px;
    padding-left: 4px;
  }
  .daily-bulk-title-penalty { color: var(--danger); }
  .daily-bulk-section-penalty {
    padding-top: 20px;
    border-top: 1px solid rgba(217,79,79,0.3);
  }
  .daily-grid-penalty th { color: #ffb0b0; }
  .daily-grid-penalty td input[type="number"] {
    background: rgba(217,79,79,0.05);
  }
  .daily-save-btn { width: 100%; margin-top: 16px; }

  /* === 日次入力 減点セクション（個別モード） === */
  .daily-input-penalty {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(217,79,79,0.3);
  }
  .daily-input-penalty .daily-section-title {
    color: var(--danger);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.15em;
    margin-bottom: 10px;
  }
  .daily-input-penalty .input-field {
    border-color: rgba(217,79,79,0.3);
  }
  .daily-grid th.th-penalty {
    background: rgba(217,79,79,0.12);
    color: #ffb0b0;
  }
  .daily-grid td.td-penalty input {
    background: rgba(217,79,79,0.05);
  }

  /* === ランキング種別プルダウン === */
  .rank-select-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
  }
  .rank-select-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .rank-select-label {
    font-size: 11px;
    color: var(--rose-gold-l);
    letter-spacing: 0.15em;
    font-weight: 700;
    padding-left: 4px;
  }
  .rank-select-label-worst { color: var(--danger); }
  .rank-dropdown {
    width: 100%;
    padding: 12px 14px;
    background: linear-gradient(145deg, var(--bg-elev), var(--bg-card));
    border: 1px solid var(--rose-gold-d);
    color: var(--champagne);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b9856a' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
  }
  .rank-dropdown-worst {
    border-color: rgba(217,79,79,0.5);
    color: #ffb0b0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23d94f4f' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  }
  .rank-dropdown option {
    background: var(--bg-deep);
    color: var(--text);
  }

  /* === 減点ランキング === */
  .penalty-header-label {
    font-size: 14px;
    color: var(--danger);
    font-weight: 800;
    letter-spacing: 0.2em;
    margin: 12px 4px;
    text-align: center;
  }
  .penalty-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .penalty-card {
    position: relative;
    padding: 16px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: transform 0.2s;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #2a1416 0%, #3d1a1d 50%, #2a1416 100%);
    border: 2px solid #d94f4f;
    box-shadow: 0 0 18px rgba(217,79,79,0.4), inset 0 0 16px rgba(217,79,79,0.1);
    animation: penalty-glow 3s ease-in-out infinite;
  }
  @keyframes penalty-glow {
    0%, 100% { box-shadow: 0 0 18px rgba(217,79,79,0.4), inset 0 0 16px rgba(217,79,79,0.1); }
    50%      { box-shadow: 0 0 28px rgba(217,79,79,0.6), inset 0 0 22px rgba(217,79,79,0.2); }
  }
  .penalty-card:active { transform: scale(0.98); }
  .penalty-rank-badge {
    display: inline-block;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    border-radius: 14px;
    white-space: nowrap;
    background: linear-gradient(135deg, #d94f4f, #a83232);
    color: #fff;
  }
  .penalty-name {
    font-size: 18px;
    font-weight: 800;
    color: #ffd0d0;
    letter-spacing: 0.1em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .penalty-points {
    font-size: 26px;
    font-weight: 900;
    color: #ff6b6b;
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    line-height: 1;
    white-space: nowrap;
  }
  .penalty-pt {
    font-size: 12px;
    margin-left: 4px;
    letter-spacing: 0.1em;
    font-weight: 700;
  }
  .penalty-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-deep);
    border: 1px solid rgba(217,79,79,0.3);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .penalty-row-rank {
    font-size: 16px;
    font-weight: 800;
    color: #d94f4f;
    min-width: 28px;
    text-align: center;
  }
  .penalty-row-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .penalty-row-points {
    font-size: 15px;
    font-weight: 700;
    color: #ff6b6b;
    font-family: 'Noto Sans JP', system-ui, sans-serif;
    white-space: nowrap;
  }