:root {
   --card-bg: rgba(255, 255, 255, 0.88);
   --card-border: rgba(255, 255, 255, 0.65);
   --text: #102a43;
   --muted: #486581;
   --accent: #0f766e;
   --accent-strong: #0b5d57;
   --link: #0c4a6e;
 
   --nf-card: rgba(255, 255, 255, 0.9);
   --nf-card-border: rgba(255, 255, 255, 0.66);
   --nf-text: #1f2937;
   --nf-muted: #475569;
   --nf-btn: #0c4a6e;
   --nf-btn-hover: #0a3b58;
 }
 
 * { box-sizing: border-box; }
 
 /* ===== Body ===== */
 body {
   margin: 0;
   min-height: 100vh;
   color: var(--text);
   font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
   background-image:
     linear-gradient(155deg, rgba(237, 246, 255, 0.45), rgba(247, 249, 252, 0.25)),
     url("./bg-home.jpg");
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
   padding: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
 }
 
 /* ===== Hanging Signboard ===== */
 .signboard {
   position: fixed;
   top: 28px;
   left: 28px;
   z-index: 50;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 .signboard-chain {
   width: 4px;
   height: 22px;
   background: linear-gradient(to bottom, #999, #666);
   border-radius: 2px;
 }
 
 .signboard-ring {
   width: 14px;
   height: 14px;
   margin: 0 auto 3px;
   border: 3px solid #888;
   border-radius: 50%;
 }
 
 .signboard-body {
   position: relative;
   background:
     repeating-linear-gradient(
       87deg,
       transparent,
       transparent 3px,
       rgba(0, 0, 0, 0.04) 3px,
       rgba(0, 0, 0, 0.04) 6px
     ),
     linear-gradient(
       180deg,
       #c4953a 0%,
       #b8860b 25%,
       #9a7209 50%,
       #b8860b 75%,
       #c4953a 100%
     );
   border: 3px solid #6b4e0a;
   border-radius: 6px;
   padding: 14px 32px;
   box-shadow:
     0 8px 24px rgba(0, 0, 0, 0.35),
     inset 0 1px 0 rgba(255, 255, 255, 0.25),
     inset 0 -2px 0 rgba(0, 0, 0, 0.2);
 }
 
 .signboard-body h1 {
   margin: 0;
   font-size: clamp(1rem, 3.2vw, 1.6rem);
   font-weight: 700;
   letter-spacing: 0.08em;
   color: #f5e6c8;
   text-shadow:
     0 1px 0 rgba(255, 255, 255, 0.12),
     0 -1px 0 rgba(0, 0, 0, 0.4),
     0 2px 4px rgba(0, 0, 0, 0.5);
   white-space: nowrap;
 }
 
 /* ===== Center Buttons ===== */
 .btn-group {
   display: flex;
   gap: 32px;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
 }
 
 .tool-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 18px;
   padding: 36px 48px;
   min-width: 220px;
   border-radius: 18px;
   background: rgba(255, 255, 255, 0.78);
   backdrop-filter: blur(6px);
   border: 1px solid rgba(255, 255, 255, 0.55);
   box-shadow: 0 8px 28px rgba(14, 30, 37, 0.13);
   text-decoration: none;
   color: var(--text);
   transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
   cursor: pointer;
 }
 
 .tool-btn:hover {
   transform: translateY(-5px);
   box-shadow: 0 14px 40px rgba(14, 30, 37, 0.2);
 }
 
 .tool-btn svg {
   width: 52px;
   height: 52px;
   flex-shrink: 0;
 }
 
 .tool-btn .btn-label {
   font-size: 1.15rem;
   font-weight: 600;
   letter-spacing: 0.03em;
 }
 
 .tool-btn.tool-accent {
   border-color: rgba(15, 118, 110, 0.25);
 }
 .tool-btn.tool-accent:hover {
   border-color: var(--accent);
 }
 .tool-btn.tool-accent svg {
   color: var(--accent);
 }
 
 .tool-btn.forum-accent {
   border-color: rgba(196, 149, 58, 0.25);
 }
 .tool-btn.forum-accent:hover {
   border-color: #c4953a;
 }
 .tool-btn.forum-accent svg {
   color: #b8860b;
 }
 
 /* ===== Top Bar ===== */
 .top-bar {
   position: fixed;
   top: 28px;
   right: 28px;
   z-index: 50;
   display: flex;
   gap: 8px;
 }
 
 .theme-btn {
   min-width: 96px;
   text-align: center;
   background: rgba(255, 255, 255, 0.82);
   backdrop-filter: blur(4px);
   border: 1px solid rgba(255, 255, 255, 0.5);
   border-radius: 10px;
   padding: 10px 16px;
   font-family: inherit;
   font-size: 0.95rem;
   color: var(--text);
   cursor: pointer;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   transition: background 0.2s, box-shadow 0.2s;
 }
 
 .theme-btn:hover {
   background: rgba(255, 255, 255, 0.95);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 }
 
 body.dark .theme-btn {
   background: rgba(25, 35, 55, 0.82);
   border-color: rgba(100, 130, 180, 0.25);
   color: #c8d6e5;
 }
 
 body.dark .theme-btn:hover {
   background: rgba(35, 50, 75, 0.9);
 }
 
 
 /* ===== Language Selector ===== */
 .custom-select {
   position: relative;
   display: inline-block;
 }
 .select-button {
   min-width: 96px;
   text-align: center;
   background: rgba(255, 255, 255, 0.82);
   backdrop-filter: blur(4px);
   border: 1px solid rgba(255, 255, 255, 0.5);
   border-radius: 10px;
   padding: 10px 16px;
   font-family: inherit;
   font-size: 0.95rem;
   color: var(--text);
   cursor: pointer;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   transition: background 0.2s, box-shadow 0.2s;
   display: flex;
   align-items: center;
   gap: 6px;
   white-space: nowrap;
 }
 .select-button:hover {
   background: rgba(255, 255, 255, 0.95);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 }
 .select-button .arrow {
   font-size: 0.65rem;
   margin-left: auto;
   transition: transform 0.2s ease;
 }
 .custom-select.open .select-button .arrow {
   transform: rotate(180deg);
 }
 .select-options {
   display: none;
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
   min-width: 120px;
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.5);
   border-radius: 10px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
   z-index: 100;
   overflow: hidden;
 }
 .custom-select.open .select-options {
   display: block;
 }
 .option {
   padding: 8px 14px;
   cursor: pointer;
   font-size: 0.9rem;
   color: var(--text);
   transition: background 0.15s;
 }
 .option:hover {
   background: rgba(15, 118, 110, 0.1);
 }
 .option.selected {
   background: rgba(15, 118, 110, 0.15);
   font-weight: 600;
 }
 body.dark .select-button {
   background: rgba(25, 35, 55, 0.82);
   border-color: rgba(100, 130, 180, 0.25);
   color: #c8d6e5;
 }
 body.dark .select-button:hover {
   background: rgba(35, 50, 75, 0.9);
 }
 body.dark .select-options {
   background: rgba(25, 35, 55, 0.85);
   border-color: rgba(100, 130, 180, 0.2);
 }
