/* =========================================================
   Paper Daily V3
   Deep Paper Reading Workspace UI
   Pink Glassmorphism + Soft Neumorphism
   ========================================================= */

/* =========================================================
   1. Theme Variables
   ========================================================= */

:root {
  color-scheme: light;

  --bg: #fff7fb;
  --bg-glow-primary: rgba(255, 174, 207, 0.34);
  --bg-glow-secondary: rgba(221, 197, 255, 0.28);
  --bg-glow-third: rgba(255, 224, 236, 0.40);

  --surface: rgba(255, 255, 255, 0.62);
  --surface-2: rgba(255, 246, 250, 0.72);
  --surface-3: rgba(255, 232, 242, 0.80);

  --topbar-bg: rgba(255, 250, 252, 0.61);
  --panel-bg: rgba(255, 255, 255, 0.53);
  --card-bg: rgba(255, 255, 255, 0.60);
  --card-footer-bg: rgba(255, 237, 245, 0.35);
  --metric-bg: rgba(255, 255, 255, 0.58);
  --empty-bg: rgba(255, 255, 255, 0.48);
  --button-bg: rgba(255, 255, 255, 0.56);
  --control-bg: rgba(255, 255, 255, 0.62);

  --text: #493940;
  --text-strong: #382b31;
  --muted: #917a84;
  --summary-text: #624f57;
  --english-text: #4f4147;
  --chinese-text: #765d68;

  --line: rgba(255, 255, 255, 0.78);
  --line-soft: rgba(217, 132, 166, 0.14);
  --line-strong: rgba(216, 111, 154, 0.24);

  --primary: #d96f9b;
  --primary-soft: #f0a1bf;
  --secondary: #b891d5;

  --teal: #d66c98;
  --coral: #ef82aa;
  --gold: #c18b68;

  --green: #dc749e;
  --medium: #e6ad79;
  --low: #a9969f;

  --read-accent: #c96f96;
  --read-soft: rgba(217, 111, 155, 0.13);
  --favorite-accent: #b78242;
  --favorite-soft: rgba(210, 163, 91, 0.15);
  --unread-accent: #8c7881;
  --unread-soft: rgba(140, 120, 129, 0.10);

  --tag-bg: rgba(255, 204, 224, 0.30);
  --tag-line: rgba(219, 113, 157, 0.23);
  --tag-text: #b85d81;

  --download-text: #c45d87;

  --overview-bg:
    radial-gradient(
      circle at 12% 8%,
      rgba(255, 255, 255, 0.95),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(255, 189, 215, 0.72),
      rgba(255, 247, 251, 0.78) 50%,
      rgba(232, 214, 255, 0.66)
    );

  --metric-accent-bg:
    linear-gradient(
      145deg,
      rgba(255, 196, 219, 0.72),
      rgba(255, 255, 255, 0.69)
    );

  --shadow:
    14px 14px 34px rgba(198, 135, 159, 0.13),
    -10px -10px 30px rgba(255, 255, 255, 0.90);

  --shadow-soft:
    9px 9px 22px rgba(196, 132, 157, 0.11),
    -7px -7px 20px rgba(255, 255, 255, 0.88);

  --shadow-hover:
    18px 20px 42px rgba(194, 124, 153, 0.17),
    -11px -11px 30px rgba(255, 255, 255, 0.94);

  --shadow-inset:
    inset 4px 4px 10px rgba(193, 132, 156, 0.12),
    inset -4px -4px 10px rgba(255, 255, 255, 0.88);

  --radius-xl: 24px;
  --radius-lg: 20px;
  --radius-md: 15px;
  --radius-sm: 12px;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei",
    sans-serif;
}


/* =========================================================
   2. Pink Theme
   ========================================================= */

body[data-theme="pink"] {
  color-scheme: light;

  --bg: #fff7fb;
  --bg-glow-primary: rgba(255, 174, 207, 0.34);
  --bg-glow-secondary: rgba(221, 197, 255, 0.28);
  --bg-glow-third: rgba(255, 224, 236, 0.40);

  --surface: rgba(255, 255, 255, 0.62);
  --surface-2: rgba(255, 246, 250, 0.72);
  --surface-3: rgba(255, 232, 242, 0.80);

  --topbar-bg: rgba(255, 250, 252, 0.61);
  --panel-bg: rgba(255, 255, 255, 0.53);
  --card-bg: rgba(255, 255, 255, 0.60);
  --card-footer-bg: rgba(255, 237, 245, 0.35);
  --metric-bg: rgba(255, 255, 255, 0.58);
  --empty-bg: rgba(255, 255, 255, 0.48);
  --button-bg: rgba(255, 255, 255, 0.56);
  --control-bg: rgba(255, 255, 255, 0.62);

  --text: #493940;
  --text-strong: #382b31;
  --muted: #917a84;
  --summary-text: #624f57;
  --english-text: #4f4147;
  --chinese-text: #765d68;

  --line: rgba(255, 255, 255, 0.78);
  --line-soft: rgba(217, 132, 166, 0.14);
  --line-strong: rgba(216, 111, 154, 0.24);

  --primary: #d96f9b;
  --primary-soft: #f0a1bf;
  --secondary: #b891d5;

  --green: #dc749e;
  --medium: #e6ad79;
  --low: #a9969f;

  --read-accent: #c96f96;
  --read-soft: rgba(217, 111, 155, 0.13);
  --favorite-accent: #b78242;
  --favorite-soft: rgba(210, 163, 91, 0.15);
  --unread-accent: #8c7881;
  --unread-soft: rgba(140, 120, 129, 0.10);

  --tag-bg: rgba(255, 204, 224, 0.30);
  --tag-line: rgba(219, 113, 157, 0.23);
  --tag-text: #b85d81;

  --download-text: #c45d87;

  --overview-bg:
    radial-gradient(
      circle at 12% 8%,
      rgba(255, 255, 255, 0.95),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(255, 189, 215, 0.72),
      rgba(255, 247, 251, 0.78) 50%,
      rgba(232, 214, 255, 0.66)
    );

  --metric-accent-bg:
    linear-gradient(
      145deg,
      rgba(255, 196, 219, 0.72),
      rgba(255, 255, 255, 0.69)
    );

  --shadow:
    14px 14px 34px rgba(198, 135, 159, 0.13),
    -10px -10px 30px rgba(255, 255, 255, 0.90);

  --shadow-soft:
    9px 9px 22px rgba(196, 132, 157, 0.11),
    -7px -7px 20px rgba(255, 255, 255, 0.88);

  --shadow-hover:
    18px 20px 42px rgba(194, 124, 153, 0.17),
    -11px -11px 30px rgba(255, 255, 255, 0.94);

  --shadow-inset:
    inset 4px 4px 10px rgba(193, 132, 156, 0.12),
    inset -4px -4px 10px rgba(255, 255, 255, 0.88);
}


/* =========================================================
   3. Light Theme
   ========================================================= */

body[data-theme="light"] {
  color-scheme: light;

  --bg: #f5f8fc;
  --bg-glow-primary: rgba(147, 197, 253, 0.24);
  --bg-glow-secondary: rgba(216, 180, 254, 0.20);
  --bg-glow-third: rgba(186, 230, 253, 0.23);

  --surface: rgba(255, 255, 255, 0.78);
  --surface-2: rgba(246, 249, 253, 0.86);
  --surface-3: rgba(236, 242, 248, 0.92);

  --topbar-bg: rgba(250, 252, 255, 0.72);
  --panel-bg: rgba(255, 255, 255, 0.66);
  --card-bg: rgba(255, 255, 255, 0.76);
  --card-footer-bg: rgba(230, 238, 249, 0.40);
  --metric-bg: rgba(255, 255, 255, 0.72);
  --empty-bg: rgba(255, 255, 255, 0.62);
  --button-bg: rgba(255, 255, 255, 0.64);
  --control-bg: rgba(255, 255, 255, 0.76);

  --text: #263244;
  --text-strong: #172033;
  --muted: #718095;
  --summary-text: #3c4b60;
  --english-text: #2e3b4d;
  --chinese-text: #5d6c80;

  --line: rgba(255, 255, 255, 0.85);
  --line-soft: rgba(73, 104, 140, 0.12);
  --line-strong: rgba(85, 117, 153, 0.21);

  --primary: #628fc7;
  --primary-soft: #8bb5e6;
  --secondary: #9677c7;

  --green: #599d83;
  --medium: #c4985c;
  --low: #87909d;

  --read-accent: #5f8bc2;
  --read-soft: rgba(98, 143, 199, 0.13);
  --favorite-accent: #a47d3d;
  --favorite-soft: rgba(196, 152, 92, 0.14);
  --unread-accent: #78869a;
  --unread-soft: rgba(120, 134, 154, 0.10);

  --tag-bg: rgba(147, 197, 253, 0.18);
  --tag-line: rgba(59, 130, 246, 0.20);
  --tag-text: #376eaa;

  --download-text: #a6577b;

  --overview-bg:
    radial-gradient(
      circle at 12% 8%,
      rgba(255, 255, 255, 0.96),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(196, 221, 255, 0.75),
      rgba(255, 255, 255, 0.82) 50%,
      rgba(225, 211, 255, 0.62)
    );

  --metric-accent-bg:
    linear-gradient(
      145deg,
      rgba(205, 226, 255, 0.80),
      rgba(255, 255, 255, 0.82)
    );

  --shadow:
    14px 14px 32px rgba(117, 139, 166, 0.12),
    -10px -10px 28px rgba(255, 255, 255, 0.94);

  --shadow-soft:
    8px 8px 20px rgba(117, 139, 166, 0.10),
    -7px -7px 18px rgba(255, 255, 255, 0.92);

  --shadow-hover:
    17px 19px 38px rgba(107, 132, 163, 0.16),
    -11px -11px 30px rgba(255, 255, 255, 0.96);

  --shadow-inset:
    inset 4px 4px 9px rgba(120, 140, 163, 0.11),
    inset -4px -4px 9px rgba(255, 255, 255, 0.92);
}


