:root {

  color-scheme: dark;



  /* 髢ｼ譏情揄髏丞､駒于謳ｴ繹｢螢宣名蜀ｲ譛ｬ螽�ｬ捺�?- 髢ｺ蝗ｧ逑ｨ扈ｻ萓€譟�告﨟�奮蟋?*/

  --bg: #000000;

  --surface: #1c1c1e;

  --surface-2: #2c2c2e;

  --surface-3: #3a3a3c;



  /* 豼ｮ��ｨ馴ｪ樊捗謔ｹ骰絶浮邯城摺諢ｩ蜉碁数竄ｬ扈ｾ蠇帛�?*/

  --panel-bg: linear-gradient(

    180deg,

    rgba(28, 28, 30, 0.88),

    rgba(20, 20, 22, 0.92)

  );

  --card-bg: linear-gradient(

    180deg,

    rgba(44, 44, 46, 0.72),

    rgba(28, 28, 30, 0.8)

  );

  --control-bg: rgba(58, 58, 60, 0.72);



  /* 髀牙�｣鄧蛾｡｢?- 髢ｺ蝗ｧ訒ｭ扈ｮ蠢帶⊿髑ｽ繧�奮髢ｸ謗第｣鈴�?*/

  --control-border: rgba(255, 255, 255, 0.1);

  --border: rgba(255, 255, 255, 0.08);

  --border-strong: rgba(255, 255, 255, 0.16);



  /* 髢ｺ蛯壽ｴ､髏｡?- 螯､蛯崚ｪ鬘俸�ﾐ帝盾蝙ｮ裵?*/

  --text: #ffffff;

  --text-strong: #ffffff;

  --muted: rgba(255, 255, 255, 0.6);

  --faint: rgba(255, 255, 255, 0.4);



  /* 郛��蟠ｵ扈ｮ豢ｪ諛�?- 髢ｼ譏情揄髏丞､駒于謳ｴ繹｢螢仙ｦ､蛯幢ｹ｢驫磯″蟠ｪ轣櫁莱裵� */

  --accent: #0a84ff;

  --accent-2: #30d158;

  --danger: #ff453a;

  --warn: #ffd60a;

  --good: #32d74b;

  --poor: #ff9f0a;



  /* 髣ょ�貎呎ｿ�?- 髢ｺ螻ｾ譟ｨ骼ｷ譚ｿﾇ朱脈蠍�ぎ?*/

  --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

  --radius: 12px;



  /* Board 髢ｻ讌�∮髏｣轤ｬ�仙ｩ雁覧﨤?- 髏朱撥邯顔ｼ榊�･蟠夐今谺醍沂髢ｹ﨡∵ｧ帝｡ｫ蠍�｣暮滑ﾑ�楔髢ｻ貊�ｴｵ骼ｷ謌�諡�鬘凪凰譫�盟豸倡掩螳墓┣譟�ｹ�沃鄧?+ backdrop-filter髢?*/

  --board-surface: rgba(20, 24, 32, 0.52);

  --board-surface-raised: rgba(38, 40, 46, 0.5);

  --board-line: rgba(255, 255, 255, 0.1);

  --board-line-strong: rgba(255, 255, 255, 0.18);

  --board-track: rgba(255, 255, 255, 0.08);

  --board-ink: #ffffff;

  --board-muted: rgba(255, 255, 255, 0.6);



  /* 髏取ｶ吶◇郛�?- SF Pro 螯槫ｬｪ蟄ｩ髏玲吹蠑ｽ?*/

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",

    system-ui, sans-serif;

  --display-font: -apple-system, BlinkMacSystemFont, "SF Pro Display",

    "Segoe UI", system-ui, sans-serif;

}



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



body {

  margin: 0;

  min-height: 100vh;

  position: relative;

  overflow-x: hidden;

  isolation: isolate;

  background: radial-gradient(

      ellipse 90% 58% at 14% -12%,

      rgba(243, 154, 75, 0.1), transparent 56%), radial-gradient(

      ellipse 78% 48% at 86% -8%,

      rgba(75, 195, 255, 0.075),

      transparent 58%

    ),

    linear-gradient(

      120deg,

      rgba(126, 141, 163, 0.035),

      transparent 38%,

      rgba(121, 213, 155, 0.025) 72%,

      transparent

    ),

    linear-gradient(180deg, rgba(255, 255, 255, 0.026) 0, transparent 150px),

    linear-gradient(

      180deg,

      color-mix(in srgb, var(--surface-2) 58%, transparent) 0,

      transparent 300px

    ),

    var(--bg);

  color: var(--text);

  font-family: var(--font);

  letter-spacing: 0;

}



body::before {

  content: "";

  position: fixed;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background: linear-gradient(

      90deg,

      rgba(255, 255, 255, 0.018) 1px,

      transparent 1px

    ),

    linear-gradient(180deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);

  background-size: 48px 48px;

  opacity: 0.16;

}



body::after {

  content: "";

  position: fixed;

  inset: -16vh -10vw;

  z-index: 0;

  pointer-events: none;

  background: radial-gradient(

      ellipse 56% 24% at 50% 0%,

      rgba(255, 255, 255, 0.06),

      transparent 64%

    ),

    radial-gradient(

      ellipse 42% 26% at 22% 15%,

      rgba(243, 154, 75, 0.055),

      transparent 68%

    ),

    radial-gradient(
      ellipse 42% 30% at 82% 22%,
      rgba(93, 214, 255, 0.05),
      transparent 70%
    ),
    radial-gradient(
      ellipse 42% 26% at 80% 60%,
      rgba(243, 154, 75, 0.055),
      transparent 68%
    ),
    linear-gradient(

      110deg,

      transparent 0 18%,

      rgba(255, 255, 255, 0.02) 28%,

      transparent 42% 100%

    );

  opacity: 0.62;

  mix-blend-mode: screen;

}



::-webkit-scrollbar {

  width: 8px;

  height: 8px;

}



::-webkit-scrollbar-thumb {

  border-radius: 999px;

  background: var(--surface-3);

}



button,

input,

textarea {

  font: inherit;

}



button {

  border: 0;

}



.app-shell {

  width: min(1280px, calc(100% - 28px));

  margin: 0 auto;

  padding: 28px 0 42px;

  position: relative;

  z-index: 1;

}



.app-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  margin-bottom: 18px;

  padding: 10px 12px;

  border: 1px solid rgba(171, 188, 214, 0.14);

  border-radius: 20px;

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.075),

      rgba(255, 255, 255, 0.018)

    ),

    rgba(8, 11, 17, 0.4);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),

    0 20px 50px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.03);

  backdrop-filter: blur(28px) saturate(1.3);

}



.brand-cluster {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-left: 18px;

}



.back-button {

  position: relative;

  width: 70px;

  height: 38px;

  flex: 0 0 70px;

  display: inline-grid;

  place-items: center;

  border: 2px solid rgba(0, 0, 0, 0.75);

  border-radius: 999px;

  color: #1a1d24;

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.98) 0%,

      rgba(255, 255, 255, 0.92) 50%,

      rgba(240, 242, 245, 0.95) 100%

    ),

    rgba(255, 255, 255, 0.95);

  box-shadow:

    inset 0 1px 1px rgba(255, 255, 255, 0.9),

    inset 0 -1px 1px rgba(0, 0, 0, 0.06),

    0 2px 6px rgba(0, 0, 0, 0.15),

    0 8px 16px rgba(0, 0, 0, 0.1);

  cursor: pointer;

  transition: transform 0.16s cubic-bezier(0.4, 0, 0.2, 1),

    border-color 0.16s ease,

    box-shadow 0.16s cubic-bezier(0.4, 0, 0.2, 1),

    background 0.16s ease,

    color 0.16s ease;

  overflow: hidden;

}



.back-button::before {

  content: "";

  position: absolute;

  inset: 1px;

  border-radius: inherit;

  background: linear-gradient(

    180deg,

    rgba(255, 255, 255, 0.5) 0%,

    transparent 40%

  );

  opacity: 1;

}



.back-button::after {

  display: none;

}



.back-button span {

  width: 10px;

  height: 10px;

  border-left: 2px solid currentColor;

  border-bottom: 2px solid currentColor;

  transform: translateX(3px) rotate(45deg);

  position: relative;

  z-index: 1;

}



.back-button:hover {

  transform: translateY(-1px);

  border-color: rgba(0, 0, 0, 0.85);

  color: rgb(243, 154, 75);

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 1) 0%,

      rgba(255, 255, 255, 0.96) 50%,

      rgba(248, 250, 252, 0.98) 100%

    ),

    rgba(255, 255, 255, 0.98);

  box-shadow:

    inset 0 1px 1px rgba(255, 255, 255, 1),

    inset 0 -1px 1px rgba(0, 0, 0, 0.04),

    0 4px 12px rgba(0, 0, 0, 0.2),

    0 12px 24px rgba(0, 0, 0, 0.15);

}



.back-button:active {

  transform: translateY(0) scale(0.98);

  box-shadow:

    inset 0 1px 1px rgba(255, 255, 255, 0.8),

    inset 0 -1px 1px rgba(0, 0, 0, 0.08),

    inset 0 2px 8px rgba(0, 0, 0, 0.1),

    0 1px 3px rgba(0, 0, 0, 0.2);

}



.brand-line {

  display: flex;

  align-items: center;

  gap: 0;

}



.brand-line h1 {

  margin: 0;

  font-size: 40px;

  line-height: 1.2;

  font-family: 'Kalam', cursive;

  font-weight: 400;

  color: var(--text-strong);

  text-wrap: balance;

  letter-spacing: 0.01em;

}



.brand-mark {

  position: relative;

  display: inline-block;

  color: #f39a4b;

  font-size: 1.2em;

  font-weight: 700;

  font-family: 'Kalam', cursive;

  text-shadow:

    0 0 28px rgba(243, 154, 75, 0.4),

    0 0 12px rgba(243, 154, 75, 0.6),

    0 2px 4px rgba(0, 0, 0, 0.3);

  filter: drop-shadow(0 0 8px rgba(243, 154, 75, 0.5));

  animation: brand-glow 3s ease-in-out infinite;

}



.brand-mark::before {

  content: '✦';

  position: absolute;

  left: -16px;

  top: 50%;

  transform: translateY(-50%) rotate(-15deg);

  font-size: 12px;

  color: #ffd700;

  text-shadow: 0 0 12px rgba(243, 154, 75, 0.8);

  opacity: 0.9;

}



.brand-mark::after {

  content: '✦';

  position: absolute;

  right: -14px;

  top: 15%;

  font-size: 10px;

  color: #ffd700;

  text-shadow: 0 0 10px rgba(243, 154, 75, 0.7);

  opacity: 0.85;

  animation: sparkle 2s ease-in-out infinite;

}



@keyframes brand-glow {

  0%, 100% {

    filter: drop-shadow(0 0 8px rgba(243, 154, 75, 0.5));

  }

  50% {

    filter: drop-shadow(0 0 16px rgba(243, 154, 75, 0.7));

  }

}



@keyframes sparkle {

  0%, 100% {

    opacity: 0.85;

    transform: scale(1) rotate(0deg);

  }

  50% {

    opacity: 1;

    transform: scale(1.3) rotate(180deg);

  }

}



.live-dot {

  position: relative;

  width: 14px;

  height: 14px;

  border-radius: 50%;

  isolation: isolate;

  background: radial-gradient(

      circle at 36% 32%,

      rgba(255, 255, 255, 0.92) 0 14%,

      transparent 15%

    ),

    radial-gradient(circle at center, #8ef1a8 0 34%, #43bb6f 42%, #177543 72%);

  box-shadow: 0 0 0 1px rgba(160, 245, 184, 0.3),

    0 0 0 6px rgba(88, 214, 126, 0.08), 0 0 22px rgba(99, 224, 139, 0.42);

}



.live-dot::before,

.live-dot::after {

  content: "";

  position: absolute;

  inset: -8px;

  border-radius: inherit;

  pointer-events: none;

}



.live-dot::before {

  border: 1px solid rgba(142, 241, 168, 0.2);

  background: radial-gradient(

    circle,

    rgba(96, 222, 136, 0.15),

    transparent 58%

  );

  animation: liveBeaconPulse 2.6s ease-in-out infinite;

  z-index: -1;

}



.live-dot::after {

  inset: 2px;

  background: linear-gradient(

    135deg,

    rgba(255, 255, 255, 0.65),

    transparent 48%

  );

  opacity: 0.72;

}



@keyframes liveBeaconPulse {

  0%,

  100% {

    transform: scale(0.82);

    opacity: 0.42;

  }

  50% {

    transform: scale(1.15);

    opacity: 0.86;

  }

}



.header-subtitle,

.panel-heading p,

.muted-text {

  color: var(--muted);

}



.hot-title-icon {

  display: inline-block;

  margin-right: 8px;

  transform: translateY(1px);

}



.header-subtitle {

  margin: 9px 0 0;

  font-size: 13px;

  font-weight: 500;

}



.header-actions,

.toolbar,

.range-control,

.range-tabs,

.segmented {

  display: flex;

  align-items: center;

  gap: 8px;

}



.range-control {

  min-height: 46px;

  padding: 0;

  border: 0;

  border-radius: 0;

  background: transparent;

  box-shadow: none;

  gap: 12px;

}



.range-label {

  color: var(--text-strong);

  font-size: 13px;

  font-weight: 700;

  white-space: nowrap;

  text-shadow: 0 0 18px rgba(255, 255, 255, 0.12);

}



/* Apple 螯槫ｬｪ蟄ｩ髏玲吹蟷先ｾｶ諢ｭ蟆ｦ髏主惆諛灘ｨ?- 蟀｢ﾑ�○螳ｸ蜊槁朱漉轤ｲ裵?*/

.range-tabs,

#sort-tabs,

.segmented {

  padding: 5px;

  border-radius: 11px;

  background: radial-gradient(

      circle at 30% 20%,

      rgba(255, 255, 255, 0.06),

      transparent 50%

    ),

    radial-gradient(circle at 70% 80%, rgba(0, 0, 0, 0.08), transparent 50%),

    linear-gradient(180deg, rgba(99, 99, 102, 0.5), rgba(72, 72, 74, 0.58));

  border: 0.5px solid rgba(255, 255, 255, 0.18);

  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.22),

    inset 1px 0 1px rgba(255, 255, 255, 0.1),

    inset -1px 0 1px rgba(0, 0, 0, 0.1), inset 0 -1px 1px rgba(0, 0, 0, 0.32),

    0 1px 0 rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.22),

    0 8px 24px rgba(0, 0, 0, 0.14);

  backdrop-filter: blur(40px) saturate(180%);

}



/* .main-tabs styling replaced elsewhere */



#sort-tabs {

  position: relative;

  min-height: 48px;

}



.range-control .range-tabs {

  min-height: auto;

  position: relative;

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 2px;

  padding: 3px;

  border-radius: 10px;

  overflow: hidden;

  isolation: isolate;

  background: linear-gradient(

    180deg,

    rgba(58, 58, 60, 0.95),

    rgba(44, 44, 46, 0.98)

  );

  border: 1px solid rgba(0, 0, 0, 0.4);

  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5),

    inset 0 -1px 0 rgba(255, 255, 255, 0.06), 0 2px 8px rgba(0, 0, 0, 0.3);

}



.range-control .range-tabs button {

  min-width: 39px !important;

  width: 39px !important;

  height: 34px !important;

  min-height: 34px !important;

  padding: 0 !important;

  margin: 0;

  border-radius: 8px !important;

  font-size: 14px !important;

  font-weight: 600 !important;

  display: flex;

  align-items: center;

  justify-content: center;

}



.range-control .range-tabs button:not(.active) {

  background: transparent !important;

  color: rgba(235, 235, 245, 0.5) !important;

  box-shadow: none !important;

  transform: none !important;

}



.range-control .range-tabs button.active {

  background: radial-gradient(

      circle at 50% 0%,

      rgba(255, 255, 255, 0.18),

      transparent 50%

    ),

    linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.95),

      rgba(242, 242, 247, 0.98)

    ) !important;

  color: rgba(0, 0, 0, 0.9) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),

    inset 0 -1px 1px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.25),

    0 2px 8px rgba(0, 0, 0, 0.15) !important;

  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.8) !important;

}



.range-control .range-tabs::before {

  display: none;

}



.range-control .range-tabs {

  min-height: auto;

  position: relative;

  padding: 5px;

  border-radius: 11px;

  background: radial-gradient(

      circle at 30% 20%,

      rgba(255, 255, 255, 0.08),

      transparent 50%

    ),

    linear-gradient(180deg, rgba(99, 99, 102, 0.5), rgba(72, 72, 74, 0.58));

  border: 0.5px solid rgba(255, 255, 255, 0.18);

  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2),

    inset 0 -0.5px 0 rgba(0, 0, 0, 0.28), 0 2px 10px rgba(0, 0, 0, 0.22),

    0 8px 24px rgba(0, 0, 0, 0.14);

  overflow: hidden;

  isolation: isolate;

  backdrop-filter: blur(40px) saturate(180%);

}



.range-control .range-tabs::before {

  display: none;

}



/* ============================================

   Apple 螯槫ｬｪ蟄ｩ髏玲吹蟷先ｾｶ諢ｭ蟆?- 郛��蟠倬墾ﾑ�ｴ宣室譖ｨ貎｡髣∝初蝙ｵ髏ｫ讓ｼ諡ｹ驫奇ｹ€螯?

   ============================================ */



.range-tabs button,

#sort-tabs button,

.segmented button {

  position: relative;

  min-height: 40px;

  padding: 0 18px;

  border-radius: 9px;

  color: rgba(235, 235, 245, 0.6);

  background: transparent;

  border: none;

  cursor: pointer;

  font-size: 15px;

  font-weight: 590;

  letter-spacing: -0.015em;

  transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1);

  isolation: isolate;

}



/* 郛∫ぎ蟇ｧ驤ｧ蘒ｬ蝸咏ｮｻ骼ｼ霎ｾ髯�ｨｼ訷槫ｼｽ螳�屋遑€ */

.range-progress-bar {

  position: absolute;

  bottom: 1.5px;

  left: 6px;

  right: 6px;

  height: 2px;

  border-radius: 1px;

  background: rgba(255, 255, 255, 0.08);

  overflow: hidden;

  display: none; /* 蟋呈ｶ咒汕鬘灘ｩ壽｢ｾ骼ｰ訷幟�?*/

  pointer-events: none;

}

#range-progress-fill {

  display: block;

  height: 100%;

  width: 100%;

  background-color: var(--refresh-color, #82dfa0);

  transition: width 1s linear, background-color 0.2s ease;

}



.range-tabs button::before,

#sort-tabs button::before,

.segmented button::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: inherit;

  background: radial-gradient(

      circle at 50% 0%,

      rgba(255, 255, 255, 0.08),

      transparent 50%

    ),

    rgba(255, 255, 255, 0.02);

  opacity: 0;

  transition: opacity 0.28s ease;

  pointer-events: none;

}



.range-tabs button:hover,

.range-tabs button:hover,

#sort-tabs button:hover,

.segmented button:hover {

  color: rgba(255, 255, 255, 0.9);

}



.range-tabs button:hover::before,

#sort-tabs button:hover::before,

.segmented button:hover::before {

  opacity: 1;

}



.range-tabs button.active,

#sort-tabs button.active,

.segmented button.active {

  color: rgba(255, 255, 255, 0.98);

  background: radial-gradient(

      circle at 50% 120%,

      rgba(0, 0, 0, 0.15),

      transparent 50%

    ),

    radial-gradient(

      circle at 50% -20%,

      rgba(255, 255, 255, 0.12),

      transparent 45%

    ),

    linear-gradient(

      145deg,

      rgba(165, 165, 170, 0.92) 0%,

      rgba(142, 142, 147, 0.95) 25%,

      rgba(122, 122, 128, 0.96) 50%,

      rgba(106, 106, 112, 0.98) 75%,

      rgba(99, 99, 102, 0.98) 100%

    );

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),

    inset 1px 0 0 rgba(255, 255, 255, 0.2),

    inset -1px 0 0 rgba(255, 255, 255, 0.12),

    inset 0 -1px 1px rgba(0, 0, 0, 0.35),

    inset 0 1px 2px rgba(255, 255, 255, 0.15), 0 1px 0 rgba(0, 0, 0, 0.2),

    0 2px 4px rgba(0, 0, 0, 0.18), 0 6px 16px rgba(0, 0, 0, 0.22),

    0 0 0 0.5px rgba(0, 0, 0, 0.15);

  transform: translateY(0.5px);

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

}



.range-tabs button.active::before,

#sort-tabs button.active::before,

.segmented button.active::before {

  opacity: 0;

}



.ghost-button,

.icon-button,

.primary-button {

  min-height: 36px;

  border-radius: 7px;

  padding: 0 14px;

  color: var(--muted);

  background: transparent;

  border: 1px solid transparent;

  cursor: pointer;

  white-space: nowrap;

  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,

    transform 0.18s ease, box-shadow 0.18s ease;

}



.ghost-button,

.icon-button {

  border: 1px solid var(--control-border);

  background: var(--control-bg);

  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset;

  color: #ffffff;

  font-weight: 700;

}



.countdown-button:disabled {

  cursor: default;

  opacity: 1;

}



.countdown-button[aria-busy="true"] {

  border-color: var(--control-border);

}



.countdown-button {

  --refresh-progress: 360deg;

  --refresh-elapsed: 0deg;

  --refresh-color: rgb(50, 255, 120);

  width: 60px;

  height: 60px;

  padding: 0;

  border-radius: 50%;

  display: inline-grid;

  place-items: center;

  border: none !important;

  color: var(--text-strong);

  background: radial-gradient(

      circle at 38% 26%,

      rgba(255, 255, 255, 0.13),

      transparent 24px

    ),

    radial-gradient(

      circle at 50% 50%,

      rgba(50, 255, 120, 0.14),

      rgba(255, 255, 255, 0.012) 62%,

      transparent 63%

    ),

    var(--control-bg);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13),

    inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 12px 28px rgba(0, 0, 0, 0.18),

    0 0 24px rgba(50, 255, 120, 0.16);

}



.countdown-ring {

  width: 48px;

  height: 48px;

  display: inline-grid;

  place-items: center;

  border-radius: inherit;

  position: relative;

  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07),

    0 0 20px rgba(50, 255, 120, 0.6) !important;

  transition: box-shadow 0.18s ease;

}



.countdown-svg {

  position: absolute;

  width: 48px;

  height: 48px;

  top: 0;

  left: 0;

  pointer-events: none;

}



.countdown-track {

  transition: stroke 0.18s ease;

}



.countdown-progress {

  --progress-circumference: 119.38;

  stroke-dasharray: var(--progress-circumference);

  stroke-dashoffset: 0;

  /* 郛∝､基濤螽�ｷ腕ansition髢ｿ豸伜･疲ｿ槫岻謔ｽ驤ｺ逕ｧquestAnimationFrame髏主惆蛛滄ｪ槫岌ﾃｹ豬｣辜俶ｫ企椋譁ｻ蜉朱潤?*/

}



.countdown-ring span {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  color: var(--text-strong);

  background: radial-gradient(

      circle at 50% 0%,

      rgba(255, 255, 255, 0.11),

      transparent 54%

    ),

    rgba(10, 13, 19, 0.76);

  font-size: 14px;

  font-weight: 820;

  line-height: 1;

  letter-spacing: 0;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  z-index: 1;

  position: relative;

}





.theme-toggle {

  width: 68px;

  min-height: 42px;

  padding: 0;

  justify-content: center;

  border-radius: 999px;

  border-color: rgba(120, 159, 255, 0.26);

  background: radial-gradient(

      circle at 22% 18%,

      rgba(146, 187, 244, 0.24),

      transparent 30px

    ),

    radial-gradient(

      circle at 82% 100%,

      rgba(243, 154, 75, 0.16),

      transparent 34px

    ),

    linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.08),

      rgba(255, 255, 255, 0.018)

    ),

    var(--control-bg);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),

    0 12px 28px rgba(0, 0, 0, 0.18), 0 0 24px rgba(77, 163, 255, 0.075);

}



.theme-icon {

  position: relative;

  display: inline-block;

  width: 50px;

  height: 26px;

  border-radius: 999px;

  background: radial-gradient(

      circle at 22% 42%,

      rgba(184, 205, 255, 0.28),

      transparent 18px

    ),

    linear-gradient(

      135deg,

      rgba(25, 35, 58, 0.96),

      rgba(8, 11, 17, 0.96) 64%,

      rgba(38, 63, 94, 0.92)

    );

  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1),

    inset 0 -1px 2px rgba(0, 0, 0, 0.36), 0 1px 2px rgba(0, 0, 0, 0.22);

}



.theme-icon::before {

  content: "";

  position: absolute;

  left: 4px;

  top: 50%;

  width: 18px;

  height: 18px;

  transform: translateY(-50%);

  border-radius: 50%;

  background: radial-gradient(

      circle at 62% 38%,

      transparent 0 6px,

      #dce6ff 6.5px

    ),

    linear-gradient(180deg, #edf3ff, #9fb3d8);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78),

    0 4px 10px rgba(0, 0, 0, 0.28);

  transition: transform 0.22s ease, left 0.22s ease, background 0.22s ease;

}



.theme-icon::after {

  content: "";

  position: absolute;

  left: 32px;

  top: 7px;

  width: 3px;

  height: 3px;

  border-radius: 50%;

  background: rgba(204, 213, 229, 0.78);

  box-shadow: 5px 4px 0 rgba(204, 213, 229, 0.48),

    -4px 9px 0 rgba(204, 213, 229, 0.4);

}



.primary-button {

  color: #ffffff;

  border: 1px solid color-mix(in srgb, var(--accent-2) 42%, var(--border));

  background: linear-gradient(180deg, #63df8a, #42b86a);

  box-shadow: 0 8px 22px rgba(66, 184, 106, 0.16);

  font-weight: 750;

}



.primary-button:disabled {

  cursor: wait;

  opacity: 0.72;

  transform: none;

  box-shadow: none;

}



.ghost-button:hover,

.icon-button:hover,

.range-tabs button:hover,

.segmented button:hover,

.primary-button:hover:not(:disabled) {

  transform: translateY(-2px);

  color: var(--text-strong);

}



.countdown-button:hover,

.countdown-button:disabled:hover,

.countdown-button[aria-busy="true"]:hover {

  color: var(--text-strong);

  border-color: color-mix(

    in srgb,

    var(--refresh-color) 38%,

    var(--control-border)

  );

  background: radial-gradient(

      circle at 38% 26%,

      rgba(255, 255, 255, 0.13),

      transparent 24px

    ),

    radial-gradient(

      circle at 50% 50%,

      color-mix(in srgb, var(--refresh-color) 16%, transparent),

      rgba(255, 255, 255, 0.012) 62%,

      transparent 63%

    ),

    var(--control-bg);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13),

    inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 12px 28px rgba(0, 0, 0, 0.18),

    0 0 24px color-mix(in srgb, var(--refresh-color) 18%, transparent);

  transform: none;

}



.theme-toggle:hover {

  border-color: rgba(139, 202, 255, 0.46);

  background: radial-gradient(

      circle at 22% 18%,

      rgba(146, 187, 244, 0.34),

      transparent 30px

    ),

    radial-gradient(

      circle at 82% 100%,

      rgba(243, 154, 75, 0.22),

      transparent 34px

    ),

    linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.1),

      rgba(255, 255, 255, 0.024)

    ),

    var(--control-bg);

  box-shadow: 
    0 12px 28px rgba(0, 0, 0, 0.2), 0 0 28px rgba(77, 163, 255, 0.13);

}



.main-tabs-wrapper {

  position: relative;

  width: 100%;

  min-height: 54px;

  padding: 6px 8px;

  margin-bottom: 18px !important;

  border-radius: 12px;

  background: radial-gradient(

      circle at 30% 20%,

      rgba(255, 255, 255, 0.05),

      transparent 50%

    ),

    radial-gradient(circle at 70% 80%, rgba(0, 0, 0, 0.08), transparent 50%),

    linear-gradient(180deg, rgba(80, 80, 85, 0.12), rgba(55, 55, 60, 0.08));

  border: 0.5px solid rgba(255, 255, 255, 0.08);

  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.06),

    inset 1px 0 1px rgba(255, 255, 255, 0.03),

    inset -1px 0 1px rgba(0, 0, 0, 0.1), inset 0 -1px 1px rgba(0, 0, 0, 0.15),

    0 1px 0 rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.1),

    0 8px 24px rgba(0, 0, 0, 0.06);

  backdrop-filter: blur(40px) saturate(180%);

  display: flex;

  align-items: center;

  box-sizing: border-box;

}



.main-tabs {

  position: relative;

  display: inline-grid !important;

  grid-template-columns: repeat(4, 90px) !important;

  gap: 0 !important;

  padding: 4px !important;

  border-radius: 9px !important;

  background: linear-gradient(

    180deg,

    rgba(30, 30, 32, 0.9),

    rgba(20, 20, 22, 0.95)

  ) !important;

  border: 1px solid rgba(0, 0, 0, 0.55) !important;

  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7),

    inset 0 -0.5px 0 rgba(255, 255, 255, 0.04),

    0 1px 1px rgba(255, 255, 255, 0.05) !important;

  height: 44px !important;

  min-height: 44px !important;

  width: auto !important;

  margin-bottom: 0 !important;

  overflow: hidden !important;

  isolation: isolate;

  flex-shrink: 0 !important;

}



.main-tabs button {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  color: rgba(235, 235, 245, 0.45) !important;

  min-width: 0 !important;

  height: 36px !important;

  padding: 0 !important;

  margin: 0 !important;

  border-radius: 6px !important;

  font-size: 13.5px !important;

  font-weight: 600 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  transition: color 0.18s ease, background-color 0.18s ease !important;

  transform: none !important;

  text-shadow: none !important;

}



.main-tabs button::before {

  display: none !important;

  opacity: 0 !important;

}



.main-tabs button:hover:not(.active) {

  color: rgba(255, 255, 255, 0.9) !important;

  background: rgba(255, 255, 255, 0.04) !important;

}



.main-tabs button.active {

  background: radial-gradient(

      circle at 50% 0%,

      rgba(255, 255, 255, 0.18),

      transparent 50%

    ),

    linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.95),

      rgba(242, 242, 247, 0.98)

    ) !important;

  color: rgba(0, 0, 0, 0.92) !important;

  border-radius: 6px !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),

    inset 0 -1px 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.2),

    0 2px 6px rgba(0, 0, 0, 0.15) !important;

  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.8) !important;

  transform: none !important;

}



.view-panel {

  display: none;

}



.view-panel.active {

  display: block;

}



.summary-grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 20px;

  margin-bottom: 24px;

}



.summary-card,

.panel,

.filter-card,

.model-row,

.hot-card,

.review-card,

.query-item,

.admin-card {

  border: 1px solid rgba(170, 181, 198, 0.35);

  border-radius: var(--radius);

  background: linear-gradient(

      180deg,

      rgba(50, 65, 85, 0.5),

      rgba(30, 40, 55, 0.65)

    ),

    var(--card-bg);

  box-shadow: 
    0 16px 40px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.05);

  backdrop-filter: blur(26px) saturate(1.25);

}



/* ==========================================================================

   髢ｸ豌ｬ遘ｶ貔ｧ譬ｧ訒｣雹�屏蝓�髏�菴ｲ竄ｬ蜀ｲ蟷｢髢?- Business Card Style

   髢ｸ辜�楜扈ｶ繖ｩ譟雁ｮ･蝣晟�?+ 郛��蟠倬墾ﾑ�ｴ帝今豌ｬﾎ晞冥諢ｬ貉ｱ扈?

   ========================================================================== */



.summary-card {

  padding: 20px 24px;

  position: relative;

  overflow: hidden;

  min-height: 100px;

  isolation: isolate;

  border: none;

  background: transparent;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



/* 螽第鳥訒ｧ螳暮″謔ｧ骰･ﾑ悟芙髢?- 螯､蛯崚ｼ扈怜､先氤雹�沃鄧夜湿霎ｾ邂鷹畝蜍ｯ諛晞他霍ｺ蜑ｹ髢?*/

.summary-card::before {

  content: '';

  position: absolute;

  inset: 0;

  background:

    radial-gradient(

      circle at 80% 20%,

      rgba(var(--crystal-primary), 0.3) 0%,

      rgba(var(--crystal-secondary), 0.05) 60%,

      transparent 80%

    ),

    radial-gradient(

      circle at 20% 80%,

      rgba(var(--crystal-secondary), 0.15) 0%,

      transparent 50%

    ),

    linear-gradient(135deg,

      rgba(36, 34, 38, 0.7) 0%,

      rgba(20, 18, 22, 0.9) 100%

    );

  border: 1.5px solid transparent;

  border-image: linear-gradient(

    135deg,

    rgba(var(--crystal-primary), 0.8),

    rgba(var(--crystal-secondary), 0.5)

  ) 1;

  clip-path: polygon(

    0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px,

    100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px)

  );

  box-shadow:

    inset 0 1px 2px rgba(var(--crystal-primary), 0.15),

    0 4px 16px rgba(0, 0, 0, 0.4),

    0 0 40px rgba(var(--crystal-primary), 0.12);

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



/* 髏滉ｽｸ諛倬活莨ｴ蟷€隍埼腰貊域ｙ?*/

.summary-card::after {

  content: '';

  position: absolute;

  top: 14px;

  right: 14px;

  transition: all 0.3s ease;

}



/* Card 1: Taiji (Yin-Yang) */

.summary-card:nth-child(1)::after {

  width: 14px;

  height: 14px;

  border-radius: 50%;

  background:

    radial-gradient(circle at 50% 25%, rgb(var(--crystal-primary)) 1px, transparent 1.5px),

    radial-gradient(circle at 50% 75%, #fff 1px, transparent 1.5px),

    radial-gradient(circle at 50% 25%, #fff 3.4px, transparent 3.6px),

    radial-gradient(circle at 50% 75%, rgb(var(--crystal-primary)) 3.4px, transparent 3.6px),

    linear-gradient(90deg, #fff 50%, rgb(var(--crystal-primary)) 50%);

  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 0 4px rgba(var(--crystal-primary), 0.3);

}



.summary-card:hover:nth-child(1)::after {

  animation: taiji-spin 1.5s linear infinite;

  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 0 10px rgba(var(--crystal-primary), 0.8);

}



@keyframes taiji-spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}



/* Card 2: Pink 4-Point Star */

.summary-card:nth-child(2)::after {

  width: 14px;

  height: 14px;

  background: rgb(var(--crystal-primary));

  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);

}



.summary-card:hover:nth-child(2)::after {

  animation: star-twinkle 1.5s ease-in-out infinite alternate;

}



@keyframes star-twinkle {

  0% { transform: scale(0.8) rotate(0deg); opacity: 0.8; }

  100% { transform: scale(1.2) rotate(45deg); filter: drop-shadow(0 0 8px rgb(var(--crystal-primary))); }

}



/* Card 3: Green Clover */

.summary-card:nth-child(3)::after {

  width: 6px;

  height: 6px;

  background: rgb(var(--crystal-primary));

  border-radius: 50%;

  box-shadow:

    -4px 0 0 0 rgb(var(--crystal-primary)),

    4px 0 0 0 rgb(var(--crystal-primary)),

    0 -4px 0 0 rgb(var(--crystal-primary)),

    0 4px 0 0 rgb(var(--crystal-primary));

}



.summary-card:hover:nth-child(3)::after {

  animation: clover-spin 4s linear infinite;

}



@keyframes clover-spin {

  100% { transform: rotate(360deg); }

}



/* Card 4: Purple Windmill */

.summary-card:nth-child(4)::after {

  width: 14px;

  height: 14px;

  background:

    radial-gradient(circle at center, rgba(255, 255, 255, 0.9) 1.5px, transparent 2px),

    conic-gradient(

      rgb(var(--crystal-primary)) 0deg 45deg,

      transparent 45deg 90deg,

      rgb(var(--crystal-primary)) 90deg 135deg,

      transparent 135deg 180deg,

      rgb(var(--crystal-primary)) 180deg 225deg,

      transparent 225deg 270deg,

      rgb(var(--crystal-primary)) 270deg 315deg,

      transparent 315deg 360deg

    );

  filter: drop-shadow(0 0 4px rgba(var(--crystal-primary), 0.5));

}



.summary-card:hover:nth-child(4)::after {

  animation: windmill-spin 1.5s linear infinite;

  filter: drop-shadow(0 0 8px rgba(var(--crystal-primary), 0.8));

}



@keyframes windmill-spin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}



/* 髢ｹ訒�甥豬�迥ｻ蠑ｫ骰ｫ辭ｺ莠?*/

.summary-card:hover {

  transform: translateY(-4px);

}



.summary-card:hover::before {

  border-image: linear-gradient(

    135deg,

    rgba(var(--crystal-primary), 1),

    rgba(var(--crystal-secondary), 0.8)

  ) 1;

  box-shadow:

    inset 0 1px 3px rgba(var(--crystal-primary), 0.25),

    0 8px 24px rgba(0, 0, 0, 0.5),

    0 0 60px rgba(var(--crystal-primary), 0.2);

}



.summary-card:hover::after {

  opacity: 1;

  filter: brightness(1.2);

}



/* 髢ｸ辜�楜扈ｶ繖ｩ譟雁ｮ･蝣晟酪髢ｺ蛯晟揄鬘?*/

.summary-card:nth-child(1) {

  --crystal-primary: 64, 156, 255;     /* Vivid Sky Blue */

  --crystal-secondary: 0, 92, 196;     /* Deep Blue */

}



.summary-card:nth-child(2) {

  --crystal-primary: 255, 105, 180;    /* Hot Pink */

  --crystal-secondary: 200, 20, 100;   /* Deep Magenta */

}



.summary-card:nth-child(3) {

  --crystal-primary: 46, 204, 113;     /* Emerald Green */

  --crystal-secondary: 20, 140, 60;    /* Dark Green */

}



.summary-card:nth-child(4) {

  --crystal-primary: 180, 90, 255;     /* Bright Lilac Purple */

  --crystal-secondary: 130, 40, 220;   /* Deep Bright Lilac */

}.filter-card,

.hot-card,

.model-row {

  background: linear-gradient(

      135deg,

      rgba(44, 44, 48, 0.25),

      rgba(38, 38, 42, 0.35)

    ) !important;

  backdrop-filter: blur(40px) saturate(150%) !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),

    0 1px 0 rgba(255, 255, 255, 0.06) inset,

    0 0 0 1px rgba(255, 255, 255, 0.03) !important;

}