body.dark .option:hover {
  background: rgba(91, 140, 255, 0.15);
}
body.dark .option.selected {
  background: rgba(91, 140, 255, 0.2);
 }
 body.dark .option {
   color: #c8d6e5;
 }
 @media (max-width: 768px) {
   .select-button {
     padding: 8px 12px;
     font-size: 0.88rem;
     min-width: 80px;
   }
   .select-options {
     min-width: 100px;
   }
 }
 
 /* ===== Dark Mode ===== */
 body.dark {
   background-image:
     linear-gradient(155deg, rgba(8, 18, 30, 0.72), rgba(12, 22, 40, 0.58)),
     url("./bg-home.jpg");
 }
 
 body.dark .tool-btn {
   background: rgba(18, 28, 48, 0.78);
   border-color: rgba(100, 130, 180, 0.2);
   color: #c8d6e5;
 }
 
 body.dark .tool-btn svg {
   opacity: 0.85;
 }
 
 body.dark .tool-btn.tool-accent svg {
   color: #5bcfc0;
 }
 
 body.dark .tool-btn.forum-accent svg {
   color: #d4a84b;
 }
 
 /* ===== Transparent Mode ===== */
 body.transparent .tool-btn {
   background: rgba(255, 255, 255, 0.3);
 }
 