/* =========================================================
   4. Eye Care Theme
   ========================================================= */

body[data-theme="eye"] {
  color-scheme: light;

  --bg: #f1f7ef;
  --bg-glow-primary: rgba(161, 200, 145, 0.24);
  --bg-glow-secondary: rgba(232, 199, 154, 0.18);
  --bg-glow-third: rgba(190, 220, 177, 0.25);

  --surface: rgba(251, 255, 247, 0.77);
  --surface-2: rgba(243, 250, 238, 0.83);
  --surface-3: rgba(228, 240, 221, 0.89);

  --topbar-bg: rgba(250, 255, 247, 0.70);
  --panel-bg: rgba(251, 255, 247, 0.66);
  --card-bg: rgba(252, 255, 248, 0.76);
  --card-footer-bg: rgba(224, 238, 216, 0.39);
  --metric-bg: rgba(251, 255, 247, 0.74);
  --empty-bg: rgba(252, 255, 247, 0.62);
  --button-bg: rgba(251, 255, 247, 0.62);
  --control-bg: rgba(252, 255, 249, 0.76);

  --text: #304035;
  --text-strong: #213128;
  --muted: #72806d;
  --summary-text: #455448;
  --english-text: #354538;
  --chinese-text: #637160;

  --line: rgba(255, 255, 255, 0.80);
  --line-soft: rgba(76, 112, 72, 0.12);
  --line-strong: rgba(77, 119, 70, 0.20);

  --primary: #759565;
  --primary-soft: #9fba8e;
  --secondary: #a99069;

  --green: #729366;
  --medium: #b3915e;
  --low: #849080;

  --read-accent: #6f9066;
  --read-soft: rgba(117, 149, 101, 0.13);
  --favorite-accent: #9d824f;
  --favorite-soft: rgba(157, 130, 79, 0.14);
  --unread-accent: #788476;
  --unread-soft: rgba(120, 132, 118, 0.10);

  --tag-bg: rgba(160, 190, 132, 0.18);
  --tag-line: rgba(101, 140, 81, 0.20);
  --tag-text: #5e7e4d;

  --download-text: #9f675d;

  --overview-bg:
    radial-gradient(
      circle at 12% 8%,
      rgba(255, 255, 255, 0.96),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(211, 232, 199, 0.80),
      rgba(251, 255, 247, 0.84) 50%,
      rgba(240, 223, 196, 0.64)
    );

  --metric-accent-bg:
    linear-gradient(
      145deg,
      rgba(226, 237, 200, 0.78),
      rgba(251, 255, 247, 0.84)
    );

  --shadow:
    14px 14px 32px rgba(109, 133, 102, 0.12),
    -10px -10px 28px rgba(255, 255, 255, 0.92);

  --shadow-soft:
    8px 8px 20px rgba(109, 133, 102, 0.09),
    -7px -7px 18px rgba(255, 255, 255, 0.90);

  --shadow-hover:
    17px 19px 38px rgba(98, 124, 91, 0.15),
    -11px -11px 30px rgba(255, 255, 255, 0.95);

  --shadow-inset:
    inset 4px 4px 9px rgba(109, 133, 102, 0.10),
    inset -4px -4px 9px rgba(255, 255, 255, 0.90);
}


/* =========================================================
   5. Dark Theme
   ========================================================= */

body[data-theme="dark"] {
  color-scheme: dark;

  --bg: #181419;
  --bg-glow-primary: rgba(218, 111, 155, 0.17);
  --bg-glow-secondary: rgba(154, 116, 194, 0.15);
  --bg-glow-third: rgba(255, 172, 207, 0.08);

  --surface: rgba(40, 32, 39, 0.82);
  --surface-2: rgba(49, 39, 48, 0.88);
  --surface-3: rgba(61, 48, 59, 0.92);

  --topbar-bg: rgba(25, 20, 25, 0.72);
  --panel-bg: rgba(38, 30, 37, 0.77);
  --card-bg: rgba(42, 33, 41, 0.80);
  --card-footer-bg: rgba(255, 255, 255, 0.028);
  --metric-bg: rgba(43, 34, 42, 0.76);
  --empty-bg: rgba(43, 34, 42, 0.67);
  --button-bg: rgba(255, 255, 255, 0.05);
  --control-bg: rgba(31, 25, 31, 0.82);

  --text: #f6edf2;
  --text-strong: #fff9fc;
  --muted: #bcaeb6;
  --summary-text: #e6dbe1;
  --english-text: #f2e7ed;
  --chinese-text: #cdbec6;

  --line: rgba(255, 255, 255, 0.09);
  --line-soft: rgba(255, 188, 216, 0.08);
  --line-strong: rgba(239, 136, 178, 0.23);

  --primary: #df7aa4;
  --primary-soft: #efa6c2;
  --secondary: #b796d2;

  --green: #d980a3;
  --medium: #cf9f68;
  --low: #91858d;

  --read-accent: #e28aaf;
  --read-soft: rgba(223, 122, 164, 0.13);
  --favorite-accent: #d8ad70;
  --favorite-soft: rgba(212, 173, 116, 0.13);
  --unread-accent: #a79aa2;
  --unread-soft: rgba(167, 154, 162, 0.08);

  --tag-bg: rgba(221, 110, 155, 0.12);
  --tag-line: rgba(235, 129, 172, 0.23);
  --tag-text: #efb1ca;

  --download-text: #f3aec8;

  --overview-bg:
    radial-gradient(
      circle at 12% 8%,
      rgba(255, 184, 214, 0.10),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(111, 67, 90, 0.78),
      rgba(40, 31, 39, 0.84) 55%,
      rgba(64, 49, 79, 0.74)
    );

  --metric-accent-bg:
    linear-gradient(
      145deg,
      rgba(130, 70, 96, 0.63),
      rgba(42, 33, 41, 0.82)
    );

  --shadow:
    14px 14px 34px rgba(0, 0, 0, 0.30),
    -8px -8px 24px rgba(255, 255, 255, 0.018);

  --shadow-soft:
    9px 9px 22px rgba(0, 0, 0, 0.23),
    -6px -6px 18px rgba(255, 255, 255, 0.015);

  --shadow-hover:
    18px 20px 42px rgba(0, 0, 0, 0.37),
    -8px -8px 25px rgba(255, 255, 255, 0.022);

  --shadow-inset:
    inset 4px 4px 10px rgba(0, 0, 0, 0.22),
    inset -4px -4px 10px rgba(255, 255, 255, 0.02);
}


/* =========================================================
   6. Reset / Global
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  position: relative;

  margin: 0;

  min-height: 100vh;

  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 8% 4%,
      var(--bg-glow-primary),
      transparent 31%
    ),
    radial-gradient(
      circle at 92% 15%,
      var(--bg-glow-secondary),
      transparent 30%
    ),
    radial-gradient(
      circle at 70% 88%,
      var(--bg-glow-third),
      transparent 30%
    ),
    var(--bg);

  background-attachment: fixed;

  color:
    var(--text);

  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}

body::before,
body::after {
  position: fixed;

  z-index: -1;

  content: "";

  pointer-events: none;

  border-radius: 50%;

  filter:
    blur(8px);
}

body::before {
  top: 110px;
  left: -130px;

  width: 360px;
  height: 360px;

  background:
    radial-gradient(
      circle,
      var(--bg-glow-primary),
      transparent 68%
    );
}

body::after {
  right: -160px;
  bottom: 80px;

  width: 430px;
  height: 430px;

  background:
    radial-gradient(
      circle,
      var(--bg-glow-secondary),
      transparent 68%
    );
}

button,
input,
select {
  font-family:
    inherit;
}

button,
a,
input,
select {
  -webkit-tap-highlight-color:
    transparent;
}

button {
  user-select:
    none;
}

a {
  color:
    inherit;
}

[hidden] {
  display:
    none !important;
}

::selection {
  background:
    rgba(218, 111, 155, 0.20);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background:
    transparent;
}

::-webkit-scrollbar-thumb {
  border:
    3px solid
    transparent;

  border-radius:
    999px;

  background:
    linear-gradient(
      180deg,
      var(--primary-soft),
      var(--secondary)
    );

  background-clip:
    padding-box;
}


/* =========================================================
   7. Top Bar
   ========================================================= */