.filter-card:hover,

.hot-card:hover,

.model-row:hover {

  background: linear-gradient(

      135deg,

      rgba(50, 50, 54, 0.4),

      rgba(44, 44, 48, 0.5)

    ) !important;

  border-color: rgba(255, 255, 255, 0.18) !important;

  transform: translateY(-2px) !important;

  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45),

    0 1px 0 rgba(255, 255, 255, 0.12) inset,

    0 0 0 1px rgba(255, 255, 255, 0.06),

    0 0 24px rgba(255, 255, 255, 0.04) !important;

}



/* 髢ｸ諢ｬ諛朱｡疲┛莉ｦ?*/

.summary-card > span,

.summary-card > strong {

  position: relative;

  z-index: 2;

}



/* 髢ｺ蠍�ｴｨ鬘堤�蠑ｽ螳�屋遑€ - 螯､蛯崚ｪ鬘俸�ﾐ帝盾蝙ｮ裵企錘蝨ｭ蛛�貔ｹ蟀�ｼｬ骰･ﾑ��?+ 髏滉ｽｸ諛倬活謇ｮ逞ｪ?*/

.summary-card > span {

  display: block;

  width: fit-content;

  position: relative;

  margin-bottom: 12px;

  padding-bottom: 8px;

  color: rgba(255, 255, 255, 1);

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  transition: all 0.3s ease;

}



/* 髢ｺ蠍�ｴｨ鬘帝萩遞臥€｣薰｣辣咎澄菴ｸ諛倬活謇ｮ逞?*/

.summary-card > span::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 24px;

  height: 2px;

  background: linear-gradient(

    90deg,

    rgba(var(--crystal-primary), 0.6) 0%,

    transparent 100%

  );

  border-radius: 1px;

  transition: all 0.3s ease;

  transform-origin: center;

}



/* 轢ｹ髱ｩ郛夂ｻ怜�諞ｴ骼ｺ譖ｨ譽�ｦ､讌�｢鈴逢蘒ｬ蜀ｨ谿､螽ｴ��ｴ門ｨｴ讓ｿ縺�?*/

.summary-card > span::before {

  content: '';

  position: absolute;

  top: -8px;

  left: -12px;

  width: 8px;

  height: 8px;

  border-top: 1.5px solid rgba(var(--crystal-primary), 0.6);

  border-left: 1.5px solid rgba(var(--crystal-primary), 0.6);

  transition: all 0.3s ease;

}



.summary-card:hover > span {

  color: rgba(var(--crystal-primary), 0.9);

}



.summary-card:hover > span::after {

  width: 24px;

  background: linear-gradient(

    90deg,

    transparent 0%,

    rgba(var(--crystal-primary), 1) 100%

  );

  animation: comet-sweep 2s linear infinite;

  animation-delay: -0.35s;

  transform-origin: center;

}



@keyframes comet-sweep {

  0% { left: calc(0% - 12px); transform: scaleX(0); }

  12.5% { left: calc(14.64% - 12px); transform: scaleX(0.707); }

  25% { left: calc(50% - 12px); transform: scaleX(1); }

  37.5% { left: calc(85.35% - 12px); transform: scaleX(0.707); }

  50% { left: calc(100% - 12px); transform: scaleX(0); }

  62.5% { left: calc(85.35% - 12px); transform: scaleX(-0.707); }

  75% { left: calc(50% - 12px); transform: scaleX(-1); }

  87.5% { left: calc(14.64% - 12px); transform: scaleX(-0.707); }

  100% { left: calc(0% - 12px); transform: scaleX(0); }

}



.summary-card:hover > span::before {

  border-color: rgba(var(--crystal-primary), 1);

  transform: scale(1.2);

}



/* Bottom-right corner tick */

.bottom-right-tick {

  position: absolute;

  bottom: 12px;

  right: 12px;

  width: 8px;

  height: 8px;

  border-bottom: 1.5px solid rgba(var(--crystal-primary), 0.6);

  border-right: 1.5px solid rgba(var(--crystal-primary), 0.6);

  transition: all 0.3s ease;

  z-index: 10;

  pointer-events: none;

}



.summary-card:hover .bottom-right-tick {

  border-color: rgba(var(--crystal-primary), 1);

  transform: scale(1.2);

}



/* 髢ｺ菴ｹ貔倬逢﨡€蜷矩雛蜊樶�?- 豼樊諜諛丞ｨ�ｰｱ竄ｬ蝨ｭ蛛�貔?+ 髀臥じ訒ｧ豬懈屬蟠｣骼ｴ豼�ｸ?*/

.summary-card strong {

  display: block;

  font-family: var(--display-font);

  font-size: 32px;

  font-weight: 800;

  line-height: 1.2;

  letter-spacing: -0.02em;

  font-variant-numeric: tabular-nums;

  color: #ffffff;

  text-shadow: none;

  transition: all 0.3s ease;

}



.summary-card:hover strong {

  color: rgb(var(--crystal-primary));

  text-shadow: 0 0 30px rgba(var(--crystal-primary), 0.6);

}



.summary-card strong span {

  display: inline;

  margin: 0;

  font: inherit;

  color: inherit;

  text-shadow: inherit;

}



.panel {

  padding: 14px;

  margin-bottom: 14px;

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.052),

      rgba(255, 255, 255, 0.01)

    ),

    rgba(11, 15, 22, 0.54);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09),

    inset 0 -1px 0 rgba(0, 0, 0, 0.16), 0 18px 42px rgba(0, 0, 0, 0.18);

  backdrop-filter: blur(26px) saturate(1.25);

}



.panel-heading {

  display: flex;

  justify-content: space-between;

  gap: 16px;

  align-items: flex-start;

  margin-bottom: 12px;

}



.panel-heading h2 {

  margin: 0 0 5px;

  font-size: 17px;

  font-weight: 700;

  color: var(--text-strong);

}



.panel-heading p {

  margin: 0;

  font-size: 12px;

}



.filter-block + .filter-block {

  margin-top: 16px;

  padding-top: 16px;

  border-top: 1px solid rgba(170, 181, 198, 0.11);

}



.filter-block h3 {

  margin: 0 0 10px;

  color: var(--muted);

  font-size: 13px;

}



.filter-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));

  gap: 8px;

}



.filter-legend {

  width: fit-content;

  max-width: min(100%, 760px);

  margin: 18px 0 0 auto;

  padding: 12px 16px;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 10px 16px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 12px;

  color: rgba(255, 255, 255, 0.9);

  background: linear-gradient(

      135deg,

      rgba(42, 42, 46, 0.3),

      rgba(36, 36, 40, 0.4)

    );

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),

    0 1px 0 rgba(255, 255, 255, 0.06) inset,

    0 0 0 1px rgba(255, 255, 255, 0.03);

  backdrop-filter: blur(40px) saturate(150%);

}



.filter-legend span {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  min-height: 22px;

  white-space: nowrap;

  font-size: 12px;

  font-weight: 650;

}



.filter-legend .status-dot {

  width: 8px;

  height: 8px;

}



.filter-card {

  padding: 12px 13px;

  cursor: pointer;

  display: flex;

  min-height: 84px;

  flex-direction: column;

  justify-content: space-between;

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.052),

      rgba(255, 255, 255, 0.01)

    ),

    rgba(14, 18, 26, 0.48);

  border-color: rgba(170, 181, 198, 0.16);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09),

    0 12px 30px rgba(0, 0, 0, 0.13);

  backdrop-filter: blur(24px) saturate(1.25);

  user-select: none;

  transition: background 0.22s ease, border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),

    box-shadow 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),

    border-width 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.filter-card:hover {

  border-color: rgba(202, 211, 224, 0.3);

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.064),

      rgba(255, 255, 255, 0.014)

    ),

    rgba(17, 22, 31, 0.72);

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2),

    0 0 0 1px rgba(148, 163, 184, 0.06) inset;

  transform: translateY(-1px);

  z-index: 2;

}



.filter-card.active:hover {

  border-color: rgba(255, 255, 255, 0.28) !important;

}



.filter-card:active {

  transform: translateY(1px) scale(0.98);

  transition-duration: 0.08s;

}



.filter-card.active {

  position: relative;

  border: 2px solid rgba(255, 255, 255, 0.28) !important;

}



.filter-card.active::after {

  content: "";

  position: absolute;

  bottom: -8px;

  left: 50%;

  transform: translateX(-50%);

  width: 45%;

  height: 3px;

  background: rgba(255, 255, 255, 0.9);

  border-radius: 999px;

  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  pointer-events: none;

}



.filter-card-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  min-width: 0;

}



.filter-card .label,

.summary-card .label {

  color: var(--text);

  font-weight: 700;

}



.filter-card .label {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.filter-card .rate {

  display: block;

  margin: 8px 0 3px;

  font-size: 19px;

  font-weight: 800;

}



.filter-card .meta {

  color: var(--faint);

  font-size: 12px;

}



.status-excellent {

  color: #32d74b;

}

.status-good {

  color: #c5ec3a;

}

.status-fair {

  color: #ffd60a;

}

.status-poor {

  color: #ff9f0a;

}

.status-garbage {

  color: #ff6b5b;

}

.status-critical {

  color: #ff453a;

}

.status-bad {

  color: #ff453a;

}

.status-idle {

  color: var(--faint);

}



.status-dot {

  display: inline-block;

  width: 7px;

  height: 7px;

  flex: 0 0 auto;

  border-radius: 999px;

  background: #64748b;

}



.status-dot-idle {

  background: #4b5563;

}

.status-dot-excellent {

  background: #32d74b;

  box-shadow: 0 0 6px rgba(50, 215, 75, 0.55);

}

.status-dot-good {

  background: #c5ec3a;

  box-shadow: 0 0 6px rgba(197, 236, 58, 0.52);

}

.status-dot-fair {

  background: #ffd60a;

  box-shadow: 0 0 6px rgba(255, 214, 10, 0.5);

}

.status-dot-poor {

  background: #ff9f0a;

  box-shadow: 0 0 6px rgba(255, 159, 10, 0.48);

}

.status-dot-garbage {

  background: #ff6b5b;

  box-shadow: 0 0 6px rgba(255, 107, 91, 0.48);

}

.status-dot-critical {

  background: #ff453a;

  box-shadow: 0 0 6px rgba(255, 69, 58, 0.5);

}



.hot-strip {

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 8px;

}



.hot-card {

  display: grid;

  grid-template-columns: auto minmax(0, 1fr) auto;

  align-items: center;

  gap: 4px 11px;

  min-height: 68px;

  padding: 10px 12px;

  min-width: 0;

  text-align: left;

  cursor: default;

  transition: background 0.22s ease, border-color 0.22s ease,

    box-shadow 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);

}



.hot-card:hover {

  border-color: rgba(202, 211, 224, 0.3);

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.06),

      rgba(255, 255, 255, 0.014)

    ),

    linear-gradient(180deg, rgba(24, 29, 39, 0.98), rgba(17, 21, 29, 0.98));

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28),

    0 0 0 1px rgba(148, 163, 184, 0.06) inset, 0 0 22px rgba(243, 154, 75, 0.05);

  transform: translateY(-2px);

  z-index: 2;

}



.rank {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 32px;

  height: 32px;

  border-radius: 8px;

  color: var(--text-strong);

  background: #2a2c30;

  border: 1px solid rgba(255, 255, 255, 0.15);

  font-weight: 700;

  font-size: 15px;

  margin-bottom: 0;

  grid-row: span 2;

  box-shadow: none;

}



.rank-gold {

  color: #fbbf24;

  background: #3d3318;

  border-color: rgba(251, 191, 36, 0.5);

  box-shadow: none;

}

.rank-lime {

  color: #a3e635;

  background: #2d3319;

  border-color: rgba(163, 230, 53, 0.5);

  box-shadow: none;

}

.rank-orange {

  color: #fb923c;

  background: #3d2818;

  border-color: rgba(251, 146, 60, 0.5);

  box-shadow: none;

}

.rank-muted {

  color: #94a3b8;

  background: #282a2e;

  border-color: rgba(148, 163, 184, 0.3);

}



.model-name {

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-weight: 700;

}



.model-meta {

  color: var(--muted);

  font-size: 12px;

  margin-top: 6px;

}



.hot-card .model-meta {

  margin-top: 0;

}



.hot-status-dot {

  grid-column: 3;

  grid-row: 1 / span 2;

  align-self: center;

}



.model-list-panel {

  position: relative;

  overflow: hidden;

  border-color: rgba(170, 181, 198, 0.18);

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.048),

      rgba(255, 255, 255, 0.01)

    ),

    rgba(12, 16, 24, 0.56);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.085),

    0 20px 50px rgba(0, 0, 0, 0.2);

  backdrop-filter: blur(26px) saturate(1.25);

}



.model-list-panel::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background: linear-gradient(

    180deg,

    rgba(255, 255, 255, 0.03),

    transparent 120px

  );

  opacity: 0.66;

}



.model-list-panel > * {

  position: relative;

  z-index: 1;

}



.model-list-heading {

  align-items: center;

  margin: -2px -2px 14px;

  padding: 9px 10px 12px;

  border-bottom: 1px solid rgba(170, 181, 198, 0.12);

  border-radius: 12px;

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.038),

      rgba(255, 255, 255, 0.006)

    ),

    rgba(8, 11, 17, 0.24);

}



.model-list-heading h2 {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 20px;

}



.toolbar {

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 8px;

}



.sort-label {

  color: #ffffff;

  font-size: 13px;

  font-weight: 850;

  letter-spacing: 0;

  white-space: nowrap;

}



.model-search-shell {

  position: relative;

  width: 200px;

  display: flex;

  align-items: center;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 14px;

  background: rgba(28, 30, 36, 0.5);

  box-shadow: none;

  transition: border-color 0.18s ease, box-shadow 0.18s ease,

    background 0.18s ease;

}



.model-search-shell:focus-within {

  border-color: rgba(255, 255, 255, 0.2);

  background: rgba(32, 34, 40, 0.6);

  box-shadow: none;

  backdrop-filter: blur(40px) saturate(180%);

}



.model-search-icon {

  position: absolute;

  left: 13px;

  top: 50%;

  width: 16px;

  height: 16px;

  transform: translateY(-50%);

  border: 2px solid rgba(203, 213, 225, 0.74);

  border-radius: 50%;

  pointer-events: none;

}



.model-search-icon::after {

  content: "";

  position: absolute;

  width: 7px;

  height: 2px;

  right: -6px;

  bottom: -4px;

  border-radius: 999px;

  background: rgba(203, 213, 225, 0.74);

  transform: rotate(45deg);

  transform-origin: left center;

}



.model-search-shell .input {

  width: 100%;

  min-width: 0;

  min-height: 40px;

  padding: 0 13px 0 39px;

  border: 0;

  border-radius: inherit;

  color: var(--text-strong);

  background: transparent;

  box-shadow: none;

}



.model-search-shell .input::placeholder {

  color: rgba(203, 213, 225, 0.58);

}



.model-search-shell .input:focus {

  border-color: transparent;

  background: transparent;

  box-shadow: none;

}



.toolbar > .input {

  width: min(280px, 32vw);

  min-width: 220px;

}



#sort-tabs {

  position: relative;

  min-height: 48px;

  padding: 5px;

  border-radius: 11px;

  background: radial-gradient(

      circle at 30% 20%,

      rgba(255, 255, 255, 0.08),

      transparent 50%

    ),

    linear-gradient(180deg, rgba(99, 99, 102, 0.5), rgba(72, 72, 74, 0.58));

  border: 0.5px solid rgba(255, 255, 255, 0.18);

  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2),

    inset 0 -0.5px 0 rgba(0, 0, 0, 0.28), 0 2px 10px rgba(0, 0, 0, 0.22),

    0 8px 24px rgba(0, 0, 0, 0.14);

  backdrop-filter: blur(40px) saturate(180%);

}



#sort-tabs button {

  min-height: 32px;

  min-width: 64px;

  border-radius: 8px;

  color: rgba(235, 235, 245, 0.6);

  font-size: 14px;

  font-weight: 590;

  letter-spacing: -0.012em;

  padding: 0 12px;

  border: 0.5px solid transparent;

}



#sort-tabs button:hover {

  color: rgba(255, 255, 255, 0.9);

  background: radial-gradient(

      circle at 50% 0%,

      rgba(255, 255, 255, 0.1),

      transparent 60%

    ),

    rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(20px) saturate(180%);

}



#sort-tabs button.active {

  border-color: rgba(255, 255, 255, 0.22);

  color: rgba(255, 255, 255, 0.98);

  background: radial-gradient(

      circle at 50% 0%,

      rgba(255, 255, 255, 0.16),

      transparent 65%

    ),

    linear-gradient(

      180deg,

      rgba(152, 152, 157, 0.82),

      rgba(124, 124, 136, 0.88)

    );

  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.28),

    inset 0 -0.5px 0 rgba(0, 0, 0, 0.24), 0 2px 8px rgba(0, 0, 0, 0.26),

    0 8px 20px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(40px) saturate(180%);

}



.count-pill,

.badge {

  display: inline-flex;

  align-items: center;

  min-height: 22px;

  border: 1px solid var(--border);

  border-radius: 999px;

  padding: 0 9px;

  color: var(--muted);

  background: var(--surface-2);

  font-size: 12px;

  font-weight: 600;

}



.model-list-panel .count-pill {

  border-color: rgba(139, 202, 255, 0.18);

  color: rgba(203, 213, 225, 0.88);

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

}



.badge.status-excellent {

  color: #32d74b;

  border-color: rgba(50, 215, 75, 0.42);

  background: rgba(50, 215, 75, 0.1);

}



.badge.status-good {

  color: #c5ec3a;

  border-color: rgba(197, 236, 58, 0.42);

  background: rgba(197, 236, 58, 0.1);

}



.badge.status-fair {

  color: #ffd60a;

  border-color: rgba(255, 214, 10, 0.42);

  background: rgba(255, 214, 10, 0.1);

}



.badge.status-poor {

  color: #ff9f0a;

  border-color: rgba(255, 159, 10, 0.46);

  background: rgba(255, 159, 10, 0.1);

}



.badge.status-garbage {

  color: #ff6b5b;

  border-color: rgba(255, 107, 91, 0.46);

  background: rgba(255, 107, 91, 0.1);

}



.badge.status-critical {

  color: #ff453a;

  border-color: rgba(255, 69, 58, 0.46);

  background: rgba(255, 69, 58, 0.12);

}



.badge.status-bad {

  color: #ff453a;

  border-color: rgba(255, 69, 58, 0.46);

  background: rgba(255, 69, 58, 0.1);

}



.input {

  width: 100%;

  min-height: 40px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  padding: 0 12px;

  color: var(--text);

  background: #0f1218;

  outline: none;

  transition: border-color 0.18s ease, box-shadow 0.18s ease,

    background 0.18s ease;

}



.input:focus {

  border-color: #64748b;

  background: #121720;

  box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.18);

}



.large-input {

  min-height: 48px;

}



.textarea {

  min-height: 126px;

  padding-top: 11px;

  resize: vertical;

}



.model-list {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.model-row {

  position: relative;

  overflow: hidden;

  display: grid;

  grid-template-columns: minmax(218px, 252px) minmax(260px, 1fr) minmax(

      72px,

      auto

    );

  gap: 12px 12px;

  align-items: center;

  min-height: 74px;

  padding: 13px 16px;

  border-radius: 10px;

  border-color: rgba(170, 181, 198, 0.15);

  background: radial-gradient(

      circle at 0% 0%,

      rgba(255, 255, 255, 0.06),

      transparent 72px

    ),

    linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.038),

      rgba(255, 255, 255, 0.01)

    ),

    rgba(9, 12, 18, 0.48);

  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.12);

  transition: background 0.18s ease, border-color 0.18s ease,

    box-shadow 0.18s ease, transform 0.18s ease;

}



.model-row:hover {

  border-color: rgba(202, 211, 224, 0.3);

  background: radial-gradient(

      circle at 0% 0%,

      rgba(93, 214, 255, 0.1),

      transparent 82px

    ),

    linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.055),

      rgba(255, 255, 255, 0.014)

    ),

    rgba(15, 20, 30, 0.62);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),

    0 16px 36px rgba(0, 0, 0, 0.18), 0 0 28px rgba(93, 214, 255, 0.055);

  transform: translateY(-1px);

}



.model-row-info {

  min-width: 0;

  padding-left: 4px;

}



.model-row .model-name {

  margin-bottom: 6px;

  color: var(--text-strong);

  font-size: 15px;

  font-weight: 700;

  text-shadow: 0 0 20px rgba(255, 255, 255, 0.08);

}



.model-row-meta,

.model-last {

  display: flex;

  min-width: 0;

  align-items: center;

  gap: 6px;

}



.model-row-meta {

  margin-bottom: 6px;

  font-size: 12px;

}



.model-rate {

  font-weight: 800;

}



.model-requests {

  flex: 0 0 auto;

  color: var(--faint);

}



.model-last {

  color: rgba(148, 163, 184, 0.72);

  font-size: 11px;

}



.time-fresh {

  color: #5dde8d;

  font-weight: 720;

}



.time-recent {

  color: #c5ec3a;

  font-weight: 720;

}



.time-old {

  color: #cbd5e1;

  font-weight: 650;

}



.time-idle {

  color: #64748b;

  font-weight: 650;

}



.model-chip,

.status-badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border: 1px solid var(--border);

  border-radius: 6px;

  white-space: nowrap;

}



.model-chip {

  max-width: 86px;

  min-height: 18px;

  padding: 0 6px;

  overflow: hidden;

  text-overflow: ellipsis;

  font-size: 10px;

  font-weight: 800;

  box-shadow: none;

}



.status-badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 28px;

  padding: 0 12px;

  border-radius: 6px;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.01em;

  border: 1px solid;

  transition: all 0.2s ease;

}



.model-chip.status-idle,

.status-badge.status-idle {

  color: #9ca3af;

  border-color: #2a2f3a;

  background: #1b1e27;

  box-shadow: none;

}



.model-chip.status-excellent,

.status-badge.status-excellent {

  color: #32d74b;

  border-color: #1d482d;

  background: #132d1f;

  box-shadow: none;

}



.model-chip.status-good,

.status-badge.status-good {

  color: #c5ec3a;

  border-color: #3f401d;

  background: #2d2e15;

  box-shadow: none;

}



.model-chip.status-fair,

.status-badge.status-fair {

  color: #ffd60a;

  border-color: #473e1d;

  background: #332d15;

  box-shadow: none;

}



.model-chip.status-poor,

.status-badge.status-poor {

  color: #ff9f0a;

  border-color: #472e1d;

  background: #332115;

  box-shadow: none;

}



.model-chip.status-garbage,

.status-badge.status-garbage {

  color: #ff6b5b;

  border-color: #472420;

  background: #331a18;

  box-shadow: none;

}



.model-chip.status-critical,

.status-badge.status-critical {

  color: #ff453a;

  border-color: #3f1d20;

  background: #2a1315;

  box-shadow: none;

}



.price-badge {

  display: inline-flex;

  align-items: center;

  max-width: 180px;

  height: 18px;

  margin-left: 6px;

  padding: 0 8px;

  border: 1px solid rgba(255, 255, 255, 0.18);

  border-radius: 5px;

  color: #ffffff;

  background: transparent;

  font-size: 10px;

  font-weight: 740;

  line-height: 18px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.model-row-status {

  display: flex;

  justify-content: flex-end;

}



.bin-strip {

  display: grid;

  grid-template-columns: repeat(12, 1fr);

  gap: 2px;

  height: 34px;

  padding: 3px;

  border: none !important;

  border-radius: 8px;

  background: transparent !important;

  box-shadow: none !important;

}



.bin {

  position: relative;

  border-radius: 4px;

  background: var(--surface-3);

  transform-origin: bottom center;

  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),

    filter 0.15s ease, box-shadow 0.15s ease;

}



.bin:hover {

  cursor: crosshair;

  filter: brightness(1.25);

  transform: scaleY(1.25) scaleX(1.05);

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);

  z-index: 10;

}



.bin.excellent {

  background: linear-gradient(180deg, #5ef086 0%, #32d74b 100%);

  box-shadow: none;

}

.bin.good {

  background: linear-gradient(180deg, #d4f157 0%, #c5ec3a 100%);

  box-shadow: none;

}

.bin.fair {

  background: linear-gradient(180deg, #ffe347 0%, #ffd60a 100%);

  box-shadow: none;

}

.bin.poor {

  background: linear-gradient(180deg, #ffb647 0%, #ff9f0a 100%);

  box-shadow: none;

}

.bin.garbage {

  background: linear-gradient(180deg, #ff7a6e 0%, #ff6b5b 100%);

  box-shadow: none;

}

.bin.critical,

.bin.bad {

  background: linear-gradient(180deg, #ff6a61 0%, #ff453a 100%);

  box-shadow: none;

}



.search-layout,

.reviews-layout,

.admin-grid {

  display: grid;

  grid-template-columns: minmax(280px, 0.72fr) minmax(420px, 1.28fr);

  gap: 16px;

}



.query-results,

.eligible-model-list,

.review-list,

.admin-review-list,

.admin-user-list,

.action-list {

  display: flex;

  flex-direction: column;

  gap: 9px;

}



#view-reviews .panel {

  border: 1.5px solid rgba(180, 170, 150, 0.35) !important;

  background: #f8f4ed !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6),

    0 8px 32px rgba(0, 0, 0, 0.18) !important;

  backdrop-filter: none !important;

}



#view-reviews .panel-heading h2 {

  letter-spacing: 0;

  color: #1a1a1a !important;

}



#view-reviews .panel-heading p {

  color: #5c4332 !important;

}



#view-reviews .muted-text {

  color: #5c4332;

}



#view-reviews .empty-state {

  color: #5c4332;

  border-color: rgba(0, 0, 0, 0.12);

}



#view-reviews .form-stack label span {

  color: #1a1a1a;

}



#view-reviews .stars {

  color: #d4a017;

}



#view-reviews .review-card h3,

#view-reviews .admin-card h3 {

  color: #1a1a1a;

}



#view-reviews .review-card p,

#view-reviews .admin-card p {

  color: rgba(0, 0, 0, 0.6);

}



#view-reviews .review-metrics {

  border-top-color: rgba(0, 0, 0, 0.1);

}



#view-reviews .review-author {

  color: #1a1a1a;

  text-shadow: none;

}



#view-reviews .review-model-name {

  color: #1a1a1a;

}



#view-reviews .review-card-actions .small-button {

  border-color: rgba(0, 0, 0, 0.18);

  color: #1a1a1a;

  background: rgba(0, 0, 0, 0.04);

}



#view-reviews .review-card-actions .small-button:hover {

  border-color: rgba(0, 0, 0, 0.3);

  color: #000000;

  background: rgba(0, 0, 0, 0.07);

}



#view-reviews .identity-card-label {

  color: rgba(0, 0, 0, 0.7);

}



#view-reviews .identity-card strong {

  color: #000000;

}



#view-reviews .identity-info-grid em {

  color: rgba(0, 0, 0, 0.6);

}



#view-reviews .identity-info-grid b {

  color: #000000;

}



#view-reviews .identity-info-grid span {

  border-color: rgba(0, 0, 0, 0.35) !important;

}



#view-reviews .identity-action-button {

  border-color: rgba(0, 0, 0, 0.22);

  color: #1a1a1a;

  background: rgba(0, 0, 0, 0.05);

}



#view-reviews .identity-action-button:hover {

  border-color: rgba(0, 0, 0, 0.4);

  color: #000000;

  background: rgba(0, 0, 0, 0.1);

  box-shadow: 0 0 22px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.12);

  transform: translateY(-1px);

}



#view-reviews .mute-alert {

  border-color: rgba(180, 40, 40, 0.3);

  background: rgba(239, 68, 68, 0.06);

  color: rgba(180, 40, 40, 0.8);

}



#view-reviews .mute-alert strong {
  color: #991b1b;
}

#view-reviews .mute-alert-grid span {
  color: #b91c1c !important;
}

#view-reviews .mute-alert-grid b {
  color: #7f1d1d !important;
}



#view-reviews .input {

  border: 1.5px solid rgba(90, 70, 50, 0.35);

  background: #f5f0e8;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  color: #5c4332;

}



#view-reviews .input:focus {

  border-color: rgba(90, 70, 50, 0.5);

  background: #faf7f1;

  box-shadow: 0 0 0 3px rgba(90, 70, 50, 0.15);

}



#view-reviews .input::placeholder {

  color: #5c4332;

}



#view-reviews .textarea {

  min-height: 126px;

  resize: vertical;

}



/* 髣�い逸ｰ轢壹├ﾎ滄挨蟠�ぎ辜ｽ蟷門ｩ雁俗蛛肴ｿ?髢ｳ繝ｦ譟｡驤ｧ?郛�い逎ｭ螽���髻ｫ蠇�遘ｵ髏取ｶ凖ｪ蟀€﨟亥ｹ�?*/

.review-model-search-shell {

  position: relative;

  display: flex;

  align-items: center;

  border-radius: 9999px;

  border: 1.5px solid rgba(90, 70, 50, 0.35);

  background: #f5f0e8;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;

  overflow: hidden;

  margin-top: 9px;

}



.review-model-search-shell:focus-within {

  border-color: rgba(90, 70, 50, 0.55);

  background: #faf7f1;

  box-shadow: 0 0 0 2px rgba(90, 70, 50, 0.15);

}



.review-model-search-shell .input {

  width: 100%;

  min-height: 40px;

  padding: 0 16px 0 42px;

  border: none !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  color: #5c4332;

  font-weight: 500;

}



#view-reviews .review-model-search-shell .input::placeholder {

  color: #5c4332;

}



.review-model-search-shell .input:focus-visible {

  outline: none;

}



.review-model-search-shell .model-search-icon {

  position: absolute;

  left: 16px;

  top: 50%;

  width: 15px;

  height: 15px;

  transform: translateY(-50%);

  border: 2px solid #2a1f14;

  border-radius: 50%;

  pointer-events: none;

  transition: transform 0.2s ease;

}



.review-model-search-shell .model-search-icon::after {

  content: "";

  position: absolute;

  width: 6px;

  height: 2px;

  right: -5px;

  bottom: -3px;

  border-radius: 999px;

  background: #2a1f14;

  transform: rotate(45deg);

  transform-origin: left center;

}



.review-model-search-shell:focus-within .model-search-icon {

  transform: translateY(-50%) scale(1.05);

}



#view-reviews .eligible-item {

  border: 1.5px solid rgba(90, 70, 50, 0.3);

  background: #f5f0e8;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



#view-reviews .eligible-item.active {

  border-color: rgba(90, 70, 50, 0.45);

  background: #ede6d8;

  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);

  transform: translateY(1px);

}



#view-reviews .eligible-item:hover {

  border-color: rgba(90, 70, 50, 0.45);

  background: #faf7f1;

}



.query-results {

  margin-top: 12px;

  max-height: 560px;

  overflow: auto;

}



.query-item,

.review-card,

.admin-card {

  padding: 14px;

}



.detail-block {

  margin-top: 12px;

  padding-top: 14px;

  border-top: 1px solid var(--border);

}



.query-item {

  cursor: pointer;

  transition: background 0.18s ease, border-color 0.18s ease,

    transform 0.18s ease;

}



.query-item.active {

  border-color: #64748b;

  background: #1c2333;

}



.query-item:hover {

  border-color: var(--border-strong);

  background: #141821;

}



.model-detail {

  min-height: 320px;

}



#view-search {

  --card-accent: #aab5c6;

  font-variant-numeric: tabular-nums;

}



#view-search .panel {

  border-color: var(--board-line);

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.045),

      rgba(255, 255, 255, 0.01)

    ),

    var(--board-surface);

  box-shadow: 
    0 12px 34px rgba(0, 0, 0, 0.22);

  backdrop-filter: blur(26px) saturate(130%);

}



.site-board-panel {

  margin-bottom: 14px;

}



#view-search .panel-heading {

  align-items: flex-start;

  gap: 18px;

  padding-bottom: 14px;

  margin-bottom: 14px;

  border-bottom: 1px solid rgba(170, 181, 198, 0.1);

}



