/* 基礎變數 */
:root{--c-bg:#f4f7fb;--c-panel:#fff;--c-panel-2:#f8fbff;--c-ink:#172033;--c-muted:#65738a;--c-line:#dce5f0;--c-primary:#2563eb;--c-primary-2:#14b8a6;--c-warm:#f59e0b;--c-danger:#e24b4b;--c-shadow:0 18px 45px rgba(23,32,51,.08);--g-hero:linear-gradient(135deg,#113c70 0%,#2563eb 52%,#14b8a6 100%);--g-soft:linear-gradient(135deg,#eef5ff 0%,#effdfa 100%);}
body.dark{--c-bg:#101827;--c-panel:#172033;--c-panel-2:#1d293d;--c-ink:#f8fbff;--c-muted:#a9b6c9;--c-line:#304057;--c-shadow:0 18px 45px rgba(0,0,0,.28);}
*{box-sizing:border-box;}
body{min-height:100vh;margin:0;background:var(--c-bg);color:var(--c-ink);font-family:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;}
button,input{font:inherit;}
.app-container{max-width:1440px;margin:0 auto;}
.app-nav{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--c-line);background:rgba(255,255,255,.88);backdrop-filter:blur(14px);}
body.dark .app-nav{background:rgba(23,32,51,.88);}
.navbar-brand{display:flex;align-items:center;gap:.65rem;color:var(--c-ink);font-weight:900;}
.navbar-brand:hover{color:var(--c-primary);}
.navbar-brand i{color:var(--c-primary);}
.nav-actions{display:flex;gap:8px;}
.nav-link-btn{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border:1px solid var(--c-line);border-radius:999px;background:var(--c-panel);color:var(--c-ink);font-weight:850;text-decoration:none;}
.nav-link-btn:hover{border-color:var(--c-primary);color:var(--c-primary);}
.icon-pill{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--c-line);border-radius:999px;background:var(--c-panel);color:var(--c-ink);}
.icon-pill:hover{border-color:var(--c-primary);color:var(--c-primary);}
.app-main{padding-top:24px;padding-bottom:42px;}
.hero-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,520px);gap:24px;align-items:end;margin-bottom:22px;padding:30px;border-radius:24px;background:var(--g-hero);box-shadow:var(--c-shadow);color:#fff;}
.eyebrow{margin:0 0 8px;color:#bff9ff;font-size:.82rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;}
.hero-panel h1{margin:0 0 10px;font-size:clamp(1.9rem,3.2vw,3.6rem);font-weight:950;line-height:1.12;letter-spacing:0;}
.hero-panel p{max-width:760px;margin:0;color:rgba(255,255,255,.84);line-height:1.8;}
.search-wrap{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:center;padding:14px 16px;border:1px solid rgba(255,255,255,.28);border-radius:16px;background:rgba(255,255,255,.14);}
.search-wrap input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-weight:800;}
.search-wrap input::placeholder{color:rgba(255,255,255,.75);}
.layout-grid{display:grid;grid-template-columns:250px minmax(0,1fr) 300px;gap:20px;align-items:start;}
.side-panel,.content-panel{border:1px solid var(--c-line);border-radius:20px;background:var(--c-panel);box-shadow:0 10px 30px rgba(23,32,51,.05);}
.side-panel{position:sticky;top:84px;padding:16px;}
.content-panel{padding:20px;min-height:620px;}
.panel-title{display:flex;align-items:center;gap:9px;margin-bottom:12px;color:var(--c-ink);font-weight:900;}
.panel-title i{color:var(--c-primary);}
.category-list{display:grid;gap:8px;}
.category-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;padding:10px 12px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--c-ink);font-weight:850;text-align:left;}
.category-btn span:first-child{display:flex;align-items:center;gap:9px;}
.category-btn small{color:var(--c-muted);font-weight:800;}
.category-btn:hover,.category-btn.active{border-color:var(--c-primary);background:var(--g-soft);color:var(--c-primary);}
body.dark .category-btn:hover,body.dark .category-btn.active{background:#1e3358;}
.emoji-link{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:12px;border:1px solid var(--c-line);border-radius:14px;background:var(--c-panel-2);color:var(--c-ink);font-weight:850;text-decoration:none;}
.emoji-link span{display:flex;align-items:center;gap:8px;}
.emoji-link small{color:var(--c-muted);font-weight:800;}
.emoji-link:hover{border-color:var(--c-primary);color:var(--c-primary);}
.toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;}
.toolbar h2{margin:0 0 4px;font-size:1.35rem;font-weight:950;}
.toolbar p{margin:0;color:var(--c-muted);}
.toolbar-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.btn{border-radius:12px;font-weight:850;}
.tray-box{min-height:54px;margin-bottom:18px;padding:13px 15px;border:1px solid var(--c-line);border-radius:16px;background:var(--c-panel-2);font-size:1.4rem;line-height:1.6;word-break:break-all;}
.tray-box.empty{display:grid;place-items:center;color:var(--c-muted);font-size:.95rem;}
.section-list{display:grid;gap:22px;}
.symbol-section{scroll-margin-top:94px;padding-bottom:20px;border-bottom:1px solid var(--c-line);}
.symbol-section:last-child{padding-bottom:0;border-bottom:0;}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px;}
.section-head h3{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-size:1.18rem;font-weight:950;}
.section-head h3 i{color:var(--c-primary);}
.section-head p{margin:0;color:var(--c-muted);font-size:.88rem;}
.section-head span{flex:0 0 auto;padding:6px 10px;border-radius:999px;background:var(--c-panel-2);color:var(--c-muted);font-size:.82rem;font-weight:850;}
.symbol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px;}
.symbol-card{position:relative;display:grid;grid-template-rows:1fr auto;min-height:90px;border:1px solid var(--c-line);border-radius:16px;background:var(--c-panel-2);overflow:hidden;transition:.18s;}
.symbol-card:hover{border-color:var(--c-primary);transform:translateY(-2px);box-shadow:0 12px 24px rgba(37,99,235,.13);}
.symbol-main{display:grid;place-items:center;width:100%;min-height:58px;border:0;background:transparent;color:var(--c-ink);font-size:2rem;line-height:1;}
.symbol-tools{display:flex;align-items:center;justify-content:space-between;padding:5px 7px;border-top:1px solid var(--c-line);}
.symbol-tools small{overflow:hidden;color:var(--c-muted);font-size:.72rem;text-overflow:ellipsis;white-space:nowrap;}
.fav-btn{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:9px;background:transparent;color:var(--c-muted);}
.fav-btn.active,.fav-btn:hover{color:var(--c-warm);background:rgba(245,158,11,.12);}
.mini-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;min-height:45px;}
.mini-chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 10px;border:1px solid var(--c-line);border-radius:999px;background:var(--c-panel-2);color:var(--c-ink);font-size:1.08rem;}
.mini-chip:hover{border-color:var(--c-primary);color:var(--c-primary);}
.mini-list.empty{display:grid;place-items:center;border:1px dashed var(--c-line);border-radius:14px;color:var(--c-muted);font-size:.92rem;}
.recent-title{margin-top:8px;}
.hint-card{display:grid;gap:5px;margin-top:8px;padding:14px;border-radius:16px;background:var(--g-soft);color:#14315f;}
body.dark .hint-card{background:#1e3358;color:#dceaff;}
.hint-card b{font-weight:950;}
.hint-card span{font-size:.9rem;line-height:1.6;}
.toast-box{position:fixed;right:18px;bottom:18px;z-index:60;display:grid;gap:8px;}
.copy-toast{padding:11px 14px;border-radius:14px;background:#172033;color:#fff;box-shadow:var(--c-shadow);font-weight:850;}
.no-result{grid-column:1/-1;display:grid;place-items:center;min-height:220px;border:1px dashed var(--c-line);border-radius:18px;color:var(--c-muted);}
@media (max-width:1199.98px){.layout-grid{grid-template-columns:220px minmax(0,1fr);}.quick-panel{position:static;grid-column:1/-1;}.hero-panel{grid-template-columns:1fr;}}
@media (max-width:767.98px){.app-main{padding-top:14px;}.hero-panel{padding:22px;border-radius:18px;}.layout-grid{grid-template-columns:1fr;}.side-panel{position:static;}.toolbar{display:grid;}.toolbar-actions{justify-content:stretch;}.toolbar-actions .btn{flex:1 1 auto;}.symbol-grid{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));}.symbol-main{font-size:1.75rem;}.category-list{grid-template-columns:repeat(2,minmax(0,1fr));}.nav-actions{gap:6px;}.nav-link-btn{padding:0 10px;font-size:.9rem;}.section-head{display:grid;}.emoji-layout{grid-template-columns:1fr;}}