.topbar {
  position:
    sticky;

  top: 0;

  z-index: 20;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap: 20px;

  min-height:
    78px;

  padding:
    15px
    clamp(16px, 4vw, 54px);

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

  background:
    var(--topbar-bg);

  backdrop-filter:
    blur(25px)
    saturate(155%);

  -webkit-backdrop-filter:
    blur(25px)
    saturate(155%);

  box-shadow:
    0 10px 30px
    rgba(154, 95, 120, 0.06),
    inset 0 -1px 0
    rgba(255, 255, 255, 0.28);
}


/* =========================================================
   8. Brand
   ========================================================= */

.brand {
  display:
    flex;

  align-items:
    center;

  gap: 13px;

  min-width: 0;
}

.brand-mark {
  position:
    relative;

  display:
    inline-grid;

  width: 48px;
  height: 48px;

  place-items:
    center;

  flex:
    0 0 auto;

  overflow:
    hidden;

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

  border-radius:
    16px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.90),
      rgba(255, 207, 226, 0.67)
    );

  color:
    var(--primary);

  font-size:
    14px;

  font-weight:
    900;

  letter-spacing:
    0.04em;

  box-shadow:
    7px 7px 16px
    rgba(189, 120, 148, 0.14),
    -6px -6px 16px
    rgba(255, 255, 255, 0.89),
    inset 1px 1px 2px
    rgba(255, 255, 255, 0.65);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.brand-mark::before {
  position:
    absolute;

  top: 4px;
  left: 7px;

  width: 26px;
  height: 12px;

  content: "";

  border-radius:
    999px;

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

  filter:
    blur(2px);

  transform:
    rotate(-16deg);
}

.brand:hover .brand-mark {
  transform:
    translateY(-2px)
    rotate(-2deg);

  box-shadow:
    9px 10px 20px
    rgba(189, 120, 148, 0.17),
    -7px -7px 17px
    rgba(255, 255, 255, 0.93);
}

.brand-text {
  min-width: 0;
}

.topbar h1 {
  margin: 0;

  color:
    var(--text-strong);

  font-size:
    22px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    -0.02em;
}

.topbar p {
  margin:
    7px 0 0;

  overflow:
    hidden;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.3;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   9. Top Actions / Theme
   ========================================================= */

.top-actions {
  display:
    flex;

  align-items:
    center;

  gap: 10px;
}

.theme-switcher {
  display:
    inline-flex;

  align-items:
    center;

  gap: 5px;

  min-height:
    44px;

  padding:
    4px;

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

  border-radius:
    16px;

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

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  box-shadow:
    var(--shadow-soft);
}

.theme-option {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap: 6px;

  min-height:
    34px;

  padding:
    6px 10px;

  border: 0;

  border-radius:
    12px;

  background:
    transparent;

  color:
    var(--muted);

  cursor:
    pointer;

  font-size:
    12px;

  font-weight:
    750;

  transition:
    color 0.20s ease,
    background 0.20s ease,
    transform 0.20s ease,
    box-shadow 0.20s ease;
}

.theme-option:hover {
  color:
    var(--primary);

  transform:
    translateY(-1px);
}

.theme-option.active {
  color:
    var(--primary);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.75),
      rgba(255, 233, 242, 0.58)
    );

  box-shadow:
    inset 3px 3px 7px
    rgba(190, 124, 150, 0.09),
    inset -3px -3px 7px
    rgba(255, 255, 255, 0.70),
    2px 3px 8px
    rgba(159, 106, 127, 0.08);
}

.theme-swatch {
  width: 14px;
  height: 14px;

  flex:
    0 0 auto;

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

  border-radius:
    50%;

  box-shadow:
    0 2px 5px
    rgba(64, 42, 51, 0.12);
}

.pink-swatch {
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #ffffff 36%,
      #f3a0c1 37%,
      #e67fa8 100%
    );
}

.light-swatch {
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #ffffff 45%,
      #8db6e3 46%,
      #6e9ed2 100%
    );
}

.dark-swatch {
  background:
    linear-gradient(
      135deg,
      #211b21 0%,
      #211b21 50%,
      #df7aa4 51%,
      #df7aa4 100%
    );
}

.eye-swatch {
  background:
    linear-gradient(
      135deg,
      #f4f9f1 0%,
      #f4f9f1 48%,
      #91ad7e 49%,
      #91ad7e 100%
    );
}

.icon-link {
  display:
    inline-grid;

  width: 44px;
  height: 44px;

  flex:
    0 0 auto;

  place-items:
    center;

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

  border-radius:
    15px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.67),
      rgba(255, 244, 248, 0.46)
    );

  color:
    var(--text);

  font-size:
    18px;

  text-decoration:
    none;

  box-shadow:
    var(--shadow-soft);

  transition:
    color 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.icon-link:hover {
  color:
    var(--primary);

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

  transform:
    translateY(-2px);

  box-shadow:
    var(--shadow-hover);
}

.icon-link:active {
  transform:
    translateY(0);

  box-shadow:
    var(--shadow-inset);
}


/* =========================================================
   10. Shell
   ========================================================= */

.shell {
  display:
    grid;

  gap:
    24px;

  width:
    min(1480px, 100%);

  margin:
    0 auto;

  padding:
    28px
    clamp(16px, 4vw, 54px)
    58px;
}


/* =========================================================
   11. Overview
   ========================================================= */

.overview {
  display:
    grid;

  grid-template-columns:
    minmax(250px, 0.82fr)
    minmax(0, 1.7fr);

  gap:
    18px;

  align-items:
    stretch;
}

.overview-title {
  position:
    relative;

  display:
    grid;

  align-content:
    end;

  min-height:
    170px;

  overflow:
    hidden;

  padding:
    25px;

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

  border-radius:
    var(--radius-xl);

  background:
    var(--overview-bg);

  backdrop-filter:
    blur(25px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(25px)
    saturate(145%);

  box-shadow:
    var(--shadow);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.overview-title::after {
  position:
    absolute;

  top: -55px;
  right: -50px;

  width: 170px;
  height: 170px;

  content: "";

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.60),
      rgba(255, 255, 255, 0.02) 68%,
      transparent 70%
    );

  pointer-events:
    none;
}

.overview-title:hover {
  transform:
    translateY(-2px);

  box-shadow:
    var(--shadow-hover);
}

.overview-title > p:first-child {
  position:
    relative;

  z-index: 1;

  margin:
    0 0 11px;

  color:
    var(--primary);

  font-size:
    11px;

  font-weight:
    850;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}

.overview-title h2 {
  position:
    relative;

  z-index: 1;

  margin:
    0;

  font-size:
    clamp(31px, 4.4vw, 54px);

  font-weight:
    880;

  line-height:
    1.02;

  letter-spacing:
    -0.04em;

  background:
    linear-gradient(
      105deg,
      var(--text-strong),
      var(--primary),
      var(--secondary)
    );

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;
}

.overview-subtitle {
  position:
    relative;

  z-index:
    1;

  max-width:
    520px;

  margin:
    13px 0 0 !important;

  color:
    var(--muted) !important;

  font-size:
    12px !important;

  font-weight:
    600 !important;

  line-height:
    1.6 !important;

  letter-spacing:
    0 !important;

  text-transform:
    none !important;
}


/* =========================================================
   12. Metrics
   ========================================================= */

.metric-grid {
  display:
    grid;

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

  gap:
    13px;
}