#view-search .panel-heading h2 {

  margin: 0;

  color: var(--text-strong);

  font-size: 17px;

  font-weight: 700;

  line-height: 1.3;

  letter-spacing: 0;

}



#view-search .panel-heading p {

  margin-top: 8px;

  max-width: 620px;

  color: var(--board-muted);

  font-size: 13px;

  font-weight: 560;

  line-height: 1.55;

}



#clear-filters,

#reload-site-board {

  color: var(--board-ink);

  border-color: var(--board-line);

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.07),

      rgba(255, 255, 255, 0.018)

    ),

    rgba(12, 15, 20, 0.56);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);

  font-weight: 720;

}



/* 髢ｸ蠢｣蜑咏ｻｱ謌ｦ謔咏ｺｭ蜻ｯ讒鷹椋謗玲罰髀悟ｩ�ｹ先ｾｶ諢ｭ蟆ｦ髢ｿ豸咏｢咲ｻ�т諛晞曙繝｢蛛馴轟轤ｲ蟶ｳ */

#reload-reviews {

  color: #1a1a1a;

  border-color: rgba(90, 70, 50, 0.35);

  background: #f5f0e8;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  font-weight: 720;

}



#reload-reviews:hover {

  color: #000000;

  border-color: rgba(90, 70, 50, 0.5);

  background: #faf7f1;

  transform: translateY(-2px);

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);

}



#view-search .ghost-button:focus-visible,

#view-search .primary-button:focus-visible,

#view-search .input:focus-visible {

  outline: 2px solid color-mix(in srgb, var(--accent-2) 58%, transparent);

  outline-offset: 3px;

}



#view-search .token-lookup-form .input:focus-visible {

  outline: none;

}



.board-status {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  min-height: 32px;

  margin: 0 0 12px;

  padding: 0 11px;

  border: 1px solid var(--board-line);

  border-radius: 999px;

  color: var(--board-muted);

  background: rgba(6, 8, 12, 0.34);

  font-size: 12px;

  font-weight: 600;

  line-height: 1;

}



.board-status strong {

  color: var(--board-ink);

  font-weight: 700;

}



.board-status.error,

.token-lookup-message.error {
  color: #ff6b6b; /* Softer, more modern red */
}



.board-grid,

.token-usage-grid {

  display: grid;

  grid-template-columns: repeat(6, minmax(0, 1fr));

  gap: 11px;

}



.board-card::before {

  content: "";

  position: absolute;

  left: 12px;

  right: 12px;

  top: 0;

  height: 1px;

  pointer-events: none;

  background: color-mix(in srgb, var(--card-accent, #aab5c6) 74%, transparent);

  opacity: 0.62;

}



.board-card {

  --card-accent: #aab5c6;

  display: grid;

  grid-template-rows: auto minmax(40px, 1fr) auto;

  min-height: 126px;

  padding: 16px 15px 14px;

  transition: transform 0.18s ease, border-color 0.18s ease,

    background 0.18s ease, box-shadow 0.18s ease;

}



.board-card:hover {

  transform: translateY(-2px);

  border-color: color-mix(

    in srgb,

    var(--card-accent, #aab5c6) 48%,

    var(--board-line-strong)

  );

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.078),

      rgba(255, 255, 255, 0.025)

    ),

    var(--board-surface-raised);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),

    0 12px 32px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.03);

}



.board-card-label {

  display: block;

  position: relative;

  z-index: 1;

  color: var(--board-ink);

  font-size: 12px;

  font-weight: 700;

  line-height: 1.25;

  white-space: nowrap;

}



.board-card-value {

  display: block;

  position: relative;

  z-index: 1;

  align-self: center;

  margin-top: 10px;

  color: var(--card-accent, var(--board-ink));

  font-family: var(--display-font);

  font-size: 26px;

  font-weight: 800;

  line-height: 1.08;

  letter-spacing: 0;

  overflow-wrap: anywhere;

}



.board-card-detail {

  display: block;

  position: relative;

  z-index: 1;

  align-self: end;

  min-height: 17px;

  color: var(--board-muted);

  font-size: 11px;

  font-weight: 500;

  line-height: 1.35;

}



.board-card-green,

.token-usage-green {

  --card-accent: #5dde8d;

}



.board-card-blue,

.token-usage-blue {

  --card-accent: #60a5fa;

}



.board-card-gold,

.token-usage-gold {

  --card-accent: #ffc940;

}



.board-card-purple,

.token-usage-purple {

  --card-accent: #c49deb;

}



.board-card-cyan,

.token-usage-cyan {

  --card-accent: #75d7e2;

}



.token-usage-count-lines {

  position: relative;

  z-index: 1;

  align-self: center;

  display: grid;

  gap: 6px;

  margin-top: 10px;

}



.token-usage-count-row {

  display: grid;

  grid-template-columns: 72px minmax(0, auto);

  align-items: baseline;

  column-gap: 8px;

  width: fit-content;

  max-width: 100%;

  font-family: var(--display-font);

  line-height: 1.08;

  letter-spacing: 0;

}



.token-usage-count-row span {

  font-size: 15px;

  font-weight: 760;

}



.token-usage-count-row strong {

  font-size: 20px;

  font-weight: 780;

}



.token-usage-count-success {

  color: #5df08a;

}



.token-usage-count-failed {

  color: #ff6b6b;

}



.board-card-danger,

.token-usage-danger {

  --card-accent: #f07d7d;

}



.board-card-model-families {

  min-height: 154px;

}



.model-family-list {

  position: relative;

  z-index: 1;

  display: grid;

  gap: 6px;

  align-self: center;

  margin: 10px 0 8px;

  padding: 0;

  list-style: none;

}



.model-family-row,

.model-family-name {

  display: flex;

  align-items: center;

  min-width: 0;

}



.model-family-row {

  justify-content: space-between;

  gap: 10px;

  min-height: 22px;

}



.model-family-name {

  gap: 7px;

}



.model-family-logo-slot {

  position: relative;

  display: inline-grid;

  place-items: center;

  width: 18px;

  height: 18px;

  flex: 0 0 18px;

  overflow: hidden;

}



.model-family-logo-slot .review-model-logo {

  display: block;

  width: 18px;

  height: 18px;

  flex-basis: 18px;

  border-radius: 0;

}



.model-family-row.brand-deepseek .model-family-logo-slot .review-model-logo {

  width: 18px;

  height: 18px;

  flex-basis: 18px;

  object-fit: contain;

  object-position: center;

  transform: none;

}



.model-family-row .review-model-text {

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-size: 12px;

  font-weight: 760;

}



.model-family-row strong {

  flex: 0 0 auto;

  min-height: 22px;

  padding: 0 8px;

  display: inline-flex;

  align-items: center;

  border: 1px solid var(--board-line);

  border-radius: 999px;

  color: var(--board-ink);

  background: rgba(255, 255, 255, 0.045);

  font-size: 12px;

  font-weight: 780;

}



.rpm-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 9px;

  margin-top: 9px;

}



.rpm-card {

  --card-accent: #aab5c6;

  min-height: 132px;

  padding: 17px 18px 15px;

  transition: transform 0.18s ease, border-color 0.18s ease,

    background 0.18s ease;

}



.rpm-server-card {

  border-color: color-mix(in srgb, var(--card-accent) 44%, var(--board-line));

}



.rpm-card:hover {

  transform: translateY(-1px);

  border-color: color-mix(

    in srgb,

    var(--card-accent) 42%,

    var(--board-line-strong)

  );

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.066),

      rgba(255, 255, 255, 0.016)

    ),

    var(--board-surface-raised);

}



.rpm-card-head span {

  min-width: 0;

  color: var(--board-ink);

  font-size: 17px;

  font-weight: 800;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.rpm-card-head strong {

  color: var(--card-accent);

  font-family: var(--display-font);

  font-size: 32px;

  font-weight: 760;

  line-height: 1;

}



.rpm-card-meta {

  justify-content: space-between;

  gap: 10px;

  margin-top: 10px;

  color: var(--board-muted);

  font-size: 12px;

  font-weight: 620;

}



.rpm-card-meta span:last-child {

  flex: 0 0 auto;

  min-height: 23px;

  padding: 0 8px;

  display: inline-flex;

  align-items: center;

  color: var(--board-ink);

}



.rpm-meter {

  height: 10px;

  margin-top: 13px;

  overflow: hidden;

  border-radius: 999px;

  background: var(--board-track);

}



.rpm-meter span {

  display: block;

  height: 100%;

  border-radius: inherit;

  background: var(--card-accent);

}



.rpm-good {

  --card-accent: #82dfa0;

}



.rpm-warn {

  --card-accent: #e9c969;

}



.rpm-danger {

  --card-accent: #f07d7d;

}



.rpm-card-foot {

  justify-content: center;

  width: fit-content;

  min-height: 23px;

  margin-top: 10px;

  margin-left: auto;

  padding: 0;

  color: var(--board-muted);

  font-size: 11px;

  font-weight: 700;

}



.token-lookup-panel {

  display: grid;

  gap: 12px;

}



.token-lookup-form {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 75px;

  gap: 9px;

  align-items: stretch;

  margin-bottom: 0;

  max-width: 560px;

}



/* 螽ｴ迥ｮ蛟玲ｾｧ豼句ｼｻ驫介汨蝴�婿遞ｿ逸ｵ骼ｸ謚ｽ謨榊ｧ偃�莠ｶ髢?+ 豼橸ｼ｢繧�酪 */

#token-lookup-button {

  border-radius: 9999px;

  border: 1px solid rgba(255, 255, 255, 0.22);

  background: linear-gradient(180deg, rgba(140, 210, 160, 0.55), rgba(100, 170, 125, 0.48));

  box-shadow: 0 4px 14px rgba(100, 170, 125, 0.12);

  color: rgba(255, 255, 255, 0.9);

  font-weight: 700;

}



#token-lookup-button:hover:not(:disabled) {

  background: linear-gradient(180deg, rgba(160, 225, 178, 0.62), rgba(120, 190, 142, 0.55));

  box-shadow: 0 6px 18px rgba(100, 170, 125, 0.18);

  transform: translateY(-1px);

}



#token-lookup-button:disabled {

  opacity: 0.55;

  cursor: wait;

  transform: none;

  box-shadow: none;

}



.token-search-shell {

  position: relative;

  display: flex;

  align-items: center;

  border-radius: 9999px; /* 髣やぎ髑ｳ訷壼治髢ｸ?*/

  border: 2px solid #ffffff; /* 郛∫ｻ｢蝙ｳ螽���髑ｼ﨡ら�髀牙�｣鄧蛾｡｢?*/

  background: #ffffff; /* 郛∫ｻ｢蝙ｳ螽���髑ｼ霍ｺ蜑ｹ髢ｺ蜥∝椰扈ｱ豼句ｴｪ轣櫁莱轢ｻ郛ゆｽｸ雖ｭ驤ｧ﨡∵ｧ帝｡ｫ蠍画汞髞晏､頑ｫ｡髢ｻ繖･雖ｮ螽��ヴ髀�ｰｱ﨟ｱ髢ｼ?*/

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;

  overflow: hidden;

}



.token-search-shell:focus-within {

  border-color: #ffffff;

  background: #ffffff;

  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);

}



#view-search .token-search-shell .input {

  width: 100%;
  min-height: 40px;
  padding: 0 16px 0 42px; /* 轢ｹ髱ｩ郛夐遵蝣墓だ螽�ｿ捺ｯ蛾娘竄ｬ骼ｯﾑ∽ｺ｣髣やぎ蟀雁測謨��?*/
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #1a1a1a; /* 髢ｻﾑ�ぎ辭ｷ﨤城名蜀ｲ譛ｬ螽�ｬ千ｨ画ｿ�菴ｸ笆城冥鄧ｬ蜉咲ｻｻ萓€諛晞甑螟狗€ｮ髏�?*/
  font-weight: 500;
}

.token-lookup-message.error,
.form-inline-message.error {
  color: #ff6b6b; /* Softer, more modern red */
}

.form-inline-message.success,
.form-inline-message.loading {
  font-size: 15px;
  margin: 6px 0 0 4px;
}

.form-inline-message.success {
  color: #16a34a; /* High contrast green */
}

.form-inline-message.loading {
  color: #334155; /* Very dark, highly legible slate */
}

.token-lookup-message {
  min-height: 20px;
  margin: 6px 0 0 18px; /* Move right and slightly down */
  color: var(--board-muted);
  font-size: 13px; /* Slightly larger for better readability */
  font-weight: 500; /* Modern weight */
  justify-content: center !important;
}

.form-inline-message {
  min-height: 20px;
  margin: -12px 0 0 12px;
  color: var(--board-muted);
  font-size: 14px;
  font-weight: 500;
}

#admin-login-message {
  margin: 14px 0 0 4px;
  font-size: 15px;
}

#view-search .token-search-shell .input::placeholder {

  color: #888888;

}



#view-search .token-search-shell .input:focus-visible {

  outline: none;

}



.token-search-shell .model-search-icon {

  position: absolute;

  left: 16px;

  top: 50%;

  width: 15px;

  height: 15px;

  transform: translateY(-50%);

  border: 2px solid transparent;

  border-radius: 50%;

  background: linear-gradient(#ffffff, #ffffff) padding-box,

              linear-gradient(135deg, #3b82f6, #10b981) border-box;

  pointer-events: none;

  transition: transform 0.2s ease;

}



.token-search-shell .model-search-icon::after {

  content: "";

  position: absolute;

  width: 6px;

  height: 2px;

  right: -5px;

  bottom: -3px;

  border-radius: 999px;

  background: #10b981;

  transform: rotate(45deg);

  transform-origin: left center;

}



.token-search-shell:focus-within .model-search-icon {

  transform: translateY(-50%) scale(1.05);

}



.token-lookup-message {
  min-height: 20px;
  margin: 6px 0 0 18px; /* Move right and slightly down */
  color: var(--board-muted);
  font-size: 13px; /* Slightly larger for better readability */
  font-weight: 500; /* Modern weight */
  line-height: 1.45;
  transition: all 0.2s ease;
}



.token-log-list {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-top: 0;

}



.empty-state {

  min-height: 240px;

  display: grid;

  place-items: center;

  border: 1px dashed var(--border);

  border-radius: var(--radius);

  color: var(--muted);

}



.form-stack {

  display: flex;

  flex-direction: column;

  gap: 13px;

}



.form-stack label span {

  display: block;

  margin-bottom: 7px;

  color: var(--muted);

  font-size: 13px;

}



#review-form > label > span,

#review-form > .rating-field > span,

#review-form > .review-model-field > span {

  display: block;

  margin: 14px 0 9px;

  color: #1a1a1a;

  font-size: 15px;

  font-weight: 820;

}



.hidden {

  display: none !important;

}



.bind-card {

  display: grid;

  gap: 10px;

}



.identity-card {

  position: relative;

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  gap: 18px;

  padding: 18px;

  border: 1.5px solid rgba(90, 70, 50, 0.3);

  border-radius: 12px;

  background: #f5f0e8;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.identity-card-main {

  min-width: 0;

}



.identity-card-label,

.admin-user-label {

  display: block;

  margin-bottom: 8px;

  color: var(--muted);

  font-size: 12px;

  font-weight: 760;

}



.identity-card strong,

.admin-user-head h3 {

  display: block;

  margin: 0;

  color: var(--text-strong);

  font-size: 24px;

  font-weight: 880;

  line-height: 1.2;

}



.identity-info-grid,

.admin-user-info-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 8px;

  margin-top: 14px;

}



.admin-user-info-grid {

  grid-template-columns: repeat(3, minmax(0, 1fr));

}



.identity-info-grid span,

.admin-user-info-grid span {

  min-width: 0;

  padding: 10px 11px;

  border: 1px solid rgba(148, 163, 184, 0.14);

  border-radius: 8px;

  background: rgba(8, 11, 17, 0.28);

}



.identity-info-grid em,

.admin-user-info-grid em {

  display: block;

  margin-bottom: 5px;

  color: var(--faint);

  font-size: 11px;

  font-style: normal;

  font-weight: 760;

}



.identity-info-grid b,

.admin-user-info-grid strong {

  display: block;

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  color: var(--text-strong);

  font-size: 14px;

  font-weight: 840;

  white-space: nowrap;

}



.identity-actions {

  display: grid;

  align-content: start;

  gap: 8px;

}



.identity-action-button {

  min-width: 108px;

  border-color: rgba(248, 250, 252, 0.32);

  color: #f8fafc;

  background: rgba(248, 250, 252, 0.06);

}



.identity-action-button:hover {

  border-color: rgba(255, 255, 255, 0.72);

  color: #ffffff;

  background: rgba(248, 250, 252, 0.12);

  box-shadow: 0 0 18px rgba(248, 250, 252, 0.12),

    0 0 6px rgba(248, 250, 252, 0.06);

  transform: translateY(-1px);

}



.identity-title-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 8px;

}



.identity-title-row span {

  color: var(--muted);

  font-size: 12px;

}



.mute-alert {

  margin-top: 12px;

  padding: 12px;

  border: 1px solid rgba(239, 68, 68, 0.46);

  border-radius: var(--radius);

  background: linear-gradient(

      180deg,

      rgba(127, 29, 29, 0.22),

      rgba(69, 10, 10, 0.16)

    ),

    rgba(239, 68, 68, 0.06);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);

}



.mute-alert strong {

  display: block;

  margin-bottom: 10px;

  color: #ff6b6b;

  font-size: 15px;

  font-weight: 900;

}



.mute-alert-grid {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 7px 10px;
  align-items: baseline;
}



.mute-alert-grid span {
  color: #fca5a5;
  font-size: 12px;
  font-weight: 760;
}



.mute-alert-grid b {

  color: var(--text-strong);

  font-size: 13px;

  line-height: 1.55;

  overflow-wrap: anywhere;

}



.rename-form {

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto auto;

  gap: 8px;

  align-items: center;

  margin-top: 12px;

  padding-top: 12px;

  border-top: 1px solid var(--border);

}



.checkbox-line {

  display: flex;

  align-items: center;

  gap: 8px;

  color: var(--muted);

  font-size: 13px;

}



.eligible-item {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 56px 104px;

  gap: 10px;

  align-items: center;

  padding: 11px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  background: var(--surface-2);

  cursor: pointer;

  transition: background 0.18s ease, border-color 0.18s ease,

    transform 0.18s ease;

}



.review-card-readable .review-model-name {

  min-width: 0;

}



.eligible-item .badge {

  grid-column: 3;

  width: 104px;

  justify-self: end;

  justify-content: center;

  border: 1.5px solid rgba(0, 0, 0, 0.18);

  color: #2a1f14;

  background: rgba(0, 0, 0, 0.06);

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  font-weight: 700;

}



.eligible-item .badge.eligible-status.is-ready {

  color: #064e3b;

  border-color: rgba(16, 185, 129, 0.55);

  background: rgba(16, 185, 129, 0.15);

  font-weight: 850;

}



.eligible-model-text {

  grid-column: 1;

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  text-align: left;

  font-size: 17px;

  font-weight: 850;

  color: #1a1a1a;

  text-shadow: none;

}



.eligible-model-logo-slot {

  grid-column: 2;

  width: 56px;

  min-height: 26px;

  display: inline-flex;

  justify-content: center;

  align-items: center;

}



.eligible-model-logo-slot .review-model-logo {

  width: 22px;

  height: 22px;

  flex: 0 0 22px;

  margin: 0;

}



.eligible-item.disabled {

  cursor: not-allowed;

  opacity: 0.52;

}



.eligible-item.active {

  border-color: rgba(90, 70, 50, 0.45);

  background: #ede6d8;

  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08);

  transform: translateY(1px);

}



.eligible-item:not(.disabled):hover {

  border-color: var(--border-strong);

  background: #1a1e27;

}



.rating-picker {
  display: flex;
  gap: 4px;
  margin-top: 12px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}

.rating-picker button {
  flex: 1;
  height: 40px;
  border-radius: 10px;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rating-picker button:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(0, 0, 0, 0.8);
}

/* 1 */
.rating-picker button[data-rating="1"].active,
.rating-picker button[data-edit-rating="1"].active {
  color: #ffffff;
  background: #dc2626;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 2 */
.rating-picker button[data-rating="2"].active,
.rating-picker button[data-edit-rating="2"].active {
  color: #ffffff;
  background: #ea580c;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 3 */
.rating-picker button[data-rating="3"].active,
.rating-picker button[data-edit-rating="3"].active {
  color: #ffffff;
  background: #d97706;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 4 */
.rating-picker button[data-rating="4"].active,
.rating-picker button[data-edit-rating="4"].active {
  color: #ffffff;
  background: #65a30d;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 5 */
.rating-picker button[data-rating="5"].active,
.rating-picker button[data-edit-rating="5"].active {
  color: #ffffff;
  background: #16a34a;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.rating-picker button.active:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}



.rating-picker button.active:hover {

  transform: translateY(-1px);

  filter: brightness(1.05);

}



.stars {

  color: #f6c64a;

  font-weight: 850;

  letter-spacing: 1px;

}



.review-card h3,

.admin-card h3 {

  margin: 6px 0;

  font-size: 16px;

}



.review-card p,

.admin-card p {

  margin: 8px 0 0;

  color: var(--muted);

  line-height: 1.62;

}



.review-card-readable {

  position: relative;

  padding-right: 118px;

  border: 1.5px solid rgba(90, 70, 50, 0.25);

  background: #f5f0e8;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

}



.review-rating-corner {

  position: absolute;

  top: 14px;

  right: 14px;

  white-space: nowrap;

}



.review-rating-badge {

  display: inline-flex;

  align-items: center;

  min-height: 30px;

  padding: 0 10px;

  border: 1px solid rgba(148, 163, 184, 0.22);

  border-radius: 9px;

  background: rgba(255, 255, 255, 0.055);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);

}



.review-rating-badge .stars {

  color: currentColor;

}



.rating-tone-5 {

  color: #32d74b;

  border-color: rgba(50, 215, 75, 0.4);

  background: rgba(50, 215, 75, 0.14);

}



.rating-tone-4 {

  color: #c5ec3a;

  border-color: rgba(197, 236, 58, 0.36);

  background: rgba(197, 236, 58, 0.12);

}



.rating-tone-3 {

  color: #f8fafc;

  border-color: rgba(248, 250, 252, 0.28);

  background: rgba(248, 250, 252, 0.08);

}



.rating-tone-2 {

  color: #ff9f0a;

  border-color: rgba(255, 159, 10, 0.36);

  background: rgba(255, 159, 10, 0.12);

}



.rating-tone-1 {

  color: #ff453a;

  border-color: rgba(255, 69, 58, 0.38);

  background: rgba(255, 69, 58, 0.12);

}



.review-author {

  color: var(--text-strong);

  font-size: 16px;

  font-weight: 850;

}



.review-time {

  margin-top: 4px;

  color: var(--faint);

  font-size: 13px;

}



.review-model-name {

  margin-top: 12px;

  padding-bottom: 12px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  color: #e5e7eb;

  font-size: 14px;

  font-weight: 800;

  overflow-wrap: anywhere;

}



.review-model-brand {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  min-width: 0;

  vertical-align: middle;

}



.review-model-text {

  overflow-wrap: anywhere;

}



.review-model-logo {

  width: 18px;

  height: 18px;

  flex: 0 0 18px;

  object-fit: contain;

  border-radius: 5px;

}



.review-model-logo:not([data-loaded="true"]) {

  opacity: 0;

}



.brand-gemini .review-model-text {

  color: #7dd3fc;

}



.brand-claude .review-model-text {

  color: #f4a261;

}



.brand-gpt .review-model-text {

  color: #5dde8d;

}



.brand-deepseek .review-model-text {

  color: #67e8f9;

}



.brand-deepseek .review-model-logo {

  object-fit: contain;

  object-position: center;

}



.review-card-readable h3 {

  margin-top: 10px;

  color: #1a1a1a;

  font-size: 18px;

}



.review-card-readable p {

  color: rgba(0, 0, 0, 0.6);

  font-size: 15px;

}



.review-metrics {

  margin-top: 14px;

  padding-top: 12px;

  border-top: 1px solid rgba(148, 163, 184, 0.14);

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

}



.review-metric-pill {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  min-height: 30px;

  padding: 0 10px;

  border: 1px solid rgba(148, 163, 184, 0.18);

  border-radius: 999px;

  color: var(--muted);

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.06),

      rgba(255, 255, 255, 0.018)

    ),

    rgba(8, 11, 17, 0.34);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);

  font-size: 12px;

  font-weight: 760;

  line-height: 1;

  white-space: nowrap;

}



.review-metric-pill > span,

.review-metric-pill > strong {

  display: inline-flex;

  align-items: center;

  height: 14px;

  line-height: 14px;

}



.review-metric-pill strong {

  margin-top: 0;

  color: var(--text-strong);

  font-size: 13px;

  font-weight: 850;

}



.review-metric-pill.metric-success.status-idle {

  color: #9ca3af;

  border-color: rgba(156, 163, 175, 0.24);

  background: rgba(156, 163, 175, 0.06);

}



.review-metric-pill.metric-success.status-excellent {

  color: #32d74b;

  border-color: rgba(50, 215, 75, 0.38);

  background: rgba(50, 215, 75, 0.11);

}



.review-metric-pill.metric-success.status-good {

  color: #c5ec3a;

  border-color: rgba(197, 236, 58, 0.38);

  background: rgba(197, 236, 58, 0.11);

}



.review-metric-pill.metric-success.status-fair {

  color: #ffd60a;

  border-color: rgba(255, 214, 10, 0.4);

  background: rgba(255, 214, 10, 0.11);

}



.review-metric-pill.metric-success.status-poor {

  color: #ff9f0a;

  border-color: rgba(255, 159, 10, 0.4);

  background: rgba(255, 159, 10, 0.11);

}



.review-metric-pill.metric-success.status-garbage {

  color: #ff6b5b;

  border-color: rgba(255, 107, 91, 0.4);

  background: rgba(255, 107, 91, 0.11);

}



.review-metric-pill.metric-success.status-critical {

  color: #ff453a;

  border-color: rgba(255, 69, 58, 0.42);

  background: rgba(255, 69, 58, 0.12);

}



.review-metric-pill.metric-success strong {

  color: currentColor;

}



.review-card-actions {

  margin-top: 12px;

  display: flex;

  justify-content: flex-start;

}



#public-reviews {

  width: min(100%, 1120px);

  margin: 0 auto;

  display: block;

  column-count: 2;

  column-gap: 16px;

}



#public-reviews .review-card-readable {

  display: inline-block;

  width: 100%;

  margin: 0 0 16px;

  break-inside: avoid;

}



#public-reviews .empty-state {

  display: grid;

  width: 100%;

  column-span: all;

}



#my-reviews {

  max-width: 760px;

}



#my-reviews .review-card-readable {

  width: min(100%, 560px);

  margin-right: 0;

  display: block;

  margin-bottom: 16px;

}



#my-reviews .review-card-readable p {

  display: -webkit-box;

  -webkit-line-clamp: 4;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



/* Removed margin-top: auto to allow adaptive height */

#my-reviews .review-metrics {

}



#my-reviews .review-card-actions {

  justify-content: center;

  gap: 10px;

}



.review-card-actions .small-button {

  min-width: 86px;

}



.small-button[data-review-action="edit-my-review"],

.small-button[data-review-action="rate-my-review"],

.small-button[data-user-action="view-reviews"] {

  border-color: rgba(248, 250, 252, 0.32);

  color: #f8fafc;

  background: rgba(248, 250, 252, 0.06);

}



/* 髢ｳ繝ｦ譟｡驤ｧ?髢ｹ蟄伜椹螽域姶謔咏ｺｭ蜻ｯ讒?/ 髢ｸ蠢｣蜑咏ｻｱ謌ｦ謔咏ｺｭ蜻ｯ讒鷹盟豸咏｢咲ｻ�т諛晞悉謗大ｹ｢髢ｻ讌€豢､髏｡谺灘ｴ鈴告﨟�亞髢ｸ蠢句椛螽ｼ莨ｴ譟�轟轤ｲ蟶ｳ 髢ｳ繝ｦ譟｡驤ｧ?*/



/* 髢ｻ諢ｮ赶企凄蠎ｨ蠑ｮ骰ｫ譖滂ｼ滄盟豸呵伽豼ｮ轤ｵ蛻?+ 豼橸ｽ育ｲｾ貔ｹ蟀�ｴｷ驫奇ｸｾ繧ｬ髢ｼ遑�ｰｪ骰取･�ｼｲ鬘匁ｬ醍草髢ｸ谺伜楫鬘ｫ?*/

#my-reviews .review-time,

#public-reviews .review-time {

  color: rgba(0, 0, 0, 0.55);

  font-weight: 600;

}



/* 髏主�蜑晞雛謚ｽ謔ｩ髑ｸ遒伜％豬｣蜩･迯ｦ郛∵翌蟐ｴ扈ｱ譚ｿﾃｹ骰帶攸﨤城名蜀ｲ譛ｬ螽�ｬ捺氤骰檎ご蟶?*/

#my-reviews .review-status-approved,

#public-reviews .review-status-approved {

  color: #166534;

  border-color: rgba(22, 101, 52, 0.28);

  background: rgba(22, 101, 52, 0.1);

}



#my-reviews .review-status-pending,

#public-reviews .review-status-pending {

  color: #4b5563;

  border-color: rgba(75, 85, 99, 0.28);

  background: rgba(75, 85, 99, 0.1);

}



#my-reviews .review-status-rejected,

#public-reviews .review-status-rejected {

  color: #991b1b;

  border-color: rgba(153, 27, 27, 0.32);

  background: rgba(153, 27, 27, 0.1);

}



/* 髢ｹ蝙ｮ遘ｳ郛肴来蟷先ｾｶ諢ｭ蟆ｦ髢ｿ豸咏｢咲ｻ�т諛晞他霍ｺ蜑ｹ髢ｺ蜥∝楔驤ｧ﨡€蛟ｿ骰�?*/

#my-reviews .review-card-actions .small-button,

#public-reviews .review-card-actions .small-button {

  color: #374151;

  border-color: rgba(0, 0, 0, 0.2);

  background: rgba(0, 0, 0, 0.04);

}



#my-reviews .review-card-actions .small-button:hover,

#public-reviews .review-card-actions .small-button:hover {

  color: #1a1a1a;

  border-color: rgba(0, 0, 0, 0.4);

  background: rgba(0, 0, 0, 0.1);

  box-shadow: 0 0 22px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.12);

  transform: translateY(-1px);

}



#my-reviews .review-card-actions .small-button.danger,

#public-reviews .review-card-actions .small-button.danger {

  color: #b91c1c;

  border-color: rgba(185, 28, 28, 0.35);

  background: rgba(185, 28, 28, 0.06);

}



#my-reviews .review-card-actions .small-button.danger:hover,

#public-reviews .review-card-actions .small-button.danger:hover {

  color: #991b1b;

  border-color: rgba(153, 27, 27, 0.55);

  background: rgba(185, 28, 28, 0.14);

  box-shadow: 0 0 22px rgba(185, 28, 28, 0.18),

    0 4px 12px rgba(185, 28, 28, 0.16);

  transform: translateY(-1px);

}



/* 髢ｹ髞句ｸ樒ｻｮ辜ｽ蟠｢髏秘萩遉磯盟豸咏｢榊ｨ稲え諛晞他霍ｺ蜑ｹ髢ｺ蜥∝楔驤ｧ﨡€蛟ｿ骰倥ｆ遞蛾髄讓ｼ繧ｬ髢ｼ?*/

#my-reviews .review-card-readable p.status-bad,
#public-reviews .review-card-readable p.status-bad,
#view-admin .admin-card p.status-bad {
  color: #b91c1c !important;
  text-shadow: none !important;
  border-color: rgba(185, 28, 28, 0.35);
  background: linear-gradient(
      180deg,
      rgba(239, 68, 68, 0.08),
      rgba(239, 68, 68, 0.04)
    ),
    rgba(239, 68, 68, 0.04);
}



/* 髏�蝗ｧ雖ｬ骰ｨ蠎｣諞ｴ骼ｺ謦ｶ蝙ｼ髢ｿ豸吝ｲｸ扈ｮ�よ�骼ｻ謗晄ｨ�ｿ?+ 髢ｻ蠢泌ｪｽ貔ｹ蟀�ヴ?+ 髣∝初蝙ｼ貔ｹ蟀�ｼｰ髏泌相ﾐ� */

#my-reviews .review-rating-badge,

#public-reviews .review-rating-badge {

  min-height: 30px !important;

  height: 30px !important;

  padding: 0 12px !important;

  border: 1px solid rgba(0, 0, 0, 0.12) !important;

  border-radius: 16px !important;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(240, 240, 240, 0.5)) !important;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 1) !important;

}



#my-reviews .review-rating-badge .stars,

#public-reviews .review-rating-badge .stars {

  font-size: 16px !important;

  font-weight: 850 !important;

  letter-spacing: 1.5px !important;

  line-height: 1 !important;

  background: none !important;

  text-shadow: 0 1px 0 rgba(255,255,255,0.4) !important;

  filter: none !important;

}



/* 髢ｺ蜍ｭ蝟仙ｦｲ�よ∩鬘丞岻辣ｩ髢ｿ豸咏｢咲€ｵ貊�侠骰俸い轢ｻ髢ｸ谺惜醍ｻｻ萓€諛晉仲ﾑ�､? 豼橸ｽ井ｺｬ迺�?/ 4 蟋呈ｶ伜ｫｮ迺�?/ 3 蟋?/ 2 豼ｮ讌�汞轢?/ 1 豼橸ｽ井ｺｬ轢帚腐謨?*/

#my-reviews .rating-tone-5 .stars,

#public-reviews .rating-tone-5 .stars {

  color: #16a34a !important;

}

#my-reviews .rating-tone-4 .stars,

#public-reviews .rating-tone-4 .stars {

  color: #84cc16 !important;

}

#my-reviews .rating-tone-3 .stars,

#public-reviews .rating-tone-3 .stars {

  color: #eab308 !important;

}

#my-reviews .rating-tone-2 .stars,

#public-reviews .rating-tone-2 .stars {

  color: #ea580c !important;

}

#my-reviews .rating-tone-1 .stars,

#public-reviews .rating-tone-1 .stars {

  color: #991b1b !important;

}



/* 髏�蝗ｧ雖ｬ骰ｨ蠎ｨ諛晞他蜑∵ｮｶ髢ｿ豸呵伽扈ｨ謚ｽ諛晞悉謗鍋､€髢ｸ謗灘｣�袖蟯�モ髓伜､臥ｰｳ豼�?+ 髀牙�｣鄧蛾｡｢螫ｬ邏帝数蜑��豼橸ｽ磯ｲｸ鬘?*/

#my-reviews .rating-tone-5,

#my-reviews .rating-tone-4,

#my-reviews .rating-tone-3,

#my-reviews .rating-tone-2,

#my-reviews .rating-tone-1,

#public-reviews .rating-tone-5,

#public-reviews .rating-tone-4,

#public-reviews .rating-tone-3,

#public-reviews .rating-tone-2,

#public-reviews .rating-tone-1 {

  background: rgba(0, 0, 0, 0.06) !important;

  border-color: rgba(90, 70, 50, 0.4) !important;

}