body.dark.transparent .tool-btn {
   background: rgba(18, 28, 48, 0.3);
 }
 
 body.transparent .select-options {
   background: rgba(255, 255, 255, 0.25);
   border-color: rgba(255, 255, 255, 0.15);
 }
 body.dark.transparent .select-options {
   background: rgba(25, 35, 55, 0.3);
   border-color: rgba(100, 130, 180, 0.12);
 }
 
 /* ===== 404 Page ===== */
 .nf-card {
   width: min(620px, 100%);
   background: var(--nf-card);
   border: 1px solid var(--nf-card-border);
   border-radius: 18px;
   box-shadow: 0 20px 50px rgba(2, 8, 23, 0.25);
   backdrop-filter: blur(4px);
   padding: 30px 22px;
   text-align: center;
 }
 
 .nf-code {
   margin: 0;
   font-size: clamp(2.4rem, 10vw, 4rem);
   line-height: 1;
   color: #0f172a;
   letter-spacing: 0.08em;
 }
 
 .nf-title {
   margin: 10px 0 8px;
   font-size: clamp(1.2rem, 4vw, 1.8rem);
 }
 
 .nf-text {
   margin: 0;
   color: var(--nf-muted);
   line-height: 1.7;
 }
 
 .nf-actions {
   margin-top: 22px;
   display: flex;
   gap: 10px;
   justify-content: center;
   flex-wrap: wrap;
 }
 
 .nf-btn {
   text-decoration: none;
   color: #fff;
   background: var(--nf-btn);
   border-radius: 10px;
   padding: 10px 16px;
   font-weight: 600;
   transition: background 0.15s ease;
 }
 
 .nf-btn:hover { background: var(--nf-btn-hover); }
 
 .nf-btn.ghost {
   background: rgba(15, 23, 42, 0.12);
   color: #0f172a;
 }
 
 .nf-btn.ghost:hover {
   background: rgba(15, 23, 42, 0.2);
 }
 
 /* ===== Mobile ===== */
 @media (max-width: 768px) {
   .signboard {
     top: 16px;
     left: 16px;
   }
   .signboard-body {
     padding: 10px 20px;
   }
   .signboard-chain {
     height: 16px;
   }
   .signboard-ring {
     width: 11px;
     height: 11px;
     border-width: 2px;
   }
   .btn-group {
     flex-direction: column;
     gap: 20px;
     width: 100%;
     max-width: 360px;
   }
   .tool-btn {
     width: 100%;
     padding: 28px 32px;
     min-width: 0;
   }
   .tool-btn svg {
     width: 42px;
     height: 42px;
   }
   .top-bar {
     top: 16px;
     right: 16px;
   }
   .theme-btn {
     padding: 8px 12px;
     font-size: 0.88rem;
     min-width: 80px;
   }
 }
 
 @media (max-width: 480px) {
   body {
     padding: 12px;
   }
   .signboard {
     top: 12px;
     left: 12px;
   }
   .signboard-body {
     padding: 8px 14px;
   }
   .signboard-body h1 {
     font-size: 0.92rem;
   }
   .top-bar {
     top: 12px;
     right: 12px;
   }
 }