.metric {
  position:
    relative;

  display:
    grid;

  align-content:
    space-between;

  min-height:
    170px;

  overflow:
    hidden;

  padding:
    20px;

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

  border-radius:
    var(--radius-xl);

  background:
    var(--metric-bg);

  backdrop-filter:
    blur(22px)
    saturate(140%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(140%);

  box-shadow:
    var(--shadow);

  transition:
    transform 0.23s ease,
    border-color 0.23s ease,
    box-shadow 0.23s ease;
}

.metric::before {
  position:
    absolute;

  top: 13px;
  right: 13px;

  width: 8px;
  height: 8px;

  content: "";

  border-radius:
    50%;

  background:
    var(--primary-soft);

  opacity:
    0.45;

  box-shadow:
    0 0 14px
    var(--primary-soft);
}

.metric:hover {
  transform:
    translateY(-3px);

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

  box-shadow:
    var(--shadow-hover);
}

.metric.accent {
  background:
    var(--metric-accent-bg);

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

.metric-value {
  color:
    var(--text-strong);

  font-size:
    clamp(30px, 4vw, 46px);

  font-weight:
    870;

  line-height:
    1;

  letter-spacing:
    -0.045em;
}

.metric.accent .metric-value {
  color:
    var(--primary);
}

.metric-label {
  color:
    var(--muted);

  font-size:
    13px;

  font-weight:
    650;
}


/* =========================================================
   13. Reading Navigation
   ========================================================= */

.reading-nav-wrap {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    12px;

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

  border-radius:
    var(--radius-xl);

  background:
    var(--panel-bg);

  backdrop-filter:
    blur(24px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(24px)
    saturate(145%);

  box-shadow:
    var(--shadow);
}

.reading-tabs {
  display:
    grid;

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

  gap:
    9px;

  width:
    min(720px, 100%);
}

.reading-tab {
  display:
    grid;

  grid-template-columns:
    auto
    1fr
    auto;

  align-items:
    center;

  gap:
    10px;

  min-height:
    54px;

  padding:
    9px 13px;

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

  border-radius:
    17px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.53),
      rgba(255, 255, 255, 0.24)
    );

  color:
    var(--muted);

  cursor:
    pointer;

  box-shadow:
    5px 5px 13px
    rgba(181, 121, 144, 0.07),
    -4px -4px 12px
    rgba(255, 255, 255, 0.51);

  transition:
    color 0.20s ease,
    border-color 0.20s ease,
    background 0.20s ease,
    transform 0.20s ease,
    box-shadow 0.20s ease;
}

.reading-tab:hover {
  color:
    var(--text-strong);

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

  transform:
    translateY(-1px);
}

.reading-tab.active {
  color:
    var(--primary);

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

  background:
    linear-gradient(
      145deg,
      rgba(255, 218, 232, 0.62),
      rgba(255, 255, 255, 0.62)
    );

  box-shadow:
    inset 4px 4px 9px
    rgba(183, 118, 144, 0.09),
    inset -4px -4px 9px
    rgba(255, 255, 255, 0.62),
    4px 5px 13px
    rgba(181, 121, 144, 0.07);
}

.reading-tab-icon {
  display:
    inline-grid;

  width:
    31px;

  height:
    31px;

  place-items:
    center;

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

  border-radius:
    11px;

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

  color:
    currentColor;

  font-size:
    15px;

  font-weight:
    900;

  box-shadow:
    var(--shadow-inset);
}

.reading-tab-text {
  text-align:
    left;

  font-size:
    14px;

  font-weight:
    800;
}

.reading-tab-count {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    30px;

  min-height:
    28px;

  padding:
    4px 8px;

  border-radius:
    999px;

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

  color:
    var(--text);

  font-size:
    12px;

  font-weight:
    850;

  box-shadow:
    var(--shadow-inset);
}

.reading-tab[data-reading-state="read"].active {
  color:
    var(--read-accent);
}

.reading-tab[data-reading-state="favorite"].active {
  color:
    var(--favorite-accent);

  background:
    linear-gradient(
      145deg,
      var(--favorite-soft),
      rgba(255, 255, 255, 0.60)
    );
}

.local-state-note {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  flex:
    0 0 auto;

  padding:
    8px 11px;

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

  border-radius:
    999px;

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

  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    700;

  white-space:
    nowrap;
}


/* =========================================================
   14. Toolbar
   ========================================================= */

.toolbar {
  display:
    grid;

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

  gap:
    16px;

  align-items:
    end;

  padding:
    16px;

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

  border-radius:
    var(--radius-xl);

  background:
    var(--panel-bg);

  backdrop-filter:
    blur(24px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(24px)
    saturate(145%);

  box-shadow:
    var(--shadow);
}

.collection-tabs,
.tabs {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;
}

.collection-tab,
.tab,
.paper-link,
.state-btn {
  min-height:
    40px;

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

  border-radius:
    13px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.58),
      rgba(255, 247, 250, 0.40)
    );

  color:
    var(--text);

  cursor:
    pointer;

  font:
    inherit;

  font-size:
    13px;

  font-weight:
    720;

  text-decoration:
    none;

  box-shadow:
    5px 5px 12px
    rgba(181, 121, 144, 0.07),
    -4px -4px 11px
    rgba(255, 255, 255, 0.53);

  transition:
    color 0.20s ease,
    border-color 0.20s ease,
    background 0.20s ease,
    transform 0.20s ease,
    box-shadow 0.20s ease;
}

.collection-tab,
.tab {
  padding:
    8px 14px;
}

.collection-tab:hover,
.tab:hover,
.paper-link:hover,
.state-btn:hover {
  color:
    var(--primary);

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

  transform:
    translateY(-1px);
}

.collection-tab.active,
.tab.active {
  color:
    var(--primary);

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

  background:
    linear-gradient(
      145deg,
      rgba(255, 210, 227, 0.54),
      rgba(255, 255, 255, 0.58)
    );

  box-shadow:
    inset 4px 4px 9px
    rgba(183, 118, 144, 0.10),
    inset -4px -4px 9px
    rgba(255, 255, 255, 0.64);
}


/* =========================================================
   15. Filters
   ========================================================= */

.filters {
  display:
    grid;

  grid-template-columns:
    minmax(130px, 0.7fr)
    minmax(165px, 1fr)
    minmax(120px, 0.6fr)
    minmax(220px, 1.4fr);

  gap:
    11px;
}

.field {
  display:
    grid;

  gap:
    7px;

  min-width:
    0;
}

.field > span {
  padding-left:
    3px;

  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    700;
}

input,
select {
  width:
    100%;

  min-height:
    42px;

  padding:
    9px 12px;

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

  border-radius:
    13px;

  outline:
    none;

  background:
    var(--control-bg);

  color:
    var(--text);

  font-size:
    13px;

  box-shadow:
    var(--shadow-inset);

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

input::placeholder {
  color:
    var(--muted);

  opacity:
    0.72;
}

input:focus,
select:focus {
  border-color:
    var(--line-strong);

  box-shadow:
    var(--shadow-inset),
    0 0 0 4px
    rgba(217, 111, 155, 0.09);
}


/* =========================================================
   16. Accessibility
   ========================================================= */

.icon-link:focus-visible,
.theme-option:focus-visible,
.collection-tab:focus-visible,
.tab:focus-visible,
.reading-tab:focus-visible,
.paper-link:focus-visible,
.state-btn:focus-visible {
  outline:
    3px solid
    rgba(217, 111, 155, 0.16);

  outline-offset:
    3px;
}


/* =========================================================
   17. Content
   ========================================================= */

.content {
  min-width:
    0;
}

.content-head {
  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    16px;

  margin:
    4px 4px 15px;
}

.content-head h2 {
  margin:
    0;

  color:
    var(--text-strong);

  font-size:
    23px;

  font-weight:
    830;

  letter-spacing:
    -0.025em;
}

.content-head p {
  margin:
    6px 0 0;

  color:
    var(--muted);

  font-size:
    12px;
}

.result-count {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    33px;

  padding:
    6px 12px;

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

  border-radius:
    999px;

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

  color:
    var(--muted) !important;

  box-shadow:
    var(--shadow-soft);
}


/* =========================================================
   18. Empty State
   ========================================================= */

.empty-state {
  display:
    grid;

  justify-items:
    center;

  gap:
    8px;

  padding:
    46px 28px;

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

  border-radius:
    var(--radius-xl);

  background:
    var(--empty-bg);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  color:
    var(--muted);

  text-align:
    center;

  box-shadow:
    var(--shadow-soft);
}

.empty-state-icon {
  display:
    grid;

  width:
    52px;

  height:
    52px;

  place-items:
    center;

  margin-bottom:
    4px;

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

  border-radius:
    17px;

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

  color:
    var(--primary);

  font-size:
    24px;

  box-shadow:
    var(--shadow-inset);
}

.empty-state h3 {
  margin:
    0;

  color:
    var(--text-strong);

  font-size:
    18px;

  font-weight:
    820;
}

.empty-state p {
  margin:
    0;

  max-width:
    520px;

  color:
    var(--muted);

  font-size:
    13px;

  line-height:
    1.65;
}


/* =========================================================
   19. Paper Card
   ========================================================= */

.paper-list {
  display:
    grid;

  gap:
    17px;
}

.paper-card {
  position:
    relative;

  overflow:
    hidden;

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

  border-radius:
    var(--radius-xl);

  background:
    var(--card-bg);

  backdrop-filter:
    blur(22px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(145%);

  box-shadow:
    var(--shadow);

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.20s ease;
}

.paper-card::before {
  position:
    absolute;

  top: 0;
  left: 30px;
  right: 30px;

  height:
    1px;

  content:
    "";

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.78),
      transparent
    );

  pointer-events:
    none;
}