/* 豼｡訷冷ぎ蟠�ぎ辜ｽ蟠･螳･蠢慕ｪ礼ｼ∫ｻ｢蝙ｶ扈ｮ?+ 髢ｺ竄ｬ骼ｯﾑ∽ｺ｣logo + 髏取ｶ咒嚆隍ｰ蝮怜ｴ晞据螻ゆｺ?+ 骼ｼ蟄俶ｴ滄克謦ｮ蟠夐今讌€﨤冗ｼ�?*/

#my-reviews .review-model-name,

#public-reviews .review-model-name {

  color: #000;

  font-size: 16px;

  padding-bottom: 12px;

  border-bottom: 1px solid rgba(0, 0, 0, 0.12);

}



#my-reviews .review-model-logo,

#public-reviews .review-model-logo {

  width: 22px;

  height: 22px;

  flex: 0 0 22px;

}



#my-reviews .brand-gemini .review-model-text,

#public-reviews .brand-gemini .review-model-text {

  color: #000;

}



#my-reviews .brand-claude .review-model-text,

#public-reviews .brand-claude .review-model-text {

  color: #000;

}



#my-reviews .brand-gpt .review-model-text,

#public-reviews .brand-gpt .review-model-text {

  color: #000;

}



#my-reviews .brand-deepseek .review-model-text,

#public-reviews .brand-deepseek .review-model-text {

  color: #000;

}



/* 髢ｺ蠍�ｴｭ鬘｣阯寡取揶釗第｣� + 豼ｮ豼鍋ｵｾ髀句�ﾇ取揶釗第｣憺椋譌ょｧｷ髏ｭ?*/

#my-reviews .review-card-readable h3,

#public-reviews .review-card-readable h3 {

  color: #4a3728 !important;

}



#my-reviews .review-card-readable p,

#public-reviews .review-card-readable p {

  color: #4a3728;

  font-weight: 500;

}



/* metric-usage + metric-success 郛ゆｽｺ蝟咲ｻ泌ｭ俶ヴ髀�ぜ迯馴娘蠍�亟扈?*/

#my-reviews .review-metric-pill.metric-usage,

#my-reviews .review-metric-pill.metric-success,

#public-reviews .review-metric-pill.metric-usage,

#public-reviews .review-metric-pill.metric-success {

  border-color: rgba(0, 0, 0, 0.18) !important;

  background: rgba(0, 0, 0, 0.04) !important;

  box-shadow: none !important;

  font-size: 13px !important;

  font-weight: 700 !important;

}



#my-reviews .review-metric-pill.metric-usage,

#public-reviews .review-metric-pill.metric-usage {

  color: #374151 !important;

}



/* 髢ｺ蠍�ｴｨ鬘堤�蠑ｬ骰･ﾑ�臓郛ゆｽｺ蝟咲ｻ泌ｭ偃怙骼ｴ���?*/

#my-reviews .review-metric-pill.metric-usage > span,

#my-reviews .review-metric-pill.metric-success > span,

#public-reviews .review-metric-pill.metric-usage > span,

#public-reviews .review-metric-pill.metric-success > span {

  color: #1a1a1a !important;

  font-weight: 700 !important;

}



/* 髏�螫ｪ蝠ｰ髀√ｅ笆朱茜蜀ｩ谿ｶ髢ｺ菴ｹ貔倬寸ﾑ�怙骼ｴ���?*/

#my-reviews .review-metric-pill.metric-usage strong,

#public-reviews .review-metric-pill.metric-usage strong {

  color: #1a1a1a !important;

  font-weight: 850 !important;

}



/* 髢ｹ蟄伜兜豼ｮ豸｢謔ｳ骰･笊ゐ▼髢ｸ謗第｣咎凄裵ｽ遨ｱ蟀ｵ蝣滓ｮ檎像謇ｳ譎樊ｾｹ?*/

#my-reviews .review-metric-pill.metric-success strong,

#public-reviews .review-metric-pill.metric-success strong {

  color: currentColor !important;

  font-weight: 850 !important;

}



/* 髢ｹ蟄伜兜豼ｮ豸｢謔ｳ骰･笊�ｦ髢ｹ蘒ｿ豬�ｾｹ?*/

#my-reviews .review-metric-pill.metric-success.status-idle,

#public-reviews .review-metric-pill.metric-success.status-idle {

  color: #6b7280 !important;

}

#my-reviews .review-metric-pill.metric-success.status-excellent,

#public-reviews .review-metric-pill.metric-success.status-excellent {

  color: #16a34a !important;

}

#my-reviews .review-metric-pill.metric-success.status-good,

#public-reviews .review-metric-pill.metric-success.status-good {

  color: #65a30d !important;

}

#my-reviews .review-metric-pill.metric-success.status-fair,

#public-reviews .review-metric-pill.metric-success.status-fair {

  color: #a16207 !important;

}

#my-reviews .review-metric-pill.metric-success.status-poor,

#public-reviews .review-metric-pill.metric-success.status-poor {

  color: #c2410c !important;

}

#my-reviews .review-metric-pill.metric-success.status-garbage,

#public-reviews .review-metric-pill.metric-success.status-garbage {

  color: #dc2626 !important;

}

#my-reviews .review-metric-pill.metric-success.status-critical,

#public-reviews .review-metric-pill.metric-success.status-critical {

  color: #b91c1c !important;

}



/* 髢ｳ繝ｦ譟｡驤ｧ?end 迺?髢ｹ蟄伜椹螽域姶謔咏ｺｭ蜻ｯ讒?/ 髢ｸ蠢｣蜑咏ｻｱ謌ｦ謔咏ｺｭ蜻ｯ讒?豼樊搗諛捺ｾｹ蟀�氤骰檎ご蟶?髢ｳ繝ｦ譟｡驤ｧ?*/



.review-status {

  vertical-align: 2px;

}



.review-status-approved {

  color: #86efac;

  border-color: rgba(134, 239, 172, 0.28);

  background: rgba(34, 197, 94, 0.1);

}



.review-status-pending {

  color: #f8fafc;

  border-color: rgba(248, 250, 252, 0.24);

  background: rgba(248, 250, 252, 0.08);

}



.review-status-rejected {

  color: #ff8a8a;

  border-color: rgba(239, 68, 68, 0.34);

  background: rgba(239, 68, 68, 0.1);

}



.card-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 12px;

}



.admin-card[data-review-status="deleted"] .reject-reason,

.admin-card[data-review-status="deleted"] .card-actions {

  display: none;

}



.admin-review-card {

  display: grid;

  gap: 12px;

}



.admin-review-user-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 8px;

}



.admin-review-user-grid span {

  min-width: 0;

  padding: 10px 11px;

  border: 1px solid rgba(148, 163, 184, 0.14);

  border-radius: 8px;

  background: rgba(8, 11, 17, 0.24);

}



.admin-review-user-grid em {

  display: block;

  margin-bottom: 5px;

  color: var(--faint);

  font-size: 11px;

  font-style: normal;

  font-weight: 760;

}



.admin-review-user-grid strong {

  display: block;

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  color: var(--text-strong);

  font-size: 13px;

  font-weight: 820;

  white-space: nowrap;

}



.admin-review-top {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 16px;

}



.admin-review-model {

  min-width: 0;

  font-size: 16px;

  font-weight: 850;

}



.admin-review-badges {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  flex: 0 0 auto;

}



.admin-review-card h3 {

  margin: 0;

  color: var(--text-strong);

  font-size: 20px;

}



.admin-review-card p {

  margin: 0;

  color: var(--muted);

  font-size: 16px;

}



.admin-action-card {

  display: grid;

  gap: 10px;

}



.admin-action-title {

  font-size: 18px;

  font-weight: 850;

}



.admin-action-card.action-positive .admin-action-title {

  color: #86efac;

}



.admin-action-card.action-negative .admin-action-title {

  color: #ff8a8a;

}



.admin-action-card.action-neutral .admin-action-title {

  color: #f8fafc;

}



.admin-action-card p {

  margin: 0;

  color: var(--text-strong);

  font-size: 16px;

}



.admin-action-meta {

  color: var(--faint);

  font-size: 13px;

}



.admin-user-card {

  display: grid;

  gap: 14px;

  border-color: rgba(255, 255, 255, 0.1);

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.052),

      rgba(255, 255, 255, 0.018)

    ),

    rgba(10, 14, 22, 0.52);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);

  backdrop-filter: blur(40px) saturate(150%);

}



.admin-user-head {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 12px;

}



.admin-user-head h3 {

  margin: 0;

  color: var(--text-strong);

  font-size: 24px;

  font-weight: 880;

  line-height: 1.2;

}



.user-mute-pill {

  display: inline-flex;

  align-items: center;

  min-height: 26px;

  padding: 0 10px;

  border-radius: 999px;

  font-size: 12px;

  font-weight: 800;

}



.user-mute-pill.is-clear {

  color: #86efac;

  border: 1px solid rgba(134, 239, 172, 0.32);

  background: rgba(34, 197, 94, 0.1);

}



.user-mute-pill.is-muted {

  color: #ff8a8a;

  border: 1px solid rgba(239, 68, 68, 0.34);

  background: rgba(239, 68, 68, 0.1);

}



.admin-user-reviews {

  display: grid;

  gap: 8px;

}



.user-review-mini {

  position: relative;

  padding: 11px;

  padding-right: 58px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  background: rgba(8, 11, 17, 0.26);

}



.icon-trash-button {

  position: absolute;

  right: 12px;

  bottom: 15px;

  width: 34px;

  height: 34px;

  display: inline-grid;

  place-items: center;

  border: 1px solid rgba(239, 68, 68, 0.4);

  border-radius: 7px;

  color: #ff8a8a;

  background: rgba(239, 68, 68, 0.08);

  cursor: pointer;

  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,

    transform 0.18s ease;

}



.icon-trash-button:hover {

  border-color: rgba(248, 113, 113, 0.7);

  color: #fecaca;

  background: rgba(239, 68, 68, 0.14);

  transform: translateY(-1px);

}



.icon-trash-button svg {

  width: 18px;

  height: 18px;

  fill: none;

  stroke: currentColor;

  stroke-linecap: round;

  stroke-linejoin: round;

  stroke-width: 1.9;

}



.user-review-mini.review-status-border-approved {

  border-color: rgba(134, 239, 172, 0.4);

  background: rgba(34, 197, 94, 0.08);

}



.user-review-mini.review-status-border-pending {

  border-color: var(--border-strong);

  background: rgba(248, 250, 252, 0.05);

}



.user-review-mini.review-status-border-rejected {

  border-color: rgba(239, 68, 68, 0.36);

  background: rgba(239, 68, 68, 0.08);

}



.user-review-mini-top {

  display: flex;

  justify-content: space-between;

  gap: 10px;

  align-items: center;

}



.user-review-mini strong {

  display: block;

  margin-top: 8px;

  color: var(--text-strong);

}



.user-review-mini p {

  margin: 6px 0;

  color: var(--muted);

  line-height: 1.5;

}



.user-review-mini-meta {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  color: var(--faint);

}



.user-review-mini-meta .review-metric-pill {

  min-height: 28px;

  padding: 0 9px;

}



.user-review-mini-meta .review-metric-pill > strong {

  display: inline-flex;

  align-items: center;

  height: 14px;

  margin-top: 0;

  line-height: 14px;

}



.mini-time {

  color: var(--faint);

  font-size: 13px;

}



.compact-empty {

  min-height: 88px;

}



.small-button {

  min-height: 32px;

  border: 1px solid var(--border);

  border-radius: 7px;

  padding: 0 10px;

  color: var(--text);

  background: var(--control-bg);

  cursor: pointer;

  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease,

    transform 0.18s ease;

}



.small-button:hover {

  border-color: #64748b;

  color: var(--text-strong);

  transform: translateY(-1px);

}



.small-button[data-admin-action="approve"] {

  border-color: rgba(97, 220, 132, 0.42);

  color: #9af7ae;

  background: linear-gradient(

    180deg,

    rgba(48, 161, 81, 0.24),

    rgba(31, 106, 55, 0.18)

  );

}



.small-button[data-admin-action="approve"]:hover {

  border-color: rgba(134, 239, 172, 0.72);

  background: linear-gradient(

    180deg,

    rgba(63, 188, 95, 0.34),

    rgba(38, 130, 65, 0.24)

  );

}



.small-button[data-admin-action="reject"] {

  border-color: rgba(248, 250, 252, 0.32);

  color: #f8fafc;

  background: rgba(248, 250, 252, 0.06);

}



.small-button[data-admin-action="reject"]:hover {

  border-color: rgba(248, 250, 252, 0.56);

  background: rgba(248, 250, 252, 0.1);

}



.small-button.danger {

  border-color: color-mix(in srgb, var(--danger) 45%, var(--border));

  color: var(--danger);

}



.admin-login-grid {

  display: grid;

  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto auto;

  gap: 10px;

  align-items: center;

}



.modal-backdrop {

  position: fixed;

  inset: 0;

  z-index: 900;

  display: grid;

  place-items: center;

  padding: 24px;

  background: rgba(3, 6, 12, 0.45);

  backdrop-filter: blur(24px) saturate(1.25);

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.18s ease;

}



.modal-backdrop.show {

  opacity: 1;

  pointer-events: auto;

}



.review-edit-dialog {
  width: min(520px, 100%);
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1.5px solid rgba(180, 170, 150, 0.35) !important;
  border-radius: 12px;
  background: #f8f4ed !important;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15) !important;
}

.review-edit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.review-edit-head h3 {
  margin: 0;
  color: #1a1a1a !important;
  font-size: 22px;
}

.review-edit-head p {
  margin: 6px 0 0;
  color: #5c4332 !important;
}

.icon-close-button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(90, 70, 50, 0.2) !important;
  border-radius: 7px;
  color: #5c4332 !important;
  background: rgba(90, 70, 50, 0.05) !important;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.icon-close-button:hover {
  color: #1a1a1a !important;
  border-color: rgba(90, 70, 50, 0.4) !important;
}

.review-edit-model {
  display: flex !important;
  align-items: center !important;
  padding: 11px 12px;
  border: 1.5px solid rgba(90, 70, 50, 0.2) !important;
  border-radius: var(--radius);
  background: #faf7f1 !important;
  color: #1a1a1a !important;
}

.review-edit-model .review-model-text {
  color: #000000 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #000000 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

.review-edit-model .review-model-logo {
  width: 22px !important;
  height: 22px !important;
}

.review-edit-fields {
  display: grid;
  gap: 12px;
}

.review-edit-fields label span,
.review-edit-rating > span {
  display: block;
  margin-bottom: 7px;
  color: #5c4332 !important;
  font-weight: bold !important;
  font-size: 13px;
}

.review-edit-dialog .input,
.review-edit-dialog .textarea {
  border: 1.5px solid rgba(90, 70, 50, 0.35) !important;
  background: #f5f0e8 !important;
  color: #5c4332 !important;
}

.review-edit-dialog .input:focus,
.review-edit-dialog .textarea:focus {
  border-color: rgba(90, 70, 50, 0.5) !important;
  background: #faf7f1 !important;
}

.review-edit-dialog .input::placeholder,
.review-edit-dialog .textarea::placeholder {
  color: #5c4332 !important;
}

.review-edit-dialog .ghost-button {
  color: #1a1a1a !important;
  border: 1px solid rgba(90, 70, 50, 0.3) !important;
  background: transparent !important;
}

.review-edit-dialog .ghost-button:hover {
  background: rgba(90, 70, 50, 0.08) !important;
}

.review-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}



.review-card-readable p.status-bad,

.admin-card p.status-bad,

.user-review-mini p.status-bad {

  display: inline-flex;

  align-items: center;

  width: fit-content;

  max-width: 100%;

  margin-top: 12px;

  padding: 8px 10px;

  border: 1px solid rgba(248, 113, 113, 0.42);

  border-radius: 7px;

  color: #ff9c9c;

  background: linear-gradient(

      180deg,

      rgba(239, 68, 68, 0.14),

      rgba(127, 29, 29, 0.1)

    ),

    rgba(239, 68, 68, 0.06);

  font-weight: 700;

}



.toast {
  position: fixed;
  left: 50% !important;
  right: auto !important;
  top: 80px !important;
  bottom: auto !important;
  min-width: 360px;
  max-width: min(520px, calc(100% - 44px));
  border-radius: 4px;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translate(-50%, -14px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1200;
  overflow: hidden;
  text-align: left;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.toast-inner {
  display: flex;
  align-items: flex-start;
  padding: 18px 40px 20px 20px;
  position: relative;
  overflow: hidden;
}

.toast.error {
  box-shadow: 0 0 24px rgba(255, 235, 170, 0.35);
}

.toast.error .toast-inner {
  background: #b04444;
  border: 1px solid rgba(255, 150, 150, 0.25);
}

.toast.success {
  box-shadow: 0 0 24px rgba(255, 235, 170, 0.35);
}

.toast.success .toast-inner {
  background: #6a9f5c;
  padding-right: 20px;
  border: 1px solid rgba(200, 255, 200, 0.3);
}

.toast-icon {
  flex-shrink: 0;
  margin-right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast.success .toast-icon {
  margin-top: 2px;
}

.toast.error .toast-icon {
  margin-top: 0px;
}

.toast-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: -1px;
}

.toast-title {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.toast-message {
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.4;
  word-break: break-word;
}

.toast-close {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 10px;
  cursor: pointer;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-close:hover {
  opacity: 1;
}



.toast.show {

  opacity: 1;

  transform: translate(-50%, 0);

}



.hover-tooltip {

  position: fixed;

  z-index: 1000;

  width: min(280px, calc(100vw - 28px));

  padding: 13px;

  border: 1px solid var(--border-strong);

  border-radius: var(--radius);

  color: var(--text);

  background: color-mix(in srgb, var(--surface) 96%, black);

  box-shadow: var(--shadow);

  opacity: 0;

  transform: translateY(4px);

  pointer-events: none;

  transition: opacity 0.12s ease, transform 0.12s ease;

}



.hover-tooltip.show {

  opacity: 1;

  transform: translateY(0);

}



.tooltip-title {

  padding-bottom: 10px;

  margin-bottom: 10px;

  border-bottom: 1px solid var(--border);

  font-size: 13px;

  font-weight: 700;

  word-break: break-all;

}



.tooltip-grid {

  display: grid;

  grid-template-columns: 72px 1fr;

  gap: 7px 10px;

  font-size: 12px;

}



.tooltip-grid span {

  color: var(--faint);

}



.tooltip-grid strong {

  text-align: right;

}



@media (max-width: 1080px) {

  .summary-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .board-grid,

  .token-usage-grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }



  .rpm-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .hot-strip {

    display: flex;

    overflow-x: auto;

    padding-bottom: 4px;

  }



  .hot-card {

    min-width: 240px;

  }



  .search-layout,

  .reviews-layout,

  .admin-grid {

    grid-template-columns: 1fr;

  }



  .model-row {

    grid-template-columns: minmax(0, 1fr) auto;

    gap: 10px 12px;

    align-items: flex-start;

  }



  .model-row-info {

    grid-column: 1;

    grid-row: 1;

  }



  .model-row-status {

    grid-column: 2;

    grid-row: 1;

    align-self: start;

  }



  .bin-strip {

    grid-column: 1 / -1;

    grid-row: 2;

    height: 32px;

  }

}



@media (max-width: 720px) {

  .app-shell {

    width: min(100% - 20px, 720px);

    padding-top: 22px;

  }



  .app-header,

  .panel-heading,

  .model-list-heading {

    flex-direction: column;

    align-items: stretch;

    border-radius: 18px;

  }



  .brand-line h1 {

    font-size: 26px;

  }



  .brand-cluster {

    width: 100%;

    margin-left: 0;

    gap: 12px;

  }



  .back-button {

    width: 62px;

    height: 36px;

    flex-basis: 62px;

  }



  .header-actions,

  .toolbar {

    flex-wrap: wrap;

  }



  .model-list-heading {

    margin: 0 0 12px;

  }



  .model-search-shell {

    width: 100%;

    min-width: 0;

  }



  #sort-tabs {

    width: 100%;

  }



  #sort-tabs button {

    flex: 1 1 0;

    min-width: 0;

  }



  .range-tabs {

    width: 100%;

    overflow-x: auto;

  }



  .main-tabs-wrapper {

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch !important;

    white-space: nowrap !important;

    display: flex !important;

    scrollbar-width: none !important;

  }



  .main-tabs-wrapper::-webkit-scrollbar {

    display: none !important;

  }



  .main-tabs {
    flex-shrink: 0 !important;
    width: 100% !important;
    grid-template-columns: repeat(4, 1fr) !important;
  }



  .range-control {

    width: 100%;

    justify-content: space-between;

  }



  .range-control .range-tabs {

    width: auto;

    flex: 1;

  }



  .range-tabs button {

    flex: 1 0 auto;

  }



  .summary-grid,

  .filter-grid,

  .board-grid,

  .token-usage-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .filter-card {

    min-height: 72px;

    padding: 9px 10px;

  }



  .filter-legend {

    width: 100%;

    margin-left: 0;

    justify-content: flex-start;

  }



  /* .main-tabs button override removed */



  .toolbar .input {

    width: 100%;

    min-width: 100%;

  }



  .toolbar .model-search-shell .input {

    min-width: 0;

  }



  .segmented {

    width: 100%;

    overflow-x: auto;

  }



  .panel {

    padding: 14px;

  }



  #view-search .panel-heading {

    gap: 12px;

    padding-bottom: 12px;

    margin-bottom: 12px;

  }



  #view-search .panel-heading h2 {

    font-size: 16px;

  }



  #view-search .panel-heading .ghost-button {

    width: 100%;

  }



  .token-lookup-form {

    grid-template-columns: 1fr;

  }



  .board-card {

    min-height: 118px;

    padding: 13px 12px 12px;

  }



  .board-card-value {

    font-size: 23px;

  }



  .rpm-grid {

    grid-template-columns: 1fr;

  }



  .token-log-main {

    align-items: flex-start;

  }



  .token-log-main strong {

    font-size: 16px;

  }



  .model-row {

    padding: 12px;

  }



  .bin-strip {

    height: 28px;

  }



  .model-row .model-name {

    font-size: 13px;

  }



  .model-row-meta {

    flex-wrap: wrap;

    gap: 4px 6px;

  }



  .model-last {

    flex-wrap: wrap;

    gap: 4px;

  }



  .status-badge {

    min-height: 24px;

    padding: 0 9px;

    font-size: 11px;

  }



  .review-card-readable {

    padding-right: 14px;

  }



  .review-rating-corner {

    position: static;

    margin-bottom: 8px;

  }



  .admin-login-grid {

    grid-template-columns: 1fr;

  }



  .admin-review-user-grid {

    grid-template-columns: 1fr;

  }



  .identity-card {

    grid-template-columns: 1fr;

  }



  .identity-action-button {

    min-width: 0;

  }



  .admin-user-info-grid {

    grid-template-columns: 1fr;

  }



  #public-reviews {

    column-count: 1;

  }



  .modal-backdrop {

    padding: 14px;

  }



  .review-edit-dialog {

    padding: 16px;

  }



  .review-edit-actions {

    justify-content: stretch;

  }



  .review-edit-actions button {

    flex: 1 1 0;

  }

}



@media (max-width: 520px) {

  .app-shell {

    width: min(100% - 16px, 520px);

  }



  .brand-cluster {

    gap: 10px;

  }



  .back-button {

    width: 58px;

    height: 34px;

    flex-basis: 58px;

  }



  .range-control {

    gap: 8px;

  }



  .range-label {

    font-size: 12px;

  }



  .range-progress-bar {
    display: none !important;
  }

  .header-actions {
    flex-wrap: nowrap;
  }

  .range-control {
    width: auto;
    flex: 1;
  }



  .range-tabs button,

  .segmented button {

    padding: 0 10px;

  }



  #sort-tabs {

    min-height: 48px;

    border-radius: 15px;

  }



  #sort-tabs button {

    min-height: 38px;

    padding: 0 8px;

    font-size: 13px;

  }



  .rename-form {

    grid-template-columns: 1fr;

  }



  .hot-card {

    min-width: 220px;

  }



  .brand-line h1 {
    font-size: 24px;
    margin-left: 24px;
    margin-top: 8px;
  }

  .brand-mark {
    margin-right: 14px;
  }



  .header-subtitle {

    font-size: 12px;

  }



  .countdown-button {

    width: 52px;

    height: 52px;

  }



  .countdown-ring {

    width: 42px;

    height: 42px;

  }



  .countdown-ring span {

    width: 30px;

    height: 30px;

    font-size: 12px;

  }



  .theme-toggle {

    width: 62px;

    min-height: 40px;

  }



  .theme-icon {

    width: 46px;

    height: 24px;

  }



  .board-grid,

  .token-usage-grid {

    grid-template-columns: 1fr;

  }



  .board-status {

    display: flex;

    width: 100%;

    justify-content: space-between;

  }



  .token-log-card {

    min-height: 0;

    padding-right: 14px;

  }



  .token-log-cost {

    position: static;

    transform: none;

    align-self: flex-start;

  }



  .token-log-main {

    flex-direction: column;

    gap: 8px;

  }



  .token-log-pills > span {

    min-height: 25px;

  }

}



@media (max-width: 340px) {

  .summary-grid,

  .filter-grid,

  .board-grid,

  .token-usage-grid {

    grid-template-columns: 1fr;

  }

}



@media (prefers-reduced-motion: reduce) {

  #view-search .ghost-button,

  #view-search .primary-button,

  .board-card,

  .rpm-card,

  .token-log-card {

    transition: none;

  }

}



/* ============================================

   髢ｺ螫ｩ豬�墾ﾑ�氤雹�沃鄧匁ｿｮ��ｨ馴ｪ樊捗謔?+ 螯､蛯幟汞讌�蝗ｬ蟠玲ｾｶ蟀ゐ圀郛��蟠ｵ扈?

   ============================================ */



.app-header {

  background: rgba(15, 17, 21, 0.92) !important;

  backdrop-filter: blur(20px) saturate(150%) brightness(1.05) !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;

  box-shadow: 
    inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 12px 48px rgba(0, 0, 0, 0.65),

    0 0 0 1px rgba(255, 255, 255, 0.06) !important;

}



.panel {

  background: rgba(18, 20, 25, 0.85) !important;

  backdrop-filter: blur(40px) saturate(180%) brightness(1.08) !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;

  box-shadow: 
    inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 28px 88px rgba(0, 0, 0, 0.7),

    0 0 0 1px rgba(255, 255, 255, 0.08) !important;

}



.board-card {

  background: rgba(28, 30, 36, 0.42) !important;

  backdrop-filter: blur(80px) saturate(220%) brightness(1.15) !important;

  border: 1px solid rgba(255, 255, 255, 0.12) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),

    inset 1px 0 0 rgba(255, 255, 255, 0.1),

    inset -1px 0 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.35),

    0 1px 0 rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.35),

    0 12px 48px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;

}



.board-card:hover {

  background: rgba(34, 36, 42, 0.58) !important;

  border-color: rgba(255, 255, 255, 0.18) !important;

  transform: translateY(-3px) scale(1.015) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24),

    inset 1px 0 0 rgba(255, 255, 255, 0.12),

    inset -1px 0 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.38),

    0 1px 0 rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.45),

    0 20px 64px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08),

    0 0 56px rgba(255, 255, 255, 0.04) !important;

}



.board-card::before {

  height: 2px !important;

  background: linear-gradient(

    90deg,

    transparent 0%,

    var(--card-accent) 50%,

    transparent 100%

  ) !important;

  opacity: 1 !important;

  box-shadow: 0 0 16px var(--card-accent), 0 0 32px var(--card-accent),

    0 0 48px rgba(255, 255, 255, 0.22), inset 0 -1px 2px var(--card-accent) !important;

  filter: blur(0.3px) !important;

}



.board-card:hover::before::before {

  height: 2.5px !important;

  box-shadow: 0 0 20px var(--card-accent), 0 0 40px var(--card-accent),

    0 0 60px rgba(255, 255, 255, 0.28), inset 0 -1px 2px var(--card-accent) !important;

}



.filter-card,

.hot-card,

.model-row {

  background: linear-gradient(

      135deg,

      rgba(44, 44, 48, 0.25),

      rgba(38, 38, 42, 0.35)

    ) !important;

  backdrop-filter: blur(40px) saturate(150%) !important;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3),

    0 1px 0 rgba(255, 255, 255, 0.06) inset,

    0 0 0 1px rgba(255, 255, 255, 0.03) !important;

}



.filter-card:hover,

.hot-card:hover,

.model-row:hover {

  background: linear-gradient(

      135deg,

      rgba(50, 50, 54, 0.4),

      rgba(44, 44, 48, 0.5)

    ) !important;

  border-color: rgba(255, 255, 255, 0.18) !important;

  transform: translateY(-2px) !important;

  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45),

    0 1px 0 rgba(255, 255, 255, 0.12) inset,

    0 0 0 1px rgba(255, 255, 255, 0.06),

    0 0 24px rgba(255, 255, 255, 0.04) !important;

}



.range-tabs,

.segmented {

  background: rgba(35, 37, 42, 0.75) !important;

  backdrop-filter: blur(40px) saturate(180%) brightness(1.05) !important;

  border: 1px solid rgba(255, 255, 255, 0.15) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),

    0 12px 36px rgba(0, 0, 0, 0.4) !important;

}



.range-tabs button.active,

#sort-tabs button.active,

.segmented button.active {

  color: rgba(255, 255, 255, 0.98);

  background: radial-gradient(

      circle at 50% 120%,

      rgba(0, 0, 0, 0.15),

      transparent 50%

    ),

    radial-gradient(

      circle at 50% -20%,

      rgba(255, 255, 255, 0.12),

      transparent 45%

    ),

    linear-gradient(

      145deg,

      rgba(165, 165, 170, 0.92) 0%,

      rgba(142, 142, 147, 0.95) 25%,

      rgba(122, 122, 128, 0.96) 50%,

      rgba(106, 106, 112, 0.98) 75%,

      rgba(99, 99, 102, 0.98) 100%

    ) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),

    inset 1px 0 0 rgba(255, 255, 255, 0.2),

    inset -1px 0 0 rgba(255, 255, 255, 0.12),

    inset 0 -1px 1px rgba(0, 0, 0, 0.35),

    inset 0 1px 2px rgba(255, 255, 255, 0.15), 0 1px 0 rgba(0, 0, 0, 0.2),

    0 2px 4px rgba(0, 0, 0, 0.18), 0 6px 16px rgba(0, 0, 0, 0.22),

    0 0 0 0.5px rgba(0, 0, 0, 0.15) !important;

  transform: translateY(0.5px);

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

  backdrop-filter: none !important;

}



.primary-button {

  background: linear-gradient(135deg, #0a84ff 0%, #0071e3 100%) !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24),

    inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 8px 28px rgba(10, 132, 255, 0.5) !important;

}



.primary-button:hover:not(:disabled) {

  background: linear-gradient(135deg, #0071e3 0%, #005bb5 100%) !important;

  transform: translateY(-1px) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),

    inset 0 -1px 0 rgba(0, 0, 0, 0.26), 0 12px 40px rgba(10, 132, 255, 0.65) !important;

}



body {

  color: #ffffff !important;

  -webkit-font-smoothing: antialiased !important;

  -moz-osx-font-smoothing: grayscale !important;

}



/* ============================================

   髢ｹ辜伜ｸ堤ｻｨ蠇樶崗髞晏強遘ｴ髢ｸ? 蟀｢霍ｺ遘ｴ骰ｩ繹｡遞臥仲蟾ｮ蝴､髢ｼ?main-tabs 髢?

   骼ｼ蟄俶ｴ匁･�?+ 螽第諜蘒牙ｨ�с貎ｪ驫岩斧螢?+ 髢ｻﾑ�ぎ辭ｷ﨤城椋謌樒燈骼ｹ�牙ｹ先ｾｶ諢ｭ證?髏�菴ｹ蟠倬｡�?

   (郛ょ�蝟慕ｻｨ﨡�ｼｬ骰･�ｽ薰ｽ髢ｺ蝣ｫ蛛�数﨡∫ｦ帝渇釗第ｴｬ髢ｻ笊ら鉛扈怜�蠑ｬ?.segmented 髢ｸ蠢句褐髏ｪ﨡よ�骰俸い轣?

   ============================================ */



.sort-dock {

  display: flex;

  align-items: center;

  gap: 8px;

  min-height: 44px;

  padding: 5px 6px 5px 10px;

  margin-left: 12px;

  box-sizing: border-box;

}



.sort-dock .sort-label {

  color: #ffffff;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  white-space: nowrap;

  text-shadow: none;

}



#sort-tabs {

  position: relative;

  display: inline-grid !important;

  grid-template-columns: repeat(3, minmax(64px, 1fr)) !important;

  gap: 0 !important;

  min-height: 44px;

  height: 44px;

  padding: 4px !important;

  border-radius: 9px !important;

  background: linear-gradient(

    180deg,

    rgba(30, 30, 32, 0.9),

    rgba(20, 20, 22, 0.95)

  ) !important;

  border: 1px solid rgba(0, 0, 0, 0.55) !important;

  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7),

    inset 0 -0.5px 0 rgba(255, 255, 255, 0.04),

    0 1px 1px rgba(255, 255, 255, 0.05) !important;

  backdrop-filter: none !important;

  overflow: hidden;

  isolation: isolate;

  box-sizing: border-box;

}



#sort-tabs button {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  color: rgba(235, 235, 245, 0.45) !important;

  min-width: 0 !important;

  min-height: 34px !important;

  height: 34px !important;

  padding: 0 8px !important;

  margin: 0 !important;

  border-radius: 6px !important;

  font-size: 13px !important;

  font-weight: 600 !important;

  letter-spacing: -0.012em;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  transition: color 0.18s ease, background-color 0.18s ease !important;

  transform: none !important;

  text-shadow: none !important;

  backdrop-filter: none !important;

}



#sort-tabs button::before {

  display: none !important;

}



#sort-tabs button:hover:not(.active) {

  color: rgba(255, 255, 255, 0.9) !important;

  background: rgba(255, 255, 255, 0.04) !important;

}



#sort-tabs button.active {

  background: radial-gradient(

      circle at 50% 0%,

      rgba(255, 255, 255, 0.18),

      transparent 50%

    ),

    linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.95),

      rgba(242, 242, 247, 0.98)

    ) !important;

  color: rgba(0, 0, 0, 0.92) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),

    inset 0 -1px 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.2),

    0 2px 6px rgba(0, 0, 0, 0.15) !important;

  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.8) !important;

  transform: none !important;

}



/* ============================================

   髢ｹ蜈ｼ邊朱轟繖･都ｼ? 蟀｢霍ｺ遘ｴ骰ｩ?main-tabs 螽第諜蘒牙ｨ�ｿ�蠑ｳ螯､菴�?(inset 髀臥が蜉第ｵ�?

   螽第塔蜴ｽ驤ｧ蘒ｬ蜻ｬ邏鈴翌?+ Apple 螯槫ｬｪ蟄ｩ髏�? 髢ｺ蜀ｪ蟋ｴ骰咲蛤諛晞他鬚晄｣�ｦ､?

   ============================================ */



.model-search-shell {

  position: relative;

  width: 240px;

  min-height: 44px;

  display: flex;

  align-items: center;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 12px;

  background: rgba(28, 30, 36, 0.5);

  box-shadow: none;

  transition: border-color 0.2s ease, box-shadow 0.2s ease,

    background 0.2s ease;

  box-sizing: border-box;

  overflow: hidden;

}



