/* 定義主題變量 (預設深灰色) */
:root {
    --c-main: #475569;       /* Slate-600 */
    --c-hover: #334155;      /* Slate-700 */
    --c-light: #f1f5f9;      /* Slate-100 */
    --c-bg: #e2e8f0;         /* Slate-200 */
    --c-main-rgb: 71, 85, 105;
}

body { transition: background 0.5s ease; -webkit-user-select: none; user-select: none; }

.glass-panel { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 10px 40px rgba(0,0,0,0.08); transition: all 0.3s ease; }
.dark .glass-panel { background: rgba(15, 23, 42, 0.95); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 40px rgba(0,0,0,0.5); }

.nav-btn { position: relative; transition: all 0.3s; overflow: hidden; }
.nav-btn:hover i { transform: translateY(-3px) scale(1.1); transition: transform 0.3s; }
.nav-btn.active { background-color: var(--c-main); color: white !important; box-shadow: 0 4px 12px rgba(0,0,0, 0.2); }
.nav-btn.active i { color: white !important; } 
.dark .nav-btn.active { background-color: var(--c-main); color: white !important; }

.input-wrapper { position: relative; display: flex; align-items: center; background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.75rem; transition: all 0.2s; }
.dark .input-wrapper { background-color: rgba(30, 41, 59, 0.5); border-color: #334155; }
.input-wrapper:focus-within { border-color: var(--c-main); box-shadow: 0 0 0 2px rgba(var(--c-main-rgb), 0.2); }
.input-wrapper.error { border-color: #ef4444; background-color: #fef2f2; }
.dark .input-wrapper.error { background-color: #450a0a; border-color: #991b1b; }
.input-wrapper.warning { border-color: #f59e0b; }

.custom-input { width: 100%; background: transparent; outline: none; padding: 0.5rem 0.8rem; font-weight: 700; color: #334155; font-size: 1.05rem; }
.dark .custom-input { color: #f1f5f9; }

.custom-spinner { display: flex; flex-direction: column; width: 20px; height: 100%; border-left: 1px solid #e2e8f0; }
.dark .custom-spinner { border-left-color: #475569; }
.spinner-btn { flex: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #94a3b8; font-size: 9px; transition: background 0.1s; }
.spinner-btn:hover { background: #e2e8f0; color: var(--c-main); }
.dark .spinner-btn:hover { background: #334155; color: var(--c-main); }

.preset-tag { font-size: 0.65rem; padding: 2px 8px; border-radius: 99px; cursor: pointer; background: #f1f5f9; color: #64748b; border: 1px solid transparent; user-select: none; transition: all 0.2s; }
.preset-tag:hover { background: var(--c-light); color: var(--c-main); border-color: var(--c-bg); }
.dark .preset-tag { background: #1e293b; color: #94a3b8; }
.dark .preset-tag:hover { background: #334155; color: #e2e8f0; border-color: #475569; }

.slider-thumb::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: var(--c-main); cursor: pointer; border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.2s; }
.slider-thumb::-webkit-slider-thumb:hover { transform: scale(1.2); }

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.ai-highlight { color: #eab308; font-weight: 700; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.error-shake { animation: shake 0.3s ease-in-out; }

.print-show { display: none; }
@media print {
    @page { size: A4; margin: 1cm; }
    body * { visibility: hidden; }
    #print-area, #print-area * { visibility: visible; }
    #print-area { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border: none; background: white !important; }
    .no-print { display: none !important; }
    .print-show { display: block !important; }
}

/* Skin Selector Dots */
.skin-dot { width: 14px; height: 14px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 0.2s; }
.skin-dot:hover { transform: scale(1.2); }
.skin-dot.active { border-color: #94a3b8; transform: scale(1.2); box-shadow: 0 0 0 2px rgba(255,255,255,0.8); }
.dark .skin-dot.active { border-color: #fff; }
    
html { --font-scale: 1; font-size: calc(16px * var(--font-scale)); }
body { min-height: 100vh; background: linear-gradient(180deg, #dfe6ee 0%, #e8edf3 100%); overflow-x: hidden; }
.dark body { background: linear-gradient(180deg, #020617 0%, #0b1220 100%); }
.app-shell { max-width: 1440px; margin: 0 auto; }
.compact-header { gap: 0.75rem; align-items: center; }
.toolbar-row { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; justify-content:flex-end; }
.tool-pill { height: 2.35rem; display:inline-flex; align-items:center; border-radius: 9999px; padding: 0 0.5rem; background: rgba(255,255,255,0.92); border:1px solid rgba(148,163,184,0.28); box-shadow:0 6px 18px rgba(15,23,42,0.06); }
.dark .tool-pill { background: rgba(15,23,42,0.9); border-color: rgba(148,163,184,0.16); box-shadow:0 10px 24px rgba(0,0,0,0.28); }
.tool-btn-chip { min-width:2rem; height:2rem; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:800; color:#64748b; transition:all .2s; }
.tool-btn-chip:hover { background:#e2e8f0; color:var(--c-main); }
.dark .tool-btn-chip { color:#cbd5e1; }
.dark .tool-btn-chip:hover { background:#1e293b; }
.tool-btn-chip.active { background: var(--c-main); color:white; box-shadow: 0 6px 16px rgba(var(--c-main-rgb),0.35); }
.font-size-btn { letter-spacing:-0.02em; }
.font-size-btn.sm { font-size: 0.78rem; }
.font-size-btn.md { font-size: 0.95rem; }
.font-size-btn.lg { font-size: 1.08rem; }
.palette-wrap { position: relative; }
.palette-panel { position:static; background:rgba(255,255,255,0.98); border:1px solid rgba(148,163,184,0.24); border-radius:16px; padding:11px 14px; display:grid; grid-template-columns:repeat(10,1fr); gap:10px; box-shadow:0 14px 34px rgba(15,23,42,0.12); min-width: 352px; }
.dark .palette-panel { background:rgba(15,23,42,0.98); border-color:rgba(148,163,184,0.14); }
.palette-panel.hidden { display:grid; }
.palette-panel .skin-dot.active { transform:none; }
.skin-toggle-chip { gap:0.45rem; padding:0 0.7rem; cursor:pointer; }
.current-swatch { width: 1rem; height:1rem; border-radius:9999px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.6), 0 0 0 1px rgba(148,163,184,0.22); }
.control-icon-btn { width: 2.35rem; height:2.35rem; border-radius:9999px; }
.settings-modal { width:min(832px, calc(100vw - 32px)); max-width:none; font-size:16px; background: rgba(255,255,255,0.98); border:1px solid rgba(148,163,184,0.18); }
.dark .settings-modal { background: rgba(15,23,42,0.98); border-color: rgba(148,163,184,0.14); }
.settings-section { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 0; border-bottom:1px solid rgba(148,163,184,0.16); }
.settings-section:last-child { border-bottom:0; }
.settings-label { font-size:13px; font-weight:900; color:#475569; }
.dark .settings-label { color:#e2e8f0; }
.settings-hint { font-size:11px; color:#94a3b8; margin-top:2px; }
.settings-control { flex:0 0 auto; display:flex; justify-content:flex-end; }
.settings-modal .p-5 { padding:20px !important; }
.settings-modal .px-5 { padding-left:20px !important; padding-right:20px !important; }
.settings-modal .py-2 { padding-top:8px !important; padding-bottom:8px !important; }
.settings-modal .text-lg { font-size:18px !important; line-height:28px !important; }
.settings-modal .text-xl { font-size:20px !important; line-height:28px !important; }
.settings-modal .tool-pill { height:38px; }
.settings-modal .tool-btn-chip { min-width:32px; height:32px; font-size:13px; }
.settings-modal .control-icon-btn { width:38px; height:38px; }
.bookmark-fallback kbd { padding:0.08rem 0.36rem; border-radius:0.35rem; background:#e2e8f0; color:#334155; font-weight:800; }
.dark .bookmark-fallback kbd { background:#334155; color:#e2e8f0; }
.skin-dot { width: 18px; height: 18px; }
.slider-thumb::-webkit-slider-thumb { width: 24px; height: 24px; border-width: 3px; }
.slider-thumb::-moz-range-thumb { width: 24px; height: 24px; border-radius: 9999px; border: 3px solid white; background: var(--c-main); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.custom-input { font-size: 1rem; }
.preset-tag { font-size: 0.72rem; padding: 0.22rem 0.65rem; }
.nav-btn { min-height: 4.25rem; }
.nav-btn span { line-height: 1.2; }
.tool-btn { font-size:0.72rem; }
#print-area { display:flex; flex-direction:column; min-height:0; }
#print-area > .flex.flex-col.md\:flex-row { flex:1; min-height:0; }
@media (min-width: 900px) and (orientation: landscape) {
    body { overflow: hidden; }
    .app-shell { min-height: calc(100vh - 1rem); }
    #print-area { height: calc(100vh - 8.3rem); }
    #print-area > .flex.flex-col.md\:flex-row > div { overflow:auto; }
    footer.no-print { margin-top: 0.55rem; }
}
@media (max-width: 899px) {
    body { overflow-y:auto; }
    .tool-pill { height: 2.2rem; }
    .control-icon-btn { width: 2.2rem; height:2.2rem; }
}
@media (max-width: 640px) {
    .compact-header h1 { font-size: 1.15rem !important; }
    .compact-subtitle { display:none; }
    .toolbar-row { justify-content:center; }
    .settings-section { align-items:flex-start; flex-direction:column; }
    .settings-control { width:100%; justify-content:flex-start; }
    .palette-panel { min-width:0; width:100%; grid-template-columns:repeat(5,1fr); }
}

/* Advanced tools */
.adv-panel{margin-top:1rem;padding:.8rem;border-radius:1rem;background:rgba(248,250,252,.82);border:1px solid rgba(148,163,184,.18)}
    .dark .adv-panel{background:rgba(15,23,42,.38);border-color:rgba(148,163,184,.14)}
    .adv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
    .adv-field label{display:flex;justify-content:space-between;align-items:center;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#64748b;margin-bottom:.32rem}
    .dark .adv-field label{color:#94a3b8}
    .adv-note{font-size:.72rem;line-height:1.45;color:#64748b;margin-top:.55rem}
    .dark .adv-note{color:#94a3b8}
    .mode-btn{padding:.34rem .6rem;border-radius:9999px;font-size:.76rem;font-weight:800;border:1px solid rgba(148,163,184,.25);background:#fff;color:#475569;transition:all .2s}
    .dark .mode-btn{background:#0f172a;color:#cbd5e1;border-color:rgba(148,163,184,.18)}
    .mode-btn.active{background:var(--c-main);border-color:var(--c-main);color:#fff;box-shadow:0 4px 12px rgba(var(--c-main-rgb),.2)}
    .adv-card{background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.75);border-radius:.95rem;padding:.8rem .9rem}
    .dark .adv-card{background:rgba(30,41,59,.82);border-color:#334155}
    .adv-card .cap{font-size:.66rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#64748b;margin-bottom:.25rem}
    .dark .adv-card .cap{color:#94a3b8}
    .adv-card .val{font-size:1rem;font-weight:900;color:#1e293b;line-height:1.2}
    .dark .adv-card .val{color:#f8fafc}
    .adv-card .sub{font-size:.76rem;color:#64748b;margin-top:.2rem;line-height:1.35}
    .dark .adv-card .sub{color:#cbd5e1}
    .adv-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.7rem}
    .adv-btn{display:inline-flex;align-items:center;gap:.38rem;padding:.45rem .7rem;border-radius:.8rem;font-size:.76rem;font-weight:800;background:#fff;color:#334155;border:1px solid rgba(148,163,184,.2)}
    .dark .adv-btn{background:#1e293b;color:#e2e8f0;border-color:#334155}
    .adv-btn:hover{color:var(--c-main)}
    .hidden-adv{display:none!important}
    #adv-schedule-table table{width:100%;border-collapse:collapse}
    #adv-schedule-table th,#adv-schedule-table td{padding:.55rem .5rem;border-bottom:1px solid rgba(148,163,184,.18);text-align:right;font-size:.84rem}
    #adv-schedule-table th:first-child,#adv-schedule-table td:first-child{text-align:left}
    @media (max-width: 767px){.adv-grid{grid-template-columns:1fr}}

/* Shared header */
.site-header { position:relative; display:grid; grid-template-columns:minmax(14rem, 1fr) minmax(24rem, 34rem) minmax(14rem, 1fr); gap:1rem; align-items:center; }
.site-brand { min-width:0; }
.site-nav { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0.45rem; justify-self:center; width:100%; }
.site-nav-link { min-height:2.65rem !important; border-radius:0; padding:0.35rem 0.45rem 0.55rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.18rem; font-size:0.76rem; font-weight:900; color:#8fa0b6; overflow:visible; background:transparent !important; box-shadow:none !important; }
.site-nav-link::after { content:""; position:absolute; left:50%; bottom:0.1rem; width:1.7rem; height:0.18rem; border-radius:9999px; background:transparent; transform:translateX(-50%) scaleX(0.55); transition:all .2s ease; }
.site-nav-link i { margin:0; font-size:1rem; color:#8fa0b6; transition:transform .2s ease, color .2s ease; }
.site-nav-link:hover { color:var(--c-main); }
.site-nav-link:hover i { color:var(--c-main); }
.site-nav-link.active { background:transparent !important; color:var(--c-main) !important; box-shadow:none !important; }
.site-nav-link.active i { color:var(--c-main) !important; }
.site-nav-link.active::after { background:var(--c-main); transform:translateX(-50%) scaleX(1); }
.dark .site-nav-link { color:#74849a; }
.dark .site-nav-link i { color:#74849a; }
.dark .site-nav-link.active { color:#f8fafc !important; }
.dark .site-nav-link.active i { color:#f8fafc !important; }
.dark .site-nav-link.active::after { background:#f8fafc; }
.site-actions { justify-content:flex-end; }
.menu-toggle-btn { display:none; }
.menu-quick-actions { display:none; }
.menu-action-link { min-height:2.6rem; display:flex; align-items:center; gap:0.7rem; width:100%; padding:0.55rem 0.75rem; border-radius:0.65rem; font-size:0.82rem; font-weight:900; color:#475569; text-align:left; }
.menu-action-link:hover { background:var(--c-light); color:var(--c-main); }
.dark .menu-action-link { color:#cbd5e1; }
.dark .menu-action-link:hover { background:#1e293b; color:#f8fafc; }
.coffee-link { min-width:7.4rem; justify-content:center; padding:0 0.95rem; background:#e2e8f0 !important; border-color:rgba(148,163,184,0.36) !important; color:#1e293b !important; }
.coffee-link:hover { background:#d7dee8 !important; color:#0f172a !important; }
.dark .coffee-link { background:#cbd5e1 !important; border-color:rgba(203,213,225,0.4) !important; color:#0f172a !important; }
@media (max-width: 1100px) {
  .site-header { grid-template-columns:1fr auto; }
  .site-brand .brand-title { justify-content:flex-start !important; }
  .site-brand { text-align:left !important; }
  .site-actions { width:auto !important; }
  .menu-toggle-btn { display:inline-flex; }
  .site-nav { display:none; position:absolute; top:calc(100% + 0.45rem); right:0.5rem; z-index:45; width:min(20rem, calc(100vw - 1.5rem)); grid-template-columns:1fr; gap:0.2rem; padding:0.55rem; background:rgba(255,255,255,0.98); border:1px solid rgba(148,163,184,0.22); border-radius:0.9rem; box-shadow:0 18px 40px rgba(15,23,42,0.14); backdrop-filter:blur(18px); }
  .dark .site-nav { background:rgba(15,23,42,0.98); border-color:rgba(148,163,184,0.16); box-shadow:0 18px 44px rgba(0,0,0,0.36); }
  .site-nav.open { display:grid; }
  .site-nav-link { min-height:2.6rem !important; flex-direction:row; justify-content:flex-start; gap:0.7rem; padding:0.55rem 0.75rem; border-radius:0.65rem; font-size:0.82rem; }
  .site-nav-link::after { left:0.35rem; bottom:50%; width:0.2rem; height:1.35rem; transform:translateY(50%) scaleY(0); }
  .site-nav-link.active::after { transform:translateY(50%) scaleY(1); }
}
@media (max-width: 640px) {
  body { padding:0 !important; align-items:stretch !important; justify-content:flex-start !important; background:#dfe8f1; }
  .app-shell { max-width:none; width:100%; margin:0; }
  .site-header { grid-template-columns:minmax(0, 1fr) auto; gap:0.75rem; padding:0.8rem 0.9rem 0.9rem !important; margin:0 !important; background:rgba(226,235,244,0.88); }
  .compact-header h1 { font-size:1.2rem !important; }
  .site-brand { min-width:0; }
  .site-brand .brand-title { gap:0.45rem; }
  .site-brand img { width:2rem; height:2rem; margin-right:0.28rem; }
  .site-brand .text-\[0\.68rem\] { font-size:0.66rem !important; padding:0.22rem 0.48rem; }
  .site-nav { right:1rem; top:calc(100% - 0.25rem); width:calc(100vw - 2rem); }
  .site-nav-link { font-size:0.88rem; }
  .site-nav-link i { font-size:1rem; }
  .site-actions { justify-content:flex-end; gap:0; }
  .site-actions .coffee-link,
  .site-actions > .control-icon-btn:not(.menu-toggle-btn) { display:none; }
  .menu-quick-actions { display:grid; gap:0.2rem; margin-top:0.25rem; padding-top:0.3rem; border-top:1px solid rgba(148,163,184,0.18); }
  .site-actions .control-icon-btn { width:2.55rem; height:2.55rem; }
  .glass-panel { border-left:0; border-right:0; border-bottom:0; border-radius:1rem 1rem 0 0 !important; box-shadow:none; }
  #print-area { margin-top:0; }
  #print-area > .flex.flex-col.md\:flex-row > div:first-of-type { padding:1.2rem 1rem; }
  .custom-input { font-size:1rem; }
  .preset-tag { font-size:0.8rem; padding:0.34rem 0.85rem; }
  footer.no-print { padding-bottom:1rem; }
}