.paper-card:hover {
  transform:
    translateY(-4px);

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

  box-shadow:
    var(--shadow-hover);
}

.paper-card[data-reading-state="read"] {
  border-color:
    rgba(201, 111, 150, 0.18);
}

.paper-card[data-reading-state="favorite"] {
  border-color:
    rgba(183, 130, 66, 0.25);

  box-shadow:
    14px 16px 35px
    rgba(184, 137, 69, 0.09),
    -10px -10px 28px
    rgba(255, 255, 255, 0.82);
}

.paper-main {
  padding:
    23px 24px 21px;
}


/* =========================================================
   20. Metadata
   ========================================================= */

.paper-meta {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    9px;

  color:
    var(--muted);

  font-size:
    11px;
}

.match-badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    27px;

  padding:
    4px 11px;

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

  border-radius:
    999px;

  font-size:
    11px;

  font-weight:
    850;

  letter-spacing:
    0.02em;

  text-transform:
    uppercase;

  box-shadow:
    inset 0 1px 1px
    rgba(255, 255, 255, 0.43),
    0 5px 12px
    rgba(97, 63, 76, 0.10);
}

.match-badge.high {
  color:
    white;

  background:
    linear-gradient(
      135deg,
      var(--primary-soft),
      var(--green)
    );
}

.match-badge.medium {
  color:
    #6b5038;

  background:
    linear-gradient(
      135deg,
      #f5d0ad,
      var(--medium)
    );
}

.match-badge.low {
  color:
    white;

  background:
    linear-gradient(
      135deg,
      #b6a7af,
      var(--low)
    );
}


/* =========================================================
   21. Paper Title / Authors
   ========================================================= */

.paper-title-block {
  max-width:
    1180px;
}

.paper-title {
  max-width:
    1100px;

  margin:
    14px 0 0;

  color:
    var(--text-strong);

  font-size:
    clamp(20px, 2vw, 26px);

  font-weight:
    820;

  line-height:
    1.28;

  letter-spacing:
    -0.022em;
}

.paper-title-zh {
  max-width:
    1100px;

  margin:
    7px 0 10px;

  color:
    var(--primary);

  font-size:
    clamp(15px, 1.4vw, 18px);

  font-weight:
    720;

  line-height:
    1.52;

  letter-spacing:
    0.01em;
}

.paper-authors {
  margin:
    0;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.6;
}


/* =========================================================
   22. Tags
   ========================================================= */

.paper-tags {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    13px;
}

.tag {
  padding:
    4px 9px;

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

  border-radius:
    999px;

  background:
    linear-gradient(
      145deg,
      var(--tag-bg),
      rgba(255, 255, 255, 0.28)
    );

  color:
    var(--tag-text);

  font-size:
    11px;

  font-weight:
    650;

  box-shadow:
    3px 3px 8px
    rgba(174, 112, 136, 0.06),
    -3px -3px 8px
    rgba(255, 255, 255, 0.40);
}


/* =========================================================
   23. AI Analysis Header
   ========================================================= */

.analysis-heading {
  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    14px;

  margin:
    22px 2px 10px;
}

.analysis-heading > div {
  min-width:
    0;
}

.analysis-kicker {
  display:
    block;

  margin-bottom:
    3px;

  color:
    var(--primary);

  font-size:
    10px;

  font-weight:
    850;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}

.analysis-heading h4 {
  margin:
    0;

  color:
    var(--text-strong);

  font-size:
    16px;

  font-weight:
    820;

  letter-spacing:
    -0.01em;
}

.analysis-language-hint {
  flex:
    0 0 auto;

  padding:
    5px 9px;

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

  border-radius:
    999px;

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

  color:
    var(--muted);

  font-size:
    10px;

  font-weight:
    760;
}


/* =========================================================
   24. Bilingual Summary
   ========================================================= */

.summary-grid {
  display:
    grid;

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

  gap:
    12px;

  margin:
    0;
}

.summary-grid .summary-item,
.summary-grid > div {
  position:
    relative;

  min-width:
    0;

  padding:
    15px 16px;

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

  border-radius:
    16px;

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

  box-shadow:
    inset 3px 3px 8px
    rgba(174, 115, 138, 0.045),
    inset -3px -3px 8px
    rgba(255, 255, 255, 0.38);

  transition:
    background 0.20s ease,
    transform 0.20s ease,
    border-color 0.20s ease;
}

.summary-grid .summary-item:hover,
.summary-grid > div:hover {
  transform:
    translateY(-1px);

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

  background:
    rgba(255, 255, 255, 0.31);
}

.summary-grid dt {
  display:
    flex;

  align-items:
    baseline;

  gap:
    7px;

  margin-bottom:
    10px;

  color:
    var(--primary);
}

.summary-label-en {
  font-size:
    11px;

  font-weight:
    880;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}

.summary-label-zh {
  color:
    var(--muted);

  font-size:
    11px;

  font-weight:
    720;
}

.summary-grid dd {
  margin:
    0;

  color:
    var(--summary-text);

  font-size:
    13px;

  line-height:
    1.68;

  overflow-wrap:
    anywhere;
}

.bilingual-lines {
  display:
    grid;

  gap:
    11px;
}

.bilingual-pair {
  display:
    grid;

  gap:
    4px;

  padding-bottom:
    10px;

  border-bottom:
    1px solid
    var(--line-soft);
}

.bilingual-pair:last-child {
  padding-bottom:
    0;

  border-bottom:
    0;
}

.bilingual-original,
.bilingual-zh,
.bilingual-empty {
  margin:
    0;
}

.bilingual-original {
  color:
    var(--english-text);

  font-size:
    13px;

  font-weight:
    610;

  line-height:
    1.62;
}

.bilingual-zh {
  color:
    var(--chinese-text);

  font-size:
    12.5px;

  font-weight:
    520;

  line-height:
    1.68;
}

.bilingual-original + .bilingual-zh {
  position:
    relative;

  padding-left:
    11px;
}

.bilingual-original + .bilingual-zh::before {
  position:
    absolute;

  top:
    0.67em;

  left:
    0;

  width:
    4px;

  height:
    4px;

  content:
    "";

  border-radius:
    50%;

  background:
    var(--primary-soft);

  opacity:
    0.78;
}

.bilingual-empty {
  color:
    var(--muted);

  font-size:
    12px;

  font-style:
    italic;
}


/* =========================================================
   25. Footer
   ========================================================= */

.paper-footer {
  display:
    grid;

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

  align-items:
    center;

  gap:
    14px;

  padding:
    14px 20px;

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

  background:
    linear-gradient(
      90deg,
      var(--card-footer-bg),
      rgba(255, 255, 255, 0.13)
    );

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);
}

.match-reason {
  min-width:
    0;

  color:
    var(--muted);

  font-size:
    11px;

  line-height:
    1.55;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   26. Reading Buttons
   ========================================================= */

.paper-state-actions {
  display:
    flex;

  flex:
    0 0 auto;

  flex-wrap:
    wrap;

  justify-content:
    flex-end;

  gap:
    8px;
}

.state-btn {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  padding:
    7px 11px;

  white-space:
    nowrap;
}

.state-btn span {
  font-size:
    13px;

  font-weight:
    900;
}

.read-btn {
  color:
    var(--read-accent);

  border-color:
    rgba(201, 111, 150, 0.21);

  background:
    linear-gradient(
      145deg,
      var(--read-soft),
      rgba(255, 255, 255, 0.45)
    );
}

.favorite-btn {
  color:
    var(--favorite-accent);

  border-color:
    rgba(183, 130, 66, 0.24);

  background:
    linear-gradient(
      145deg,
      var(--favorite-soft),
      rgba(255, 255, 255, 0.45)
    );
}

.unread-btn {
  color:
    var(--unread-accent);

  border-color:
    rgba(140, 120, 129, 0.18);

  background:
    linear-gradient(
      145deg,
      var(--unread-soft),
      rgba(255, 255, 255, 0.43)
    );
}

.read-btn:hover {
  color:
    var(--read-accent);
}

.favorite-btn:hover {
  color:
    var(--favorite-accent);
}

.unread-btn:hover {
  color:
    var(--unread-accent);
}

.state-btn:active {
  transform:
    translateY(0);

  box-shadow:
    var(--shadow-inset);
}


/* =========================================================
   27. Paper Links
   ========================================================= */

.paper-links {
  display:
    flex;

  flex:
    0 0 auto;

  flex-wrap:
    wrap;

  justify-content:
    flex-end;

  gap:
    8px;
}

.paper-link {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    7px 12px;
}

.paper-link:active {
  transform:
    translateY(0);

  box-shadow:
    var(--shadow-inset);
}

.download-link {
  color:
    var(--download-text);

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

  background:
    linear-gradient(
      145deg,
      rgba(255, 219, 232, 0.42),
      rgba(255, 255, 255, 0.43)
    );
}


/* =========================================================
   28. Pink Polish
   ========================================================= */

body[data-theme="pink"] .brand-mark {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.95),
      rgba(255, 197, 220, 0.77)
    );
}