.model-search-shell:focus-within {

  border-color: rgba(255, 255, 255, 0.2);

  background: rgba(32, 34, 40, 0.6);

  box-shadow: none;

}



.model-search-icon {

  position: absolute;

  left: 16px;

  top: 50%;

  width: 15px;

  height: 15px;

  transform: translateY(-50%);

  border: 2px solid #ffffff;

  border-radius: 50%;

  pointer-events: none;

  transition: border-color 0.22s ease;

}



.model-search-icon::after {

  content: "";

  position: absolute;

  width: 6px;

  height: 2px;

  right: -5px;

  bottom: -3px;

  border-radius: 999px;

  background: #ffffff;

  transform: rotate(45deg);

  transform-origin: left center;

  transition: background 0.22s ease;

}



.model-search-shell:focus-within .model-search-icon {

  border-color: rgba(235, 235, 245, 0.85);

}



.model-search-shell:focus-within .model-search-icon::after {

  background: rgba(235, 235, 245, 0.85);

}



.model-search-shell .input {

  width: 100%;

  min-width: 0;

  min-height: 100%;

  padding: 0 16px 0 41px;

  border: 0;

  border-radius: inherit;

  color: var(--text-strong);

  background: transparent;

  box-shadow: none;

  caret-color: rgba(255, 255, 255, 0.85);

  font-size: 13.5px;

}



.model-search-shell .input::placeholder {

  color: #ffffff;

  font-weight: 700;

  transition: color 0.22s ease;

}



.model-search-shell .input:focus::placeholder {

  color: rgba(203, 213, 225, 0.3);

}



@media (max-width: 720px) {

  .model-search-shell {

    width: 100%;

    min-width: 0;

  }



  .sort-dock {

    width: 100%;

    flex-wrap: nowrap;

  }



  .sort-dock #sort-tabs {

    flex: 1 1 auto;

    width: auto;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  }



  .sort-dock .sort-label {

    flex-shrink: 0;

  }

}



@media (max-width: 340px) {

  .sort-dock {

    padding-left: 10px;

  }



  #sort-tabs button {

    padding: 0 6px !important;

    font-size: 12.5px !important;

  }

}



h1,

h2,

h3,

h4,

h5,

h6 {

  color: #ffffff !important;

  font-weight: 700 !important;

  letter-spacing: -0.02em !important;

  text-shadow: 0 0 28px rgba(255, 255, 255, 0.18) !important;

}



.board-card-value,

.board-card strong {

  color: #ffffff !important;

  font-weight: 800 !important;

  letter-spacing: -0.02em !important;

  text-shadow: 0 0 24px rgba(255, 255, 255, 0.15) !important;

}



.status-excellent {

  color: #32d74b !important;

  font-weight: 700 !important;

  text-shadow: 0 0 18px rgba(50, 215, 75, 0.6) !important;

}

.status-good {

  color: #c5ec3a !important;

  font-weight: 700 !important;

  text-shadow: 0 0 18px rgba(197, 236, 58, 0.6) !important;

}

.status-fair {

  color: #ffd60a !important;

  font-weight: 700 !important;

  text-shadow: 0 0 18px rgba(255, 214, 10, 0.6) !important;

}

.status-poor {

  color: #ff9f0a !important;

  font-weight: 700 !important;

  text-shadow: 0 0 18px rgba(255, 159, 10, 0.6) !important;

}

.status-garbage {

  color: #ff6b5b !important;

  font-weight: 700 !important;

  text-shadow: 0 0 18px rgba(255, 107, 91, 0.6) !important;

}

.status-critical {

  color: #ff453a !important;

  font-weight: 700 !important;

  text-shadow: 0 0 18px rgba(255, 69, 58, 0.6) !important;

}

.status-bad {

  color: #ff453a !important;

  font-weight: 700 !important;

  text-shadow: 0 0 18px rgba(255, 69, 58, 0.6) !important;

}



.countdown-button {

  width: 60px !important;

  height: 60px !important;

  border-radius: 50% !important;

  background: transparent !important;

  backdrop-filter: none !important;

  border: none !important;

  box-shadow: none !important;

  display: inline-grid !important;

  place-items: center !important;

  padding: 0 !important;

  cursor: pointer !important;

  transition: transform 0.2s ease, border-color 0.2s ease !important;

}



.countdown-button:hover {

  background: transparent !important;

  border-color: transparent !important;

  transform: scale(1.05) !important;

  box-shadow: none !important;

}



.countdown-ring {

  width: 48px !important;

  height: 48px !important;

  display: inline-grid !important;

  place-items: center !important;

  border-radius: 50% !important;

  position: relative !important;

  box-shadow: none !important;

  transition: box-shadow 0.18s ease !important;

}



.countdown-ring span {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 36px !important;

  height: 36px !important;

  border-radius: 50% !important;

  color: #ffffff !important;

  background: #0d0f14 !important;

  font-size: 14px !important;

  font-weight: 800 !important;

  line-height: 1 !important;

  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.85),

    inset 0 -1px 1px rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.3) !important;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;

}



#refresh-countdown {

  font-size: 14px !important;

  font-weight: 800 !important;

  color: #ffffff !important;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;

}



.theme-toggle {

  display: none !important;

}



.eligible-item {

  background: rgba(30, 32, 38, 0.38) !important;

  backdrop-filter: blur(70px) saturate(210%) brightness(1.1) !important;

}



.eligible-item:not(.disabled):hover {

  background: rgba(40, 42, 50, 0.55) !important;

}



.review-card-readable {

  background: rgba(30, 32, 38, 0.38) !important;

  backdrop-filter: blur(70px) saturate(210%) brightness(1.1) !important;

}



.model-list-panel {

  background: rgba(18, 20, 25, 0.4) !important;

  backdrop-filter: blur(80px) saturate(220%) brightness(1.12) !important;

}



/* ============================================

   髢ｹ蘒ｬ蝸怜雫螽ｴ蜈ｼﾃｪ轢?

   ============================================ */



.board-card,

.filter-card,

.hot-card,

.model-row,

.summary-card,

.countdown-button {

  will-change: transform;

}



button,

a,

[role="button"] {

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.board-card,

.filter-card,

.hot-card,

.model-row {

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



input:focus,

select:focus,

textarea:focus {

  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



@media (prefers-reduced-motion: reduce) {

  * {

    transition: none !important;

    animation: none !important;

    will-change: auto !important;

  }

}



/* ============================================

   蟀｢ﾑ�○螳ｸ驕肴か髑ｸ遒伜％豬｣阯介酪螯､讌€蟠ｬ骼ｷ迚域ヴ髞補ぎ骼ｷ謇ｮ竄ｬ菴�揄髏ｦ裵ｽ諠�?

   ============================================ */



.status-badge.status-excellent {

  background: rgba(50, 215, 75, 0.15) !important;

  border: 1px solid rgba(50, 215, 75, 0.4) !important;

  color: #7effa0 !important;

  font-weight: 600 !important;

  text-shadow: 0 0 8px rgba(50, 215, 75, 0.5);

  box-shadow:

    inset 0 1px 0 rgba(50, 215, 75, 0.2),

    0 0 12px rgba(50, 215, 75, 0.1) !important;

}



.status-badge.status-good {

  background: rgba(197, 236, 58, 0.15) !important;

  border: 1px solid rgba(197, 236, 58, 0.4) !important;

  color: #e0ff7a !important;

  font-weight: 600 !important;

  text-shadow: 0 0 8px rgba(197, 236, 58, 0.5);

  box-shadow:

    inset 0 1px 0 rgba(197, 236, 58, 0.2),

    0 0 12px rgba(197, 236, 58, 0.1) !important;

}



.status-badge.status-fair {

  background: rgba(255, 214, 10, 0.15) !important;

  border: 1px solid rgba(255, 214, 10, 0.4) !important;

  color: #ffe666 !important;

  font-weight: 600 !important;

  text-shadow: 0 0 8px rgba(255, 214, 10, 0.5);

  box-shadow:

    inset 0 1px 0 rgba(255, 214, 10, 0.2),

    0 0 12px rgba(255, 214, 10, 0.1) !important;

}



.status-badge.status-poor {

  background: rgba(255, 159, 10, 0.15) !important;

  border: 1px solid rgba(255, 159, 10, 0.4) !important;

  color: #ffb866 !important;

  font-weight: 600 !important;

  text-shadow: 0 0 8px rgba(255, 159, 10, 0.5);

  box-shadow:

    inset 0 1px 0 rgba(255, 159, 10, 0.2),

    0 0 12px rgba(255, 159, 10, 0.1) !important;

}



.status-badge.status-garbage {

  background: rgba(255, 107, 91, 0.15) !important;

  border: 1px solid rgba(255, 107, 91, 0.4) !important;

  color: #ff9b8a !important;

  font-weight: 600 !important;

  text-shadow: 0 0 8px rgba(255, 107, 91, 0.5);

  box-shadow:

    inset 0 1px 0 rgba(255, 107, 91, 0.2),

    0 0 12px rgba(255, 107, 91, 0.1) !important;

}



.status-badge.status-critical,

.status-badge.status-bad {

  background: rgba(255, 69, 58, 0.15) !important;

  border: 1px solid rgba(255, 69, 58, 0.4) !important;

  color: #ff8a7f !important;

  font-weight: 600 !important;

  text-shadow: 0 0 8px rgba(255, 69, 58, 0.5);

  box-shadow:

    inset 0 1px 0 rgba(255, 69, 58, 0.2),

    0 0 12px rgba(255, 69, 58, 0.1) !important;

}



.status-badge.status-idle {

  background: rgba(156, 163, 175, 0.12) !important;

  border: 1px solid rgba(156, 163, 175, 0.3) !important;

  color: rgba(255, 255, 255, 0.6) !important;

  font-weight: 600 !important;

  text-shadow: none;

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.08),

    0 0 8px rgba(0, 0, 0, 0.1) !important;

}



/* ============================================

   髢ｺ蝣壼％髀俄浮蝙ｶ螯槫�譴ｻ轢帶ｩ��? 蟀｢霍ｺ遘ｴ骰ｩ繹｡遞臥仲蟾ｮ蝴､髢ｼ?main-tabs 髢?

   豼ｮ��ｨ馴ｪ樊捗謔ｹ骰舌┤菫ｺ骼ｼ?+ 螽第諜蘒牙ｨ�с貎ｪ驫岩斧螢?+ 髢ｻﾑ�ぎ辭ｷ﨤城椋謌樒燈骼ｹ�牙ｹ先ｾｶ諢ｭ證?

   (郛ょ�蝟慕ｻｨ﨡�ｼｬ骰･�ｽ薰ｽ髢ｺ蝣ｫ蛛�数﨡∫ｦ帝渇釗第ｴｬ髢ｻ笊ら鉛扈怜�蠑ｬ?.range-tabs 髢ｸ蠢句褐髏ｪ﨡よ�骰俸い轣?

   ============================================ */



.range-control {

  min-height: 54px;

  padding: 5px 8px 5px 16px;

  gap: 12px;

  box-sizing: border-box;

}



.range-label {

  color: rgba(255, 255, 255, 0.92);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  white-space: nowrap;

  text-shadow: none;

}



.range-control .range-tabs {

  display: grid !important;

  grid-template-columns: repeat(2, minmax(56px, 1fr)) !important;

  gap: 0 !important;

  min-height: 44px;

  height: 44px;

  padding: 4px !important;

  border-radius: 9px !important;

  background: linear-gradient(

    180deg,

    rgba(30, 30, 32, 0.9),

    rgba(20, 20, 22, 0.95)

  ) !important;

  border: 1px solid rgba(0, 0, 0, 0.55) !important;

  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7),

    inset 0 -0.5px 0 rgba(255, 255, 255, 0.04),

    0 1px 1px rgba(255, 255, 255, 0.05) !important;

  backdrop-filter: none !important;

  overflow: hidden;

  isolation: isolate;

  box-sizing: border-box;

}



.range-control .range-tabs button {

  width: auto !important;

  min-width: 56px !important;

  height: 36px !important;

  min-height: 36px !important;

  padding: 0 14px !important;

  margin: 0 !important;

  border-radius: 6px !important;

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  color: rgba(235, 235, 245, 0.45) !important;

  font-size: 13.5px !important;

  font-weight: 600 !important;

  letter-spacing: -0.012em;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  transform: none !important;

  text-shadow: none !important;

}



.range-control .range-tabs button::before {

  display: none !important;

}



.range-control .range-tabs button:hover:not(.active) {

  color: rgba(255, 255, 255, 0.9) !important;

  background: rgba(255, 255, 255, 0.04) !important;

}



.range-control .range-tabs button.active {

  background: radial-gradient(

      circle at 50% 0%,

      rgba(255, 255, 255, 0.18),

      transparent 50%

    ),

    linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.95),

      rgba(242, 242, 247, 0.98)

    ) !important;

  color: rgba(0, 0, 0, 0.92) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),

    inset 0 -1px 1px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.2),

    0 2px 6px rgba(0, 0, 0, 0.15) !important;

  text-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.8) !important;

  transform: none !important;

}



.range-progress-bar {

  left: 6px;

  right: 6px;

  bottom: 2.5px;

  background: rgba(255, 255, 255, 0.1);

}



/* ============================================

   髢ｻ謌ｭ蜿�ｦｫ﨡€ﾎ滄挨蟠�ぎ辜ｽ蟠｡髞帛境﨣ｻ: 髢ｹ辜伜ｸ帝式譖｢謔ｧ轣樒ぎ證ｭ螽�?main-tabs 螽第諜蘒牙ｨ�ｿ�蠑ｳ螯､菴�?

   髢ｸ豌ｬ遘ｵ鬘仙･ｸ諛晞曙繝ｧ蠖ｯ螯､讌€蟠ｬ骼ｷ莨ｴ蟠｣骼ｴ豼�ｸ? 髢ｺ蛯壽ｴ､髏｡ﾑ�ｹ馴鴫﨡牙國豼?

   ============================================ */



.hot-strip {

  gap: 10px;

}



.hot-card .rank {

  width: 42px;

  height: 42px;

  border-radius: 12px;

  background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);

  border: none;

  box-shadow:

    inset 0 1px 2px rgba(255, 255, 255, 0.2),

    0 3px 8px rgba(0, 0, 0, 0.3),

    0 12px 20px rgba(0, 0, 0, 0.15);

  backdrop-filter: none;

  font-size: 24px;

  font-weight: 700;

  color: #ffffff;

  display: grid;

  place-items: center;

  position: relative;

  overflow: hidden;

}



.hot-card .rank::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: inherit;

  background: linear-gradient(

    135deg,

    rgba(255, 255, 255, 0.25) 0%,

    transparent 50%

  );

  opacity: 0.6;

}



.hot-card .rank-gold {

  background: linear-gradient(135deg, #ff453a 0%, #ff375f 50%, #ff2d55 100%);

  color: #ffffff;

  border: none;

  box-shadow:

    inset 0 1px 2px rgba(255, 255, 255, 0.4),

    0 3px 8px rgba(255, 69, 58, 0.4),

    0 12px 20px rgba(0, 0, 0, 0.2),

    0 0 24px rgba(255, 69, 58, 0.3);

}



.hot-card .rank-lime {

  background: linear-gradient(135deg, #32d74b 0%, #30d158 50%, #30b44a 100%);

  color: #ffffff;

  border: none;

  box-shadow:

    inset 0 1px 2px rgba(255, 255, 255, 0.4),

    0 3px 8px rgba(50, 215, 75, 0.4),

    0 12px 20px rgba(0, 0, 0, 0.2),

    0 0 24px rgba(50, 215, 75, 0.3);

}



.hot-card .rank-orange {

  background: linear-gradient(135deg, #0a84ff 0%, #007aff 50%, #0066cc 100%);

  color: #ffffff;

  border: none;

  box-shadow:

    inset 0 1px 2px rgba(255, 255, 255, 0.4),

    0 3px 8px rgba(10, 132, 255, 0.4),

    0 12px 20px rgba(0, 0, 0, 0.2),

    0 0 24px rgba(10, 132, 255, 0.3);

}



.hot-card .rank-muted {

  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);

  color: rgba(255, 255, 255, 0.85);

  border: none;

  box-shadow:

    inset 0 1px 2px rgba(255, 255, 255, 0.15),

    0 3px 8px rgba(0, 0, 0, 0.25),

    0 12px 20px rgba(0, 0, 0, 0.15);

}



.hot-card .model-name {

  color: #ffffff;

  font-weight: 700;

  letter-spacing: -0.01em;

  font-size: 14px;

}



.hot-card .model-meta {

  color: rgba(235, 235, 245, 0.6);

  font-size: 12px;

}



/* ============================================

   髢ｸ蠢句椛骰取搗ﾎ滄挨蟠�ぎ辜ｽ蠑ｽ骰･﨡画埀髏�? 髢ｸ讓ｼ邊ｯ逕ｯ竄ｬ轢ｹ謦ｳ闍ｯ鬘ｨ貊�ヴ髀�€ｳ﨤�, 髏�菴ｲ譎憺式蟠�ｧ宣鰹���螽ｴ��弦扈?

   髢ｹ辜伜ｸ堤ｻｨ蠇樶崗髞晏強遘ｴ髢ｸ��且螽ｲ蝮怜ｹ帝渇繝ｦ邯城椋�ｺ蜉大ｨｼ莨ｴ蠑ｶ貔ｶ蜩･迹? 髏�菴ｲ蜑晞醇辭ｼ諛礼勅辜俶割髢ｺ竄ｬ髢ｫ豸夂蒼髣ょ怯謾ｱ螽稲いﾎ?

   ============================================ */



.model-list-heading {

  margin: 0 0 16px;

  padding: 2px 2px 14px;

  border-radius: 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  background: transparent;

  box-shadow: none;

}



.model-list-panel .count-pill {

  min-height: 26px;

  padding: 0 11px;

  border-radius: 7px;

  color: rgba(255, 255, 255, 0.92);

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.01em;

}



.model-list-heading p,

.panel-heading p {

  color: rgba(235, 235, 245, 0.55);

}



@media (max-width: 720px) {

  .range-control {

    width: 100%;

    justify-content: space-between;

    padding: 5px 8px 5px 12px;

  }



  .range-control .range-tabs {

    flex: 1;

    max-width: 220px;

  }

}



/* ============================================

   螽｣蝗ｶ蝟夜｡ｦ? 髢ｹ訒�甥豬�迥ｻ蟠｡髞帛境﨣ｻ髢ｺ蜀ｭ蝓夜凄豢ｪ謔ｳ髑ｽ繧�ｫ�湿蟄俶ｴ匁･�蝗ｬ蟠咎棟迹ｰ邂幃婿轤ｬ豢晞｡?髢ｸ謦ｹ蟆ｪ鬘･蝗ｬ蟷�?

   髢ｺ蠍�∮螽ｲ? 豼ｮ豼�€墓ｾｧ迥ｻ諠�?髢ｺ螫ｩ豬�墾ﾑ�氤雹�沃鄧匁ｿｮ��ｨ馴ｪ樊捗謔?髢ｺ竄ｬ隍ｰ謗�％髏倡鳩闊ｶ髢ｸ蠢句椛驫�､仙ｴ鈴告﨟��?

   (髣ょ�帛楴蟀｢?髢ｸ讌狗ｴ墓ｾｧ?43髏樊ｶ俶悽閹ｩ髢ｸ繖･蘒�昏﨟�げ?髣��譽�ｿｮ轤ｴ遖�?backdrop-filter,

   髢ｸ谺大ｧｴ豼ｮ?body::after 髢?fixed 豼橸ｽ�亟骼ｮ蠎ｨ蟠玲ｾｶ蟀�ｹｴ螽第諜鬪ｸ螳暮″謔ｧ骰･繖･莠ｾ髢?

   transform, Chromium 髣∵薯遘ｵ髀悟ｩ�ｼｽ骰幟�螢宣椋譬ｨ迚怜ｦ槫�諛礼◇轤ｬ迴ｯ髣∵薯豢ｦ髏鈴″譟ｨ螽�ｺ｣遘ｴ髢ｵ?

   髀俄浮迹､扈ｨ豢ｪ蟠鈴告﨟�亞髣��譽�ｨｼ讌�ｴｷ驫翫┤邂ｮ螽第盟邁ｼ扈怜､先氤雹�沃鄧夜冥繖･雖ｭ扈ｻ萓€諛晞他霄ｲ竄ｬ蜀ｮ譽�｡ｫ蠇�迹? blur 讌�轤ｶ蝓門ｦｫ?

   髢ｸ谺伜楫鬘ｫ蝸帛ｼｫ骰ｫ辭ｺ莠?髏�諢ｩ蜉埼鵠蜻ｴ蠑ｶ驫峨├谿ｰ豼樊超蜉戊､?螯､蛯崚ｪ骰俶ｻ亥ｹ楢ｹ�ｰｱ迴ｶ+髢ｸ諢ｬ諛伜ｦｲ謐舌＄?, 髢ｺ菴ｸ諛朱甑蠢帶汕?

   郛∝､基濤螽�? 螽ｴ迥ｲ諛咲ｻｻ豌ｶ謔ｾ螽�ｿ壼鴎郛�?髢ｹ扈伜蒲驫�ｰｱ邊ｵ貔ｶ螻ｾ蝓よｿｮ豼鍋ｵｾ骰区諜ﾃｹ鬘皮�謨ｶ髏主ｽ停ぎ豸夂草髢ｻ繖･雖ｭ髏ｦ豢ｪ謔ｳ髑ｽ繧�ｫ�矛?

   ============================================ */



.app-header,

.panel,

.model-list-panel,

.main-tabs-wrapper,

.range-control,

.sort-dock,

.model-search-shell,

.range-tabs,

.segmented,

.filter-legend,

.summary-card,

.filter-card,

.hot-card,

.model-row,

.board-card,

.rpm-card,

.eligible-item,

#sort-tabs,

#sort-tabs button,

.range-tabs button,

.segmented button {

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

}



/* ============================================================

   螽第諜逸ｳ鬘ｫ螫ｮ蟠ｶ讌｣蜀ｨ讚｢髢ｺ螫ｪ雖ｸ扈ｱ谺灘ｴ鈴｡停ぎ骼ｲ��蠑ｶ?/ 蟀｢蝣��闊ｹ髢ｻ諢ｮ赶企凄?/ 郛∫球邏暮式蟀�附?

   髏�菴ｹ蟠倬｡灘踏諡�鬘凪凰譫�錘髱帷ｶ顔ｼ?髢ｸ謗第｣帷ｻｮ蠍牙ｹ€髀�ｿ｣貎?髢ｿ豸咏｢埼醇辭ｼ蟷鷹｡碑冠迴ｷ螽ｴ��性扈ｱ谺仙ｾ�疾裵ｼ蜉･ KPI髢? 髢ｻ貊�ｴｵ骼ｷ謌ｦ譽�疾隗�□髢ｿ豸倡掩骰ｨ﨟�げ鬘ｭ謗皮､�

   髏�蝗ｶ蜴ｺ扈�辭ｸ縺咎漉轤ｲﾐ鈴浴譚ｿ遘ｷ貔ｹ?迺?髢ｻ貊�ｴｵ骼ｷ謌�諡ｹ驫奇ｹ€螯?= 豼樊超蜉戊､ｰ?+ 螯､蛯崚ｪ骰俶ｻ亥ｹ楢ｹ�ｰｱ迴ｶ + 髢ｸ諢ｬ諛伜ｦｲ謐舌＄骼ｲ螫ｬ遉�ｨ第諜遘ｶ髀√ｉ諠?blur髢?

   郛ょ�蝟慕ｻｨ﨡�ｼｬ骰･�ｽ薰ｽ髢ｺ蝣ｫ蛛�数﨡�附螳€蜀ｾ豢ｬ髢ｻ笊ら於螽ｲ蝮怜ｼｮ驤ｺ蜀ｩ逡ｱ髢ｺ蜀�掠貎宣椋謗鍋続扈ｱ豼域ｶｵ鬘碑墾邂ｽ髢ｺ蛯懷｢鈴雛蜊樶�雹�ｺ｣迹晞裾豌ｼ蛛�ｦｫ薰｣遖帝駁蝗ｩ蝙ｳ髏滓屓譽帛ｨｲ?

   ============================================================ */



/* ---------- 髢ｺ蜻ｮ貉ｹ郛榊ｬｮ諛晞甑螟狗ｷｲ髢ｿ豸咏涛GB 螽第諜逸ｯ骰俶銚邏帝黒蜑∫､�ｨ�?rgba(var()) 蟀｢霍ｺ遘ｶ髀√ｉ謨肴ｾｶ豸夂､蛾摺蝗ｶ蜴ｺ扈�辭ｸ縺咎漉轤ｲﾐ?---------- */

.board-card {

  --crystal-primary: 148, 163, 184;

  --crystal-secondary: 148, 163, 184;

}

.board-card-green,

.token-usage-green {

  --crystal-primary: 95, 222, 141;

  --crystal-secondary: 52, 211, 153;

}

.board-card-blue,

.token-usage-blue {

  --crystal-primary: 96, 165, 250;

  --crystal-secondary: 125, 211, 252;

}

.board-card-gold,

.token-usage-gold {

  --crystal-primary: 255, 201, 64;

  --crystal-secondary: 255, 224, 130;

}

.board-card-purple,

.token-usage-purple {

  --crystal-primary: 196, 157, 235;

  --crystal-secondary: 179, 157, 219;

}

.board-card-cyan,

.token-usage-cyan {

  --crystal-primary: 117, 215, 226;

  --crystal-secondary: 103, 232, 249;

}

.board-card-danger,

.token-usage-danger {

  --crystal-primary: 240, 125, 125;

  --crystal-secondary: 248, 113, 113;

}

.board-card-model-families {

  --crystal-primary: 168, 162, 255;

  --crystal-secondary: 139, 192, 255;

}



/* ---------- Tier 1 迺?郛∵沃迹ｧ骰具ｽ�ｴ帝数豢ｻ蜷€髢ｸ讀ｻ讒�ｻｱ莨ｴ謔ｳ髑ｽ繧�ｫ�冥蠇帶剱髑?+ 髢ｹ訒�甥豬�迥ｵ諡�鬘捺ｿ育妹髢ｼ?---------- */

/* 髏｢訷壽�驤ｧ蘒ｿ邱､扈ｱ謇ｮ蛻帝嫉諢ｬ豈€髢ｻ繖･雖ｪ髑ｵ謌ｦ蟷€隍城ｪ樊捗謔ｹ骰扇≧蜿千像驍ｦ貔∫ｻｱ谺灘ｼｮ髏俶薯轢ｼ髏滓ｬ仙ｸ�逢蘒ｿ辟ｦ螯ｫ繧�憤骼ｼ菴ｲ謨�像謇ｳ譎ｪ扈?*/

/* hover髢ｿ豸咏｢咲€ｵ貊亥ｴ･骰俸�谿ｰ髏�蝗ｶ蜴ｺ扈�辭ｼ諛晞他﨡€莉ｯ螽ｴ貊主勹扈ｱ谺先ｽ冗鎗蜍ｵ謾ｱ + 髢ｺ菴ｹ貔倬逢?+ 髢ｸ蠢軟ュ骰ｩ讌∵ｽ乗ｾｶ蟀ょｸｨ髢ｿ?*/



.board-card {

  --card-hue: #aab5c6;            /* hover 髢ｻ鄧ｬ蜉主ｨ域唖諡�鬘捺ｿ育妹髢ｼ遑�∪扈ｱ谺扇怙螯ｯ谺ｾ蜷�ｨ第塔蜴ｽ驤ｧ蘒ｬ蠍�､� */

  --crystal-primary: 170, 181, 198;

  --crystal-secondary: 170, 181, 198;

  --card-accent: #aab5c6;

}



/* 6 轢ｵ裵ｾ蟋ｴ螳暮″謔ｧ骰･笊ら奮髏�蝗ｶ蜴ｺ扈�辭ｼ諛晉仲ﾑ�､�婿?board-grid 螯槭ｅ謳ｫ扈ｨ蠇｢謨�?*/

.board-card.board-card-green {

  --card-hue: #5dde8d;            /* 髀俄浮蜉倬｡｢謌ｦ蠑ｮ骰ｫ譖滂ｼ?- 郛?*/

}

.board-card.board-card-blue {

  --card-hue: #60a5fa;            /* 郛∵沃迹ｧ骰具ｽ�県螳�え貎?- 髢?*/

}

.board-card.board-card-gold {

  --card-hue: #ffc940;            /* 髢ｹ﨡らｲｯ扈蛾｣取胸?- 髣?*/

}

.board-card.board-card-purple {

  --card-hue: #c49deb;            /* 髢ｹ﨡∵ｧ帝｡俸оﾐｧ?- 郛?*/

}

.board-card.board-card-cyan {

  --card-hue: #75d7e2;            /* 髢ｹ﨡らｲｯ扈臥�諛�?- 髣?*/

}

.board-card.board-card-model-families {

  --card-hue: #e8eef7;            /* 豼｡訷冷ぎ蟠�ぎ鬟取境骰扇≦證城�?- 螽第塔蜴ｽ驤ｧ蘒ｬ蜻ｮ﨟?*/

}



/* token-usage 髢ｸ讌狗ｴ墓ｾｧ譬ｭ蟠玲揶笊よ囂螽第塔蜴ｽ驤?hover */




.board-card {

  position: relative;

  overflow: visible !important;

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  isolation: isolate;

}



/* 髏｢訷壽�驤ｧ蘒ｿ邱､扈ｱ莨ｴ蟠｣轣樒阜貉ｴ髢ｻ貊�ｴｵ骼ｷ謌樊ヴ髀�≧遉�ｦ槭ｅ辷ｼ骰主ｭ偃嚊螯ｯ蜩�ｸｨ + 骼ｼ蟄俶ｴ滄克謦ｮ蠑ｳ螯､蜻ｮ譯ｨ髢ｿ? 髢ｸ谺冗楙骰､蠎ｨ蟷楢ｹ�ｰｱ迴?*/

.board-card::before {

  content: "";

  position: absolute;

  z-index: 0;

  inset: 0;

  left: 0 !important;

  right: 0 !important;

  top: 0 !important;

  height: auto !important;

  background:

    linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.055) 0%,

      rgba(255, 255, 255, 0.018) 50%,

      rgba(0, 0, 0, 0.08) 100%

    ),

    rgba(18, 22, 31, 0.7) !important;

  border: 1px solid rgba(255, 255, 255, 0.09) !important;

  border-radius: var(--radius) !important;

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.08),

    inset 0 0 0 1px rgba(255, 255, 255, 0.015),

    0 6px 18px rgba(0, 0, 0, 0.32),

    0 0 0 1px rgba(0, 0, 0, 0.2) !important;

  opacity: 1 !important;

  filter: none !important;

  transition: border-color 0.22s ease, box-shadow 0.22s ease,

    background 0.22s ease;

}



.board-card::after::after {

  content: none !important;

}



.board-card:hover {

  transform: translateY(-2px) !important;

  background: transparent !important;

  border-color: transparent !important;

  box-shadow: none !important;

}



/* hover髢ｿ豸吩ｿｺ扈皮�都ｼ骰｡讓ｼ蜴�螽第諜�ｨ鬘輔娃遞頑ｾｶ蠎｡﨤城盟豸俶悽髏灘ｶ牙ｴｪ轣樒ｭ区ｨ�椋谺仙楫骰?*/

.board-card:hover::before::before {

  border-color: color-mix(in srgb, var(--card-hue) 55%, rgba(255, 255, 255, 0.1)) !important;

  background:

    linear-gradient(

      180deg,

      color-mix(in srgb, var(--card-hue) 8%, rgba(255, 255, 255, 0.04)) 0%,

      rgba(255, 255, 255, 0.018) 50%,

      rgba(0, 0, 0, 0.06) 100%

    ),

    rgba(20, 25, 35, 0.78) !important;

  box-shadow:

    inset 0 1px 0 rgba(255, 255, 255, 0.1),

    0 10px 26px rgba(0, 0, 0, 0.38),

    0 0 0 1px color-mix(in srgb, var(--card-hue) 30%, transparent),

    0 0 22px color-mix(in srgb, var(--card-hue) 18%, transparent) !important;

}



/* 髢ｺ蠍�ｴｨ鬘堤�謨榊ｧ偃р蜚ｨ扈ｾ蠇帛％螽第塔蜴ｽ驤ｧ蘒ｬ蠍�､栄over 髢ｺ螻ｾ謐�｡輔娃遞頑ｾｶ蠎｡﨤?*/

.board-card-label {

  position: relative;

  z-index: 1;

  letter-spacing: 0.04em;

  color: var(--board-ink);

  transition: color 0.22s ease;

}

.board-card-label::after {

  content: none !important;

}

.board-card:hover .board-card-label {

  color: var(--card-hue);

}



/* 髢ｺ菴ｹ貔倬逢﨡ゅ€狗ｻｱ謇ｮ謨ｮ骰帛ｨｾ蛛捺ｵ｣辜偃▽髢ｼ遑�∪扈ｱ貍｢over 髢ｺ螻ｾ謐�｡輔娃遞頑ｾｶ蠎｡﨤?+ 髢ｺ螻ｾ譟ｨ骼ｷ迚域ｽ乗ｾｶ蟀ょｸ?*/

.board-card .board-card-value .token-usage-count-row strong {

  transition: color 0.22s ease, text-shadow 0.22s ease;

}

.board-card:hover .board-card-value {

  color: var(--card-hue) !important;

  text-shadow: 0 0 18px color-mix(in srgb, var(--card-hue) 35%, transparent) !important;

}




/* 豼｡訷冷ぎ蟠�ぎ鬟取境骰扇≦證城娘菴ｹ貔伜ｮ暮″謨榊ｧ偃о謨ｶ髣��蜉咲髪謦ｶ謔ｰ螳€蜀ｾ蜷€髢ｺ菴ｹ蟐ｽ骰丞ｲ�ｴｶ?hover 髢ｺ蜀ｭ蝓夜嵩螫ｬ諡�鬘捺ｿ育妹髢ｼ?*/

.board-card-model-families .model-family-row strong {

  border-color: rgba(255, 255, 255, 0.1) !important;

  background: rgba(255, 255, 255, 0.04) !important;

  color: #ffffff;

  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease;

}

