*,:after,:before{box-sizing:border-box}:root{--bg:#0c0c0f;--bg-veil:#0a0a0d;--surface:rgba(18,18,24,0.88);--surface-hover:rgba(28,28,38,0.92);--border:rgba(139,92,246,0.2);--border-bright:rgba(167,139,250,0.45);--text:#f4f4f5;--muted:#71717a;--accent:#a78bfa;--accent-dim:rgba(167,139,250,0.15);--line:#34d399;--sms:#a78bfa;--income:#fbbf24;--success:#34d399;--error:#f87171;--status-synced:#22c55e;--status-synced-bg:rgba(34,197,94,0.25);--status-failed:#ef4444;--status-failed-bg:rgba(239,68,68,0.28);--status-pending:#f59e0b;--status-pending-bg:rgba(245,158,11,0.28);--status-captured:#0ea5e9;--status-captured-bg:rgba(14,165,233,0.22);--shadow-glow:0 0 32px -8px rgba(139,92,246,0.25);--shadow-card:0 8px 32px rgba(0,0,0,0.5);--chart-line:#06b6d4;--chart-sms:#8b5cf6;--chart-income:#f59e0b}body,html{scrollbar-width:none;-ms-overflow-style:none}body{overflow-x:hidden}::-webkit-scrollbar{width:0;height:0;display:none}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse-glow{0%,to{box-shadow:0 0 0 0 rgba(52,211,153,.4)}50%{box-shadow:0 0 0 8px rgba(52,211,153,0)}}@keyframes gradientMove{0%,to{background-position:0 50%}50%{background-position:100% 50%}}@keyframes blobFloat{0%,to{transform:translate(0) scale(1)}25%{transform:translate(5%,-8%) scale(1.05)}50%{transform:translate(-6%,4%) scale(.95)}75%{transform:translate(4%,6%) scale(1.02)}}@keyframes chartPieIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes chartShimmer{0%,to{opacity:.5}50%{opacity:.9}}@keyframes chartGlow{0%,to{filter:drop-shadow(0 0 6px rgba(6,182,212,.15))}50%{filter:drop-shadow(0 0 12px rgba(6,182,212,.25))}}@keyframes pieSectorIn{0%{opacity:0;filter:drop-shadow(0 0 8px rgba(255,255,255,.2))}to{opacity:1;filter:drop-shadow(0 0 4px rgba(255,255,255,.06))}}@keyframes pieSectorGlow{0%,to{filter:drop-shadow(0 0 4px rgba(255,255,255,.06))}50%{filter:drop-shadow(0 0 10px rgba(255,255,255,.12))}}@keyframes barGrowIn{0%{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}@keyframes donutRingPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.02);opacity:.95}}@keyframes donutRingGlow{0%,to{box-shadow:0 0 20px rgba(6,182,212,.25),0 0 40px rgba(139,92,246,.15)}50%{box-shadow:0 0 28px rgba(6,182,212,.4),0 0 56px rgba(139,92,246,.25)}}@keyframes pieSectorDraw{0%{opacity:0;transform:scale(.85);filter:drop-shadow(0 0 12px rgba(255,255,255,.3))}to{opacity:1;transform:scale(1);filter:drop-shadow(0 0 6px rgba(255,255,255,.1))}}@keyframes titleBarSlide{0%{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}body,html{margin:0;min-height:100vh;font-family:IBM Plex Sans Thai,Segoe UI,system-ui,sans-serif;background:var(--bg-veil);background-image:radial-gradient(ellipse 120% 90% at 50% -10%,rgba(124,58,237,.22) 0,rgba(139,92,246,.08) 35%,transparent 55%),radial-gradient(ellipse 90% 70% at 95% 60%,rgba(139,92,246,.14) 0,transparent 45%),radial-gradient(ellipse 80% 70% at 5% 80%,rgba(167,139,250,.1) 0,transparent 45%);background-size:200% 200%;animation:gradientMove 18s ease infinite;color:var(--text);-webkit-font-smoothing:antialiased;position:relative}.app-body,.app-sidebar,.dock,.main-content,.topbar{position:relative;z-index:1}a,a:hover{color:var(--accent);text-decoration:none}.bg-effects{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}.bg-grid{background-image:linear-gradient(rgba(139,92,246,.07) 1px,transparent 0),linear-gradient(90deg,rgba(139,92,246,.07) 1px,transparent 0);background-size:48px 48px;mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black 15%,transparent 65%);-webkit-mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black 15%,transparent 65%)}.bg-grid,.bg-scanline{position:absolute;inset:0}.bg-scanline{background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 0,rgba(0,0,0,.03) 4px);pointer-events:none}.bg-blob{position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(80px);opacity:.55;animation:blobFloat 20s ease-in-out infinite}.bg-blob-1{top:-25%;left:-15%;background:radial-gradient(circle,rgba(124,58,237,.4) 0,rgba(139,92,246,.15) 40%,transparent 70%);animation-duration:22s}.bg-blob-2{bottom:-30%;right:-10%;background:radial-gradient(circle,rgba(139,92,246,.35) 0,rgba(167,139,250,.1) 45%,transparent 70%);animation-duration:25s;animation-delay:-5s}.bg-blob-3{top:30%;left:25%;width:50vmax;height:50vmax;background:radial-gradient(circle,rgba(167,139,250,.25) 0,rgba(139,92,246,.08) 50%,transparent 70%);animation-duration:18s;animation-delay:-10s}.app-body{display:flex;min-height:calc(100vh - 52px)}.topbar{background:rgba(8,8,12,.97);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border-bottom:1px solid rgba(139,92,246,.12);position:-webkit-sticky;position:sticky;top:0;z-index:50;animation:fadeIn .4s ease-out}.topbar-inner{padding:.5rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.topbar-left{display:flex;flex-direction:column;gap:.15rem}.topbar-brand{display:flex;align-items:center;gap:.5rem}.topbar-logo{font-size:1.25rem;color:var(--accent);line-height:1;filter:drop-shadow(0 0 8px rgba(167,139,250,.4))}.topbar-title{font-size:.95rem;font-weight:600;color:var(--text)}.topbar-tagline{font-size:.75rem;color:var(--muted);font-weight:500}.worker-badge-inline{margin-left:.4rem;padding:.12rem .4rem;font-size:.7rem}.topbar-right{display:flex;align-items:center;gap:.9rem}.topbar-search-wrap{display:flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.06);border:1px solid rgba(139,92,246,.15);border-radius:6px;padding:.35rem .6rem;min-width:140px}.topbar-search-icon{color:var(--muted);font-size:.9rem}.topbar-search{background:transparent;border:none;color:var(--text);font-size:.8rem;width:100%;outline:none}.topbar-search::placeholder{color:var(--muted)}.topbar-sep{color:var(--muted);font-size:.75rem;opacity:.5}.topbar-status{display:flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--muted)}.topbar-avatar{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.12);flex-shrink:0}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--success);animation:pulse-glow 2s ease-in-out infinite}.app-sidebar{width:240px;flex-shrink:0;background:rgba(12,12,18,.85);border-right:1px solid rgba(139,92,246,.12);padding:1.25rem 0;display:flex;flex-direction:column;gap:.5rem}.sidebar-brand{display:flex;align-items:center;gap:.5rem;padding:0 1.25rem .75rem;text-decoration:none;color:#fff;font-weight:700;font-size:1.05rem;border-bottom:1px solid rgba(139,92,246,.1);margin-bottom:.25rem}.sidebar-brand:hover{color:#fff;opacity:.9}.sidebar-brand-name{flex:1 1}.sidebar-tagline{font-size:.7rem;color:var(--muted);padding:0 1.25rem;margin:0 0 .5rem}.sidebar-nav{display:flex;flex-direction:column;gap:.1rem;padding:0 .5rem}.sidebar-link{display:block;padding:.5rem .75rem;border-radius:6px;color:var(--muted);font-size:.88rem;font-weight:500;text-decoration:none;transition:color .15s,background .15s}.sidebar-link:hover{color:var(--text);background:rgba(255,255,255,.05);text-decoration:none}.sidebar-link.active{color:#fff;background:rgba(139,92,246,.25)}.main-content{flex:1 1;width:100%;max-width:100%;min-height:calc(100vh - 52px);margin:0;padding:1.25rem 1.5rem 5rem;animation:fadeInUp .5s ease-out;overflow-x:auto;box-sizing:border-box}.dock{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);z-index:60;pointer-events:none}.dock-panel{display:flex;align-items:flex-end;justify-content:center;gap:.5rem;padding:.5rem 1rem;background:rgba(12,12,18,.9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(139,92,246,.2);border-radius:20px;box-shadow:0 8px 32px rgba(0,0,0,.4);pointer-events:auto}.dock-item{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.4rem;border-radius:50%;transition:transform .2s ease;background:transparent;cursor:pointer}.dock-item,.dock-item:hover{color:var(--text);text-decoration:none}.dock-item:hover{transform:scale(1.25)}.dock-item.active{transform:scale(1.15)}.dock-item.active .dock-icon{background:rgba(139,92,246,.35);box-shadow:0 0 20px -4px rgba(139,92,246,.5)}.dock-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);transition:background .2s,box-shadow .2s}.dock-item:hover .dock-icon{background:rgba(255,255,255,.14)}.dock-icon img{border-radius:50%;object-fit:cover}.dock-icon-logo .dock-emoji{color:var(--accent);font-size:1.5rem;filter:drop-shadow(0 0 6px rgba(167,139,250,.5))}.dock-emoji{font-size:1.4rem;line-height:1}.dock-label{font-size:.65rem;font-weight:500;color:var(--muted);max-width:4em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dock-item.active .dock-label,.dock-item:hover .dock-label{color:var(--text)}.bento-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(260px,30vh) auto;grid-gap:1rem;gap:1rem;margin-bottom:1.5rem;width:100%;max-width:min(1100px,calc(100vw - 2rem));margin-left:auto;margin-right:auto;min-height:0}.bento-card{animation:fadeInUp .5s ease-out;background:var(--surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(139,92,246,.25);border-radius:14px;padding:1.25rem 1.5rem;box-shadow:0 8px 32px rgba(0,0,0,.3);transition:border-color .25s ease,box-shadow .25s ease}.bento-card:hover{border-color:rgba(167,139,250,.5);box-shadow:0 0 28px -4px rgba(139,92,246,.35)}.bento-stats{grid-column:1/-1;grid-row:1;min-height:0;border-left:4px solid var(--accent)}.bento-chart{grid-column:span 1;grid-row:2;min-height:0;display:flex;flex-direction:column;border:1px solid rgba(139,92,246,.2);box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.03);position:relative;overflow:hidden}.bento-chart-pie,.bento-chart-pie .chart-inner.chart-pie,.bento-chart-pie .chart-pie-ring{overflow:visible}.bento-chart:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent,var(--chart-line),var(--chart-sms),var(--chart-income),transparent);opacity:.75;animation:chartShimmer 3s ease-in-out infinite}.bento-chart .chart-title{margin-bottom:.5rem;flex-shrink:0;display:flex;align-items:center;gap:.5rem;font-weight:700;letter-spacing:.02em;color:var(--text)}.bento-chart .chart-title-icon{color:var(--accent);font-size:1rem;opacity:.9}.bento-chart .chart-inner{flex:1 1;min-height:200px;display:flex;align-items:center;justify-content:center}.bento-chart .chart-inner.chart-pie{min-height:240px;animation:chartPieIn .6s ease-out}.chart-header-pie{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem;flex-shrink:0;min-height:2.5rem}.chart-title-icon-pie{width:2rem;height:2rem;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--chart-line);background:linear-gradient(135deg,rgba(6,182,212,.2),rgba(139,92,246,.15));border-radius:10px;border:1px solid rgba(6,182,212,.4);animation:donutRingPulse 3s ease-in-out infinite}.chart-header-pie .chart-title{margin:0;flex:1 1;font-size:1rem;font-weight:700;color:var(--text);letter-spacing:.02em}.chart-title-bar{height:4px;flex:1 1;max-width:120px;border-radius:2px;background:linear-gradient(90deg,var(--chart-line),var(--chart-sms),var(--chart-income));opacity:.85;animation:titleBarSlide .8s ease-out .2s backwards,chartShimmer 4s ease-in-out 1s infinite}.bento-chart-pie .chart-inner.chart-pie{position:relative}.chart-pie-ring{position:relative;width:100%;padding:8px;animation:donutRingGlow 4s ease-in-out infinite}.chart-pie-center,.chart-pie-ring{display:flex;align-items:center;justify-content:center;border-radius:50%}.chart-pie-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex-direction:column;width:72px;height:72px;background:rgba(12,12,15,.85);border:2px solid rgba(139,92,246,.35);box-shadow:0 0 20px rgba(139,92,246,.2),inset 0 0 20px rgba(0,0,0,.3);z-index:1;animation:chartPieIn .6s ease-out .4s backwards}.chart-pie-svg-wrap{position:relative;z-index:2;width:100%}.chart-pie-center-value{font-size:1.5rem;font-weight:800;color:var(--text);line-height:1.2}.chart-pie-center-label{font-size:.65rem;font-weight:600;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}.bento-chart-pie .recharts-pie{animation:chartPieIn .8s ease-out,donutRingPulse 5s ease-in-out 1s infinite;transform-origin:center}.bento-chart-pie .recharts-pie path,.bento-chart-pie .recharts-pie-sector{position:relative;z-index:0;animation:pieSectorDraw .7s ease-out backwards;transform-origin:center;filter:drop-shadow(0 0 6px rgba(255,255,255,.08))}.bento-chart-pie .recharts-pie path:first-child,.bento-chart-pie .recharts-pie-sector:first-child{animation-delay:.08s}.bento-chart-pie .recharts-pie path:nth-child(2),.bento-chart-pie .recharts-pie-sector:nth-child(2){animation-delay:.2s}.bento-chart-pie .recharts-pie path:nth-child(3),.bento-chart-pie .recharts-pie-sector:nth-child(3){animation-delay:.32s}.bento-chart-pie .recharts-pie path:nth-child(4),.bento-chart-pie .recharts-pie-sector:nth-child(4){animation-delay:.44s}.bento-chart-pie:hover .recharts-pie path,.bento-chart-pie:hover .recharts-pie-sector{animation:pieSectorDraw .7s ease-out backwards,pieSectorGlow 2.2s ease-in-out .3s infinite;animation-delay:0s,.3s;filter:drop-shadow(0 0 12px rgba(255,255,255,.18))}.bento-chart-pie .chart-pie-cell{transition:filter .3s ease,opacity .3s ease;filter:drop-shadow(0 0 5px rgba(255,255,255,.08))}.bento-chart-pie:hover .chart-pie-cell{filter:drop-shadow(0 0 14px rgba(255,255,255,.2))}.bento-chart-pie .recharts-label-list,.bento-chart-pie .recharts-pie .recharts-layer:last-child{position:relative!important;z-index:100!important;isolation:isolate;min-width:1px;min-height:1px;pointer-events:none}.bento-chart-pie .chart-pie-label-on-top,.bento-chart-pie .recharts-label-list,.bento-chart-pie .recharts-pie .recharts-layer text,.bento-chart-pie .recharts-pie text,.bento-chart-pie .recharts-pie tspan,.bento-chart-pie .recharts-pie-label{fill:var(--text)!important;font-weight:600;font-size:12px;paint-order:stroke fill;stroke:rgba(12,12,15,.9);stroke-width:2px;visibility:visible!important;position:relative;z-index:100}.bento-chart-pie .chart-pie-label-layer{position:relative!important;z-index:9999!important;isolation:isolate}.bento-chart-pie .recharts-legend-wrapper{margin-top:.5rem;animation:fadeIn .5s ease-out .4s backwards}.bento-chart-pie .recharts-legend-item-text{color:var(--text)!important;font-size:.8rem}.bento-chart-bar .chart-inner{animation:chartPieIn .5s ease-out}.bento-chart-bar .recharts-bar-rectangle,.bento-chart-bar .recharts-bar-rectangle rect,.bento-chart-bar .recharts-rectangle{transform-origin:bottom;animation:barGrowIn .55s ease-out backwards;transition:filter .2s ease,opacity .2s ease;filter:drop-shadow(0 -2px 6px rgba(139,92,246,.2))}.bento-chart-bar .recharts-bar-rectangle:first-child,.bento-chart-bar .recharts-bar-rectangle:first-child rect{animation-delay:.05s}.bento-chart-bar .recharts-bar-rectangle:nth-child(2),.bento-chart-bar .recharts-bar-rectangle:nth-child(2) rect{animation-delay:.1s}.bento-chart-bar .recharts-bar-rectangle:nth-child(3),.bento-chart-bar .recharts-bar-rectangle:nth-child(3) rect{animation-delay:.15s}.bento-chart-bar .recharts-bar-rectangle:nth-child(4),.bento-chart-bar .recharts-bar-rectangle:nth-child(4) rect{animation-delay:.2s}.bento-chart-bar .recharts-bar-rectangle:nth-child(5),.bento-chart-bar .recharts-bar-rectangle:nth-child(5) rect{animation-delay:.25s}.bento-chart-bar .recharts-bar-rectangle:nth-child(6),.bento-chart-bar .recharts-bar-rectangle:nth-child(6) rect{animation-delay:.3s}.bento-chart-bar .recharts-bar-rectangle:nth-child(7),.bento-chart-bar .recharts-bar-rectangle:nth-child(7) rect{animation-delay:.35s}.bento-chart-bar:hover .recharts-bar-rectangle,.bento-chart-bar:hover .recharts-bar-rectangle rect,.bento-chart-bar:hover .recharts-rectangle{filter:drop-shadow(0 -2px 10px rgba(139,92,246,.35));opacity:.98}.chart-tooltip-wrap{outline:none;z-index:99999!important;position:fixed!important;pointer-events:none}.chart-tooltip{background:rgba(18,18,24,.98);border:1px solid var(--border-bright);border-radius:10px;padding:.5rem .75rem;box-shadow:0 8px 32px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);display:flex;flex-direction:column;gap:.2rem;min-width:7rem;z-index:99999;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.chart-tooltip-name{font-weight:600;color:var(--text)}.chart-tooltip-value{font-size:.85rem;color:var(--accent)}.bento-messages{grid-column:1/-1;grid-row:3;min-height:180px}.mock-badge{display:inline-block;margin-left:.5rem;padding:.15rem .5rem;font-size:.7rem;font-weight:600;color:var(--accent);background:var(--accent-dim);border-radius:6px;vertical-align:middle}.mock-note{margin-bottom:.75rem}@media (max-width:768px){.bento-grid{grid-template-columns:1fr;max-width:100%}.bento-chart,.bento-stats{grid-column:1}.bento-chart{min-height:260px}.bento-messages{grid-column:1}}.page-block{margin-bottom:1.5rem;animation:fadeInUp .5s ease-out;background:var(--surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:16px;padding:1.5rem 1.75rem;box-shadow:var(--shadow-card)}.home-section{margin-top:0;border-left:4px solid var(--accent)}.home-section .section-title{padding-bottom:.75rem;margin-bottom:1rem;border-bottom:1px solid var(--border)}.bento-messages .section-title,.bento-stats .section-title{padding-bottom:.5rem;margin-bottom:.75rem;border-bottom:1px solid var(--border)}.page-title{font-size:1.75rem;font-weight:800;color:var(--text);margin:0 0 .25rem}.page-desc{font-size:.95rem;color:var(--muted);margin:0 0 1rem}.page-desc .worker-badge{margin-left:.5rem}.page-state{color:var(--muted);font-size:.9rem}.page-state.page-error{color:var(--error)}.page-hint{color:var(--muted);font-size:.9rem;margin:1rem 0}.home-summary{margin-bottom:1.5rem}.section-title{font-size:1.2rem;font-weight:700;color:var(--text);margin:0 0 1rem}.worker-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:999px;font-size:.8rem;font-weight:600}.worker-badge.ok{background:rgba(52,211,153,.2);color:var(--line)}.worker-badge.err{background:rgba(248,113,113,.2);color:var(--error)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));grid-gap:1rem;gap:1rem;margin-bottom:1.5rem}.stat-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem;text-align:center;transition:transform .2s,box-shadow .2s}.stat-box:hover{transform:translateY(-2px);box-shadow:var(--shadow-card)}.stat-value{display:block;font-size:1.5rem;font-weight:800;color:var(--text)}.stat-box.line .stat-value{color:var(--line)}.stat-box.sms .stat-value{color:var(--sms)}.stat-box.income .stat-value{color:var(--income)}.stat-box.today .stat-value{color:var(--accent)}.stat-label{font-size:.75rem;color:var(--muted);margin-top:.25rem}.rate-bar-wrap{margin-bottom:1rem}.rate-bar{height:8px;background:var(--surface);border-radius:4px;overflow:hidden;margin-bottom:.5rem}.rate-fill{height:100%;background:linear-gradient(90deg,var(--income),var(--line));border-radius:4px;transition:width .3s ease}.rate-text{font-size:.8rem;color:var(--muted)}.charts-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));grid-gap:1.5rem;gap:1.5rem;margin-top:2rem;animation:fadeInUp .5s ease-out .2s backwards}.chart-card{position:relative;overflow:hidden;background:var(--surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:14px;padding:1.25rem;box-shadow:var(--shadow-card);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.chart-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow);border-color:var(--border-bright)}.chart-title{font-size:1rem;font-weight:700;color:var(--text);margin:0 0 1rem}.chart-inner{min-height:240px}.chart-inner.chart-pie{min-height:260px}.msg-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.msg-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1rem 1.25rem;transition:transform .2s,box-shadow .2s}.msg-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-card)}.msg-card-header{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}.msg-badge{font-size:.7rem;font-weight:700;padding:.2rem .5rem;border-radius:6px}.msg-badge.line{background:rgba(52,211,153,.2);color:var(--line)}.msg-badge.sms{background:rgba(167,139,250,.2);color:var(--sms)}.msg-income{font-size:.75rem;color:var(--income)}.msg-device{font-size:.7rem;color:var(--muted);background:var(--card);padding:.15rem .4rem;border-radius:4px;margin-left:.35rem;max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.msg-time{font-size:.75rem;color:var(--muted);margin-left:auto}.msg-sender{font-size:.85rem;color:var(--muted);margin-bottom:.35rem}.msg-content{font-size:.95rem;color:var(--text);line-height:1.5;white-space:pre-wrap;word-break:break-word}.msg-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;padding-top:.5rem;border-top:1px solid var(--border)}.msg-status{font-size:.72rem;font-weight:600;padding:.25rem .55rem;border-radius:6px;border:1px solid transparent}.msg-status.synced{background:var(--status-synced-bg);color:var(--status-synced);border-color:rgba(34,197,94,.4)}.msg-status.failed{background:var(--status-failed-bg);color:var(--status-failed);border-color:rgba(239,68,68,.45)}.msg-status.pending{background:var(--status-pending-bg);color:var(--status-pending);border-color:rgba(245,158,11,.45)}.msg-status.captured{background:var(--status-captured-bg);color:var(--status-captured);border-color:rgba(14,165,233,.4)}.msg-retry{font-size:.8rem;padding:.35rem .75rem;border-radius:8px;border:1px solid var(--border);background:var(--surface-hover);color:var(--accent);cursor:pointer;transition:background .2s,color .2s}.msg-retry:hover{background:var(--accent-dim);color:var(--text)}.msg-retry:disabled{opacity:.6;cursor:not-allowed}.device-filter{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.device-filter-label{font-size:.85rem;color:var(--muted)}.device-filter-select{padding:.4rem .75rem;border-radius:8px;font-size:.85rem;background:var(--surface);border:1px solid var(--border);color:var(--text);min-width:10rem}.filter-tabs{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}.filter-tabs a,.filter-tabs button{padding:.4rem .8rem;border-radius:8px;font-size:.85rem;font-weight:500;background:var(--surface);border:1px solid var(--border);color:var(--muted);cursor:pointer;text-decoration:none;transition:color .2s,background .2s,border-color .2s}.filter-tabs a:hover,.filter-tabs button:hover{color:var(--text);background:var(--surface-hover)}.filter-tabs .active,.filter-tabs a.active,.filter-tabs button.active{color:var(--accent);background:var(--accent-dim);border-color:var(--border-bright)}.load-more-btn{padding:.6rem 1.5rem;border-radius:8px;font-size:.9rem;font-weight:600;background:var(--accent);color:#fff;border:none;cursor:pointer;transition:opacity .2s,transform .2s}.load-more-btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.load-more-btn:disabled{opacity:.6;cursor:not-allowed}.link-more{display:inline-block;margin-top:1rem;font-weight:600}.settings-section{margin-bottom:2rem}.settings-section h2{font-size:1.1rem;color:var(--text);margin:0 0 .75rem}.input-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.input-row input{flex:1 1;min-width:200px;padding:.5rem .75rem;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.9rem}.btn-copy{padding:.5rem 1rem;border-radius:8px;font-weight:600;font-size:.9rem;background:var(--accent);color:#fff;border:none;cursor:pointer;transition:opacity .2s,transform .2s}.btn-copy:hover{opacity:.9;transform:scale(1.02)}.help-list{padding-left:1.5rem;color:var(--muted);line-height:1.7}.help-list code{background:var(--surface);padding:.15rem .4rem;border-radius:4px;font-size:.85em}.about-section{margin-bottom:1.5rem}.about-section h2{font-size:1.1rem;color:var(--text);margin:0 0 .5rem}.about-section p{color:var(--muted);line-height:1.6;margin:0}