body[data-theme="pink"] .overview-title {
  box-shadow:
    15px 16px 36px
    rgba(201, 133, 160, 0.15),
    -11px -11px 31px
    rgba(255, 255, 255, 0.92),
    inset 0 1px 0
    rgba(255, 255, 255, 0.68);
}

body[data-theme="pink"] .paper-card {
  box-shadow:
    14px 16px 35px
    rgba(201, 133, 160, 0.12),
    -10px -10px 28px
    rgba(255, 255, 255, 0.88),
    inset 0 1px 0
    rgba(255, 255, 255, 0.50);
}


/* =========================================================
   29. Dark Overrides
   ========================================================= */

body[data-theme="dark"] .theme-switcher,
body[data-theme="dark"] .result-count,
body[data-theme="dark"] .local-state-note,
body[data-theme="dark"] .analysis-language-hint {
  background:
    rgba(255, 255, 255, 0.035);
}

body[data-theme="dark"] .theme-option.active {
  background:
    rgba(255, 255, 255, 0.075);

  box-shadow:
    inset 3px 3px 7px
    rgba(0, 0, 0, 0.18),
    inset -3px -3px 7px
    rgba(255, 255, 255, 0.015);
}

body[data-theme="dark"] .brand-mark {
  border-color:
    rgba(255, 255, 255, 0.08);

  background:
    linear-gradient(
      145deg,
      rgba(80, 53, 68, 0.90),
      rgba(49, 38, 47, 0.86)
    );

  box-shadow:
    7px 7px 16px
    rgba(0, 0, 0, 0.27),
    -5px -5px 14px
    rgba(255, 255, 255, 0.015);
}

body[data-theme="dark"] .icon-link,
body[data-theme="dark"] .collection-tab,
body[data-theme="dark"] .tab,
body[data-theme="dark"] .paper-link,
body[data-theme="dark"] .state-btn,
body[data-theme="dark"] .reading-tab {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.025)
    );

  box-shadow:
    5px 5px 12px
    rgba(0, 0, 0, 0.19),
    -4px -4px 11px
    rgba(255, 255, 255, 0.008);
}

body[data-theme="dark"] .reading-tab.active {
  background:
    rgba(255, 255, 255, 0.075);

  box-shadow:
    inset 3px 3px 8px
    rgba(0, 0, 0, 0.16),
    inset -3px -3px 8px
    rgba(255, 255, 255, 0.012);
}

body[data-theme="dark"] .reading-tab-count,
body[data-theme="dark"] .reading-tab-icon,
body[data-theme="dark"] .empty-state-icon {
  background:
    rgba(255, 255, 255, 0.045);
}

body[data-theme="dark"] .summary-grid .summary-item,
body[data-theme="dark"] .summary-grid > div {
  border-color:
    rgba(255, 255, 255, 0.055);

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

  box-shadow:
    inset 3px 3px 8px
    rgba(0, 0, 0, 0.13),
    inset -3px -3px 8px
    rgba(255, 255, 255, 0.008);
}

body[data-theme="dark"] .tag {
  box-shadow:
    3px 3px 8px
    rgba(0, 0, 0, 0.13);
}

body[data-theme="dark"] .paper-card[data-reading-state="favorite"] {
  box-shadow:
    14px 16px 35px
    rgba(0, 0, 0, 0.31),
    -7px -7px 22px
    rgba(255, 255, 255, 0.015);
}


/* =========================================================
   30. Hover Motion
   ========================================================= */

@media (hover: hover) {
  .metric,
  .paper-card,
  .overview-title,
  .icon-link,
  .collection-tab,
  .tab,
  .reading-tab,
  .paper-link,
  .state-btn {
    will-change:
      transform;
  }
}


/* =========================================================
   31. Tablet
   ========================================================= */

@media (max-width: 1100px) {
  .overview {
    grid-template-columns:
      1fr;
  }

  .toolbar {
    grid-template-columns:
      1fr;
  }

  .metric-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .filters {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .reading-nav-wrap {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .reading-tabs {
    width:
      100%;
  }

  .local-state-note {
    align-self:
      flex-start;
  }

  .paper-footer {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    align-items:
      start;
  }

  .match-reason {
    grid-column:
      1 / -1;
  }

  .overview-title {
    min-height:
      145px;
  }

  .metric {
    min-height:
      135px;
  }
}


/* =========================================================
   32. Mobile
   ========================================================= */

@media (max-width: 720px) {
  .topbar {
    align-items:
      flex-start;

    flex-wrap:
      wrap;

    gap:
      14px;

    padding:
      14px 16px;
  }

  .brand {
    width:
      100%;
  }

  .topbar p {
    max-width:
      calc(100vw - 100px);
  }

  .top-actions {
    width:
      100%;

    align-items:
      stretch;
  }

  .theme-switcher {
    flex:
      1 1 auto;

    overflow-x:
      auto;

    justify-content:
      flex-start;
  }

  .theme-option {
    flex:
      0 0 auto;
  }

  .icon-link {
    width:
      44px;
  }

  .shell {
    gap:
      18px;

    padding:
      18px 14px 42px;
  }

  .overview {
    gap:
      14px;
  }

  .metric-grid,
  .filters,
  .summary-grid {
    grid-template-columns:
      1fr;
  }

  .metric {
    min-height:
      112px;

    padding:
      17px;
  }

  .overview-title {
    min-height:
      132px;

    padding:
      20px;
  }

  .overview-title h2 {
    font-size:
      36px;
  }

  .toolbar {
    padding:
      13px;

    border-radius:
      20px;
  }

  .reading-nav-wrap {
    padding:
      10px;

    border-radius:
      20px;
  }

  .reading-tabs {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

    gap:
      7px;
  }

  .reading-tab {
    grid-template-columns:
      1fr;

    justify-items:
      center;

    gap:
      5px;

    min-height:
      74px;

    padding:
      8px 5px;

    text-align:
      center;
  }

  .reading-tab-icon {
    width:
      28px;

    height:
      28px;
  }

  .reading-tab-text {
    font-size:
      12px;

    text-align:
      center;
  }

  .reading-tab-count {
    min-width:
      26px;

    min-height:
      23px;

    padding:
      2px 7px;

    font-size:
      10px;
  }

  .local-state-note {
    font-size:
      10px;
  }

  .collection-tabs,
  .tabs {
    display:
      grid;

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

    width:
      100%;
  }

  .collection-tab,
  .tab {
    width:
      100%;
  }

  .content-head {
    align-items:
      center;
  }

  .paper-main {
    padding:
      19px 17px;
  }

  .paper-title {
    font-size:
      20px;
  }

  .paper-title-zh {
    font-size:
      15px;
  }

  .analysis-heading {
    align-items:
      flex-start;
  }

  .summary-grid {
    gap:
      9px;
  }

  .summary-grid .summary-item,
  .summary-grid > div {
    padding:
      13px;
  }

  .bilingual-original {
    font-size:
      12.5px;
  }

  .bilingual-zh {
    font-size:
      12px;
  }

  .paper-footer {
    display:
      flex;

    align-items:
      stretch;

    flex-direction:
      column;

    padding:
      14px 16px;
  }

  .paper-state-actions,
  .paper-links {
    display:
      grid;

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

    width:
      100%;
  }

  .state-btn,
  .paper-link {
    width:
      100%;

    padding:
      8px 6px;
  }
}


/* =========================================================
   33. Very Small Screens
   ========================================================= */

@media (max-width: 430px) {
  .brand-mark {
    width:
      43px;

    height:
      43px;

    border-radius:
      14px;
  }

  .topbar h1 {
    font-size:
      19px;
  }

  .theme-switcher {
    width:
      100%;
  }

  .theme-option {
    padding:
      6px 8px;

    font-size:
      11px;
  }

  .theme-option span:last-child {
    display:
      none;
  }

  .theme-swatch {
    width:
      18px;

    height:
      18px;
  }

  .overview-title h2 {
    font-size:
      32px;
  }

  .overview-subtitle {
    font-size:
      11px !important;
  }

  .metric-value {
    font-size:
      34px;
  }

  .collection-tabs,
  .tabs {
    grid-template-columns:
      1fr 1fr;
  }

  .reading-tab {
    border-radius:
      14px;
  }

  .analysis-language-hint {
    display:
      none;
  }

  .paper-state-actions,
  .paper-links {
    grid-template-columns:
      1fr;
  }

  .content-head {
    align-items:
      flex-start;

    flex-direction:
      column;
  }
}


/* =========================================================
   34. Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }
}
/* =========================================================
   35. V3 Deep Paper Reading Layout
   Task → Problem → Method → Model Figure → Innovation
   ========================================================= */

/*
 * V3 turns the core reading sections into full-width blocks.
 * Evidence / Limitations / Relevance stay compact at the bottom.
 */

.bilingual-summary-grid {
  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    14px;
}

.summary-item-wide {
  grid-column:
    1 / -1;
}

.task-summary-item,
.problem-summary-item,
.method-summary-item,
.innovation-summary-item,
.model-figure-summary-item {
  padding:
    20px 21px !important;

  border-color:
    var(--line-strong) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.38),
      rgba(255, 255, 255, 0.18)
    ) !important;

  box-shadow:
    inset 3px 3px 9px
    rgba(174, 115, 138, 0.04),
    inset -3px -3px 9px
    rgba(255, 255, 255, 0.40),
    0 8px 22px
    rgba(175, 112, 139, 0.045) !important;
}