.board-card-model-families:hover .model-family-row strong {

  border-color: color-mix(in srgb, #e8eef7 40%, transparent) !important;

  background: color-mix(in srgb, #e8eef7 8%, transparent) !important;

  color: #ffffff !important;

}



/* 螽ｴ迥ｮ蛟玲ｾｧ豼句ｹ矩鴫﨡€鄧?蟀｢諠ｰ邊ｾ迹呻ｸｾ諡矩茜蜀ｩ谿ｶ髢ｿ豸呵伽螳ｸ驕榊ｴ�髀咋ч蝴泌ｨ第盟逸ｳ貔ｹ蟀�ぎ菴�揄髏?*/

.token-usage-count-success {

  color: #5df08a !important;

}

.token-usage-count-failed {

  color: #ff6b6b !important;

}



/* 髢ｳ繝ｦ譟｡驤ｧ?end 迺?髢ｸ蠢｣蜑咎軸��蠑ｶ骼ｸ蠎｢谿ｶ髢ｹ隸｡蝟怜ｨ�患諡?髢ｳ繝ｦ譟｡驤ｧ?*/



/* ---------- Tier 2 迺?髢ｻ貊�ｴｵ骼ｷ?+ 髣ょ岑謐∝ｨ�ｽ�ｩｱ驤･蜀ｲ螽�初辜��扈ｱ逋娜M / 螽ｴ迥ｮ蛟玲ｾｧ豼句ｼｮ驫峨Ι邂?/ 髢ｺ螻ｻ蜆ｴ鬘�?---------- */



/* RPM 髢ｸ讀ｻ讒�ｻｱ莨ｴ謔ｳ髑ｽ繧�ｫ�翌蝣帛楴蟀?+ 轢ｹ髱ｩ螯�ｻｱ蠇�諡�鬘捺ｿ育妹髣ょ岑謐∝ｨ�ｽ�ｽ?+ 髢ｸ谺仙楫骰俶ｻ�ｾ�､埼寸?+ 髢ｸ谺仙楫骰俶ｻ�ｽｻ螽第ｨｺ裵企娘?*/

.rpm-card {

  position: relative;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.1) !important;

  border-radius: var(--radius);

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.05),

      rgba(255, 255, 255, 0.012)

    ),

    rgba(17, 21, 30, 0.62) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),

    0 10px 26px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;

}



.rpm-card:hover {

  transform: translateY(-2px);

  border-color: rgba(255, 255, 255, 0.16) !important;

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.07),

      rgba(255, 255, 255, 0.018)

    ),

    rgba(20, 25, 35, 0.7) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),

    0 16px 36px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.04) !important;

}

.rpm-card-head strong {

  text-shadow: 0 0 22px

    color-mix(in srgb, var(--card-accent, #aab5c6) 55%, transparent);

}

.rpm-meter {

  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);

}

.rpm-meter span {

  box-shadow: 0 0 12px var(--card-accent),

    inset 0 1px 0 rgba(255, 255, 255, 0.35);

}



/* 螽ｴ迥ｮ蛟玲ｾｧ豼句ｼｻ驫介汨蝴�盟豸吩ｿｺ扈ｶ蠇｢蟠鈴渇繖･辣�ｨｴ��弦扈怜其譴ｽ髢ｿ螫ｫ裵よｿ｡謠停ぎ辭ｷ遯幃�?*/

#view-search .token-lookup-form .input {

  /* 轢ｹ蜻顔�骰｣謳∝ｼｸ骰俸�谿?.token-search-shell 郛ゆｽｹ謖ｻ髏腫�遞臥€｣蜑∫､画ｿｮ豼�€暮｡ｦ笊�ｲ疲ｿ�豌ｭ迴滄娘蜀�属逡ｱ髏滓屓譽帛ｨｲ蟀�ぎ隗�洌扈�?*/

}

.board-status {

  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);

}



/* 髢ｳ繝ｦ譟｡驤ｧ?end 迺?髢ｸ蠢｣蜑咎軸��蠑ｶ迺ｺ繖･邂ｵ髢ｻ迥ｲ蝠ｴ蟀€蠢帶聖?髢ｳ繝ｦ譟｡驤ｧ?*/



/* ============================================================

   蟀｢蝣��闊ｹ髢ｻ諢ｮ赶企凄?view-reviews

   ============================================================ */



/* 髣基ч蛛る込繧牙ｴ｡驤ｽ蜻ｯ遯鈴冥貊�ｴｵ骼?+ 螯槭ｅ辷ｼ骰取聴譽�疾隗�□豼樒ｿ�遉�腰貊�ｽ?*/

.identity-card {

  position: relative;

  overflow: hidden;

  border: 1.5px solid rgba(90, 70, 50, 0.3) !important;

  background: #f5f0e8 !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;

}

.identity-card::before {

  display: none;

}



/* 螽｣蝗｣蜑晄ｵｼ蜻ｯ莠ｸ雹�超蛛･髢ｿ豸咏｢咲ｻ�т諛晞曙繝｢蛛馴轟轤ｲ蟶?*/

.identity-info-grid span,

.admin-user-info-grid span,

.admin-review-user-grid span {

  border-color: rgba(0, 0, 0, 0.35) !important;

  background: rgba(0, 0, 0, 0.03) !important;

  box-shadow: none;

}



/* 髢ｸ谺伜楜骰具ｽ�侠骰俸Α萓€蟠ｹ轢｣蠇ｧ謾ｽ髢ｿ豸呎ｰｨ髑ｳ蟯�モ骰顔�﨤城椋讌狗ｴ墓ｾｧ?*/

.eligible-item {

  position: relative;

  border: 1.5px solid rgba(90, 70, 50, 0.3) !important;

  background: #f5f0e8 !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;

}

.eligible-item:not(.disabled):hover {

  transform: translateY(-1px);

  border-color: rgba(90, 70, 50, 0.45) !important;

  background: #faf7f1 !important;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;

}

.eligible-item.active {

  border-color: rgba(90, 70, 50, 0.45) !important;

  background: #ede6d8 !important;

  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.08) !important;

  transform: translateY(1px);

}

.eligible-item .badge.eligible-status.is-ready {

  box-shadow: 0 0 14px rgba(34, 197, 94, 0.28);

}



/* 髢ｸ蠢｣蜑咏ｻｱ?髢ｹ蟄伜椹螽域姶謔咏ｺｭ蜻ｯ讒鷹椋讀ｻ讒�ｻｱ迚稲嚊螯ｯ辜俶モ髏�諢ｩ蜉梧ｿｮ笊�ｹ€豬｣蝨ｭ讓�冥貊�ｴｵ骼ｷ謌ｦ蟠｡髞帛境﨣ｻ + 髢ｺ蜍ｭ蝟捺･�蝗ｬ蟠｣骼ｴ豼�ｸｨ髢ｺ?*/

.review-card-readable {

  position: relative;

  padding: 18px 24px 18px 26px;

  --rail: 148, 163, 184;

  border: 1px solid rgba(255, 255, 255, 0.8) !important;

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 245, 240, 0.85) 100%) !important;

  box-shadow: 

    0 4px 12px rgba(0, 0, 0, 0.04), 

    0 1px 3px rgba(0, 0, 0, 0.02),

    inset 0 1px 0 rgba(255, 255, 255, 1) !important;

  backdrop-filter: blur(16px) saturate(120%) !important;

  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;

  border-radius: 16px;

  overflow: hidden;

  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;

}

.review-card-readable h3 {

  color: #1a1a1a;

  font-weight: 700;

  margin-top: 0px;

  margin-bottom: 6px;

  padding-bottom: 0px;

  border-bottom: none;

  position: relative;

}

.review-card-readable h3::before {

  content: "";

  position: absolute;

  top: -12px;

  left: 0;

  width: 100%;

  height: 1px;

  background: linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.02) 70%, transparent 100%);

}

.review-card-readable p {

  color: rgba(0, 0, 0, 0.65);

  line-height: 1.6;

}

.review-card-readable .review-author {

  color: rgba(0, 0, 0, 0.5);

  font-weight: 600;

  text-shadow: none;

}

.review-card-readable .review-time {

  margin-bottom: 4px !important;

}

.review-card-readable .review-metrics {

  border-top: none;

  padding-top: 0px;

  margin-top: 16px;

  position: relative;

}

.review-card-readable .review-metrics::before {

  content: "";

  position: absolute;

  top: -8px;

  left: 0;

  width: 100%;

  height: 1px;

  background: linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.01) 70%, transparent 100%);

}

.review-card-readable .review-metric-pill {

  color: rgba(0, 0, 0, 0.65);

  border-color: rgba(0, 0, 0, 0.08);

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(240, 240, 240, 0.5));

  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 1);

  border-radius: 20px;

  padding: 4px 10px;

  transition: all 0.2s ease;

}

.review-card-readable .review-metric-pill:hover {

  transform: translateY(-1px);

  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1);

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 245, 245, 0.7));

}

.review-card-readable .review-metric-pill strong {

  color: #1a1a1a;

  font-weight: 700;

}

.review-card-readable .review-model-name {

  color: #1a1a1a;

  font-weight: 700;

  background: transparent !important;

  padding: 0 !important;

  display: inline-flex;

  align-items: center;

  margin-left: 0;

  margin-top: 0px !important;

  margin-bottom: 24px !important;

  border-bottom: none !important;

  box-shadow: none !important;

  text-shadow: none !important;

}

.review-card-readable:hover {

  border-color: rgba(255, 255, 255, 1) !important;

  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(250, 248, 245, 0.9) 100%) !important;

  box-shadow: 

    0 8px 24px rgba(0, 0, 0, 0.06), 

    0 2px 8px rgba(0, 0, 0, 0.03),

    inset 0 1px 0 rgba(255, 255, 255, 1) !important;

}



/* 郛ょ�迚樒ｻｶ薰｢訒｣骰ｦ蠇�蟠ｶ髢ｿ豸咏洌扈ｻ豌ｶ謔ｾ螽��蝓よｿｮ��ｨ馴ｪ樊捗謔ｹ?+ 髣ょ�溷ｸ滓ｾｹ蟀�ｼｲ髀育鳩遘ｼ髢ｹ隸ｲ郢礼ｻ?*/





/* 髢ｳ繝ｦ譟｡驤ｧ?end 迺?蟀｢蝣��闊ｹ髢ｻ諢ｮ赶企凄?髢ｳ繝ｦ譟｡驤ｧ?*/



/* ============================================================

   郛∫球邏暮式?view-admin

   ============================================================ */



/* 髢ｻﾑ��郛榊ｶ画｣�鰹邃�ｷｲ髢ｿ豸呎ｰｨ鬪樊捗謔ｹ?+ 螯槭ｅ辷ｼ骰取聴譽�疾隗�□髀�?+ 髢ｺ蝸偃嚀陜朱初蝣滓減骰�?*/

#admin-login-panel {

  position: relative;

  overflow: hidden;

}

#admin-login-panel::before {

  content: "";

  position: absolute;

  left: 16px;

  right: 16px;

  top: 0;

  height: 2px;

  background: linear-gradient(

    90deg,

    transparent,

    rgba(125, 211, 252, 0.85) 30%,

    rgba(168, 162, 255, 0.7) 70%,

    transparent

  );

  box-shadow: 0 0 12px rgba(125, 211, 252, 0.4);

}

#view-admin .input {

  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4),

    inset 0 -1px 0 rgba(255, 255, 255, 0.04);

}



/* 髏主�蜑晞雛謚ｽ蟠｡驤ｽ蜻ｯ遯鈴冥貊�ｴｵ骼?+ 髢ｹ遞ｿ逸ｱ豼ｮ謳∝ｹ€豬｣遲句囈螽第盟逸ｱ螽域�裵城粕蜑ｧ蝟倬翌蝗ｨ謐∝ｨ�ｽ�ｽｪ?*/

.admin-review-card {

  position: relative;

  overflow: hidden;

  padding-left: 22px;

  --rail: 226, 232, 240;

  backdrop-filter: none !important;

  border-color: rgba(255, 255, 255, 0.1) !important;

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.05),

      rgba(255, 255, 255, 0.014)

    ),

    rgba(15, 19, 27, 0.6) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07),

    0 12px 30px rgba(0, 0, 0, 0.26) !important;

}

.admin-review-card[data-review-status="approved"] {

  --rail: 50, 215, 75;

}

.admin-review-card[data-review-status="pending"] {

  --rail: 226, 232, 240;

}

.admin-review-card[data-review-status="rejected"] {

  --rail: 255, 69, 58;

}

.admin-review-card[data-review-status="deleted"] {

  --rail: 120, 130, 145;

}

.admin-review-card::before {

  content: "";

  position: absolute;

  left: 0;

  top: 14px;

  bottom: 14px;

  width: 3px;

  border-radius: 0 3px 3px 0;

  background: rgba(var(--rail), 0.9);

  box-shadow: 0 0 10px rgba(var(--rail), 0.55), 0 0 18px rgba(var(--rail), 0.3);

}

.admin-review-card:hover {

  border-color: rgba(255, 255, 255, 0.16) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09),

    0 16px 36px rgba(0, 0, 0, 0.32) !important;

}



/* 髢ｻ鄧ｬ蜉埼昆豸｢蟠｡驤ｽ蜻ｯ遯鈴冥貊�ｴｵ骼?+ 郛∝ｙ豬�綾蝣･謔ｩ髑ｸ遒伜％豬｣蜩･迯ｦ郛∵翌蟋ｴ隍ｰ蛯槫ｴ�?*/

.admin-user-card {

  position: relative;

  backdrop-filter: none !important;

  border-color: rgba(255, 255, 255, 0.1) !important;

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.052),

      rgba(255, 255, 255, 0.016)

    ),

    rgba(13, 17, 25, 0.58) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07),

    0 14px 34px rgba(0, 0, 0, 0.26) !important;

}

.user-mute-pill.is-clear {

  box-shadow: 0 0 14px rgba(34, 197, 94, 0.22);

}

.user-mute-pill.is-muted {

  box-shadow: 0 0 14px rgba(239, 68, 68, 0.25);

}



/* 髢ｻ鄧ｬ蜉埼昆豸｢謔咏ｺｭ蜻ｯ讒?mini 髢ｸ讀ｻ讒�ｻｱ莨ｴ蟷先ｾｶ螻ｽﾐｦ髢ｹ蘒ｿ遉∵ｶ泌ｿ慕ｴ灘ｧ冷ぎ蟀€蠢帶聖郤ｭ蜻ｭ郛?*/

.user-review-mini {

  position: relative;

  overflow: hidden;

  padding-left: 18px;

  --rail: 148, 163, 184;

}

.user-review-mini.review-status-border-approved {

  --rail: 50, 215, 75;

}

.user-review-mini.review-status-border-pending {

  --rail: 226, 232, 240;

}

.user-review-mini.review-status-border-rejected {

  --rail: 255, 69, 58;

}

.user-review-mini::before {

  content: "";

  position: absolute;

  left: 0;

  top: 12px;

  bottom: 12px;

  width: 3px;

  border-radius: 0 3px 3px 0;

  background: rgba(var(--rail), 0.85);

  box-shadow: 0 0 8px rgba(var(--rail), 0.5);

}



/* 髢ｹ蝙ｮ遘ｳ郛肴翌諡矩初霍ｨ遘ｿ髢ｸ讀ｻ讒�ｻｱ莨ｴ蟷?positive/negative/neutral 轢ｹ髱ｩ螯�ｻｱ蠇｢譽�疾隗�□髀�?+ 髢ｺ蠍�ｴｭ鬘｣莉句ｴ｣骼ｴ豼�ｸ?*/

.admin-action-card {

  position: relative;

  overflow: hidden;

  padding-left: 22px;

  --rail: 226, 232, 240;

  backdrop-filter: none !important;

  border-color: rgba(255, 255, 255, 0.1) !important;

  background: linear-gradient(

      180deg,

      rgba(255, 255, 255, 0.05),

      rgba(255, 255, 255, 0.014)

    ),

    rgba(15, 19, 27, 0.58) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07),

    0 12px 28px rgba(0, 0, 0, 0.24) !important;

}

.admin-action-card.action-positive {

  --rail: 50, 215, 75;

}

.admin-action-card.action-negative {

  --rail: 255, 69, 58;

}

.admin-action-card.action-neutral {

  --rail: 226, 232, 240;

}

.admin-action-card::before {

  content: "";

  position: absolute;

  left: 0;

  top: 13px;

  bottom: 13px;

  width: 3px;

  border-radius: 0 3px 3px 0;

  background: rgba(var(--rail), 0.9);

  box-shadow: 0 0 10px rgba(var(--rail), 0.5), 0 0 16px rgba(var(--rail), 0.28);

}

.admin-action-card .admin-action-title {

  text-shadow: 0 0 14px rgba(var(--rail), 0.4);

}



/* 髏主�蜑晞雛?髢ｻ諢ｮ赶企凄蠎ｨ謔ｩ髑ｸ遒伜％豬｣蜩･迯ｦ郛∵翌蟋ｴ豬懈屬蟠｣骼ｴ豼�ｸ?*/

.badge.review-status-approved {

  box-shadow: 0 0 12px rgba(34, 197, 94, 0.18);

}

.badge.review-status-rejected {

  box-shadow: 0 0 12px rgba(239, 68, 68, 0.18);

}



/* 髢ｳ繝ｦ譟｡驤ｧ?end 迺?郛∫球邏暮式?髢ｳ繝ｦ譟｡驤ｧ?*/

/* ==========================================================================
   髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴村蛯懣憤骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨鍋鎗謗灘椢鬘扇п雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨?(髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ陷らｬ馴盟辭ｸ譫ｻ骼?
   ========================================================================== */

#view-admin {
  background-color: #f7f4ee !important;
  color: #333 !important;
  border-radius: 20px;
  padding: 24px;
  box-sizing: border-box;
  margin-top: 16px;
}

#view-admin .panel-heading h2 {
  color: #111 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
}

#view-admin .panel-heading p {
  color: #666 !important;
}

#view-admin .panel {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Tabs: segmented */
#view-admin .segmented {
  background: #ebe6df !important;
  border: none !important;
  padding: 4px !important;
  border-radius: 99px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
}
#view-admin .segmented button {
  color: #666 !important;
  border-radius: 99px !important;
  font-weight: 600 !important;
  background: transparent !important;
  text-shadow: none !important;
}
#view-admin .segmented button.active {
  background: #fff !important;
  color: #ff6600 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ鬟主｢� */
#view-admin .admin-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease !important;
  color: #333 !important;
  backdrop-filter: none !important;
}
#view-admin .admin-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ鬟主｢夜盟辭ｻ螯ｭ骼ｲ螫ｫ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ */
#view-admin .admin-card h3 {
  color: #111 !important;
  font-weight: 800 !important;
  margin-top: 0 !important;
  text-shadow: none !important;
}
#view-admin .admin-card p {
  color: #666 !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謖ｳ */
#view-admin .card-actions .small-button {
  background: #f5f5f5 !important;
  color: #333 !important;
  border: 1px solid #eee !important;
  border-radius: 99px !important;
  font-weight: 600 !important;
  padding: 6px 16px !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
#view-admin .card-actions .small-button:hover {
  background: #ebebeb !important;
}
#view-admin .card-actions .small-button[data-admin-action="approve"],
#view-admin .card-actions .small-button[data-user-action="unmute"] {
  background: linear-gradient(135deg, #ff7a00, #ff5000) !important;
  color: #fff !important;
  border: none !important;
}
#view-admin .card-actions .small-button[data-admin-action="approve"]:hover,
#view-admin .card-actions .small-button[data-user-action="unmute"]:hover {
  background: linear-gradient(135deg, #ff8a1a, #ff601a) !important;
}
#view-admin .card-actions .small-button.danger {
  background: #fff0f0 !important;
  color: #e53e3e !important;
  border: none !important;
}
#view-admin .card-actions .small-button.danger:hover {
  background: #ffe0e0 !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫ?(Pill髏? */
#view-admin .badge {
  border-radius: 99px !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: none !important;
}
#view-admin .badge.review-status-pending {
  background: #fff3e0 !important;
  color: #ff9800 !important;
}
#view-admin .badge.review-status-approved {
  background: #e8f5e9 !important;
  color: #4caf50 !important;
}
#view-admin .badge.review-status-rejected {
  background: #ffebee !important;
  color: #f44336 !important;
}
#view-admin .badge.review-status-all {
  background: #f5f5f5 !important;
  color: #9e9e9e !important;
}

/* 髢ｿ辭ｺ辣ｫ豬ｼ谺仙ｫｹ髏倩扱竄?Pill */
#view-admin .user-mute-pill {
  border-radius: 99px !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
#view-admin .user-mute-pill.is-clear {
  background: #e8f5e9 !important;
  color: #4caf50 !important;
}
#view-admin .user-mute-pill.is-muted {
  background: #ffebee !important;
  color: #f44336 !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ鬟主｢夜盟辭ｻ螯ｭ迺��ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫ?*/
#view-admin .admin-review-user-grid,
#view-admin .admin-user-info-grid {
  gap: 12px !important;
  margin-bottom: 16px;
}
#view-admin .admin-review-user-grid span,
#view-admin .admin-user-info-grid span {
  background: #faf8f5 !important;
  border: 1px solid #f0ebe1 !important;
  border-radius: 12px !important;
  padding: 12px !important;
  color: #333 !important;
  box-shadow: none !important;
}
#view-admin .admin-review-user-grid em,
#view-admin .admin-user-info-grid em {
  color: #999 !important;
  font-weight: 600 !important;
}
#view-admin .admin-review-user-grid strong,
#view-admin .admin-user-info-grid strong {
  color: #111 !important;
  font-weight: 800 !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ邯埼盟辭ｸ譫ｻ骼ｷ鬟主｢夜盟辭ｸ蝓�軸螫ｫ雖ｹ髢ｿ辭ｸ譫ｻ骼?*/
#view-admin .admin-action-card {
  padding-left: 20px !important;
  border-left: 4px solid #ccc !important;
  background: #ffffff !important;
}
#view-admin .admin-action-card.action-positive {
  border-left-color: #4caf50 !important;
}
#view-admin .admin-action-card.action-negative {
  border-left-color: #f44336 !important;
}
#view-admin .admin-action-card::before {
  display: none !important;
}
#view-admin .admin-action-title {
  text-shadow: none !important;
  font-weight: 800 !important;
  color: #111 !important;
  font-size: 16px !important;
  margin-bottom: 4px;
}
#view-admin .admin-action-meta {
  color: #999 !important;
  font-size: 12px !important;
  margin-top: 8px;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ?*/
#view-admin .input {
  background: #faf8f5 !important;
  border: 1px solid #e0dbce !important;
  color: #333 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}
#view-admin .input::placeholder {
  color: #bbb !important;
}
#view-admin .input:focus {
  border-color: #ff6600 !important;
  box-shadow: 0 0 0 2px rgba(255, 102, 0, 0.1) !important;
  background: #fff !important;
}

/* admin-user-label */
#view-admin .admin-user-label {
  color: #999 !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴嫉鬟腫憤骼?*/
#view-admin .status-bad {
  color: #f44336 !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ鬟主ｧｸ骼?*/
#view-admin .empty-state {
  color: #999 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* review-status 髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢企巡迥ｻ謨馴盾繧�ｫｹ */
#view-admin .review-status-pending { color: #ff9800 !important; }
#view-admin .review-status-approved { color: #4caf50 !important; }
#view-admin .review-status-rejected { color: #f44336 !important; }

/* 骰堤�謨馴明譚ｿ蠎憺執辜ｽ謖?*/
#view-admin .ghost-button {
  color: #666 !important;
  border-color: #ddd !important;
  background: #fff !important;
}
#view-admin .ghost-button:hover {
  background: #f5f5f5 !important;
  color: #333 !important;
}

/* Login panel */
#view-admin #admin-login-panel {
  background: #fff !important;
  border-radius: 20px !important;
  padding: 32px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05) !important;
}
#view-admin #admin-login-panel .primary-button {
  background: linear-gradient(135deg, #ff7a00, #ff5000) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 99px !important;
}

/* admin model name */
#view-admin .admin-review-model {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f5f5;
  padding: 4px 12px;
  border-radius: 99px;
  width: fit-content;
  margin-bottom: 12px;
}
#view-admin .admin-review-model .model-pill {
  color: #333 !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#view-admin .admin-review-model .model-provider {
  color: #999 !important;
}
#view-admin .stars {
  color: #ff9800 !important;
  text-shadow: none !important;
  letter-spacing: 2px;
}

/* 髢ｿ辭ｺ辣ｫ豬ｼ谺仙ｫｹ轣樊屬謨馴盾繧�ｫｹ髢ｿ辭ｶ闌守ｺｰ螟句ｫｹ髢ｿ辭ｷ蠖ｨ骼ｲ螫ｫ雖ｹ */
#view-admin .user-review-mini {
  background: #f9f9f9 !important;
  border: 1px solid #eee !important;
  border-radius: 12px !important;
}
#view-admin .user-review-mini strong {
  color: #111 !important;
}
#view-admin .user-review-mini p {
  color: #666 !important;
}
#view-admin .user-review-mini-meta {
  color: #999 !important;
}
#view-admin .mini-time {
  color: #bbb !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ陷らｫｴ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｺ辣ｫ豬ｼ谺仙ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ髞倶ｼ�腰螫ｮ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｺ辣ｫ譚育ぎ雖ｹ髢ｿ辭ｻ螯ｭ郤ｰ螟句ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ骼ｭ訷樊蕪髀ゅｆ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ邏?*/
#view-admin .admin-review-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 16px;
}

#view-admin .admin-review-user-box {
  background: #f5f0e8 !important;
  border: 1.5px solid rgba(90, 70, 50, 0.3) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  flex: 0 1 auto;
}

#view-admin .admin-review-user-grid {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 0 !important;
}

#view-admin .admin-review-user-grid span {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid rgba(0, 0, 0, 0.35) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#view-admin .admin-review-user-grid em {
  color: rgba(0, 0, 0, 0.6) !important;
  font-weight: 760 !important;
  font-size: 11px !important;
  margin-bottom: 5px !important;
}

#view-admin .admin-review-user-grid strong {
  color: #000000 !important;
  font-weight: 840 !important;
  font-size: 14px !important;
}

#view-admin .admin-review-model-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 髢ｿ辭ｸ蠖ｮ迺∬ｧ�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ?*/
  justify-content: flex-start;
  gap: 10px;
}

#view-admin .admin-review-model {
  margin-bottom: 0 !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ蟇ｰ訒€謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴雫﨟�ｴｮ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ讀､豢ｪ謨灘ｨｲ繝ｯ邏晉仲ﾑ�ｫｹ蟇ｮ豢ｪ謨馴杉ﾂ､謠ｪ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫ?*/
#view-admin .admin-review-user-box {
  flex: 0 0 62% !important;
  width: 62% !important;
  box-sizing: border-box;
}

#view-admin .admin-review-user-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
}

#view-admin .admin-review-model-box {
  flex: 1 !important;
}

#view-admin .admin-review-model,
#view-admin .admin-review-model .model-pill,
#view-admin .admin-review-model .model-name,
#view-admin .admin-review-model .model-provider {
  color: #000000 !important;
  font-weight: 880 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 16px !important;
  text-shadow: none !important;
}

#view-admin .admin-review-badges {
  color: #000000 !important;
  font-weight: 880 !important;
}

#view-admin .badge.review-status-approved,
#view-admin .badge.review-status-pending,
#view-admin .badge.review-status-rejected {
  color: #000000 !important;
  font-weight: 800 !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髀俄ぎ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謾ｺ髞晏ｿ泌ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴翼霍ｺ蠎憺執辜ｽ謨馴盾繧�ｫｹ螯ｯ��謨馴盾繧�ｫｹ骰昜ｾ€謨馴杉��ｰｨ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｻ赶憺勢蜍ｭ﨣ｮ骼ｷ逍ｯ螢企盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｻ螯ｭ豬ｼ谺仙ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ蟇ｮ豢ｪ謨馴盾繧�ｫｹ髢ｫ豌ｶ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ */
#view-admin .review-model-brand {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

#view-admin .review-model-text {
  color: #000000 !important;
  font-weight: 880 !important;
  font-size: 16px !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #000000 !important;
  background: none !important;
}

/* Removed transparent override for review badges */

#view-admin .badge.review-status-approved {
  background: #10b981 !important; 
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35) !important;
  border: none !important;
}

#view-admin .badge.review-status-pending {
  background: #f59e0b !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35) !important;
  border: none !important;
}

#view-admin .badge.review-status-rejected {
  background: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35) !important;
  border: none !important;
}

#view-admin .admin-review-badges {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨鍋菅讌�ｽｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｻ赶懈揶隗�萩髞帛ｲ�∪骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ蠖ｮ迺��ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ骰丞�謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ蜿城盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ */
#view-admin .admin-review-header-row {
  align-items: stretch !important; /* 蟇ｮ豢ｪ謨馴杉��淘讌よｩ育ｶ�執陷りｴ滄盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｺ邊ｨ貂壽ｶ｢謨鍋ｻ牙踏縲矩執?*/
}

#view-admin .admin-review-model-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* 蟋俶搗髓ｩ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ */
  justify-content: center !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ鬟取ｴｿ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫ?*/
  gap: 8px !important;
}

/* 髢ｿ辭ｻ赶憺来笊ょｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨鍋菅讌�憤骼ｷ蟲ｰ逧ｬ髑ｽ訷樊蕪髀ゅｆ雖ｹ骰帶�ｭ謨馴眠菴�宵骼ｷ辜ｽ謨馴村蛯懣憤骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ蝎ｯ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢� */
#view-admin .review-rating-badge {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 16px !important;
  background: rgba(0, 0, 0, 0.06) !important;
  display: inline-flex !important;
  align-items: center !important;
}

#view-admin .review-rating-badge .stars {
  font-size: 16px !important;
  font-weight: 850 !important;
  letter-spacing: 1.5px !important;
  line-height: 1 !important;
  background: none !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4) !important;
  filter: none !important;
  color: currentColor !important;
}

#view-admin .review-rating-badge.rating-tone-5 .stars { color: #16a34a !important; }
#view-admin .review-rating-badge.rating-tone-4 .stars { color: #84cc16 !important; }
#view-admin .review-rating-badge.rating-tone-3 .stars { color: #eab308 !important; }
#view-admin .review-rating-badge.rating-tone-2 .stars { color: #ea580c !important; }
#view-admin .review-rating-badge.rating-tone-1 .stars { color: #991b1b !important; }

/* 螯ｯ��謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ蟇ｰ訒€謨馴其豌ｳ謠ｪ骼ｷ陷らｫｴ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨?*/
#view-admin .review-model-text {
  font-size: 18px !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ?16px 髢ｿ辭ｸ蟶ｴ譚育ぎ雖ｹ 18px */
}

/* 髢ｿ辭ｺ貎ｾ髀€遑��骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫ?Tabs 髢ｿ辭ｶ闌守ｺｭ髞句ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髑?*/
#view-admin .segmented button[data-status="pending"].active {
  color: #f59e0b !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髑ｰ蠍画蕪髀ゅｆ雖ｹ髢ｿ?髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢� */
}
#view-admin .segmented button[data-status="approved"].active {
  color: #10b981 !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ竄ｬ豌ｶ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢� */
}
#view-admin .segmented button[data-status="rejected"].active {
  color: #ef4444 !important; /* 髢ｿ辭ｺ迯､骼ｷ謗捺享骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢� */
}
#view-admin .segmented button[data-status="all"].active {
  color: #000000 !important; /* 骰上┼謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髑ｹ?*/
}

/* 骰伜ｩ壽蕪髀ゅｆ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ?*/
#view-admin .admin-card,
#view-admin .admin-card.review-card-approved,
#view-admin .admin-card.review-card-pending,
#view-admin .admin-card.review-card-rejected,
#view-admin .admin-action-card,
#view-admin .admin-action-card.action-negative {
  border-left: none !important;
  border-left-width: 0 !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴甑薰｢蟆�執鬟主｢夜盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ豸捺ｴｪ謨馴盾繧�ｫｹ髢ｿ辭ｻ螯ｭ郤ｰ螟句ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴翼霍ｺ蠎憺執逍ｯ螢顔ｻｯ?*/
#view-admin .admin-card,
#view-admin .admin-user-card,
#view-admin .admin-log-card,
#view-admin .dashboard-stats {
  background: #fdfbf7 !important;
  border: 1px solid rgba(90, 70, 50, 0.1) !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨捺ｸ壹Θ蜚ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ骼ｱ莨ｴ謨馴眠逕ｵ縲矩執辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ遖磯淀蟯�蕪?*/
#view-admin textarea,
#view-admin input {
  background: #f5f0e8 !important;
  border: 1.5px solid rgba(90, 70, 50, 0.3) !important;
  border-radius: 12px !important;
  color: #333 !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}

#view-admin textarea:focus,
#view-admin input:focus {
  border-color: #ff9800 !important;
  background: #fdfbf7 !important;
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1) !important;
  outline: none !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謖ｳ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢企盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ */
#view-admin .admin-actions button[data-admin-action="approve"] {
  background: #10b981 !important; /* 髢ｫ豌ｶ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢?*/
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
}

#view-admin .admin-actions button[data-admin-action="delete"] {
  background: #ef4444 !important; /* 骰堤棺謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ蟇ｮ豢ｪ謨馴盾繧�ｫｹ髑ｹ?*/
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
  font-weight: 800 !important;
}

#view-admin .admin-actions button[data-admin-action="reject"] {
  background: #f3f4f6 !important; /* 髢ｿ辭ｸ貔�疾蜻ｮ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴酷蝙ｮ逵ｳ譚育ぎ雖ｹ迹穂ｾ€謨馴室繝ｦ諡晞�?*/
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  box-shadow: none !important;
}

/* Fix Light Strip */
#view-admin .admin-review-card::before,
#view-admin .admin-card::before,
#view-admin .admin-action-card::before {
  display: none !important;
}

/* Fix Base Panel and Cards Backgrounds */
#view-admin,
#view-admin.view-panel {
  background-color: #f5f0e8 !important;
}

#view-admin .admin-card,
#view-admin .admin-user-card,
#view-admin .admin-log-card,
#view-admin .dashboard-stats {
  background-color: #fdfbf7 !important;
  border: 1px solid rgba(90, 70, 50, 0.15) !important;
}

#view-admin textarea,
#view-admin input,
#view-admin .input {
  background-color: #f5f0e8 !important;
  border: 1.5px solid rgba(90, 70, 50, 0.3) !important;
  border-radius: 12px !important;
  color: #333 !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}

#view-admin textarea:focus,
#view-admin input:focus,
#view-admin .input:focus {
  border-color: #ff9800 !important;
  background-color: #fdfbf7 !important;
  box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1) !important;
  outline: none !important;
}

/* Fix Action Buttons */
#view-admin .card-actions button[data-admin-action="approve"],
#view-admin .card-actions button[data-review-action="approve"] {
  background: #10b981 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
}

#view-admin .card-actions button[data-admin-action="delete"],
#view-admin .card-actions button[data-review-action="delete"] {
  background: #ef4444 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
  font-weight: 800 !important;
}

#view-admin .card-actions button[data-admin-action="reject"],
#view-admin .card-actions button[data-review-action="reject"] {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  box-shadow: none !important;
}

/* Fix Button Specificity */
#view-admin .card-actions .small-button[data-admin-action="approve"],
#view-admin .card-actions .small-button[data-review-action="approve"] {
  background: #10b981 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
}
#view-admin .card-actions .small-button[data-admin-action="approve"]:hover,
#view-admin .card-actions .small-button[data-review-action="approve"]:hover {
  background: #059669 !important;
}

#view-admin .card-actions .small-button[data-admin-action="delete"],
#view-admin .card-actions .small-button[data-review-action="delete"],
#view-admin .card-actions .small-button.danger {
  background: #ef4444 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3) !important;
  font-weight: 800 !important;
}
#view-admin .card-actions .small-button[data-admin-action="delete"]:hover,
#view-admin .card-actions .small-button[data-review-action="delete"]:hover,
#view-admin .card-actions .small-button.danger:hover {
  background: #dc2626 !important;
}

#view-admin .card-actions .small-button[data-admin-action="reject"],
#view-admin .card-actions .small-button[data-review-action="reject"] {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
  box-shadow: none !important;
}
#view-admin .card-actions .small-button[data-admin-action="reject"]:hover,
#view-admin .card-actions .small-button[data-review-action="reject"]:hover {
  background: #e5e7eb !important;
}

