/* ============================================================
       AHREY JAPAN 窶・逋ｽﾃ苓ｵ､繝・・繝槭・繧ｹ繝槭・譛€驕ｩ蛹・       ============================================================ */
    :root {
      --primary: #c0392b;
      --primary-dark: #962b20;
      --primary-light: #fde8e6;
      --bg: #ffffff;
      --bg-soft: #fafafa;
      --bg-gray: #f5f5f5;
      --text: #111111;
      --text-muted: #4a4a4a;          /* 謾ｹ蝟・ 繧ｳ繝ｳ繝医Λ繧ｹ繝亥ｼｷ蛹・(was #6b6b6b) */
      --text-light: #767676;          /* 謾ｹ蝟・ 繧医ｊ隱ｭ縺ｿ繧・☆縺・(was #9b9b9b) */
      --border: #d8d8d8;              /* 謾ｹ蝟・ 隕冶ｪ肴€ｧUP */
      --success: #15803d;             /* 謾ｹ蝟・ 邱代ｒ繧医ｊ豼・￥ */
      --warning: #b45309;
      --danger: #b3271c;
      --shadow: 0 2px 8px rgba(0,0,0,0.08);
      --shadow-lg: 0 4px 20px rgba(0,0,0,0.12);
      --radius: 12px;
      --radius-sm: 8px;
      --gap: 12px;
    }
    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans Thai", sans-serif;
      background: var(--bg-gray);
      color: var(--text);
      font-size: 17px;                /* 謾ｹ蝟・ 14 竊・17px (譛ｬ譁・ｒ螟ｧ縺阪￥) */
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }
    h1 { font-size: 24px; margin: 0 0 12px; }
    h2 { font-size: 22px; margin: 0 0 12px; }
    h4 { font-size: 16px; margin: 0 0 8px; }
    #app {
      max-width: 430px;
      margin: 0 auto;
      min-height: 100vh;
      background: var(--bg);
      position: relative;
      padding-bottom: 92px;      /* 1行タブ用クリアランス（縮小後） */
    }
    #app { padding-bottom: 96px; }             /* 1行タブバー クリアランス（縮小後） */
    #app.app-2row { padding-bottom: 132px; }   /* 2行タブバー クリアランス（縮小後） */
    /* Header */
    .topbar {
      background: var(--primary);
      color: #fff;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: var(--shadow);
    }
    .topbar .title { font-weight: 800; font-size: 20px; letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(0,0,0,0.15); }
    .topbar .actions { display: flex; gap: 8px; align-items: center; }
    .lang-btn {
      background: rgba(255,255,255,0.2);
      border: 1.5px solid rgba(255,255,255,0.6);
      color: #fff;
      padding: 6px 14px;
      border-radius: 18px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }
    .lang-btn.active { background: #fff; color: var(--primary); }
    .icon-btn {
      background: transparent;
      border: none;
      color: #fff;
      font-size: 22px;
      cursor: pointer;
      padding: 4px 8px;
    }

    /* Buttons */
    button { font-family: inherit; }
    .btn {
      background: var(--primary);
      color: #fff;
      border: none;
      padding: 12px 16px;
      border-radius: var(--radius-sm);
      font-size: 16px;                  /* 謾ｹ蝟・ 14 竊・16px */
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.1s;
      letter-spacing: 0.3px;
    }
    .btn:active { transform: scale(0.98); }
    .btn-block { width: 100%; }
    .btn-lg { padding: 18px; font-size: 20px; font-weight: 800; }   /* 謾ｹ蝟・ 螟ｧ繝懊ち繝ｳ20px */
    .btn-xl { padding: 22px; font-size: 22px; font-weight: 800; letter-spacing: 0.5px; }
    .btn-outline {
      background: #fff;
      color: var(--primary);
      border: 2px solid var(--primary);
    }
    .btn-ghost {
      background: transparent;
      color: var(--text);
      border: 1.5px solid var(--border);
    }
    .btn-danger { background: var(--danger); color: #fff; }
    .btn-success { background: var(--success); color: #fff; }
    .btn-sm { padding: 8px 12px; font-size: 14px; }
    .btn:disabled { opacity: 0.45; cursor: not-allowed; }

    /* Card */
    .card {
      background: #fff;
      border-radius: var(--radius);
      padding: 18px 16px;
      margin: 12px 16px;
      box-shadow: var(--shadow);
    }
    .card-red {
      background: var(--primary);
      color: #fff;
    }
    /* 襍､閭梧勹縺ｮ逋ｽ譁・ｭ励￥縺｣縺阪ｊ蛹厄ｼ亥ｽｱ縺ｧ隱ｭ縺ｿ繧・☆縺擾ｼ・*/
    .card-red, .card-red * { color: #fff; }
    .card-red .label, .card-red .value { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
    .card-red h3, .card-red h4 { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); font-weight: 800; }
    .card-red .muted, .card-red .xs { color: #ffe9e7 !important; opacity: 1; }
    .card h3 { margin: 0 0 14px; font-size: 18px; font-weight: 800; }
    .card-red h3 { color: #fff; }

    /* Forms */
    .form-row { margin-bottom: 14px; }
    label { display: block; font-size: 14px; color: var(--text-muted); margin-bottom: 6px; font-weight: 700; }
    input[type="text"], input[type="number"], input[type="date"], input[type="time"], input[type="password"], select, textarea {
      width: 100%;
      padding: 12px 14px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 16px;                /* iOS閾ｪ蜍輔ぜ繝ｼ繝髦ｲ豁｢ */
      font-family: inherit;
      background: #fff;
      color: var(--text);
    }
    input:focus, select:focus, textarea:focus { outline: 3px solid var(--primary-light); border-color: var(--primary); }
    textarea { min-height: 88px; resize: vertical; }

    .chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
    .chip {
      display: inline-block;
      padding: 10px 14px;
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: 22px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      user-select: none;
      color: var(--text);
    }
    .chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    .chip.small { padding: 6px 12px; font-size: 14px; }

    /* Login 窶・荳ｭ螟ｮ蟇・○縺ｮ荳ｭ髢薙し繧､繧ｺ (iPhone SE 邵ｦ縺ｫ蜿弱∪繧・ */
    .login-wrap {
      padding: 8px 16px 12px;
      min-height: 0;          /* 100vh縺ｮ蠑ｷ蛻ｶ繧ｹ繝医Ξ繝・メ謦､蜴ｻ */
      display: flex;
      flex-direction: column;
    }
    .login-title { text-align: center; margin: 4px 0 6px; font-size: 22px; font-weight: 800; color: var(--primary); letter-spacing: 0.5px; line-height: 1.2; }
    .login-help { text-align: center; font-size: 14px; color: var(--text-muted); margin: 0 0 8px; font-weight: 600; line-height: 1.3; }
    .staff-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px; }
    .staff-chip {
      padding: 12px 16px;
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: 22px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      min-width: 80px;
      text-align: center;
    }
    .staff-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    .staff-chip.no-pin::after {
      content: '!';
      display: inline-block;
      margin-left: 4px;
      width: 16px;
      height: 16px;
      background: var(--warning);
      color: #fff;
      border-radius: 50%;
      font-size: 12px;
      line-height: 16px;
    }

    /* PIN display: 豁｣譁ｹ蠖｢縺ｮ繝懊ャ繧ｯ繧ｹ4縺､ */
    .pin-display { display: flex; justify-content: center; gap: 10px; margin: 8px 0 10px; }
    .pin-box {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      border: 2.5px solid var(--border);
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      font-weight: 800;
      color: var(--primary);
      transition: border-color 0.15s, transform 0.1s;
    }
    .pin-box.filled {
      border-color: var(--primary);
      background: var(--primary-light);
      transform: scale(1.04);
    }
    /* 莠呈鋤: 譌ｧ.pin-dot 繧帝撼陦ｨ遉ｺ縺ｫ縺励※繝ｬ繧､繧｢繧ｦ繝亥ｴｩ繧後ｒ髦ｲ豁｢ */
    .pin-dot { display: none; }

    /* 繧ｭ繝ｼ繝代ャ繝・窶・荳ｭ髢薙し繧､繧ｺ繝ｻ荳ｭ螟ｮ蟇・○ */
    .keypad {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      max-width: 320px;
      width: 100%;
      margin: 0 auto;
      padding: 0;
      box-sizing: border-box;
    }
    .key {
      aspect-ratio: 1 / 1;        /* 豁｣譁ｹ蠖｢ */
      padding: 0;
      background: #fff;
      border: 2px solid #d1d5db;
      border-radius: 14px;
      font-size: 28px;            /* 24-32縺ｮ荳ｭ髢・*/
      font-weight: 700;
      cursor: pointer;
      color: var(--text);
      user-select: none;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .key:active { background: #f3f4f6; transform: scale(0.95); }

    /* 繝ｭ繧ｰ繧､繝ｳ繝懊ち繝ｳ 窶・荳ｭ螟ｮ蟇・○繝ｻ繧ｭ繝ｼ繝代ャ繝峨→蟷・ｒ謠・∴繧・*/
    .btn-login {
      background: var(--primary);
      color: #fff;
      border: none;
      padding: 16px;
      border-radius: var(--radius);
      font-size: 20px;
      font-weight: 700;
      cursor: pointer;
      max-width: 320px;
      width: 100%;
      margin: 12px auto 0;
      display: block;
      letter-spacing: 1px;
      box-shadow: 0 4px 14px rgba(192,57,43,0.3);
      box-sizing: border-box;
    }
    .btn-login:active { transform: scale(0.98); }
    .btn-login:disabled {
      background: #d8b3ad;
      box-shadow: none;
      cursor: not-allowed;
    }

    /* iPhone SE (鬮倥＆667px譛ｪ貅€) 逕ｨ縺ｫ縺輔ｉ縺ｫ蝨ｧ邵ｮ */
    @media (max-height: 700px) {
      .login-wrap { padding-top: 4px; padding-bottom: 8px; }
      .login-title { font-size: 20px; margin: 2px 0 4px; }
      .login-help { font-size: 13px; margin: 0 0 6px; }
      .pin-display { margin: 4px 0 6px; }
      .pin-box { width: 42px; height: 42px; font-size: 22px; }
      .keypad { gap: 8px; max-width: 280px; }
      .key { font-size: 24px; border-radius: 12px; }
      .btn-login { padding: 12px; font-size: 18px; margin-top: 8px; max-width: 280px; }
    }

    /* Tabs 窶・繧ｿ繝・・縺励ｄ縺吶＞螟ｧ縺阪ａ繝懊ち繝ｳ・・陦後Ξ繧､繧｢繧ｦ繝亥ｯｾ蠢懶ｼ・*/
    .tab-nav {
      position: fixed;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      max-width: 430px;
      background: #fff;
      border-top: 1px solid var(--border);
      display: flex;
      flex-wrap: wrap;
      z-index: 50;
      padding: 4px 3px;
      padding-bottom: calc(4px + env(safe-area-inset-bottom));
    }
    .tab-btn {
      flex: 1 1 auto;
      padding: 6px 3px;           /* 縮小: タブ高を抑える */
      min-height: 46px;           /* タップ可能を保ちつつ縮小(>=44px) */
      margin: 1px;
      background: transparent;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      color: var(--text-muted);
      font-size: 11px;            /* 縮小: ラベル */
      font-weight: 600;
      line-height: 1.05;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .tab-nav-2row .tab-btn {
      flex: 0 0 calc(25% - 4px);  /* 2陦・(4蛻療・陦・繝ｻmargin繧貞ｷｮ縺怜ｼ輔￥ */
    }
    .tab-btn.active { color: var(--primary); font-weight: 700; }
    .tab-btn.active .tab-icon { transform: scale(1.08); }
    .tab-icon {
      font-size: 20px;            /* 縮小: アイコン (26→20) */
      display: block;
      margin-bottom: 2px;
      transition: transform 0.15s;
      line-height: 1;
    }

    /* Top sub-tabs */
    .subtabs {
      display: flex;
      overflow-x: auto;
      gap: 6px;
      padding: 10px 12px;
      background: #fff;
      border-bottom: 1px solid var(--border);
      scrollbar-width: none;
    }
    .subtabs::-webkit-scrollbar { display: none; }
    .subtab {
      padding: 9px 16px;
      background: var(--bg-gray);
      border-radius: 18px;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      color: var(--text);
    }
    .subtab.active { background: var(--primary); color: #fff; }

    /* Stats */
    .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .stat-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    /* 4遲牙・・医ョ繧､繝ｪ繝ｼ逕ｻ髱｢ 襍､繧ｻ繧ｯ繧ｷ繝ｧ繝ｳ 2谿ｵ逶ｮ逕ｨ繝ｻ繧ｹ繝槭・縺ｧ繧りｩｰ縺ｾ繧峨↑縺・ｼ・*/
    .stat-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
    .stat-grid-4 .stat { padding: 8px 2px; min-width: 0; }
    .stat-grid-4 .stat .value { font-size: 24px; line-height: 1.05; font-variant-numeric: tabular-nums; }
    .stat-grid-4 .stat .label { font-size: 12px; }
    @media (min-width: 380px) {
      .stat-grid-4 .stat .value { font-size: 26px; }
      .stat-grid-4 .stat .label { font-size: 13px; }
    }
    .stat { text-align: center; padding: 10px 6px; }
    .stat .value { font-size: 28px; font-weight: 800; line-height: 1.1; }   /* 謾ｹ蝟・ 22 竊・28 */
    .stat .value-xl { font-size: 36px; font-weight: 800; line-height: 1.1; }
    .stat .label { font-size: 13px; color: var(--text-muted); margin-top: 4px; font-weight: 600; }
    .card-red .stat .label { color: #ffe9e7; }

    /* List items */
    .list-item {
      padding: 14px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
    }
    .list-item:last-child { border-bottom: none; }
    .list-item .left { flex: 1; }
    .list-item .name { font-weight: 700; font-size: 16px; }
    .list-item .sub { font-size: 14px; color: var(--text-muted); margin-top: 2px; }
    .list-item .right { text-align: right; }

    /* Tables */
    table { width: 100%; border-collapse: collapse; font-size: 15px; }
    th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
    th { font-weight: 800; color: var(--text); font-size: 13px; background: var(--bg-soft); text-transform: none; }
    .table-wrap { overflow-x: auto; background: #fff; border-radius: var(--radius); margin: 12px 16px; box-shadow: var(--shadow); }
    .row-mine { background: var(--primary-light) !important; font-weight: 700; }
    .rank-cell { font-weight: 800; color: var(--primary); width: 38px; font-size: 17px; }
    .row-today { background: #fff7ed !important; }
    .row-today td:first-child { font-weight: 800; color: var(--warning); }
    .row-sun td:first-child { color: #c0392b; }
    .row-sat td:first-child { color: #1d4ed8; }

    /* Badges */
    .badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
    }
    .badge-red { background: var(--primary-light); color: var(--primary-dark); }
    .badge-green { background: #d1fae5; color: #065f46; }
    .badge-gray { background: var(--bg-gray); color: var(--text); }
    .badge-yellow { background: #fef3c7; color: #92400e; }
    .badge-lg { padding: 6px 14px; font-size: 15px; }
    .badge-on-duty {
      background: var(--success);
      color: #fff;
      padding: 6px 14px;
      border-radius: 14px;
      font-size: 15px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(21,128,61,0.25);
    }
    .badge-on-duty::before {
      content: '';
      width: 10px; height: 10px;
      border-radius: 50%;
      background: #fff;
      animation: pulse-dot 1.4s infinite;
    }
    @keyframes pulse-dot {
      0%,100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(0.85); }
    }

    /* Modal / Sheet */
    .overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200;
      display: flex; align-items: flex-end; justify-content: center;
    }
    .sheet {
      width: 100%; max-width: 430px;
      background: #fff; border-radius: 20px 20px 0 0;
      max-height: 85vh; overflow-y: auto;
      animation: slide-up 0.2s ease-out;
    }
    @keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .sheet-header { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background: #fff; }
    .sheet-title { font-weight: 700; font-size: 16px; }
    .sheet-body { padding: 16px; }
    .sheet-footer { padding: 12px 16px; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: #fff; }

    /* Calendar */
    .cal-wrap {
      background: #fff;
      padding: 8px;
      border-radius: var(--radius);
      margin: 12px 12px;
      box-shadow: var(--shadow);
      width: calc(100% - 24px);
      box-sizing: border-box;
      overflow: hidden;
    }
    .cal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; padding: 0 4px; }
    .cal-head-center { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: center; }
    .cal-head-total { font-size: 13px; font-weight: 600; white-space: nowrap; }
    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 3px;
      width: 100%;
    }
    .cal-day-name {
      text-align: center;
      font-size: 10px;
      color: var(--text-muted);
      padding: 2px 0;
      font-weight: 600;
      min-width: 0;
    }
    .cal-cell {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      font-size: 12px;
      cursor: pointer;
      position: relative;
      min-width: 0;
      padding: 0;
      box-sizing: border-box;
      overflow: hidden;
    }
    .cal-cell.empty { visibility: hidden; }
    .cal-cell.shift { background: var(--primary); color: #fff; font-weight: 700; }
    .cal-cell.today { box-shadow: inset 0 0 0 2px var(--warning); }
    .cal-cell.other { color: var(--text-light); }
    .cal-cell.selected { background: var(--warning); color: #fff; font-weight: 700; }
    .cal-cell .cell-badge {
      position: absolute;
      bottom: 1px;
      right: 2px;
      font-size: 8px;
      line-height: 1;
    }

    /* Helpers */
    .row { display: flex; gap: 8px; align-items: center; }
    .row-between { display: flex; justify-content: space-between; align-items: center; }
    .gap { gap: var(--gap); }
    .grow { flex: 1; }
    .mt-8 { margin-top: 8px; }
    .mt-12 { margin-top: 12px; }
    .mt-16 { margin-top: 16px; }
    .mb-12 { margin-bottom: 12px; }
    .text-c { text-align: center; }
    .text-r { text-align: right; }
    .muted { color: var(--text-muted); }
    .small { font-size: 14px; }            /* 謾ｹ蝟・ 12 竊・14 */
    .xs { font-size: 13px; }               /* 謾ｹ蝟・ 11 竊・13 */
    .bold { font-weight: 700; }
    .red { color: var(--primary); }
    .green { color: var(--success); }
    .gray { color: var(--text-muted); }
    .num-lg { font-size: 24px; font-weight: 800; }
    .num-xl { font-size: 32px; font-weight: 800; line-height: 1; }
    .num-xxl { font-size: 48px; font-weight: 800; line-height: 1; }

    .toast {
      position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
      background: rgba(0,0,0,0.9); color: #fff;
      padding: 14px 22px; border-radius: 22px;
      font-size: 16px; font-weight: 600; z-index: 999;
      animation: fade-in 0.2s;
      max-width: 90%;
      text-align: center;
      box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    }
    @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

    .loading { text-align: center; padding: 40px; color: var(--text-muted); }
    .spinner {
      width: 32px; height: 32px;
      border: 3px solid var(--bg-gray);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin: 0 auto 12px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .skeleton {
      background: linear-gradient(90deg, var(--bg-gray) 25%, #ececec 50%, var(--bg-gray) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.2s infinite;
      border-radius: var(--radius-sm);
    }
    @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    .skel-line { height: 14px; margin: 8px 0; }
    .skel-card { padding: 16px; margin: 12px 16px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
    .empty { text-align: center; padding: 32px 16px; color: var(--text-muted); font-size: 13px; }

    /* Receipt builder */
    .item-card { background: var(--bg-gray); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; }
    .qty-stepper { display: flex; align-items: center; gap: 8px; }
    .qty-stepper button {
      width: 32px; height: 32px;
      border: 1px solid var(--border);
      background: #fff;
      border-radius: 6px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
    }
    .qty-stepper input { width: 60px; text-align: center; }

    .alert {
      padding: 14px 16px;
      border-radius: var(--radius-sm);
      margin: 12px 16px;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.5;
    }
    .alert-warn { background: #fef3c7; color: #78350f; border-left: 4px solid var(--warning); }
    .alert-danger { background: var(--primary-light); color: #7a1d12; border-left: 4px solid var(--primary); }
    .alert-info { background: #dbeafe; color: #1e3a8a; border-left: 4px solid #2563eb; }
    .alert-success { background: #d1fae5; color: #064e3b; border-left: 4px solid var(--success); }

    .divider { height: 1px; background: var(--border); margin: 14px 0; }

    /* 莠育ｴ・き繝ｼ繝・(2026-05-12) */
    .reservation-card {
      background: #fff;
      border: 1px solid var(--border);
      border-left: 4px solid var(--primary);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      margin: 0 0 10px;
      cursor: pointer;
      transition: background 0.15s;
    }
    .reservation-card:active { background: var(--bg-soft); }
    .reservation-row1 {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 6px;
    }
    .reservation-time {
      font-size: 22px;
      font-weight: 800;
      color: var(--primary-dark);
      letter-spacing: 0.5px;
    }
    .reservation-persons {
      font-size: 15px;
      color: var(--text);
      font-weight: 600;
    }
    .reservation-type {
      margin-left: auto;
      font-size: 13px;
    }
    .reservation-guest {
      font-size: 17px;
      margin: 2px 0;
    }
    .reservation-guest b { color: var(--text); }
    .reservation-meta {
      font-size: 14px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    /* 繝ｩ繝ｳ繧ｭ繝ｳ繧ｰ繝・・繝ｫ繝舌・ 2陦梧ｧ区・ (2026-05-12 謾ｹ) */
    .ranking-toolbar {
      background: #fff;
      border-bottom: 1px solid var(--border);
      padding: 10px 12px 8px;
      position: sticky;
      top: 56px;
      z-index: 5;
    }
    /* 譛亥・譖ｿ: pill 蠖｢ (荳ｭ螟ｮ蟇・○繝ｻ繧ｳ繝ｳ繝代け繝・ */
    .ranking-month-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin: 0 auto 10px;
      max-width: 280px;
      background: var(--bg-soft);
      border: 1.5px solid var(--border);
      border-radius: 999px;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .ranking-month-btn {
      width: 44px;
      height: 38px;
      background: transparent;
      border: none;
      font-size: 22px;
      font-weight: 800;
      color: var(--primary-dark);
      cursor: pointer;
      flex-shrink: 0;
    }
    .ranking-month-btn:active { background: var(--primary-light); }
    .ranking-month-label {
      flex: 1;
      text-align: center;
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      padding: 4px 8px;
    }
    .ranking-month-text {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.3px;
      color: var(--primary-dark);
      line-height: 1.15;
    }
    .ranking-month-sub {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 600;
      line-height: 1;
      margin-top: 1px;
    }
    /* 驛ｨ髢€繧ｿ繝・ 3蛻励げ繝ｪ繝・ラ (6蛟・2陦・/ 7-8蛟・3陦・ 窶・繧ｹ繝槭・縺ｧ蜈ｨ驛ｨ隕九∴繧・*/
    .ranking-subtabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      padding: 0;
      background: transparent;
      border-bottom: none;
      overflow: visible;
    }
    .ranking-subtabs .subtab {
      padding: 10px 6px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 10px;
      text-align: center;
      white-space: nowrap;
      flex-shrink: 1;
      background: var(--bg-gray);
      transition: background .1s;
    }
    .ranking-subtabs .subtab.active {
      background: var(--primary);
      color: #fff;
    }

    /* 繝ｩ繝ｳ繧ｭ繝ｳ繧ｰ 1縲・菴・繝ｪ繝・メ繧ｫ繝ｼ繝会ｼ磯≡/驫€/驫・ｼ・*/
    .rank-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      margin: 0 16px 12px;
      border-radius: 16px;
      position: relative;
    }
    .rank-card-1 {
      border: 4px solid #FFD700;
      background: linear-gradient(135deg, #FFF8DC 0%, #FFE5A0 100%);
      box-shadow: 0 4px 18px rgba(255,215,0,0.35);
    }
    .rank-card-2 {
      border: 3px solid #C0C0C0;
      background: linear-gradient(135deg, #F5F5F5 0%, #DCDCDC 100%);
      box-shadow: 0 3px 12px rgba(150,150,150,0.3);
    }
    .rank-card-3 {
      border: 2px solid #CD7F32;
      background: linear-gradient(135deg, #FAEBD7 0%, #DEB887 100%);
      box-shadow: 0 3px 10px rgba(205,127,50,0.28);
    }
    .rank-card.is-me {
      outline: 3px solid var(--primary);
      outline-offset: 2px;
    }
    .rank-emoji {
      font-size: 40px;
      flex-shrink: 0;
      line-height: 1;
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
    }
    .rank-card-1 .rank-emoji { font-size: 52px; }

    /* 繝阪ぎ繝・ぅ繝悶Λ繝ｳ繧ｭ繝ｳ繧ｰ (驕・綾 / 鄂ｰ驥・: 1縲・菴阪・縲梧が縺・€阪う繝｡繝ｼ繧ｸ 窶・笘・・逐 + 襍､邉ｻ (@300) */
    .rank-card.is-negative.rank-card-1 {
      border: 4px solid #8B0000;
      background: linear-gradient(135deg, #5a0a0a 0%, #a01010 100%);
      box-shadow: 0 4px 18px rgba(139,0,0,0.45);
    }
    .rank-card.is-negative.rank-card-2 {
      border: 3px solid #B22222;
      background: linear-gradient(135deg, #6b2222 0%, #b04040 100%);
      box-shadow: 0 3px 12px rgba(178,34,34,0.4);
    }
    .rank-card.is-negative.rank-card-3 {
      border: 2px solid #CD5C5C;
      background: linear-gradient(135deg, #8b3a3a 0%, #c66363 100%);
      box-shadow: 0 3px 10px rgba(205,92,92,0.35);
    }
    .rank-card.is-negative .rank-pos,
    .rank-card.is-negative .rank-name,
    .rank-card.is-negative .rank-value,
    .rank-card.is-negative .rank-value b,
    .rank-card.is-negative .rank-prize {
      color: #fff;
    }
    .rank-card.is-negative .rank-emoji {
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    }
    .rank-info { flex: 1; min-width: 0; }
    .rank-pos {
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.5px;
      line-height: 1;
    }
    .rank-card-1 .rank-pos { color: #8a6d00; font-size: 16px; }
    .rank-card-2 .rank-pos { color: #555; }
    .rank-card-3 .rank-pos { color: #6b3410; }
    .rank-name {
      font-size: 22px;
      font-weight: 800;
      margin: 4px 0 2px;
      color: #1a1a1a;
      line-height: 1.1;
    }
    .rank-card-1 .rank-name { font-size: 26px; }
    .rank-value {
      font-size: 13px;
      color: #4a4a4a;
      font-weight: 600;
    }
    .rank-value b { font-size: 17px; color: #1a1a1a; }
    .rank-prize {
      font-size: 22px;
      font-weight: 800;
      flex-shrink: 0;
      background: rgba(255,255,255,0.65);
      padding: 8px 12px;
      border-radius: 12px;
      letter-spacing: 0.3px;
      line-height: 1;
    }
    .rank-card-1 .rank-prize { font-size: 24px; color: #8a6d00; }
    .rank-card-2 .rank-prize { font-size: 22px; color: #555; }
    .rank-card-3 .rank-prize { font-size: 22px; color: #6b3410; }

    /* 繧ｹ繧ｿ繝・ヵTOP 繧ｦ繧ｧ繝ｫ繧ｫ繝繝舌リ繝ｼ */
    .welcome-banner {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 18px;
      margin: 12px 16px 0;
      background: linear-gradient(135deg, #fff5f3 0%, #ffe8e4 100%);
      border-radius: var(--radius);
      border-left: 4px solid var(--primary);
    }
    .welcome-emoji { font-size: 28px; line-height: 1; }
    .welcome-text { font-size: 18px; font-weight: 700; color: var(--primary-dark); flex: 1; }

    /* 譛域ｬ｡螢ｲ荳翫き繝ｼ繝・3陦檎ｸｦ荳ｦ縺ｳ・育ｮ｡逅・€・・繝ｼ繝・・*/
    .ms-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 4px;
      border-bottom: 1px solid var(--border);
      gap: 12px;
    }
    .ms-label {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-muted);
      flex-shrink: 0;
    }
    .ms-value {
      font-size: 36px;
      font-weight: 800;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.5px;
      text-align: right;
    }
    @media (min-width: 380px) {
      .ms-value { font-size: 40px; }
    }

    /* @306: 譛域ｬ｡4鬆・岼 2x2 繧ｰ繝ｪ繝・ラ + 蜈域怦蟇ｾ豈・*/
    .ms-grid-2col {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
      width: 100%;
      padding: 10px 0; border-bottom: 1px solid var(--border);
    }
    .ms-grid-cell {
      padding: 10px 12px; border: 1px solid var(--border);
      border-radius: 10px; background: var(--bg-soft);
      min-width: 0;
      text-align: center;   /* ラベル/数字/前月比を中央寄せ（右余白をなくす） */
    }
    .ms-cell-label { font-size: 12px; font-weight: 700; color: var(--text-muted); line-height: 1.2; }
    .ms-cell-value { font-size: 22px; font-weight: 800; line-height: 1.2; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
    .ms-cell-compare { font-size: 11px; color: var(--text-muted); line-height: 1.2; }
    .compare-up { color: #10b981; font-weight: 700; }
    .compare-down { color: #ef4444; font-weight: 700; }
    .compare-flat { color: #888; font-weight: 700; }

    /* 赤カード内の区切り線（白の半透明）＋赤背景で視認できる前月比色 */
    .rc-divider { height: 1px; background: rgba(255,255,255,0.28); border: 0; margin: 12px 0; }
    .rc-section-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #ffe9e7; opacity: .85; margin-bottom: 6px; }
    .card-red .rc-up { color: #69F0AE !important; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
    .card-red .rc-down { color: #FF8A80 !important; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
    .card-red .rc-flat { color: #ffe9e7 !important; font-weight: 700; }
    .rc-cmp { font-size: 11px; line-height: 1.25; margin-top: 3px; white-space: nowrap; }
    .card-red .rc-prev { color: #ffe9e7 !important; opacity: .8; font-weight: 600; }
    /* マイ順位カードの順位エリア（2分割・左右対称・中央寄せ＋白半透明の縦区切り） */
    .rc-hero { display: flex; align-items: stretch; }
    .rc-hero-col { flex: 1; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 2px 4px; }
    .rc-hero-col + .rc-hero-col { border-left: 1px solid rgba(255,255,255,0.28); }
    .rc-hero .rc-rank-num { font-size: 44px; font-weight: 800; line-height: 1; }
    .rc-hero .rc-rank-suffix { font-size: 18px; font-weight: 800; }
    .rc-hero .rc-pt-num { font-size: 34px; font-weight: 800; line-height: 1; }
    /* 集計エリア: 赤背景に白カードを4つ（数字・ラベル・前月比を各カード内に収める） */
    .rc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
    .rc-stat-card { background: #fff; border-radius: 10px; padding: 9px 3px 8px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
    .rc-stat-card .rcv { font-size: 22px; font-weight: 800; color: #1f1f1f; line-height: 1.05; font-variant-numeric: tabular-nums; }
    .rc-stat-card .rcl { font-size: 12px; color: #6b6b6b; font-weight: 700; margin-top: 1px; }
    .rc-stat-card .rc-cmp2 { font-size: 10px; margin-top: 4px; line-height: 1.2; white-space: nowrap; }
    .rc-stat-card .rc-cmp2 > span { display: block; }
    .rc-stat-card .rc-prev2 { color: #9a9a9a; font-weight: 600; }
    .card-red .rc-stat-card .rc-up2 { color: #10b981 !important; font-weight: 800; }
    .card-red .rc-stat-card .rc-down2 { color: #ef4444 !important; font-weight: 800; }
    .card-red .rc-stat-card .rc-flat2 { color: #999 !important; font-weight: 700; }

    /* 打刻 同伴ありチェック行（現行GAS準拠） */
    .clock-dohan { display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer; font-size: 17px; }
    .clock-dohan input[type="checkbox"] { width: 22px; height: 22px; flex: none; accent-color: var(--primary); }
    /* 打刻履歴 下の罰金合計 */
    .fine-total { margin: 8px 4px 4px; padding: 10px 12px; background: var(--primary-light, #fdecea); border-radius: 10px; }
    .fine-total-title { font-size: 12px; font-weight: 800; color: var(--text-muted); margin-bottom: 6px; }
    .fine-total-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 3px 0; }
    .fine-total-row b { font-variant-numeric: tabular-nums; }
    .fine-total-row.grand { border-top: 1px solid rgba(0,0,0,0.12); margin-top: 4px; padding-top: 7px; font-size: 16px; font-weight: 800; }

    /* 繝・う繝ｪ繝ｼ螢ｲ荳翫ユ繝ｼ繝悶Ν・育ｮ｡逅・€・・繝ｼ繝譁ｰ隕擾ｼ・*/
    .ds-scroll { max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-sm); }
    .ds-scroll table { font-size: 15px; }
    .ds-scroll thead th { position: sticky; top: 0; background: var(--primary); color: #fff; z-index: 1; font-size: 14px; padding: 10px 8px; border-bottom: none; }
    .ds-scroll tbody tr:hover { background: var(--bg-soft); }
    .ds-scroll td { padding: 10px 8px; }
    .ds-scroll td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

    /* 繝槭せ繧ｿ繝｡繝九Η繝ｼ(謚倥ｊ縺溘◆縺ｿ) */
    .submenu-card {
      background: var(--bg-soft);
      border-radius: var(--radius-sm);
      margin: 8px 0;
      overflow: hidden;
      border: 1px solid var(--border);
    }
    .submenu-head {
      padding: 14px 16px;
      cursor: pointer;
      font-weight: 800;
      font-size: 17px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
    }
    .submenu-head .arr { transition: transform 0.2s; font-size: 14px; }
    .submenu-card.open .submenu-head .arr { transform: rotate(90deg); }
    .submenu-body { display: none; background: #fff; border-top: 1px solid var(--border); }
    .submenu-card.open .submenu-body { display: block; }

    /* ================================================================ */
    /* @333 Phase 3: Point Detail + Prize Settings + Top5 (A5 遘ｻ讀・     */
    /* dark-luxe 繧ｹ繧ｳ繝ｼ繝・ AHREY 縺ｮ light 繝・・繝槭→豺ｷ縺悶ｉ縺ｪ縺・ｈ縺・scoped */
    /* ================================================================ */
    .top5-card,
    .point-detail-modal, .point-detail-backdrop,
    #prize-modal, #prize-modal-backdrop,
    #point-rules-modal, #point-rules-modal-backdrop,
    #daily-detail-modal, #daily-detail-modal-backdrop {
      --pd-rose-gold-l: #d6a48a;
      --pd-rose-gold:   #b9856a;
      --pd-gold-1st:    #e8c466;
      --pd-champagne:   #e8d5c4;
      --pd-bg-deep:     #0a0608;
      --pd-bg-elev:     #1f1820;
      --pd-bg-card:     #15101a;
      --pd-line:        #2a1f2a;
      --pd-text-sub:    #8a7a72;
      --pd-text-dim:    #b8a89a;
      --pd-danger:      #d97a7a;
      --pd-radius-sm:   8px;
      --pd-radius-md:   12px;
      --pd-radius-lg:   16px;
    }

    /* --- Point Detail Modal --- */
    .point-detail-backdrop {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.7);
      z-index: 9000;
      -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: 430px;
      max-height: 88vh; overflow-y: auto;
      background: linear-gradient(145deg, var(--pd-bg-elev), var(--pd-bg-card));
      border: 2px solid var(--pd-gold-1st);
      border-radius: var(--pd-radius-lg);
      padding: 20px;
      z-index: 9001;
      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;
      color: var(--pd-champagne);
    }
    @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(--pd-rose-gold-l);
      margin-bottom: 16px;
    }
    .pd-name {
      font-size: 22px; font-weight: 800; color: var(--pd-champagne);
      letter-spacing: 0.1em;
    }
    .pd-close {
      background: var(--pd-bg-deep); border: 1px solid var(--pd-line);
      color: var(--pd-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(--pd-gold-1st);
      border-radius: var(--pd-radius-md);
      margin-bottom: 18px;
    }
    .pd-rank {
      font-size: 12px; color: var(--pd-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(--pd-gold-1st);
      text-shadow: 0 0 16px rgba(232,196,102,0.4);
      line-height: 1;
    }
    .pd-total-unit { font-size: 16px; color: var(--pd-gold-1st); font-weight: 700; letter-spacing: 0.15em; }
    .pd-section { margin-bottom: 16px; }
    .pd-section-title {
      font-size: 11px; color: var(--pd-rose-gold-l);
      letter-spacing: 0.3em; font-weight: 700;
      margin-bottom: 8px; padding-left: 4px;
    }
    .pd-section-title.pd-section-minus { color: var(--pd-danger); }
    .pd-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 12px; align-items: center;
      padding: 10px 14px;
      background: var(--pd-bg-deep);
      border: 1px solid var(--pd-line);
      border-radius: var(--pd-radius-sm);
      margin-bottom: 5px;
      font-size: 13px;
    }
    .pd-row.pd-negative { border-color: rgba(217,122,122,0.3); }
    .pd-row.pd-info     { border-color: rgba(214,164,138,0.2); opacity: 0.85; }
    .pd-label { color: var(--pd-champagne); font-weight: 600; letter-spacing: 0.05em; }
    .pd-calc { color: var(--pd-text-dim); font-size: 11px; }
    .pd-sub {
      color: var(--pd-rose-gold-l); font-weight: 700; font-size: 14px;
      min-width: 70px; text-align: right;
    }
    .pd-row.pd-negative .pd-sub { color: var(--pd-danger); }
    .pd-row.pd-info .pd-sub     { color: var(--pd-text-dim); }
    .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(--pd-gold-1st);
      border-radius: var(--pd-radius-md);
      margin-top: 8px;
    }
    .pd-final-label { font-size: 12px; color: var(--pd-gold-1st); letter-spacing: 0.3em; font-weight: 700; }
    .pd-final-num { font-size: 26px; font-weight: 900; color: var(--pd-gold-1st); }
    .pd-final-unit { font-size: 14px; color: var(--pd-gold-1st); font-weight: 700; letter-spacing: 0.15em; }

    /* --- Top5 Fancy Cards --- */
    .ranking-top5 {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 8px 12px 18px;
    }
    .top5-card {
      position: relative;
      padding: 14px 16px;
      border-radius: var(--pd-radius-lg);
      cursor: pointer;
      transition: transform 0.2s;
      overflow: hidden;
      color: var(--pd-champagne);
    }
    .top5-card:active { transform: scale(0.98); }
    .top5-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 12px;
      position: relative;
      z-index: 1;
    }
    /* 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(--pd-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(--pd-champagne);
      letter-spacing: 0.1em;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .top5-points {
      font-size: 26px; font-weight: 900;
      color: var(--pd-gold-1st);
      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);
      position: relative; z-index: 1;
    }
    .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;
    }
    .top5-prize-item {
      font-size: 14px; color: var(--pd-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(--pd-radius-sm);
      border: 1px solid var(--pd-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(--pd-rose-gold-l);
      border-radius: var(--pd-radius-sm);
      font-size: 30px; flex-shrink: 0;
    }
    .top5-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(--pd-gold-1st);
      color: var(--pd-bg-deep);
      vertical-align: middle;
    }

    /* clickable hint (rank-card / rank-row) */
    .rank-row-clickable { cursor: pointer; transition: transform 0.15s, opacity 0.15s; }
    .rank-row-clickable:active { transform: scale(0.98); opacity: 0.85; }

    /* --- Prize Settings Modal --- */
    #prize-modal-backdrop {
      display: none;
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: 9000;
      -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    }
    #prize-modal-backdrop.show { display: block; }
    #prize-modal {
      display: none;
      position: fixed; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 92%; max-width: 430px;
      max-height: 88vh; overflow-y: auto;
      background: linear-gradient(145deg, var(--pd-bg-elev), var(--pd-bg-card));
      border: 2px solid var(--pd-gold-1st);
      border-radius: var(--pd-radius-lg);
      padding: 20px;
      z-index: 9001;
      color: var(--pd-champagne);
    }
    #prize-modal.show { display: block; }
    .prize-cycle-info {
      padding: 12px;
      background: var(--pd-bg-deep);
      border: 1px solid var(--pd-rose-gold-l);
      border-radius: var(--pd-radius-sm);
      margin-bottom: 16px;
      text-align: center;
      font-size: 13px;
      color: var(--pd-rose-gold-l);
      letter-spacing: 0.1em;
      font-weight: 600;
    }
    #prize-rank-type-select {
      padding: 10px;
      border-radius: var(--pd-radius-sm);
      background: var(--pd-bg-deep);
      color: var(--pd-champagne);
      border: 1px solid var(--pd-line);
      font-family: inherit;
      font-size: 15px;
    }
    .prize-rank-list { display: flex; flex-direction: column; gap: 12px; }
    .prize-rank-card {
      padding: 14px;
      border-radius: var(--pd-radius-md);
      background: var(--pd-bg-elev);
      border: 1px solid var(--pd-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(--pd-rose-gold-l); }
    .prize-rank-header {
      font-size: 16px; font-weight: 800;
      margin-bottom: 10px;
      letter-spacing: 0.1em;
      color: var(--pd-champagne);
    }
    .prize-input-group { margin-bottom: 8px; }
    .prize-input-group label {
      display: block;
      font-size: 11px;
      color: var(--pd-text-sub);
      margin-bottom: 4px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .prize-input-group input[type="number"],
    .prize-input-group input[type="text"] {
      width: 100%;
      padding: 10px;
      border-radius: var(--pd-radius-sm);
      background: var(--pd-bg-deep);
      color: var(--pd-champagne);
      border: 1px solid var(--pd-line);
      font-family: inherit;
      font-size: 15px;
    }
    .prize-image-preview {
      width: 100%; max-width: 200px;
      height: auto;
      object-fit: cover;
      border-radius: var(--pd-radius-sm);
      margin-top: 8px;
      border: 1px solid var(--pd-line);
      display: block;
    }
    .prize-image-upload-wrap { display: flex; flex-direction: column; gap: 8px; }
    .btn-upload-img {
      padding: 10px 14px;
      background: linear-gradient(135deg, var(--pd-rose-gold-l), var(--pd-rose-gold));
      color: var(--pd-bg-deep);
      border: none;
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      border-radius: var(--pd-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); }
    .btn-save-prize {
      width: 100%;
      margin-top: 10px;
      padding: 10px;
      background: linear-gradient(135deg, var(--pd-gold-1st), var(--pd-rose-gold-l));
      color: var(--pd-bg-deep);
      border: none;
      font-family: inherit;
      font-weight: 700;
      border-radius: var(--pd-radius-sm);
      cursor: pointer;
      letter-spacing: 0.1em;
      font-size: 14px;
    }
    .btn-save-prize:active { transform: scale(0.97); opacity: 0.9; }
    .btn-save-prize-busy { opacity: 0.7; }

    /* --- @337 遞ｮ蛻･繝峨Ο繝・・繝€繧ｦ繝ｳ (8繧ｿ繝・陦・竊・1陦茎elect) --- */
    .ranking-type-select-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px 0;
    }
    .ranking-type-select-label {
      font-size: 12px;
      color: var(--text-muted);
      letter-spacing: 0.08em;
      font-weight: 600;
      white-space: nowrap;
    }
    .ranking-type-select {
      flex: 1;
      padding: 10px 14px;
      font-family: inherit;
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      background: var(--bg);
      border: 1.5px solid var(--primary);
      border-radius: 8px;
      cursor: pointer;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c0392b'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
      background-size: 22px 22px;
      padding-right: 32px;
    }
    .ranking-type-select:focus { border-color: var(--primary-dark); box-shadow: 0 0 0 3px rgba(192,57,43,0.15); }

    /* --- @338 繝・う繝ｪ繝ｼ隧ｳ邏ｰ繝｢繝ｼ繝€繝ｫ --- */
    #daily-detail-modal-backdrop {
      display: none;
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.7);
      z-index: 9000;
      -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    }
    #daily-detail-modal-backdrop.show { display: block; }
    #daily-detail-modal {
      display: none;
      position: fixed; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 92%; max-width: 460px;
      max-height: 88vh; overflow-y: auto;
      background: linear-gradient(145deg, var(--pd-bg-elev), var(--pd-bg-card));
      border: 2px solid var(--pd-gold-1st);
      border-radius: var(--pd-radius-lg);
      padding: 20px;
      z-index: 9001;
      color: var(--pd-champagne);
    }
    #daily-detail-modal.show { display: block; }
    .dd-summary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 14px;
    }
    .dd-summary-cell {
      padding: 10px;
      background: linear-gradient(135deg, rgba(232,196,102,0.1), rgba(20,16,26,0.6));
      border: 1px solid var(--pd-gold-1st);
      border-radius: var(--pd-radius-sm);
      text-align: center;
    }
    .dd-summary-label {
      font-size: 10px; color: var(--pd-rose-gold-l);
      letter-spacing: 0.2em; font-weight: 700;
      text-transform: uppercase;
    }
    .dd-summary-value {
      font-size: 22px; font-weight: 900; color: var(--pd-gold-1st);
      margin-top: 4px; line-height: 1;
    }
    .dd-summary-unit {
      font-size: 12px; color: var(--pd-gold-1st); font-weight: 700; margin-left: 3px;
    }
    .dd-staff-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .dd-staff-table thead th {
      background: var(--pd-bg-deep);
      color: var(--pd-rose-gold-l);
      font-size: 11px; letter-spacing: 0.1em;
      padding: 8px 6px;
      border-bottom: 1px solid var(--pd-line);
      text-align: center;
    }
    .dd-staff-table thead th.dd-th-name { text-align: left; }
    .dd-staff-table tbody td {
      padding: 9px 6px;
      border-bottom: 1px solid var(--pd-line);
      text-align: center;
      color: var(--pd-champagne);
    }
    .dd-staff-table tbody td.dd-td-name {
      text-align: left;
      font-weight: 700;
    }
    .dd-staff-table tbody td.dd-td-num {
      font-weight: 700;
      color: var(--pd-gold-1st);
    }
    .dd-staff-table tbody tr:last-child td { border-bottom: none; }
    .dd-empty {
      text-align: center;
      padding: 20px;
      color: var(--pd-text-sub);
      font-size: 13px;
    }
    .ds-row-clickable { cursor: pointer; }
    .ds-row-clickable:active { background: var(--bg-gray) !important; }
    .ds-row-clickable:hover { background: var(--primary-light); }

    /* --- @337 繝昴う繝ｳ繝郁ｨ育ｮ怜ｼ上Δ繝ｼ繝€繝ｫ --- */
    #point-rules-modal-backdrop {
      display: none;
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: 9000;
      -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    }
    #point-rules-modal-backdrop.show { display: block; }
    #point-rules-modal {
      display: none;
      position: fixed; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 92%; max-width: 430px;
      max-height: 88vh; overflow-y: auto;
      background: linear-gradient(145deg, var(--pd-bg-elev), var(--pd-bg-card));
      border: 2px solid var(--pd-gold-1st);
      border-radius: var(--pd-radius-lg);
      padding: 20px;
      z-index: 9001;
      color: var(--pd-champagne);
    }
    #point-rules-modal.show { display: block; }
    .point-rules-formula {
      padding: 12px;
      background: var(--pd-bg-deep);
      border: 1px solid var(--pd-rose-gold-l);
      border-radius: var(--pd-radius-sm);
      margin-bottom: 16px;
      font-size: 12px;
      color: var(--pd-champagne);
      letter-spacing: 0.03em;
      line-height: 1.7;
      word-break: break-all;
    }
    .point-rules-formula-label {
      font-size: 10px;
      color: var(--pd-rose-gold-l);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      margin-bottom: 6px;
      font-weight: 700;
    }
    .point-rules-formula code {
      font-family: 'Consolas', 'SF Mono', Menlo, monospace;
      color: var(--pd-gold-1st);
      font-weight: 700;
    }

    /* Prize / point-rules buttons on ranking toolbar */
    .ranking-action-row {
      display: flex; gap: 8px;
      padding: 8px 12px 0;
      flex-wrap: wrap;
    }
    .ranking-prize-btn,
    .ranking-rules-btn {
      flex: 1;
      display: inline-flex; align-items: center; justify-content: center;
      gap: 6px;
      padding: 9px 12px;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-weight: 700;
      cursor: pointer;
      font-size: 13px;
      letter-spacing: 0.05em;
      min-width: 0;
    }
    .ranking-prize-btn {
      background: linear-gradient(135deg, var(--primary, #c0392b), var(--primary-dark, #962b20));
    }
    .ranking-rules-btn {
      background: linear-gradient(135deg, #4a4a4a, #2a2a2a);
    }
    .ranking-prize-btn:active,
    .ranking-rules-btn:active { transform: scale(0.97); }