.task-summary-item {
  position:
    relative;

  overflow:
    hidden;

  background:
    linear-gradient(
      135deg,
      rgba(255, 218, 232, 0.34),
      rgba(255, 255, 255, 0.28) 58%,
      rgba(232, 219, 251, 0.25)
    ) !important;
}

.task-summary-item::after {
  position:
    absolute;

  top:
    -65px;

  right:
    -45px;

  width:
    180px;

  height:
    180px;

  content:
    "";

  pointer-events:
    none;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.58),
      rgba(255, 255, 255, 0.04) 62%,
      transparent 70%
    );
}

.task-summary-item > * {
  position:
    relative;

  z-index:
    1;
}

.problem-summary-item {
  background:
    linear-gradient(
      145deg,
      rgba(255, 236, 243, 0.34),
      rgba(255, 255, 255, 0.24)
    ) !important;
}

.method-summary-item {
  background:
    linear-gradient(
      145deg,
      rgba(246, 239, 255, 0.38),
      rgba(255, 255, 255, 0.24)
    ) !important;
}

.innovation-summary-item {
  background:
    linear-gradient(
      145deg,
      rgba(255, 244, 224, 0.34),
      rgba(255, 255, 255, 0.24)
    ) !important;
}

.task-summary-item dt,
.problem-summary-item dt,
.method-summary-item dt,
.innovation-summary-item dt,
.model-figure-summary-item dt {
  margin-bottom:
    14px;
}

.task-summary-item .summary-label-en,
.problem-summary-item .summary-label-en,
.method-summary-item .summary-label-en,
.innovation-summary-item .summary-label-en,
.model-figure-summary-item .summary-label-en {
  font-size:
    12px;

  letter-spacing:
    0.09em;
}

.task-summary-item .summary-label-zh,
.problem-summary-item .summary-label-zh,
.method-summary-item .summary-label-zh,
.innovation-summary-item .summary-label-zh,
.model-figure-summary-item .summary-label-zh {
  font-size:
    12px;
}


/* =========================================================
   36. V3 Numbered Bilingual Steps
   ========================================================= */

.bilingual-pair {
  position:
    relative;

  display:
    block;

  min-width:
    0;
}

.bilingual-pair-content {
  min-width:
    0;
}

.bilingual-pair-index {
  position:
    absolute;

  top:
    1px;

  left:
    0;

  display:
    inline-grid;

  width:
    28px;

  height:
    28px;

  place-items:
    center;

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

  border-radius:
    10px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.75),
      rgba(255, 222, 235, 0.48)
    );

  color:
    var(--primary);

  font-size:
    11px;

  font-weight:
    900;

  line-height:
    1;

  box-shadow:
    3px 4px 10px
    rgba(173, 108, 135, 0.07),
    inset 1px 1px 1px
    rgba(255, 255, 255, 0.60);
}

.bilingual-pair-index + .bilingual-pair-content {
  padding-left:
    42px;
}

.summary-item-wide .bilingual-lines {
  gap:
    15px;
}

.summary-item-wide .bilingual-pair {
  padding-bottom:
    14px;
}

.summary-item-wide .bilingual-original {
  color:
    var(--english-text);

  font-size:
    13.5px;

  font-weight:
    630;

  line-height:
    1.72;
}

.summary-item-wide .bilingual-zh {
  margin-top:
    5px;

  color:
    var(--chinese-text);

  font-size:
    13.5px;

  font-weight:
    560;

  line-height:
    1.78;
}

/*
 * The Chinese sentence is visually connected to its English source,
 * but stays stronger than secondary metadata.
 */
.summary-item-wide .bilingual-original + .bilingual-zh {
  padding-left:
    13px;
}

.summary-item-wide .bilingual-original + .bilingual-zh::before {
  top:
    0.72em;

  width:
    5px;

  height:
    5px;

  background:
    var(--primary);

  opacity:
    0.55;
}


/* =========================================================
   37. V3 Task / Problem / Method / Innovation Details
   ========================================================= */

.task-summary-item .bilingual-original,
.task-summary-item .bilingual-zh {
  max-width:
    1180px;
}

.problem-summary-item .bilingual-pair,
.method-summary-item .bilingual-pair,
.innovation-summary-item .bilingual-pair {
  border-bottom-color:
    var(--line-soft);
}

.problem-summary-item .bilingual-pair:last-child,
.method-summary-item .bilingual-pair:last-child,
.innovation-summary-item .bilingual-pair:last-child {
  border-bottom:
    0;
}

.method-summary-item .bilingual-pair-index {
  color:
    var(--secondary);

  border-color:
    rgba(184, 145, 213, 0.28);

  background:
    linear-gradient(
      145deg,
      rgba(247, 238, 255, 0.72),
      rgba(255, 255, 255, 0.55)
    );
}

.innovation-summary-item .bilingual-pair-index {
  color:
    var(--favorite-accent);

  border-color:
    rgba(183, 130, 66, 0.25);

  background:
    linear-gradient(
      145deg,
      rgba(255, 241, 213, 0.60),
      rgba(255, 255, 255, 0.56)
    );
}


/* =========================================================
   38. Model Figure
   ========================================================= */

.model-figure-summary-item {
  overflow:
    hidden;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.49),
      rgba(247, 239, 251, 0.28)
    ) !important;
}

.model-figure-container {
  margin:
    0;
}

.model-figure-card {
  display:
    grid;

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

  gap:
    13px;

  margin:
    0;

  padding:
    13px;

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

  border-radius:
    18px;

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

  box-shadow:
    inset 3px 3px 10px
    rgba(180, 121, 145, 0.05),
    inset -3px -3px 10px
    rgba(255, 255, 255, 0.42);
}