/* Fix Islands Layout */
#view-admin,
#view-admin.view-panel {
  background: transparent !important;
  padding: 0 !important;
  margin-top: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

#admin-dashboard {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
}

#view-admin .panel,
#view-admin section.panel,
#view-admin div.panel {
  background: #f5f0e8 !important;
  border-radius: 20px !important;
  padding: 24px !important;
  margin-bottom: 0 !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

#view-admin .admin-card,
#view-admin .admin-user-card,
#view-admin .admin-log-card,
#view-admin .dashboard-stats {
  background: #fdfbf7 !important;
  border: 1px solid rgba(90, 70, 50, 0.15) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
}

/* 1. 髢ｿ辭ｶ闌朱軸螫ｫ雖ｹ髢ｿ辭ｸ隗ｦ髞帛�溷ｫ�疾蜻ｮ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴勢蝸ｭ邯�執辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髑ｹ譟･謨馴盾繧�ｫ?placeholder 髢ｿ辭ｺ貎ｾ髣遺浮雖ｹ豸捺ｴｪ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢� */
#view-admin textarea.reject-reason,
#view-admin textarea.input {
  color: #3e3227 !important;
  font-weight: 500 !important;
  font-size: 15px !important;
}

#view-admin textarea.reject-reason::placeholder,
#view-admin textarea.input::placeholder {
  color: rgba(90, 70, 50, 0.55) !important;
  font-weight: 400 !important;
}

/* 2. 螯ｯ��謨馴眠蝙ｫ蜚ｻ骼ｷ逍ｯ逖鷹盟辭ｸ譫ｻ骼ｷ蟲ｰ逧ｬ髢ｿ辭ｸ譫ｻ骼ｷ鬟主｢也早蜻ｴ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼?*/
#view-admin .review-model-brand {
  background: #ffffff !important;
  border: 1px solid rgba(90, 70, 50, 0.2) !important;
  border-radius: 12px !important;
  padding: 4px 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  display: inline-flex !important;
  align-items: center !important;
}

#view-admin .review-model-text {
  font-size: 15px !important;
  font-weight: 800 !important;
}

/* 3. 髢ｿ辭ｷ蠖ｨ郤ｭ髞句ｫｹ髢ｿ辭ｺ蜊ｳ鬘扇п雖ｹ髢ｿ辭ｻ譽�縛蝣･謨馴村蛯晟∪骼ｷ辜ｽ謨馴盾繧�ｫｹ髏怜岻謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髑ｹ譟･謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ蟾ｱ髢ｿ辭ｺ﨟ｪ髀ゅｆ雖ｹ髢ｿ?*/
#view-admin .admin-card,
#view-admin .admin-user-card,
#view-admin .admin-log-card,
#view-admin .dashboard-stats {
  background-color: #ffffff !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴翼蜑�憤骼ｷ逍ｯ螢企盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢企盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｺ谿暮軸螫ｫ雖?*/
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), 0 2px 10px rgba(0, 0, 0, 0.04) !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ蟾ｱ髢ｿ辭ｸ蠖ｮ郤ｰ螟句ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴著螟玖ｯ樣盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ隍?*/
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ螯ｯ��謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨鍋菅讌�憤骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ逧ｬ髢ｿ辭ｸ譫ｻ骼ｷ鬟主｢� */
#view-admin .review-model-brand {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 1. 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴悉蠇｡訒憺執辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ﨤企盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髑ｹ譟･謨馴盾繧�ｫｹ髏怜岻謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ蠖ｮ豬ｼ谺仙ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨�?*/
#view-admin .admin-review-model-box {
  background: #f5f0e8 !important;
  border: 1.5px solid rgba(90, 70, 50, 0.3) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  box-sizing: border-box;
}

/* 2. 髢ｿ辭ｸ貔�疾蜻ｮ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｶ闌朱軸螫ｫ雖ｹ髢ｿ辭ｸ隗ｦ髞帶ｰｬ蟋樊揶轤ｬ雖ｹ髢ｿ辭ｻ赶憺甑蜃､邯�執蟲ｰ謔馴盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢� */
#view-admin textarea.reject-reason,
#view-admin textarea.input,
#view-admin input.input {
  font-size: 17px !important;
  color: #3e3227 !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

#view-admin textarea.reject-reason::placeholder,
#view-admin textarea.input::placeholder,
#view-admin input.input::placeholder {
  font-size: 17px !important;
  color: rgba(90, 70, 50, 0.55) !important;
  font-weight: 400 !important;
}

/* 3. 髢ｿ辭ｷ蠖ｨ郤ｭ髞句ｫｹ髢ｿ辭ｺ蜊ｳ鬘扇п雖ｹ迹∝其謨馴盾繧�ｫｹ豸捺ｴｪ謨馴盾繧�ｫｹ髢ｿ辭ｻ螯ｭ郤ｰ螟句ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ﨤企盟辭ｺ蜊ｳ?*/
#view-admin .admin-card,
#view-admin .admin-user-card,
#view-admin .admin-log-card,
#view-admin .dashboard-stats {
  background-color: #fdfbf7 !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ莨秘盟辭ｸ譫ｻ骼ｷ逍ｯ﨤企盟辭ｺ蜊?*/
  border: 1px solid rgba(90, 70, 50, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ螂?*/
}

/* 1. 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢企盟辭ｺﾐｦ逕ｯ裵ｽ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ逖ｶ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨?(#5c4332) */
#view-admin textarea.reject-reason,
#view-admin textarea.input,
#view-admin input.input {
  color: #5c4332 !important;
  font-weight: 500 !important;
  font-size: 17px !important;
}

#view-admin textarea.reject-reason::placeholder,
#view-admin textarea.input::placeholder,
#view-admin input.input::placeholder {
  color: #5c4332 !important;
  opacity: 0.6 !important;
  font-weight: 400 !important;
  font-size: 17px !important;
}

/* 2. 骰伜ｩ壽蕪髀ゅｆ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ鬟主｢夜盟辭ｸ譫ｻ骼ｷ蟲ｰ逧ｬ髢ｿ辭ｸ譫ｻ骼ｷ鬟主｢夜盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ迺ｧ讖€謨馴盾繧�ｫｹ髏､譟･謨馴盾繧�ｫｹ髢ｿ辭ｻ螽�｡丞ｺ｢雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨鍋ｻ誹�縲矩執辜ｽ謨馴其豌ｬ蠎憺執?*/
#view-admin .admin-review-user-grid span,
#view-admin .admin-user-info-grid span {
  background: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
  box-shadow: none !important;
}

#view-admin .admin-review-user-grid em,
#view-admin .admin-user-info-grid em {
  font-size: 13px !important;
  color: rgba(92, 67, 50, 0.65) !important;
  margin-bottom: 6px !important;
  text-transform: uppercase !important; /* 髑ｻ驕肴蕪髀ゅｆ雖ｹID髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴勢蝸帷尚郤ｭ髞句ｫｹ */
}

#view-admin .admin-review-user-grid strong,
#view-admin .admin-user-info-grid strong {
  font-size: 16px !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

/* 1. 髢ｿ辭ｻ赶憺来笊ょｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｻ赶憺甑蜃､邯�執辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ逧ｨ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨�?placeholder 髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢� */
#view-admin textarea.reject-reason,
#view-admin textarea.input,
#view-admin input.input {
  font-size: 15px !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ逧ｬ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｼ鞫ｪ譚育ぎ雖ｹ轣?*/
  color: #3a2b22 !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ鬟取ｾ鈴盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｺ蜊?*/
  font-weight: 500 !important;
}

#view-admin textarea.reject-reason::placeholder,
#view-admin textarea.input::placeholder,
#view-admin input.input::placeholder {
  font-size: 15px !important;
  color: #5c4332 !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢企盟辭ｸ譫ｻ骼ｷ辜ｽ謨鍋ｻ帛ｬｶ邏晞盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｫ蠢帶蕪髀ゅｆ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ窶憺盟辭ｸ譫ｻ骼?*/
  opacity: 1 !important; /* 蟇ｮ豢ｪ謨馴杉ﾂ､訒憺執辜ｽ竄ｬ蠢帶蕪髀ゅｆ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ骰礼干邯�盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髑ｹ譟･謨馴盾繧�ｫｹ轢?*/
  font-weight: 400 !important;
}

/* 2. 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ訒ｯ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ體軟≠蛛咎盟辭ｻ赶憺来笊ょｫｹ髢ｿ辭ｺ﨟ｪ郤ｰ螟句ｫｹ郛や�?*/
#view-admin .admin-review-user-grid {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

#view-admin .admin-review-user-grid span {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  padding: 4px 16px !important;
  text-align: left !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ陷らｫｴ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ蜴馴盟辭ｸ蝓�獄邃�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髑ｰ蜍ｵ蜆ｯ驫介�雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨鍋ｻ誹�諡晞�?*/
#view-admin .admin-review-user-grid span:first-child {
  padding-left: 0 !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ骼ｸ蝗ｬ謨馴盾繧�ｫｹ骼ｾ謳∵蕪髀ゅｆ雖ｹ轣樊姶謨鍋ｻ牙踏﨡ｲ骼ｷ辜ｽ謨捺ｸ壹Η貉ｴ骰代ｆ雖ｹ髢ｿ辭ｸ蟶ｴ郤ｰ螟句ｫｹ郛やぎ髢ｿ辭ｸ譫ｻ骼?*/
#view-admin .admin-review-user-grid span:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 15% !important;
  height: 70% !important;
  width: 1px !important;
  background: linear-gradient(to bottom, rgba(90,70,50,0), rgba(90,70,50,0.2), rgba(90,70,50,0)) !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴明迚域椽骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ髞狗･ｬ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢企盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ郛∝李謨馴盾繧�ｫｹ */
}

/* 1. 骰呎�ｭ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ鬟主｢夜盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｷ蠖ｨ隍晞執辜ｽ謨?*/
#view-admin .admin-card:hover,
#view-admin .admin-user-card:hover,
#view-admin .admin-log-card:hover {
  transform: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important; /* 郛∵聴謨鍋菅讌∵享骼ｷ髞銀ぎ菴ｹ讀る盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴室繝･蠎憺執辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢?*/
}

/* 2. 髢ｿ辭ｸ譫ｻ骼ｷ鬟主ｧｸ骼ｬ萓€謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴政薰｡邏ｮ骼ｷ髞駒抬髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨?髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ邯埼盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ鬟主ｧｸ骼ｬ菴ｸ蟠ｰ豬｣蠍画蕪扈誹�螳ｳ譚育ぎ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｻ赶憺｡披斧邏ｮ骼ｷ辜ｽ謨馴悉蠇晉ｴｮ骼ｷ辜ｽ謨�?*/
#view-admin .empty-state {
  min-height: 120px !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ蟶ｫ髢ｿ辭ｼ繧ｺ郤ｰ螟句ｫｹ 240px 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫ?*/
  padding: 40px 0 !important;
}

/* 1. 髢ｿ辭ｺﾐｦ骼ｼ﨡€蜿暮盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｻ邱晉鎗謗�ｧ�執蟲ｰ蝓幃盟辭ｼ鞫ｪ驤ｽ蜻ｮ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謖ｳ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ邏｡ */
#view-admin .panel-heading button {
  color: #1a1a1a !important;
  border: 1px solid rgba(90, 70, 50, 0.35) !important;
  background: transparent !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

#view-admin .panel-heading button:hover {
  color: #000000 !important;
  border-color: rgba(90, 70, 50, 0.5) !important;
  background: rgba(0, 0, 0, 0.04) !important;
}

/* 2. 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｺ辣ｫ豬ｼ谺仙ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ蟋贋ｼｴ謨鍋鎗謗俸�骼ｷ髞駒亠髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｺ雖幃｡貞ｩ�ｫｹ髢ｿ?user-review-mini髢ｿ辭ｸ譫ｻ骼ｷ?*/
#view-admin .user-review-mini {
  background: #f5f0e8 !important; /* 豬｣蝮玲蕪髀ゅｆ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ髞尭�盟辭ｸ譫ｻ骼ｷ陷らｫｴ髢ｿ辭ｼ鞫ｪ郤ｰ螟句ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢企盟辭ｸ譫ｻ骼ｷ鬟主｢夜盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫ?*/
  border: 1.5px solid rgba(90, 70, 50, 0.3) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｺ雖帷ｻ幄ｧ�ｫｹ螳灘ｲ�蕪髣�ｷｺ蟆�執鬟主｢夜腰辭ｼ謨馴甑薰､﨣ｮ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢企据闊ｵ竄ｬ萓€謨馴盾繧�ｫｹ髢?*/
#view-admin .user-review-mini::before {
  display: none !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ螳灘ｲ�蕪髣�ｷｺ蟆�執鬟主｢夜盟辭ｻ螯ｭ迺��ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢� */
#view-admin .user-review-mini strong {
  color: #000000 !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}

#view-admin .user-review-mini p {
  color: #3e3227 !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ骰壼ｲ�蕪髀ゅｆ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髑?*/
  font-size: 15px !important;
  line-height: 1.5 !important;
}

#view-admin .user-review-mini-meta,
#view-admin .user-review-mini-meta span {
  color: rgba(92, 67, 50, 0.7) !important;
}

/* 1. 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ髓ｩ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴翼霍ｺ蝓｡鬘代┤縲矩執逍ｯ邱ｩ髑ｿ蠢墓ｫ｢骼ｷ陷らｮ樣盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｼ繧ｺ髞泌�雖ｹ髢ｿ辭ｷ蠖ｨ驤ｮﾂ､訒憺執辜ｽ謨?髢ｿ辭ｷ蠖ｨ扈碁ｸｿ遶滄獄邃�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ鬟取沍髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ骰壽資諞ｭ髢ｿ辭ｺ逾ｵI髢ｿ辭ｸ譫ｻ骼ｷ?*/
#view-admin .user-mute-pill {
  background: transparent !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: none !important;
}

#view-admin .user-mute-pill::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
}

#view-admin .user-mute-pill.is-clear {
  color: #16a34a !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髑ｹ?*/
  border: 1px solid rgba(22, 163, 74, 0.3) !important;
}
#view-admin .user-mute-pill.is-clear::before {
  background-color: #16a34a !important;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2) !important;
}

#view-admin .user-mute-pill.is-muted {
  color: #dc2626 !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ鬟弱★髢ｿ辭ｸ譫ｻ骼ｷ?*/
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
}
#view-admin .user-mute-pill.is-muted::before {
  background-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2) !important;
}

/* 2. 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｺﾐｦ逕ｯ裵ｽ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ逖ｶ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨�?髢ｿ辭ｸ蠖ｮ髏ｨ蜍ｭ﨣ｮ骼ｷ辜ｽ謨馴盾繧�ｫｹ-骼ｸ蝗ｬ謨馴畝繝･蟠ｱ髏怜岻謨馴盾繧�ｫｹ蟇?*/
#view-admin .user-review-mini .review-metric-pill {
  border: 1px solid rgba(0, 0, 0, 0.18) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  padding: 0 10px !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 4px !important;
}

/* 骼ｸ蝗ｬ謨馴盾繧�ｫｹ骰灘ｶ�ｴ鷹盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ */
#view-admin .user-review-mini .review-metric-pill > span {
  color: #1a1a1a !important;
  font-weight: 700 !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴政薰･謠ｪ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ */
#view-admin .user-review-mini .review-metric-pill.metric-usage strong {
  color: #1a1a1a !important;
  font-weight: 850 !important;
  margin-left: 4px !important;
}

/* 髢ｿ辭ｺ蜊ｳ髏ｧ蜻雁ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｻ赶懃ｼ��┫骼ｷ辜ｽ謨馴盾繧�ｫｹ豸捺捗謨馴盾繧�ｫｹ髏倩扱竄ｬ萓€謨馴盾繧�ｫｹ髑?*/
#view-admin .user-review-mini .review-metric-pill.metric-success strong {
  color: currentColor !important;
  font-weight: 850 !important;
  margin-left: 4px !important;
}

/* 髢ｿ辭ｺ蜊ｳ髏ｧ蜻雁ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ鬟主ｧｸ骼ｬ萓€謨馴盾繧�ｫｹ謳ｴ譌域蕪髀ゅｆ雖ｹ髑ｹ譟･謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ骰上┤蟋ｸ骼ｬ萓€謨馴盾繧�ｫｹ */
#view-admin .user-review-mini .review-metric-pill.metric-success.status-idle { color: #6b7280 !important; }
#view-admin .user-review-mini .review-metric-pill.metric-success.status-excellent { color: #16a34a !important; }
#view-admin .user-review-mini .review-metric-pill.metric-success.status-good { color: #65a30d !important; }
#view-admin .user-review-mini .review-metric-pill.metric-success.status-fair { color: #d97706 !important; }
#view-admin .user-review-mini .review-metric-pill.metric-success.status-poor { color: #ea580c !important; }
#view-admin .user-review-mini .review-metric-pill.metric-success.status-garbage { color: #dc2626 !important; }
#view-admin .user-review-mini .review-metric-pill.metric-success.status-critical { color: #b91c1c !important; }

/* 1. 髢ｿ辭ｺ雖帷ｻ幄ｧ�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴勢蝸伜判骼ｷ鬟腫┨髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ逧ｬ髢ｿ辭ｸ證€郤ｰ螟句ｫ?轣丞ｿ帶蕪髀ゅｆ雖ｹ骼ｮ譬ｴ蜑ｨ骼ｷ辜ｽ謨馴勢蝸ｩ蜿城執辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫ?*/
#view-admin .user-mute-pill::before {
  display: none !important;
  content: none !important;
}

#view-admin .user-mute-pill {
  /* 骰伜ｩ壽蕪髀ゅｆ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ陷りｴ滄恨蝸帶蕪髀ゅｆ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ骼ｷ繝ｩ謨�?gap */
  gap: 0 !important;
}

/* 2. 髢ｿ辭ｺ貎ｾ髣遺浮雖ｹ骼ｸ蝗ｬ謨馴畝繝･蟠ｱ髏怜岻謨馴村蛯晟∪骼?span 髢ｿ辭ｸ譫ｻ骼ｷ?strong 髢ｿ辭ｶ闌取揶轤ｬ雖ｹ髏ｩ謦ｮ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼?
   髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ豸捺ｴｪ謨馴盾繧�ｫｹ髢?.user-review-mini strong 蟇ｮ豢ｪ謨馴甑薰ｦ貎ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ?display: block 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼?margin 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴明謇ｮ谿第揶轤ｬ雖ｹ豬｣蠍画蕪髀ゅｆ雖ｹ */
#view-admin .user-review-mini .review-metric-pill > span,
#view-admin .user-review-mini .review-metric-pill > strong {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important; /* 蟇ｮ豢ｪ謨馴杉窶ｳ蜈ｱ郤ｰ螟句ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ諞ｯ骰滓ｮｿ蜑ｨ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨?margin-top 髢ｿ辭ｸ譫ｻ骼ｷ?margin-bottom */
  padding: 0 !important;
  line-height: 1 !important; /* 豬｣蝮玲蕪髀ゅｆ雖ｹ郛∫�遶ｴ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴甑薰ｦ貎ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ轢ｹ轤ｺ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ鬪樊歓謨馴盾繧�ｫ?*/
  vertical-align: middle !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴村蛯壼�郤ｰ螟句ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼?margin髢ｿ辭ｸ譫ｻ骼ｷ陷ょｨ�盟辭ｸ譫ｻ骼ｷ?gap 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ骰帶来謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ髞句ｯ夐盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ逑帝ｹ�蕪髀ゅｆ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨?*/
#view-admin .user-review-mini .review-metric-pill > strong {
  margin-left: 4px !important;
}

/* 1. 髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ莠暮盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ螯ｯ��謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨鍋菅讌狗ｶ�執辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｷ蟋ｭ迺∬ｧ�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼?*/
#view-admin .user-review-mini {
  padding: 10px 18px 14px 18px !important;
}

/* 2. 螯ｯ��謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨鍋菅讌狗ｶ�執蟲ｰ縺秘盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴眠蝙ｫ蜚ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ豸泌ｬｮ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨鍋菅讌�ｽｻ骼ｷ辜ｽ謨鍋ｻ誹�邯�執辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨�?*/
#view-admin .user-review-mini-top {
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(90, 70, 50, 0.12) !important;
  margin-bottom: 10px !important;
}

/* 3. 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨鍋菅讌狗ｶ�執辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ蠖ｮ髏ｨ蜍ｭ﨣ｮ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｶ闌守ｻ幄ｧ�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髑ｹ譟･謨馴盾繧�ｫｹ骰伜ｩ壽蕪髀ゅｆ雖ｹ讎帶ｩ€謨捺揶蜀ｪ谿醍秩隗�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨鍋ｻ誹�諡晞�?*/
#view-admin .user-review-mini > strong {
  color: #3e3227 !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髑ｹ?*/
  margin-top: 0 !important; 
}

/* 4. 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴明迚域椽骼ｷ蟲ｰ蝙ｹ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ豬倬盟辭ｸ譫ｻ骼ｷ髞区ｯ企盟辭ｺ蜊ｳ鬘扇п雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨捺撼谺ｾ貔�執辜ｽ謨捺ｸ壹Θ莨区ｵｼ谺仙ｫｹ骼ｰ譖ｨ蛛馴執辜ｽ謨捺･苓ｽｰ邏ｮ骼ｷ辜ｽ謨馴盾繧�ｫｹ骼ｸ豌ｶ謨馴杉笘�鴎骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ?*/
#view-admin .user-review-mini .small-button.danger {
  color: #dc2626 !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髀�〝謨鍋ｼ�?*/
  border: 1px solid rgba(220, 38, 38, 0.45) !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ骰帶�ｭ謨�?*/
  background: rgba(220, 38, 38, 0.06) !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ蟇ｰ訒€謨馴盾繧�ｫｹ髢ｿ辭ｶ闌朱椙蟄伜ｫｹ髑ｹ譟･謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ?*/
}

#view-admin .user-review-mini .small-button.danger:hover {
  color: #b91c1c !important;
  border-color: rgba(185, 28, 28, 0.6) !important;
  background: rgba(220, 38, 38, 0.12) !important;
}

/* 1. 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ骰伜ｩ壽蕪髀ゅｆ雖ｹ髢ｿ辭ｺ迯､骰問с雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ逍�盟辭ｺ﨟ｪ髞晏ｿ泌ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨鍋菅讌�ｽｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髏怜岻謨馴村蛯晉ｫ滄疾蜻ｮ雖?*/
#view-admin .admin-action-card {
  border-left: 1px solid rgba(0, 0, 0, 0.06) !important; /* 郛∫�遶ｴ髢ｿ辭ｸ譫ｻ骼ｷ鬟主｢夜盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴初謇ｮ﨣ｮ骼ｷ鬟守ｲ城盟辭ｺ﨟ｪ骰問с雖?*/
  padding: 18px 22px !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｻ螯ｭ譚郁ｧ�享骼ｷ辜ｽ謨馴政薰､蟆ｨ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｷ蠖ｨ髣遺浮雖ｹ髢ｿ辭ｸ譫ｻ骼?*/
  position: relative !important;
  overflow: hidden !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ髞駒�髢ｿ辭ｻ螯ｭ迺��ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴勢蝸夭∪骼ｷ辜ｽ謨�?*/
}

/* 2. 豸捺ｴｪ謨馴盾繧�ｫｹ髢ｫ豌ｶ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴眠遒俶ｧ�執辜ｽ謨馴初迚域享骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｶ闌朱獄邃�ｫｹ髏怜岻謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ諞ｭ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ逧ｨ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨捺撼谺ｾ貔�執辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ鬟守ｴ� */
#view-admin .admin-action-card.action-positive {
  background: linear-gradient(180deg, rgba(22, 163, 74, 0.05) 0%, transparent 60%), #fdfbf7 !important;
}

#view-admin .admin-action-card.action-negative {
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.05) 0%, transparent 60%), #fdfbf7 !important;
}

/* 3. 髢ｿ辭ｻ螯ｭ骼ｲ螫ｫ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ蠅�髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｻ訒�驤･貊�ｹｭ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴勢蝸乗ｧ�執蟲ｰ謔馴盟辭ｸ譫ｻ骼ｷ髞区ｹｪ髢ｿ辭ｸ譫ｻ骼ｷ髞狗ｶ夜盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｺ谿慕仲ﾑ�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨捺撼谺ｾ竄ｬ霍ｺ蝓｡鬘貞ｩ�ｫｹ髢ｿ辭ｺ邊?*/
#view-admin .admin-action-card.action-positive .admin-action-title::before {
  content: "笨? !important;
  display: inline-block !important;
  font-size: 14px !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
  margin-bottom: 2px !important;
}

#view-admin .admin-action-card.action-negative .admin-action-title::before {
  content: "笶? !important;
  display: inline-block !important;
  font-size: 14px !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
  margin-bottom: 2px !important;
}

/* 4. 髢ｿ辭ｻ蜑ｼ豬ｼ谺仙ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢企盟辭ｼ蜿ｺ轣槫�鬪?*/
#view-admin .admin-action-title {
  color: #000000 !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  margin-bottom: 10px !important;
}

#view-admin .admin-action-card p {
  color: #3e3227 !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髑ｹ譟･謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼?*/
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  margin-bottom: 14px !important;
}

#view-admin .admin-action-meta {
  color: rgba(92, 67, 50, 0.55) !important; /* 螽ｴ蜻ｴ謨馴盾繧�ｫｹ髑ｹ譟･謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ骼ｭ?*/
  font-size: 12.5px !important;
}

/* 1. 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ諞ｱ髢ｿ辭ｶ闌朱椙蟄伜ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢企盟辭ｸ譫ｻ骼ｷ陷らｮ｣骰灘ｶ画蕪髀ゅｆ雖ｹ髢ｿ辭ｸ譫ｻ骼ｷ陷りｴ滄盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫ?.action-positive 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ骼ｷ繝ｩ謨馴甑薰ｦ貎ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨捺･苓匯縲矩執辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髑ｹ譟･謨馴盾繧�ｫｹ border-left-color髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ蟾ｱ髢ｿ辭ｸ譫ｻ骼ｷ鬟守ｲｺ豸凪ぎ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴初諡檎ｫ滄獄邃�ｫ?*/
#view-admin .admin-action-card,
#view-admin .admin-action-card.action-positive,
#view-admin .admin-action-card.action-negative {
  border: 1px solid rgba(90, 70, 50, 0.15) !important;
  border-left-color: rgba(90, 70, 50, 0.15) !important; /* 蟇ｮ豢ｪ謨馴杉��貎ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ豸泌ｬｪ蠅�髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ?髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢?*/
  border-left-width: 1px !important;
}

/* 2. 髢ｿ辭ｸ蠖ｮ迺��ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｼ鞫ｪ郤ｭ髞句ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ骰慕�鞫暮盟辭ｸ蠖ｮ豬ｼ谺仙ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ?*/
#view-admin .admin-action-card p {
  font-weight: 500 !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ?400 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼?500 髢ｿ辭ｷ蠖ｨ郤ｰ螟句ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫ?*/
}

/* 3. 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ螽鯉ｿ�謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ蟋贋ｼｴ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴眠髱帛ｺ憺執辜ｽ謨鍋ｼよ政蛛馴執辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｼ繧ｺ郤ｭ髞句ｫｹ髢ｿ辭ｸ譫ｻ骼?*/
#view-admin .user-review-mini .small-button.danger {
  color: #991b1b !important; /* 髢ｿ辭ｺ逑秘醇讌�蕪髀ゅｆ雖ｹ髑ｹ?*/
  border: 1px solid rgba(153, 27, 27, 0.6) !important; /* 髢ｿ辭ｸ譫ｻ骼ｷ逍ｯ螢企盟辭ｺ﨟ｪ骰問с雖ｹ */
  background: rgba(153, 27, 27, 0.08) !important;
}

#view-admin .user-review-mini .small-button.danger svg {
  color: #991b1b !important;
}

#view-admin .user-review-mini .small-button.danger:hover {
  color: #7f1d1d !important;
  border-color: rgba(127, 29, 29, 0.8) !important;
  background: rgba(153, 27, 27, 0.12) !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ陷らｫｴ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ蠖ｮ迺��ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｼ鞫ｪ郤ｭ髞句ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ鬟主｢ｶ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ蟶ｴ扈ｮ讌�憤骼?700 */
#view-admin .admin-action-card p {
  font-weight: 700 !important; 
}

/* 1. 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴悉蠇｡訒憺執辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴明謇ｮ縲矩執辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ鬟守ｴｭ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴悉蠇晉ｴｮ骼ｷ髞句€ｴ鬘貞ｩ�ｫｹ髢?700 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫ?600髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ蠖�盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｺ雖幃盾繧�ｫｹ髢ｿ?*/
#view-admin .admin-action-card p {
  font-weight: 600 !important; 
}

/* 2. 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ﨣ｲ濶碁村薰ｦ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ髞玖今髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｺ谿暮｡薙┬雖ｹ譽ｰ蠍∵反髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ扈€豢ｪ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ莠暮盟辭ｸ蟶ｴ扈ｮ讌狗ｶ�執辜ｽ謨馴盾繧�ｫ?500 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼?600 */
#view-admin textarea.reject-reason,
#view-admin textarea.input,
#view-admin input.input,
#view-admin input.mute-reason {
  font-weight: 600 !important;
}

#view-admin textarea.reject-reason::placeholder,
#view-admin textarea.input::placeholder,
#view-admin input.input::placeholder,
#view-admin input.mute-reason::placeholder {
  font-weight: 600 !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫ?600 髢ｿ辭ｶ闌取揶轤ｬ雖ｹ髢ｿ辭ｻ譽�縛蟯�蕪逅帶･�ｽｻ骼ｷ辜ｽ謨馴盾繧�ｫ?500髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ豬｣蝮玲蕪髀ゅｆ雖?text-shadow 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｷ蠖ｨ驤ｽ蜻ｮ雖ｹ髢ｿ辭ｺ貎ｾ郤ｭ髞句ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴村蛯玲ｧ�執辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼ｷ蟲ｰ雖咎盟辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｻ螽�｡ｫ裵ｽ雖ｹ骰晉�謨�?*/
#view-admin textarea.reject-reason,
#view-admin textarea.input,
#view-admin input.input,
#view-admin input.mute-reason {
  font-weight: 500 !important;
  text-shadow: 0 0 0.3px currentColor !important;
}

#view-admin textarea.reject-reason::placeholder,
#view-admin textarea.input::placeholder,
#view-admin input.input::placeholder,
#view-admin input.mute-reason::placeholder {
  font-weight: 500 !important;
  text-shadow: 0 0 0.3px currentColor !important;
}

/* 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫ?text-shadow髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ髢ｿ辭ｼ讓�鹿繹､貎ｻ骼ｷ辜ｽ謨馴盾繧�ｫｹ骰倡�謨馴盾繧�ｫｹ髢ｿ辭ｸ譫ｻ骼?500 髢ｿ辭ｸ譫ｻ骼ｷ辜ｽ謨馴盾繧�ｫ?*/
#view-admin textarea.reject-reason,
#view-admin textarea.input,
#view-admin input.input,
#view-admin input.mute-reason {
  font-weight: 500 !important;
  text-shadow: none !important;
}

#view-admin textarea.reject-reason::placeholder,
#view-admin textarea.input::placeholder,
#view-admin input.input::placeholder,
#view-admin input.mute-reason::placeholder {
  font-weight: 500 !important;
  text-shadow: none !important;
}

/* 髢ｻ謦怜峡蜆秘冥諢ｮ赶企凄蠎｣竄ｬ蜈牙往髏玲歓諠�黒薰｢轢ｻ髢ｸ謦ｹ蟆咎墾蠎ｨ蟠ｪ轣樒阜﨟ｴ髏冗か蛛灘ｨｴ迢�ｵｿ髏匁ｻ�ｴ貞ｨ��證城婿謦ｮ﨤馴｡捺吹謔ｶ骰｡豸呎｡ｨ髢ｺ?*/
#view-admin .admin-user-info-grid {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

#view-admin .admin-user-info-grid span {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  padding: 4px 16px !important;
  text-align: left !important;
}

#view-admin .admin-user-info-grid span:first-child {
  padding-left: 0 !important;
}

#view-admin .admin-user-info-grid span:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 15% !important;
  height: 70% !important;
  width: 1px !important;
  background: linear-gradient(to bottom, rgba(90,70,50,0), rgba(90,70,50,0.2), rgba(90,70,50,0)) !important;
}

/* 螽｣蝗ｶ蝟夜｡ｦ譟･蝙ｾ蟀雁俗莉ｯ髏�?1 髢ｺ螟�ｪｧ驤ｧ﨡∫ｹ�ｮ戊軒謔ｰ轣樒ｭ句圖髢ｼ蟲ｰ訒ｭ螽域姶蠑ｫ郛育棺蝴矩椋讌狗ｴ墓ｾｧ譬ｨ郞�ｦｯ蜩��髏樊ｰｼ蛛�執辜伜ｾ�､榊ｯｮ髞狗ｨ画ｿ�菴ｺ迹馴浴謖守側郛榊其譴ｻ鬘補ぎ鬘｣?*/
#view-admin .admin-user-info-grid strong {
  white-space: nowrap !important;
  word-break: keep-all !important;
}

/* 螽｣蝗ｶ蝟夜｡ｦ譟･謔ｽ骰呎ｨｼ濶ｾ髣�ぅ蟯ｸ骰?span 髏惹ｽ�｣磯墾ﾑ�ｴ倬惚譚大冠髢ｺ菴ｹ貔倬寸?span 螽第翌蝟暮｡ｫ�ょｴ｣螯ｯ隸ｲ轣?flex column 髢ｻ繖･雖ｰ螯ｫ闊ｵ��?*/
#view-admin .admin-user-info-grid span {
  /* 豼樊諜諛伜ｨ�ｺ｢遞顔€｣﨟�妹髣∵月迹ｨ鬘輔ｉ諠�黒訷怜％蟋倩ｷｺ蟶ｳ髏冗し蛛樣逢蘒ｬ蠍�､�ｩｵ窶ｳ蛟ｹ髏丞､仙ｼｰ鬘匁ｰｬ鄧｣髢ｸ�ｺ蜉城｡｢謌ｦ蟠倬惚裵ｼ轣鈴娘蜀ｪ蟋ｵ郤ｭ闊ｵ貎ｪ郛∵ｨｻ鄧憺婿菫ｱ蛟晞準繹､謨咲◇轤ｬ莉伜ｩｵ蛯咏ｲ咎坤謳∝ｴ伜ｨ�ｬ醍､� */
}

/* 螽ｴ迥ｲ諛朱｡俸〝諠�€帶ｨｺ螟埼錘豸吝兜骰俶銚讒?span 髢ｻ繹｢蝟宣遵繝ｧ謨ｮ骰舌┤貉?*/
#view-admin .admin-user-info-grid > span {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  padding: 4px 16px !important;
  text-align: left !important;
}

/* 螽｣蝗ｶ蝟夜｡ｦ譟･蟠倬惚譚大冠髢ｻ?span髢ｿ豸俶悽豬�裵ｽ蠕�ｮ･蜻ｭ謨ｶ髢ｼ霎ｨ譴ｹ螯ｯ螟檎ｲ磯椙蟇ｸ遉蛾椋讓ｼ邊ｯ逕ｯ竄ｬ螽第諜遘ｷ鬘墓ｰｶ蠑ｵ貔ｶ螻ｾ逡ｱ padding 髢?flex */
#view-admin .admin-user-info-grid strong span {
  display: inline !important;
  flex-direction: row !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Admin Login Panel Overrides --- */

