body.dark-theme { --fl-card:#111827; --fl-sub:#1f2937; --fl-text:#f8fafc; --fl-muted:#cbd5e1; --fl-border:#334155; }
body:not(.dark-theme) { --fl-card:#fff; --fl-sub:#f8fafc; --fl-text:#0f172a; --fl-muted:#64748b; --fl-border:var(--yst-border,#e2e8f0); }
.flower-card-shell,.flower-card,.empty-state,.loading { background:var(--fl-card); border:1px solid var(--fl-border); border-radius:10px; box-shadow:4px 4px 0 rgba(15,23,42,.08); padding:16px 18px; margin-bottom:14px; color:var(--fl-text); }
.flower-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--fl-border); }
.flower-toolbar p { margin:6px 0 0; color:var(--fl-muted); font:13px var(--yst-font); }
.theme-toggle,.clear-btn,.filter-tag,.page-btn,.page-number,.ai-search-btn { border:1px solid var(--fl-border); border-radius:8px; background:var(--fl-card); color:var(--fl-text); cursor:pointer; font:800 13px var(--yst-font); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.theme-toggle { width:42px; height:42px; display:flex; align-items:center; justify-content:center; box-shadow:4px 4px 0 rgba(15,23,42,.12); }
.theme-toggle:hover,.filter-tag:hover,.page-btn:hover,.page-number:hover,.clear-btn:hover,.ai-search-btn:hover { transform:translate(-1px,-1px); border-color:#ec4899; box-shadow:5px 5px 0 rgba(15,23,42,.1); }
.search-container { margin-bottom:12px; }
.search-box { position:relative; }
.search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); z-index:1; }
.search-input { width:100%; height:46px; border:1px solid var(--fl-border); border-radius:8px; background:var(--fl-card); color:var(--fl-text); padding:0 46px 0 42px; font:14px var(--yst-font); outline:none; }
.search-input:focus { border-color:#ec4899; box-shadow:0 0 0 3px rgba(236,72,153,.12); }
.clear-btn { position:absolute; right:8px; top:50%; transform:translateY(-50%); width:30px; height:30px; align-items:center; justify-content:center; padding:0; }
.stats-bar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.stat-item { border:1px solid var(--fl-border); border-radius:8px; background:var(--fl-sub); padding:10px; display:flex; align-items:center; gap:9px; }
.stat-icon { font-size:22px; }
.stat-label { display:block; color:var(--fl-muted); font:12px var(--yst-font); margin-bottom:3px; }
.stat-value { color:var(--fl-text); font:900 16px var(--yst-font); }
.filter-tags { display:flex; flex-wrap:wrap; gap:8px; }
.filter-tag { min-height:34px; padding:0 12px; color:var(--fl-muted); }
.filter-tag.active { color:#ec4899; border-color:#ec4899; background:#fdf2f8; }
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-bottom:14px; }
.flower-card { margin:0; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.flower-card:hover { transform:translate(-2px,-2px); border-color:#ec4899; box-shadow:7px 7px 0 rgba(15,23,42,.12); }
.card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.flower-emoji { font-size:34px; line-height:1; }
.flower-name { margin:0 0 4px; color:var(--fl-text); font:900 20px var(--yst-font); }
.flower-name-en { margin:0 0 10px; color:var(--fl-muted); font:12px var(--yst-font); }
.flower-meaning { border:1px solid var(--fl-border); border-left:3px solid #ec4899; border-radius:8px; background:var(--fl-sub); padding:9px; margin-bottom:10px; }
.meaning-label { display:block; color:var(--fl-muted); font:12px var(--yst-font); margin-bottom:4px; }
.meaning-text { margin:0; color:var(--fl-text); font:900 14px var(--yst-font); }
.flower-description { color:var(--fl-muted); font:13px/1.7 var(--yst-font); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:64px; }
.card-footer { display:flex; justify-content:space-between; gap:8px; align-items:center; padding-top:10px; border-top:1px solid var(--fl-border); }
.view-details { color:#ec4899; font:800 13px var(--yst-font); text-decoration:none; }
.card-time { color:var(--fl-muted); font:11px var(--yst-font); }
.loading,.empty-state { text-align:center; color:var(--fl-muted); }
.loading-spinner { width:34px; height:34px; border:3px solid var(--fl-border); border-top-color:#ec4899; border-radius:50%; margin:0 auto 12px; animation:fl-spin .85s linear infinite; }
@keyframes fl-spin { to { transform:rotate(360deg); } }
.empty-icon { font-size:38px; margin-bottom:8px; }
.empty-state h3 { margin:0 0 6px; color:var(--fl-text); font:900 18px var(--yst-font); }
.empty-state p { margin:0 0 10px; }
.ai-search-btn { min-height:38px; padding:0 14px; color:#fff; background:#ec4899; border-color:#ec4899; }
.pagination { display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; margin:16px 0; }
.page-btn,.page-number { min-height:34px; padding:0 12px; }
.page-number.active { color:#fff; background:#ec4899; border-color:#ec4899; }
.page-btn:disabled { opacity:.45; cursor:not-allowed; }
.page-ellipsis { color:var(--fl-muted); padding:0 4px; }
.modal { position:fixed; inset:0; display:none; z-index:9999; }
.modal.active { display:block; }
.modal-overlay { position:absolute; inset:0; background:rgba(15,23,42,.55); }
.modal-content { position:relative; width:min(620px,calc(100% - 32px)); max-height:86vh; overflow:auto; margin:7vh auto 0; background:var(--fl-card); color:var(--fl-text); border:1px solid var(--fl-border); border-radius:12px; box-shadow:8px 8px 0 rgba(15,23,42,.2); padding:22px; }
.modal-close { position:absolute; right:12px; top:12px; width:34px; height:34px; border:1px solid var(--fl-border); border-radius:8px; background:var(--fl-card); color:var(--fl-text); cursor:pointer; }
.modal-flower-emoji { font-size:52px; text-align:center; }
.modal-flower-name { margin:8px 0 4px; text-align:center; color:var(--fl-text); font:900 28px var(--yst-font); }
.modal-flower-name-en { margin:0 0 16px; text-align:center; color:var(--fl-muted); }
.modal-section { border:1px solid var(--fl-border); border-radius:10px; background:var(--fl-sub); padding:12px; margin-top:10px; }
.modal-section-title { color:#ec4899; font:900 13px var(--yst-font); margin-bottom:6px; }
.modal-section-content { color:var(--fl-text); font:14px/1.8 var(--yst-font); }
.back-to-top { position:fixed; right:22px; bottom:22px; width:42px; height:42px; border:1px solid var(--fl-border); border-radius:10px; background:#ec4899; color:#fff; cursor:pointer; opacity:0; transform:translateY(10px); pointer-events:none; box-shadow:5px 5px 0 rgba(15,23,42,.14); transition:opacity .2s ease, transform .2s ease; z-index:999; }
.back-to-top.visible { opacity:1; transform:none; pointer-events:auto; }
.yst-ad-bottom { margin-top:16px; }
@media(max-width:980px){.stats-bar{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.flower-toolbar{align-items:flex-start;flex-direction:column}.stats-bar,.cards-grid{grid-template-columns:1fr}.theme-toggle{align-self:flex-end}.modal-content{margin-top:5vh}}