.model-figure-link {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    240px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(121, 107, 115, 0.12);

  border-radius:
    14px;

  background:
    #ffffff;

  cursor:
    zoom-in;

  text-decoration:
    none;

  box-shadow:
    0 9px 24px
    rgba(87, 67, 76, 0.08);

  transition:
    border-color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.model-figure-link::after {
  position:
    absolute;

  right:
    12px;

  bottom:
    11px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    30px;

  min-height:
    30px;

  padding:
    4px 8px;

  content:
    "↗";

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

  border-radius:
    10px;

  background:
    rgba(39, 31, 35, 0.70);

  color:
    #ffffff;

  font-size:
    13px;

  font-weight:
    850;

  opacity:
    0;

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  transform:
    translateY(4px);

  transition:
    opacity 0.20s ease,
    transform 0.20s ease;
}

.model-figure-link:hover {
  border-color:
    var(--line-strong);

  transform:
    translateY(-1px);

  box-shadow:
    0 13px 30px
    rgba(87, 67, 76, 0.11);
}

.model-figure-link:hover::after {
  opacity:
    1;

  transform:
    translateY(0);
}

.model-figure-image {
  display:
    block;

  width:
    100%;

  max-width:
    1180px;

  max-height:
    760px;

  object-fit:
    contain;

  background:
    #ffffff;
}

.model-figure-caption {
  display:
    grid;

  gap:
    6px;

  margin:
    0;

  padding:
    3px 4px 1px;
}

.model-figure-caption-original,
.model-figure-caption-zh {
  margin:
    0;

  overflow-wrap:
    anywhere;
}

.model-figure-caption-original {
  color:
    var(--english-text);

  font-size:
    12.5px;

  font-weight:
    620;

  line-height:
    1.62;
}

.model-figure-caption-zh {
  color:
    var(--chinese-text);

  font-size:
    12.5px;

  font-weight:
    540;

  line-height:
    1.68;
}

.model-figure-meta {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

  margin-top:
    4px;
}

.model-figure-number,
.model-figure-page,
.model-figure-confidence {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    25px;

  padding:
    4px 8px;

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

  border-radius:
    999px;

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

  color:
    var(--muted);

  font-size:
    10px;

  font-weight:
    760;

  line-height:
    1.2;
}

.model-figure-number {
  color:
    var(--primary);

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

.model-figure-summary-item[data-figure-confidence="high"]
.model-figure-confidence {
  color:
    var(--read-accent);

  border-color:
    rgba(201, 111, 150, 0.22);

  background:
    var(--read-soft);
}

.model-figure-summary-item[data-figure-confidence="medium"]
.model-figure-confidence {
  color:
    var(--favorite-accent);

  border-color:
    rgba(183, 130, 66, 0.22);

  background:
    var(--favorite-soft);
}

.model-figure-summary-item[data-figure-confidence="low"]
.model-figure-confidence {
  color:
    var(--unread-accent);

  background:
    var(--unread-soft);
}


/* =========================================================
   39. Compact Evidence / Limitations / Relevance
   ========================================================= */

.evidence-summary-item,
.limitations-summary-item,
.relevance-summary-item {
  min-height:
    100%;
}

.evidence-summary-item {
  background:
    linear-gradient(
      145deg,
      rgba(235, 249, 242, 0.24),
      rgba(255, 255, 255, 0.20)
    ) !important;
}

.limitations-summary-item {
  background:
    linear-gradient(
      145deg,
      rgba(248, 242, 244, 0.28),
      rgba(255, 255, 255, 0.20)
    ) !important;
}

.relevance-summary-item {
  background:
    linear-gradient(
      145deg,
      rgba(255, 235, 244, 0.28),
      rgba(255, 255, 255, 0.20)
    ) !important;
}


/* =========================================================
   40. Dark Theme V3
   ========================================================= */

body[data-theme="dark"] .task-summary-item,
body[data-theme="dark"] .problem-summary-item,
body[data-theme="dark"] .method-summary-item,
body[data-theme="dark"] .innovation-summary-item,
body[data-theme="dark"] .model-figure-summary-item {
  border-color:
    rgba(239, 136, 178, 0.14) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.018)
    ) !important;

  box-shadow:
    inset 3px 3px 9px
    rgba(0, 0, 0, 0.14),
    inset -3px -3px 9px
    rgba(255, 255, 255, 0.009),
    0 9px 24px
    rgba(0, 0, 0, 0.12) !important;
}

body[data-theme="dark"] .task-summary-item {
  background:
    linear-gradient(
      135deg,
      rgba(223, 122, 164, 0.09),
      rgba(255, 255, 255, 0.025) 58%,
      rgba(183, 150, 210, 0.08)
    ) !important;
}

body[data-theme="dark"] .bilingual-pair-index {
  border-color:
    rgba(239, 136, 178, 0.18);

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

  box-shadow:
    3px 4px 10px
    rgba(0, 0, 0, 0.16);
}

body[data-theme="dark"] .method-summary-item .bilingual-pair-index {
  color:
    #c5a7dd;

  border-color:
    rgba(183, 150, 210, 0.22);

  background:
    rgba(183, 150, 210, 0.07);
}

body[data-theme="dark"] .innovation-summary-item .bilingual-pair-index {
  color:
    var(--favorite-accent);

  border-color:
    rgba(216, 173, 112, 0.20);

  background:
    rgba(216, 173, 112, 0.06);
}

body[data-theme="dark"] .model-figure-card {
  border-color:
    rgba(255, 255, 255, 0.07);

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

  box-shadow:
    inset 3px 3px 10px
    rgba(0, 0, 0, 0.16),
    inset -3px -3px 10px
    rgba(255, 255, 255, 0.008);
}

body[data-theme="dark"] .model-figure-link {
  border-color:
    rgba(255, 255, 255, 0.08);

  /*
   * Academic figures usually have a white canvas.
   * Keep it white even in dark mode so labels remain readable.
   */
  background:
    #ffffff;

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

body[data-theme="dark"] .model-figure-number,
body[data-theme="dark"] .model-figure-page,
body[data-theme="dark"] .model-figure-confidence {
  border-color:
    rgba(255, 255, 255, 0.08);

  background:
    rgba(255, 255, 255, 0.04);
}

body[data-theme="dark"] .evidence-summary-item,
body[data-theme="dark"] .limitations-summary-item,
body[data-theme="dark"] .relevance-summary-item {
  background:
    rgba(255, 255, 255, 0.025) !important;
}


/* =========================================================
   41. Light / Eye Theme V3 Polish
   ========================================================= */

body[data-theme="light"] .task-summary-item {
  background:
    linear-gradient(
      135deg,
      rgba(205, 226, 255, 0.38),
      rgba(255, 255, 255, 0.35) 58%,
      rgba(232, 219, 251, 0.28)
    ) !important;
}

body[data-theme="light"] .method-summary-item {
  background:
    linear-gradient(
      145deg,
      rgba(230, 238, 255, 0.34),
      rgba(255, 255, 255, 0.27)
    ) !important;
}

body[data-theme="eye"] .task-summary-item {
  background:
    linear-gradient(
      135deg,
      rgba(224, 238, 216, 0.54),
      rgba(252, 255, 248, 0.42) 58%,
      rgba(241, 228, 206, 0.30)
    ) !important;
}

body[data-theme="eye"] .method-summary-item {
  background:
    linear-gradient(
      145deg,
      rgba(234, 242, 228, 0.47),
      rgba(252, 255, 248, 0.30)
    ) !important;
}


/* =========================================================
   42. V3 Tablet
   ========================================================= */

@media (max-width: 1100px) {
  .bilingual-summary-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .summary-item-wide {
    grid-column:
      1 / -1;
  }

  .relevance-summary-item {
    grid-column:
      1 / -1;
  }

  .model-figure-image {
    max-height:
      680px;
  }
}


/* =========================================================
   43. V3 Mobile
   ========================================================= */

@media (max-width: 720px) {
  .bilingual-summary-grid {
    grid-template-columns:
      1fr;
  }

  .summary-item-wide,
  .relevance-summary-item {
    grid-column:
      auto;
  }

  .task-summary-item,
  .problem-summary-item,
  .method-summary-item,
  .innovation-summary-item,
  .model-figure-summary-item {
    padding:
      15px !important;

    border-radius:
      15px !important;
  }

  .summary-item-wide .bilingual-lines {
    gap:
      12px;
  }

  .summary-item-wide .bilingual-pair {
    padding-bottom:
      12px;
  }

  .bilingual-pair-index {
    width:
      25px;

    height:
      25px;

    border-radius:
      9px;

    font-size:
      10px;
  }

  .bilingual-pair-index + .bilingual-pair-content {
    padding-left:
      36px;
  }

  .summary-item-wide .bilingual-original {
    font-size:
      12.5px;

    line-height:
      1.68;
  }

  .summary-item-wide .bilingual-zh {
    font-size:
      12.5px;

    line-height:
      1.72;
  }

  .model-figure-card {
    gap:
      10px;

    padding:
      8px;

    border-radius:
      14px;
  }

  .model-figure-link {
    min-height:
      170px;

    border-radius:
      11px;
  }

  .model-figure-image {
    max-height:
      520px;
  }

  .model-figure-caption {
    padding:
      2px 2px 0;
  }

  .model-figure-caption-original,
  .model-figure-caption-zh {
    font-size:
      11.5px;
  }

  .model-figure-meta {
    gap:
      5px;
  }

  .model-figure-number,
  .model-figure-page,
  .model-figure-confidence {
    min-height:
      23px;

    padding:
      3px 7px;

    font-size:
      9.5px;
  }
}


/* =========================================================
   44. V3 Very Small Screens
   ========================================================= */

@media (max-width: 430px) {
  .bilingual-pair-index {
    width:
      23px;

    height:
      23px;
  }

  .bilingual-pair-index + .bilingual-pair-content {
    padding-left:
      33px;
  }

  .model-figure-link {
    min-height:
      140px;
  }

  .model-figure-image {
    max-height:
      430px;
  }

  .model-figure-link::after {
    display:
      none;
  }
}