/* 1. Login panel background should match the other panels (#f5f0e8) */
#view-admin #admin-login-panel {
  background: #f5f0e8 !important;
  border-radius: 20px !important;
  padding: 24px !important;
  margin-bottom: 24px !important; /* 髢ｸ謗第｣玲ｾｹ蟀ゐ�驤ｧ﨡�ｼｶ驫介�遉牙ｨ第諜遘ｷ鬘ｩ�よ沍螳･蜻ｭ邯?*/
  box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
}

/* Hide the top white glow */
#admin-login-panel::before {
  display: none !important;
}

/* Fix heading colors */
#view-admin #admin-login-panel .panel-heading h2 {
  color: #3a2b22 !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}
#view-admin #admin-login-panel .panel-heading p {
  color: rgba(92, 67, 50, 0.6) !important;
}

/* 2. Login button should match Dianping review button exactly */
#view-admin #admin-login-panel .primary-button {
  background: linear-gradient(135deg, #0a84ff 0%, #0071e3 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 8px 28px rgba(10, 132, 255, 0.5) !important;
  color: #ffffff !important;
  border-radius: 7px !important;
  font-weight: 750 !important;
}
#view-admin #admin-login-panel .primary-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #0071e3 0%, #005bb5 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.26), 0 12px 40px rgba(10, 132, 255, 0.65) !important;
}

/* Checkbox text color */
#view-admin #admin-login-panel .checkbox-line span {
  color: #3a2b22 !important;
}

/* 3. Login input fields must explicitly inherit global font to match Dianping textarea */
#view-admin #admin-login-panel .input {
  font-family: var(--font), -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  color: #4a3525 !important; /* 髢ｺ竄ｬ髢ｫ豸懃､区ｿ橸ｽ磯ｲｸ鬘･豌ｶ諛?*/
  font-size: 15px !important;
  font-weight: 500 !important; /* 髢ｹ蠇懷椹鬘ｦ?500 髏取ｶ咒嚏骰｣?*/
  border: 1.5px solid rgba(70, 50, 30, 0.55) !important;
}

#view-admin #admin-login-panel .input:focus {
  border-color: #ff7a00 !important;
}

#view-admin #admin-login-panel .input::placeholder {
  font-family: var(--font), -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  color: #4a3525 !important; /* 髢ｺ竄ｬ髢ｫ豸懃､区ｿ橸ｽ磯ｲｸ鬘･豌ｶ諛?*/
  opacity: 0.85 !important;
  font-size: 15px !important;
  font-weight: 500 !important; /* 髢ｹ蠇懷椹鬘ｦ?500 髏取ｶ咒嚏骰｣?*/
}


/* Fix hidden state for admin-dashboard which is overridden by display: flex !important */
#admin-dashboard.hidden {
  display: none !important;
}











/* =========================================
   髢ｲ蠍�汪迺∵告蠇ｸ扈疲ｬ大▲骰情о諞｡髀牙椣逧ｬ骰暦ｼ�｢?V12 (郛∝履蜷�ｵ懊ｇ邊宣刻螟狗ｰｮ髏ｭ笊�ｨ€驫�ｽｷ郢夐瀬谺守ｬ鍋◇轤ｲ遯倡ｻ�?
   ========================================= */

/* --- 髢ｲ蠍�汪骰貞李蜴､豸灘ｩ夭平髑ｹ謠貞Ψ豸灘ｺ｡蜚ｴ髢ｮ繖･蜴懷ｩｧ諢ｭ譟滄忽?(1/3/5螳ｸ�ｿ隨�縛?/4/6骰吝�隨? --- */
.board-card.board-card-green {
  --glow-pos: bottom left !important;
}
.board-card.board-card-blue {
  --card-hue: #3b82f6 !important; /* 扈ｾ訷幟�螽｣霎ｫ鞫鷹�?*/
  --glow-pos: top right !important;
}
.board-card.board-card-gold {
  --glow-pos: bottom left !important;
}
.board-card.board-card-purple {
  --card-hue: #8b5cf6 !important; /* 扈ｾ訷幟�豬懣�莨�髑?*/
  --glow-pos: top right !important;
}
.board-card.board-card-cyan {
  --card-hue: #06b6d4 !important; /* 讀ｴ貊�ｧ鷹来謗墓荘髑?蟀€譬ｬ鞫� */
  --glow-pos: bottom left !important;
}
.board-card.board-card-model-families {
  --card-hue: #f43f5e !important; /* 髏懣う蟄ｩ髑ｹ?扈ｮ螟悟ｭｩ髑ｹ?*/
  --glow-pos: top right !important;
}

/* --- 骰暦ｼ�｢夜昆陌ｹ赶�€ｹ迹ｰ讚?--- */
.board-card {
  position: relative !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: var(--radius) !important;
}

.board-card:hover {
  transform: translateY(-5px) !important;
}

/* --- 髑ｳ螻ｾ讚呎ｶ灘ｺ､遶溽ｼよｩ€迴ｮ豬�?(骰停父謨?::before 轢ｹ螻ｽ蜿城夢蠍�蕪) --- */
/* 逕ｯ蜻岩ぎ菴ｽ蜆鈴遵訷､邏ｰ髀�ｯｸ邊城揃隸ｲ髓ｩ蟀頑唖谿大ｯｰ蜍ｫ謔懷ｨ捺┏蠖蛾恰菴ｸ蟾ｱ謳ｴ�ｽ蠖�漉蝗･竄ｬ菴ｹ遘ｷ髣�ｅ邁ｳ髢ｮ繖ｦ﨡ｴ髀牙､ｸ蟇堤ｻｾ?*/
.board-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  width: auto !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(
      circle at var(--glow-pos, top right),
      color-mix(in srgb, var(--card-hue) 45%, transparent) 0%,
      color-mix(in srgb, var(--card-hue) 15%, transparent) 35%,
      color-mix(in srgb, var(--card-hue) 3%, transparent) 70%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.01) 40%,
      rgba(0, 0, 0, 0.25) 100%
    ),
    rgba(22, 26, 35, 0.85) !important;
  border: 1px solid transparent !important;
      box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s ease !important;
  pointer-events: none !important;
}

/* 骼ｮ﨡€莉�骼ｬ萓顔ｴｰ髑ｳ螻ｾ讚呎揶螟雁慈貔ｶﾑ�ｮ咎ｪ櫁勠邊ｦ貔ｧ轤ｲ蟾ｱ */
.board-card:hover::before {
  height: auto !important;
  width: auto !important;
  background:
    radial-gradient(
      circle at var(--glow-pos, top right),
      color-mix(in srgb, var(--card-hue) 60%, transparent) 0%,
      color-mix(in srgb, var(--card-hue) 22%, transparent) 40%,
      color-mix(in srgb, var(--card-hue) 5%, transparent) 80%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.03) 40%,
      rgba(0, 0, 0, 0.15) 100%
    ),
    rgba(22, 26, 35, 0.95) !important;
  border: 1px solid color-mix(in srgb, var(--card-hue) 70%, transparent) !important;
  box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--card-hue) 40%, transparent),
    0 0 24px color-mix(in srgb, var(--card-hue) 25%, transparent) !important;
}

/* --- 髀ょ岌逑ｧ譽ｰ貊�｣頑ｷ��﨡?--- */
.board-card:hover .board-card-label {
  color: var(--board-ink) !important;
}
.board-card .board-card-value {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.1) !important;
}
.board-card:hover .board-card-value {
  color: var(--card-hue) !important;
  text-shadow: 0 0 24px color-mix(in srgb, var(--card-hue) 55%, transparent) !important;
}
.board-card > * {
  position: relative !important;
  z-index: 1 !important;
}

/* --- RPM 髢ｫ辭ｺ蟾ｼ髣�┏蝓鈴漉��｢?骼ｮ﨡€莉�郛∬Ρ螢頑･よｨｹ蟇呈揶蝨ｭ邏ｭ --- */
.rpm-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.rpm-card:hover {
  transform: translateY(-2px) !important;
  border-color: #5dde8d !important;
  box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, #5dde8d 40%, transparent),
    0 0 24px color-mix(in srgb, #5dde8d 25%, transparent) !important;
}

/* =========================================
   骰暦ｼ�｢夜甑蜈�ｬら鎗謗台ｺ暮昏螫ｪ蟋ｩ髀∝�晉ｪ倡ｻ�?(骰上┼蜆ｴ豺�ｿ域噫)
   ========================================= */

/* 蟇ｰ逡檎捷轢ｹ迹ｰ讚帝昆蜩�ｪ� */
.board-card::after {
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--card-hue) !important;
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--card-hue) 80%, transparent) !important;
  z-index: 5 !important;
  opacity: 0.9 !important;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.board-card:hover::after {
  opacity: 1 !important;
  box-shadow: 0 0 15px 4px var(--card-hue) !important;
}

/* 1. 譚ｩ諢ｯ赶鷹純蝣墓｣ｿ (Green) - 雹��辜ｦ髣�民謠ｪ (髑ｴ螟雁柄骰丞､悟ｹ�) */
.board-card.board-card-green::after {
  animation: green-pulse 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite !important;
}
@keyframes green-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--card-hue) 80%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.board-card.board-card-green:hover::after {
  animation: none !important;
  box-shadow: 0 0 15px 4px var(--card-hue) !important;
  transform: scale(1.3) !important;
}

/* 2. 扈疲ｬ大▲迺ｧ蟲ｰ鄧� (Blue) - 髀�ｷｺ蜴懷ｨｴ菴ｽ豬� (骰呎�蜴憺純蝣墓兼逅帙┤豢? */
.board-card.board-card-blue::after {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  top: 12px !important;
  right: 12px !important;
  background: 
    linear-gradient(to right, transparent 40%, var(--card-hue) 40%, var(--card-hue) 60%, transparent 60%) center top / 100% 50% no-repeat,
    transparent !important;
  border: 1.5px solid var(--card-hue) !important;
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--card-hue) 80%, transparent), inset 0 0 5px var(--card-hue) !important;
  animation: clock-spin 4s steps(12) infinite !important;
}
@keyframes clock-spin {
  100% { transform: rotate(360deg); }
}
.board-card.board-card-blue:hover::after {
  box-shadow: 0 0 12px 3px var(--card-hue), inset 0 0 8px var(--card-hue) !important;
  animation: clock-spin 1.5s linear infinite !important;
}

/* 3. 骼ｬ扈倡ｧｷ迺仙ｽ貞卆譽?(Gold) - 髣ゐ∞竄ｬ竄ｬ髀��譎?(髀ょ岌逑ｧ骰･諠ｧ闊ｰ+郛よ諜蟋ｩ髣ゐ≧蜆�) */
.board-card.board-card-gold::after {
  content: "🪙" !important;
  background: transparent !important;
  color: var(--card-hue) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  width: auto !important;
  height: auto !important;
  top: 10px !important;
  right: 12px !important;
  box-shadow: none !important;
  text-shadow: 0 0 10px var(--card-hue) !important;
  animation: none !important;
  transform: scale(1) rotate(0deg);
  transition: all 0.3s ease !important;
}
@keyframes gold-twinkle {
  0%, 100% { transform: scale(0.9) rotate(0deg); }
  50% { transform: scale(1.2) rotate(15deg); }
}
.board-card.board-card-gold:hover::after {
  text-shadow: 0 0 24px var(--card-hue) !important;
  animation: gold-twinkle 1.5s ease-in-out infinite !important;
}

/* 4. 骼ｬ譏情�蟋ｹ蛯帶圈 (Purple) - 髀∫沿蠏�巡辭ｺ邯� (骰停父謨､髢ｲ蠍�･夜暑蜍ｬ蝙夂ｻｨ蝗ｩ蟋ｸ髑ｺ蛯懷�? */
.board-card.board-card-purple::after {
  width: 5px !important;
  height: 5px !important;
  top: 15px !important;
  right: 15px !important;
  box-shadow: 
    -7px 6px 0 -1px var(--card-hue),
    -13px -1px 0 -1.5px var(--card-hue),
    0 0 8px 2px color-mix(in srgb, var(--card-hue) 80%, transparent) !important;
}
.board-card.board-card-purple:hover::after {
  box-shadow: 
    -9px 8px 0 -0.5px var(--card-hue),
    -17px -2px 0 -1px var(--card-hue),
    0 0 15px 4px var(--card-hue) !important;
}

/* 5. 骼ｬ扈倡ｧｷ髑ｰ?Token (Cyan) - 髑ｳ莉句匱髀�愀邯� (髑ｿ蜊櫁�?蟀募�隸? */
.board-card.board-card-cyan::after {
  border-radius: 1px !important;
  transform: rotate(45deg) !important;
  width: 7px !important;
  height: 7px !important;
  animation: cyan-float 3s ease-in-out infinite !important;
}
@keyframes cyan-float {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(-4px); }
}
.board-card.board-card-cyan:hover::after {
  animation: none !important;
  transform: rotate(45deg) scale(1.3) !important;
  box-shadow: 0 0 15px 4px var(--card-hue) !important;
}

/* 6. 螯ｯ窶ｳ轢ｷ迺句�謨､髀?(Rose) - 扈�讌€蟋城政笊�ｨ€ (骰停父謨､髢ｲ蠍�･夜暑蜍ｬ蝙夐曙霎ｩ蟋ｸ骰? */
.board-card.board-card-model-families::after {
  width: 3px !important;
  height: 9px !important;
  border-radius: 1.5px !important;
  top: 12px !important;
  right: 15px !important;
  box-shadow: 
    -6px 2px 0 0 var(--card-hue),
    -12px -2px 0 0 var(--card-hue),
    0 0 8px 1px color-mix(in srgb, var(--card-hue) 80%, transparent) !important;
}
.board-card.board-card-model-families:hover::after {
  box-shadow: 
    -7px 3px 0 0 var(--card-hue),
    -14px -3px 0 0 var(--card-hue),
    0 0 15px 3px var(--card-hue) !important;
  height: 12px !important;
}






/* =========================================
   驥肴眠隶ｾ隶｡遶咏せ蜈ｬ蜻頑攸蟆丞今迚� V23 (蠅槫刈謔ｬ蛛憺ｫ倅ｺｮ荳取枚蟄怜序濶ｲ莠貞�?
   ========================================= */

#site-board-status {
  display: flex !important;
  width: 100% !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  flex-wrap: wrap; 
}

/* ---------------- 蟾ｦ萓ｧ蠖灘燕譌ｶ髣ｴ�夐恣陌ｹ讖� (Neon Orange) + 謔ｬ蛛懃音謨� ---------------- */
#site-board-status .status-time-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 16px;
  border-radius: 16px;
  background: 
    radial-gradient(circle at top left, rgba(249, 115, 22, 0.2) 0%, transparent 70%),
    rgba(22, 26, 35, 0.75) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 400;
  transition: all 0.3s ease !important;
  cursor: pointer;
}

#site-board-status .status-time-box:hover {
  border-color: rgba(249, 115, 22, 0.6) !important;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.15), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  background: 
    radial-gradient(circle at top left, rgba(249, 115, 22, 0.35) 0%, transparent 75%),
    rgba(22, 26, 35, 0.85) !important;
  transform: translateY(-1px);
}

#site-board-status .status-time-box .time-live-dot {
  width: 10px;
  height: 12px;
  position: relative;
  margin-right: 6px;
}
#site-board-status .status-time-box .time-live-dot::before,
#site-board-status .status-time-box .time-live-dot::after {
  content: "";
  position: absolute;
  top: 0;
  width: 3px;
  height: 12px;
  background: #f97316;
  border-radius: 1px;
  box-shadow: 0 0 4px 1px rgba(249, 115, 22, 0.8), 0 0 10px rgba(249, 115, 22, 0.5);
}
#site-board-status .status-time-box .time-live-dot::before { left: 1px; }
#site-board-status .status-time-box .time-live-dot::after { right: 1px; }

#site-board-status .status-time-box strong {
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.3s ease !important;
}

#site-board-status .status-time-box:hover strong {
  color: #f97316 !important;
  text-shadow: 0 0 8px rgba(249, 115, 22, 0.6) !important;
}

/* ---------------- 蜿ｳ萓ｧ遞ｳ螳夊ｿ占｡鯉ｼ夂ｲ画ｨ?(Pink Sakura) + 謔ｬ蛛懃音謨� ---------------- */
#site-board-status .status-uptime-box {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 16px;
  border-radius: 16px;
  background: 
    radial-gradient(circle at top left, rgba(255, 105, 180, 0.2) 0%, transparent 70%),
    rgba(22, 26, 35, 0.75) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 400;
  transition: all 0.3s ease !important;
  cursor: pointer;
}

#site-board-status .status-uptime-box:hover {
  border-color: rgba(255, 105, 180, 0.6) !important;
  box-shadow: 0 4px 15px rgba(255, 105, 180, 0.15), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  background: 
    radial-gradient(circle at top left, rgba(255, 105, 180, 0.35) 0%, transparent 75%),
    rgba(22, 26, 35, 0.85) !important;
  transform: translateY(-1px);
}

#site-board-status .status-uptime-box .uptime-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-right: 4px;
}
#site-board-status .status-uptime-box .uptime-dot::after {
  content: "🌸";
  font-size: 13px;
  text-shadow: 0 0 6px rgba(255, 105, 180, 0.9), 0 0 12px rgba(255, 105, 180, 0.6), 0 0 18px rgba(255, 105, 180, 0.3);
}

#site-board-status .status-uptime-box .uptime-days {
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  text-shadow: none;
  transition: all 0.3s ease !important;
}

#site-board-status .status-uptime-box:hover .uptime-days {
  color: #ff69b4 !important;
  text-shadow: 0 0 8px rgba(255, 105, 180, 0.6) !important;
}

/* =========================================
   蜈ｨ螻€蠖ｻ蠎墓ｸ�勁蜊｡迚�ｸ取��ｯ�ｾｹ郛倡噪轣ｰ濶ｲ霎ｹ譯�ｸ守區郤?V26 (扈域栫譌�霎ｹ譯?髦ｲ髣ｪ辜∝ｮ檎ｾ守沿)
   ========================================= */

/* 1. 蠖ｻ蠎募ｺ溷ｼ� physical border�瑚ｧ｣蜀?backdrop-filter 蟇ｼ閾ｴ逧�€乗�霎ｹ譯�書逋ｽ(莠ｮ郤ｿ)Bug縲?
   謇€譛牙�邏�逧�ｸｸ諤√€”over 諤∝ｿ�｡ｻ蜈ｨ驛ｨ菫晄�?border: none !important; */
.board-card,
.board-card::before,
.board-card:hover::before,
.rpm-card,
.rpm-card:hover,
#site-board-status .status-time-box,
#site-board-status .status-time-box:hover,
#site-board-status .status-uptime-box,
#site-board-status .status-uptime-box:hover {
  border: none !important;
}

/* 2. 荳区婿蜈ｭ蠑�蟆丞今迚�所 RPM 蜊｡迚�ｼ瑚ｿ槫酔螳�ｻｬ逧�ｼｪ蜈�ｴ��碁€夊ｿ� box-shadow 蜊�菴榊ｮ樒鴫螳檎ｾ手ｿ�ｸ｡�域裏逋ｽ蜈蛾略辜�ｼ?*/
.board-card::before {
  /* 菴ｿ逕ｨ 3 螻る亢蠖ｱ蜊�菴搾ｼ御ｸ?hover 諤∫ｻ捺桷螳悟�荳€閾ｴ�御ｿ晁ｯ∝ｮ檎ｾ取ｸ仙序 */
  box-shadow: 
    0 6px 16px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0),
    0 0 0 rgba(0, 0, 0, 0) !important;
}

.rpm-card {
  box-shadow: 
    0 10px 26px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0),
    0 0 0 rgba(0, 0, 0, 0) !important;
}

/* 3. 蟆丞今迚?hover 迥ｶ諤∽ｽｿ逕?box-shadow: 0 0 0 1px 莉｣譖ｿ border�梧里譛牙書蜈芽ｾｹ郛假ｼ悟処荳堺ｼ壼ｼ募書莉ｻ菴慕區郤ｿ謌夜略辜� */
.board-card:hover::before::before {
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--card-hue) 40%, transparent),
    0 0 24px color-mix(in srgb, var(--card-hue) 25%, transparent) !important;
}

.rpm-card:hover {
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, #5dde8d 40%, transparent),
    0 0 24px color-mix(in srgb, #5dde8d 25%, transparent) !important;
}

/* 4. 鬘ｶ驛ｨ荳､荳ｪ迥ｶ諤∵��ｯ�ｼ御ｽｿ逕ｨ蜷梧�ｷ逧�裏霎ｹ譯�+髦ｴ蠖ｱ螻ょ匠豕?*/
#site-board-status .status-time-box,
#site-board-status .status-uptime-box {
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0),
    0 0 0 rgba(0, 0, 0, 0) !important;
}

/* 鬘ｶ驛ｨ譬�ｯ� hover 迥ｶ諤?*/
#site-board-status .status-time-box:hover {
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(249, 115, 22, 0.6),
    0 4px 15px rgba(249, 115, 22, 0.15) !important;
}
#site-board-status .status-uptime-box:hover {
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 105, 180, 0.6),
    0 4px 15px rgba(255, 105, 180, 0.15) !important;
}

/* 5. 蠖ｻ蠎募ｱ剰反閭梧勹郤ｿ諤ｧ貂仙序鬘ｶ驛ｨ逧�區濶ｲ霎ｹ郛� (菫ｮ螟咲罰莠手レ譎ｯ鬚懆牡蟶ｦ譚･逧�漠隗臥區郤? */
.board-card::before {
  background:
    radial-gradient(
      circle at var(--glow-pos, top right),
      color-mix(in srgb, var(--card-hue) 45%, transparent) 0%,
      color-mix(in srgb, var(--card-hue) 15%, transparent) 35%,
      color-mix(in srgb, var(--card-hue) 3%, transparent) 70%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 40%,
      rgba(0, 0, 0, 0.25) 100%
    ),
    rgba(22, 26, 35, 0.85) !important;
}

.board-card:hover::before::before {
  background:
    radial-gradient(
      circle at var(--glow-pos, top right),
      color-mix(in srgb, var(--card-hue) 60%, transparent) 0%,
      color-mix(in srgb, var(--card-hue) 22%, transparent) 40%,
      color-mix(in srgb, var(--card-hue) 5%, transparent) 80%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 40%,
      rgba(0, 0, 0, 0.15) 100%
    ),
    rgba(22, 26, 35, 0.95) !important;
}

.rpm-card {
  background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 40%,
      rgba(0, 0, 0, 0.25) 100%
    ),
    rgba(17, 21, 30, 0.62) !important;
}



/* =========================================
   蠅槫､ｧ RPM 蜊｡迚�ｸ惹ｸ頑婿蟆丞今迚�ｹ矩龍逧�龍霍?(V29 譛€扈育沿 12px)
   ========================================= */

.rpm-grid {
  /* 隹�紛閾ｳ鮟�≡豈比ｾ? 12px */
  margin-top: 12px !important;
}

/* =========================================
   RPM 蜊｡迚�ｺ暮Κ逋ｾ蛻�ｯ疲枚蟄鈴｢懆�?(V30)
   ========================================= */

.rpm-card-foot {
  /* 謐｢謌仙柱譛€螟ｧRPM荳€譬ｷ逧�ｺｮ逋ｽ濶?*/
  color: var(--board-ink) !important;
}








/* =========================================
   謳懃ｴ｢譯�ｿ伜次荳撒oken豌疲ｳ｡鬟惹ｿ晉�?(V45)
   ========================================= */

/* --- 1. 諱｢螟榊芦隕∵ｱや€懃ｼｩ蟆丞ｰ丞怕轤ｹ窶昜ｹ句燕逧� V40 迚域頗邏｢譯� --- */

/* 謳懃ｴ｢譯�､門｣ｳ�壽△螟� 1.5px 霎ｹ譯�柱譌�闢晏�迚ｹ謨� */
.token-search-shell {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  min-height: 40px !important;
  border-radius: 9999px !important;
}

.token-search-shell:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.token-search-shell:focus-within {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

#view-search .token-search-shell .input {
  background: transparent !important;
  color: #ffffff !important;
  min-height: 40px !important;
  height: 40px !important;
  padding-left: 46px !important; 
  /* 諱｢螟榊次譛ｬ鬣ｱ貊｡逧�ｯ��∝次轤ｹ蟄鈴㍾蜥悟ｭ玲酪�悟�譬�ｫ伜ｺｦ扈ｴ謖∝ｮ檎ｾ取���?*/
  font-family: Verdana, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important; 
}

#view-search .token-search-shell .input::placeholder {
  font-size: 16.5px !important;
  font-family: var(--font), system-ui, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

.token-search-shell .model-search-icon {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
  width: 17px !important;
  height: 17px !important;
  left: 17px !important;
}

.token-search-shell .model-search-icon::after {
  background-color: rgba(255, 255, 255, 0.55) !important;
  transition: all 0.3s ease !important;
  width: 6px !important;
  height: 2px !important;
  right: -5px !important;
}

#view-search .token-lookup-form .primary-button {
  min-height: 40px !important;
  font-size: 15px !important;
  border-radius: 9999px !important; 
  padding: 0 22px !important;
}




































/* =========================================
   Token 5 蜊｡迚�㍾譫��?(V78: 譫∫ｮ€郤ｯ逋ｽ譛€扈育ｻ滉ｸ€迚?
   ========================================= */

#view-search .token-lookup-form .primary-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 22px !important;
}

#token-lookup-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#token-lookup-message, #token-usage, #token-logs, .token-lookup-message, .token-usage-grid, .token-log-list, .token-lookup-panel hr {
  border-top: none !important; border-bottom: none !important; box-shadow: none !important;
}

.token-usage-grid { margin-bottom: 24px !important; }

.token-usage-card {
  display: grid !important;
  grid-template-rows: auto minmax(36px, 1fr) auto !important;
  min-height: 110px !important; position: relative !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg-start) 85%, transparent) 0%, color-mix(in srgb, var(--card-bg-end) 50%, transparent) 100%) !important;
  border-radius: 14px !important; border: none !important; outline: none !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important; padding: 16px 16px 14px !important; transition: all 0.3s ease !important;
}

.token-usage-card:hover { transform: translateY(-3px) !important; border: none !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important; }
.token-usage-card > * { position: relative !important; z-index: 1 !important; }

.token-usage-card .board-card-label { color: #ffffff !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: 0.5px !important; margin-bottom: 4px !important; opacity: 1 !important; text-shadow: 0 1px 3px rgba(0,0,0,0.15) !important; }
.token-usage-card .board-card-value { color: #ffffff !important; font-size: 26px !important; font-weight: 800 !important; text-shadow: 0 2px 10px rgba(0,0,0,0.15) !important; }
.token-usage-card .board-card-detail { color: #ffffff !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0.3px !important; margin-top: 12px !important; opacity: 1 !important; text-shadow: 0 1px 3px rgba(0,0,0,0.15) !important; }

.token-usage-count-lines {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important; 
  margin-top: 10px !important;
  width: 100% !important; 
}

.token-usage-count-row {
  display: flex !important;
  justify-content: space-between !important; 
  align-items: center !important;
  background: transparent !important; 
  padding: 0 !important; 
  border: none !important;
  box-shadow: none !important;
}

.token-usage-count-row span:first-child {
  color: #ffffff !important;
  font-size: 13.5px !important; 
  font-weight: 700 !important;   
  opacity: 1 !important;         
  text-shadow: 0 1px 3px rgba(0,0,0,0.2) !important; 
}

/* ====== 譬ｹ謐ｮ隕∵ｱゑｼ壽焚蟄怜�驛ｨ蜿伜屓譛€譫∬�譎ｮ騾夂噪逋ｽ蠎� ====== */
.token-usage-count-success strong {
  display: inline-flex !important;
  color: #ffffff !important; /* 蝗槫ｽ堤ｺｯ逋ｽ */
  font-size: 16px !important;
  font-weight: 700 !important;
  background: transparent !important; 
  border: none !important;
  padding: 0 !important;
  text-shadow: none !important; /* 菫晄戟謇∝ｹｳ譌�髦ｴ蠖?*/
}

.token-usage-count-failed strong {
  display: inline-flex !important;
  color: #ffffff !important; /* 蝗槫ｽ堤ｺｯ逋ｽ */
  font-size: 16px !important;
  font-weight: 700 !important; 
  background: transparent !important; 
  border: none !important;
  padding: 0 !important;
  text-shadow: none !important; /* 菫晄戟謇∝ｹｳ譌�髦ｴ蠖?*/
}

/* 蜈ｨ譁ｰ 5 扈�栫蜈ｶ魎懈ｴｻ逧�ｫ倅ｺｮ貂仙序濶ｲ邉ｻ */
.token-usage-pink { --card-bg-start: #f857a6 !important; --card-bg-end: #ff5858 !important; }
.token-usage-blue { --card-bg-start: #00c6ff !important; --card-bg-end: #0072ff !important; }
.token-usage-green { --card-bg-start: #11998e !important; --card-bg-end: #38ef7d !important; }
.token-usage-danger { --card-bg-start: #ff0844 !important; --card-bg-end: #ffb199 !important; } 
.token-usage-gold { --card-bg-start: #ffca28 !important; --card-bg-end: #f57c00 !important; }
.token-usage-purple { --card-bg-start: #b224ef !important; --card-bg-end: #7579ff !important; }


/* ============================================================
   New Token Record Log Card (trl-card) - Refactored
   ============================================================ */

.trl-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
    -webkit-  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  z-index: 1;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  
  margin-bottom: 8px;
}

.trl-card:hover {
  transform: translateY(-2px);
    border-color: rgba(85, 209, 135, 0.25);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px color-mix(in srgb, #55d187 15%, transparent);
}

.trl-card.trl-error:hover {
  border-color: rgba(248, 113, 113, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px color-mix(in srgb, #f87171 20%, transparent);
}

.trl-top-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.trl-time {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.trl-mid-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trl-model {
  font-size: 15px;
  font-weight: 600;
  color: #60a5fa;
  text-shadow: 0 0 12px rgba(96, 165, 250, 0.35);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Reusing hot-title-icon if needed, but here we just style the model name */
.trl-model::before {
  content: '笨?;
  font-size: 14px;
  opacity: 0.8;
}

.trl-cost {
  font-family: var(--font-stack, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.trl-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.trl-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s, border-color 0.2s;
}



.trl-pill-group {
  color: #e2e8f0;
}

.trl-pill-stream {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.2);
}

.trl-pill-duration {
  color: #f857a6;
  background: rgba(248, 87, 166, 0.12);
  border-color: rgba(248, 87, 166, 0.2);
}

.trl-pill-input {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border-color: rgba(74, 222, 128, 0.2);
}

.trl-pill-output {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.2);
}

.trl-card.trl-error {
  border-color: rgba(239, 68, 68, 0.3);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.05), rgba(239, 68, 68, 0.01)), rgba(30, 20, 24, 0.4);
}

.trl-card.trl-error .trl-cost {
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.25);
}

.trl-pill-error {
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.25);
}

/* Removing any lightbar traces */
.trl-card::before, .trl-card::after {
  display: none !important;
}



/* ============================================================
   Fix for RPM Card Layout and Badges
   ============================================================ */

.rpm-card-head,
.rpm-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rpm-card-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.rpm-badge {
  flex: 0 0 auto;
  margin-left: auto;
  
  min-height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--display-font, inherit);
  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.rpm-card:hover .rpm-badge {
  border-color: color-mix(in srgb, #e8eef7 40%, transparent) !important;
  background: color-mix(in srgb, #e8eef7 8%, transparent) !important;
  color: #ffffff !important;
}




.trl-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)), rgba(20, 24, 34, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: -1;
  pointer-events: none;
  transition: background 0.25s ease;
}
.trl-card:hover::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)), rgba(24, 30, 42, 0.5);
}

.trl-pill-nonstream {
  color: #c084fc;
  background: rgba(192, 132, 252, 0.12);
  border-color: rgba(192, 132, 252, 0.2);
}


/* Anti-flicker hover bridge */
.summary-card strong::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 4px;
  background: transparent;
}

/* Global Loading Spinner */
.global-spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

.global-spinner-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
}

.fluent-ring {
  width: 56px;
  height: 56px;
  animation: fluent-rotate 2s linear infinite !important;
}

.fluent-arc {
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  animation: fluent-dash 1.5s ease-in-out infinite !important;
  transform-origin: center;
}

@keyframes fluent-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fluent-dash {
  0% {
    stroke-dashoffset: 176;
    transform: rotate(0deg);
  }
  50% {
    stroke-dashoffset: 44;
    transform: rotate(45deg);
  }
  100% {
    stroke-dashoffset: 176;
    transform: rotate(360deg);
  }
}

.app-shell {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.app-shell.ready {
  opacity: 1;
}

@media (max-width: 520px) {
  .header-actions { flex-wrap: nowrap !important; }
  .range-control { width: auto !important; flex: 1 !important; }
}
@media (max-width: 520px) {
  .toast { transform: translate(-50%, -14px) scale(0.7) !important; transform-origin: top center; }
  .toast.show { transform: translate(-50%, 0) scale(0.7) !important; }
}



/* Remove toast bottom border to ensure seamless progress bar */
.toast.success .toast-inner, .toast.error .toast-inner {
  border-bottom: none !important;
}


.trl-index {
  background-color: var(--badge-bg);
  color: var(--badge-color);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  margin-right: 8px;
}

.target-user-info {
  display: inline-block;
  margin-top: 4px;
  margin-left: 12px;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .target-user-info {
    display: block !important;
    margin-left: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  #view-admin .admin-review-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  #view-admin .admin-review-model {
    width: 100% !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
  #view-admin .admin-review-user-grid {
    gap: 8px !important;
  }
  #view-admin .admin-review-user-grid span {
    padding: 6px 8px !important;
    min-width: 0;
  }
  #view-admin .admin-review-user-grid strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
  }
}


/* Mobile Review Quick Nav */
.mobile-review-nav {
  display: none;
}

@media (max-width: 768px) {
  .mobile-review-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 8px 16px 24px 16px;
  }
  
  .mobile-review-nav-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background: linear-gradient(145deg, rgba(30, 28, 26, 0.7), rgba(20, 18, 16, 0.85));
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 999px;
    padding: 5px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 215, 160, 0.1);
    gap: 5px;
  }
  
  .mobile-review-nav-btn {
    flex: 0 1 auto;
    background: linear-gradient(180deg, #ffffff 0%, #f4f0ea 100%);
    color: #2a241c;
    border: 1px solid rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 -1px 2px rgba(0, 0, 0, 0.04);
  }
  
  .mobile-review-nav-btn:active {
    background: #e8e4de;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 2px 4px rgba(0, 0, 0, 0.08);
    transform: scale(0.96);
  }
  
  .mobile-review-nav-hint {
    margin-top: 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
  }

  /* 彻底删除原有的间距机制，重新写过：完全复刻大众点评的间距 */
  #view-admin .mobile-review-nav {
    /* 左右边距和大众点评完全一致 (16px) */
    margin-left: 16px !important;
    margin-right: 16px !important;
    /* 顶部间距和大众点评完全一致 (8px) */
    margin-top: 8px !important;
    /* 底部间距设为 0，因为 #admin-dashboard 有 24px 的 gap，加起来正好等于大众点评的 24px margin-bottom */
    margin-bottom: 0 !important;
  }
}