/* CashFlowKu+ v25 — style.css */

:root  {
--bg:#07071a;
--surface:rgba(255,255,255,0.025);
--card:rgba(255,255,255,0.04);
--card2:rgba(255,255,255,0.07);
--card3:rgba(255,255,255,0.09);
--border:rgba(255,255,255,0.07);
--border-h:rgba(255,255,255,0.14);
--accent:#818cf8;
--accent2:#a78bfa;
--green:#34d399;
--red:#f87171;
--yellow:#fbbf24;
--pink:#f472b6;
--text:#eeeeff;
--text2:#a0a0c0;
--muted:#55556a;
--sw:52px;
--sw-collapsed:52px
--mt:var(--muted);
--t2:var(--text2);
--c2:var(--card2);
--br:var(--border);
--ac:var(--accent);
--a2:var(--accent2)}
* {
margin:0;
padding:0;
box-sizing:border-box;
-webkit-tap-highlight-color:transparent}
#a2hs-banner {
position:fixed;
bottom:0;
left:0;
right:0;
z-index:9990;
background:var(--card);
border-top:1px solid var(--br);
padding:14px 16px;
display:none;
align-items:center;
gap:12px;
box-shadow:0 -4px 24px rgba(0,0,0,0.3)}
#a2hs-banner.show {
display:flex}
#a2hs-banner .a2hs-icon {
font-size:28px;
flex-shrink:0}
#a2hs-banner .a2hs-text {
flex:1;
font-size:13px;
line-height:1.4}
#a2hs-banner .a2hs-text b {
display:block;
font-size:14px;
margin-bottom:2px}
#a2hs-banner .a2hs-text span {
color:var(--mt);
font-size:12px}
#a2hs-install {
background:var(--ac);
color:#fff;
border:none;
border-radius:9px;
padding:9px 18px;
font-size:13px;
font-weight:700;
cursor:pointer;
flex-shrink:0}
#a2hs-dismiss {
background:none;
border:none;
color:var(--mt);
cursor:pointer;
font-size:18px;
flex-shrink:0;
padding:4px}
.currency-badge {
font-size:10px;
padding:1px 6px;
border-radius:5px;
background:rgba(124,106,247,0.15);
color:var(--ac);
font-weight:600;
margin-left:4px;
vertical-align:middle}
.amount-group {
display:flex;
align-items:stretch;
background:var(--c2);
border:1px solid var(--br);
border-radius:9px;
overflow:hidden;
transition:border-color 0.15s}
.amount-group:focus-within {
border-color:var(--ac)}
.currency-sel {
flex-shrink:0;
width:auto;
min-width:80px;
background:rgba(124,106,247,0.1);
border:none;
border-right:1px solid var(--br);
padding:10px 10px;
color:var(--text);
font-size:13px;
font-weight:600;
outline:none;
cursor:pointer;
appearance:none;
-webkit-appearance:none;
text-align:center}
.currency-sel:hover {
background:rgba(124,106,247,0.18)}
.amount-input {
flex:1;
background:transparent;
border:none;
padding:10px 12px;
color:var(--text);
font-size:16px;
font-weight:600;
outline:none;
min-width:0;
font-family:inherit}
.amount-input::placeholder {
color:var(--mt);
font-weight:400;
font-size:14px}
.amount-group .currency-sel {
width:auto !important}
.amount-group .amount-input {
width:auto !important;
flex:1 !important;
background:transparent !important;
border:none !important;
border-radius:0 !important;
padding:10px 12px !important}
.amount-group .amount-input:focus {
border-color:transparent !important}
.amount-group input[type="number"]::-webkit-outer-spin-button,.amount-group input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance:none;
margin:0}
.amount-group input[type="number"] {
-moz-appearance:textfield}
.idr-hint {
font-size:11px;
color:var(--mt);
margin-top:5px;
min-height:14px}
.note-card {
background:var(--c2);
border:1px solid var(--br);
border-radius:12px;
padding:16px;
display:flex;
flex-direction:column;
gap:10px;
transition:border-color 0.15s}
.note-card:hover {
border-color:var(--ac)}
.note-title-input {
background:transparent;
border:none;
outline:none;
font-size:15px;
font-weight:700;
color:var(--text);
width:100%;
font-family:inherit}
.note-body-input {
background:transparent;
border:none;
outline:none;
font-size:13px;
color:var(--text);
width:100%;
min-height:90px;
resize:vertical;
font-family:inherit;
line-height:1.6}
.note-title-input::placeholder,.note-body-input::placeholder {
color:var(--mt)}
.note-footer {
display:flex;
justify-content:space-between;
align-items:center}
.note-date {
font-size:10px;
color:var(--mt)}
.note-color-dot {
width:10px;
height:10px;
border-radius:50%;
cursor:pointer;
flex-shrink:0}
.notes-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:14px}
body {
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
background:var(--bg);
color:var(--text);
min-height:100vh;
overflow-x:hidden;
font-size:14px;
-webkit-font-smoothing:antialiased}
body::before {
content:'';
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
background:radial-gradient(ellipse 70% 55% at 15% 5%,rgba(99,102,241,0.20) 0%,transparent 60%),radial-gradient(ellipse 55% 45% at 85% 90%,rgba(236,72,153,0.12) 0%,transparent 55%),radial-gradient(ellipse 45% 55% at 55% 45%,rgba(52,211,153,0.06) 0%,transparent 50%)}
body::after {
content:'';
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
background-image:linear-gradient(rgba(255,255,255,0.011) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.011) 1px,transparent 1px);
background-size:40px 40px}
.app {
position:relative;
z-index:1}
.app {
display:flex;
min-height:100vh}
.sidebar {
width:var(--sw);
background:rgba(7,7,26,0.88);
backdrop-filter:blur(28px);
-webkit-backdrop-filter:blur(28px);
border-right:1px solid var(--br);
display:flex;
flex-direction:column;
align-items:center;
padding:12px 0;
position:fixed;
top:0;
left:0;
height:100vh;
z-index:100;
gap:1px;
overflow:visible}
.logo-row {
width:100%;
display:flex;
align-items:center;
justify-content:center;
padding:14px 0 10px;
cursor:pointer;
flex-shrink:0;
position:relative}
.logo-icon-rail {
width:36px;
height:36px;
border-radius:11px;
flex-shrink:0;
position:relative;
background:linear-gradient(135deg,#6366f1,#ec4899);
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
box-shadow:0 0 24px rgba(99,102,241,0.5),0 0 0 1px rgba(99,102,241,0.2);
transition:transform 0.15s,box-shadow 0.15s}
.logo-row:hover .logo-icon-rail {
transform:scale(1.05);
box-shadow:0 0 32px rgba(99,102,241,0.7),0 0 0 1px rgba(99,102,241,0.3)}
.logo-text {
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
font-size:15px;
font-weight:800;
letter-spacing:-0.3px;
background:linear-gradient(135deg,#eeeeff,#818cf8);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
white-space:nowrap}
.nav-sep {
width:100%;
height:6px;
background:transparent;
margin:0}
.logo h1 {
font-size:18px;
font-weight:800;
background:linear-gradient(135deg,var(--ac),var(--a2));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text}
.logo span {
font-size:10px;
color:var(--mt);
letter-spacing:2px;
text-transform:uppercase}
.logo-icon {
display:none;
font-size:24px;
line-height:1}
.nav-item {
width:44px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:20px;
color:var(--mt);
transition:color 0.12s,background 0.12s;
position:relative;
flex-shrink:0;
border-radius:10px}
.nav-item:hover {
background:rgba(255,255,255,0.07);
color:var(--t2)}
.nav-item.active {
color:#c7d2fe;
background:rgba(99,102,241,0.15)}
.nav-item.active::before {
content:'';
position:absolute;
left:-4px;
top:8px;
bottom:8px;
width:3px;
background:linear-gradient(180deg,#818cf8,#a78bfa);
border-radius:0 3px 3px 0}
.nav-label {
display:none}
.nav-section-label {
display:none}
.nav-item .nav-tooltip,.logo-row .nav-tooltip {
display:block;
position:fixed;
left:62px;
background:#1e1e2e;
color:#e8e8f0;
border:1px solid rgba(124,106,247,0.3);
padding:6px 14px;
border-radius:8px;
font-size:12px;
font-weight:600;
white-space:nowrap;
z-index:9999;
pointer-events:none;
opacity:0;
transform:translateX(-6px);
transition:opacity 0.15s,transform 0.15s;
box-shadow:0 4px 20px rgba(0,0,0,0.5)}
.nav-item:hover .nav-tooltip,.logo-row:hover .nav-tooltip {
opacity:1;
transform:translateX(0)}
.nav-item .nav-tooltip::before,.logo-row .nav-tooltip::before {
content:'';
position:absolute;
left:-5px;
top:50%;
transform:translateY(-50%);
border:5px solid transparent;
border-right-color:#1e1e2e;
border-left:none}
.nav-icon {
font-size:16px;
width:20px;
text-align:center;
flex-shrink:0}
.nav-label {
transition:opacity 0.15s}
.nav-section {
display:none}
.nav-badge {
background:var(--red);
color:white;
border-radius:99px;
font-size:10px;
padding:1px 6px;
margin-left:auto}
.main {
margin-left:var(--sw);
flex:1;
padding:20px;
max-width:calc(100vw - var(--sw));
touch-action:pan-y;
overscroll-behavior:contain}
.mob-nav {
display:none;
position:fixed;
bottom:18px;
left:50%;
transform:translateX(-50%);
z-index:200;
background:rgba(7,7,26,0.9);
backdrop-filter:blur(36px);
-webkit-backdrop-filter:blur(36px);
border:1px solid rgba(255,255,255,0.1);
border-radius:99px;
padding-bottom:max(8px,env(safe-area-inset-bottom));
padding:7px 10px;
box-shadow:0 8px 40px rgba(0,0,0,0.55),inset 0 1px 0 rgba(255,255,255,0.06);
width:calc(100% - 32px);
max-width:380px}
.mob-nav-inner {
display:flex;
justify-content:space-around;
align-items:center}
.mob-item {
display:flex;
flex-direction:column;
align-items:center;
gap:3px;
padding:7px 10px;
border-radius:99px;
cursor:pointer;
color:rgba(240,240,255,0.35);
font-size:8.5px;
font-weight:700;
transition:all 0.2s;
min-width:48px;
text-transform:uppercase;
letter-spacing:0.5px}
.mob-item.active {
background:linear-gradient(135deg,rgba(99,102,241,0.3),rgba(167,139,250,0.2));
color:#a5b4fc;
box-shadow:0 0 0 1px rgba(99,102,241,0.3)}
.mob-icon {
font-size:19px;
transition:transform 0.2s}
.mob-item.active .mob-icon {
transform:scale(1.1)}
.mob-more-item {
display:flex;
flex-direction:column;
align-items:center;
gap:5px;
padding:12px 6px;
border-radius:13px;
cursor:pointer;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.07);
font-size:9px;
font-weight:700;
color:var(--t2);
text-transform:uppercase;
letter-spacing:0.5px;
transition:all 0.15s}
.mob-more-item:hover {
background:rgba(99,102,241,0.15);
border-color:rgba(99,102,241,0.3);
color:#a5b4fc}
.mob-more-item span:first-child {
font-size:22px}
.fab {
position:fixed;
bottom:88px;
right:18px;
width:52px;
height:52px;
border-radius:16px;
background:linear-gradient(135deg,#6366f1,#8b5cf6);
color:white;
font-size:26px;
font-weight:300;
border:none;
display:none;
align-items:center;
justify-content:center;
box-shadow:0 4px 24px rgba(99,102,241,0.5);
cursor:pointer;
z-index:200;
transition:transform 0.15s}
.fab:active {
transform:scale(0.94)}
.fab-tooltip {
position:fixed;
right:76px;
z-index:199;
background:rgba(14,14,35,0.92);
backdrop-filter:blur(8px);
color:#eeeeff;
font-size:11px;
font-weight:700;
padding:5px 10px;
border-radius:8px;
white-space:nowrap;
pointer-events:none;
opacity:0;
transition:opacity 0.15s;
border:1px solid rgba(255,255,255,0.08)}
.fab-tooltip.visible {
opacity:1}
@media (max-width:700px) {
.fab-tooltip {
display:none}
}
.mobile-topbar {
display:none !important}
@media (max-width:700px) {
.sidebar {
display:none}
.main {
margin-left:0;
padding:16px;
padding-bottom:110px;
max-width:100vw}
.mob-nav {
display:block}
.fab {
display:flex}
}
.page-header {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:26px;
flex-wrap:wrap;
gap:12px}
.page-header h2 {
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
font-size:24px;
font-weight:800;
letter-spacing:-0.5px}
.page-header p {
color:var(--t2);
font-size:13px;
margin-top:4px;
font-weight:400}
.card {
background:var(--card);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid var(--br);
border-radius:18px;
padding:20px;
position:relative;
overflow:hidden;
transition:border-color 0.2s,box-shadow 0.2s}
.card:hover {
border-color:var(--border-h)}
.card::before {
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);
pointer-events:none}
.card-title {
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
font-size:14px;
font-weight:700;
letter-spacing:-0.3px;
color:var(--text);
margin-bottom:16px;
white-space:normal;
overflow:visible;
text-overflow:unset}
.stats-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
margin-bottom:18px}
.stat-card {
background:var(--card);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid var(--br);
border-radius:18px;
padding:20px;
position:relative;
overflow:hidden;
transition:transform 0.2s,border-color 0.2s,box-shadow 0.2s}
.stat-card:hover {
transform:translateY(-2px);
border-color:var(--border-h);
box-shadow:0 8px 32px rgba(0,0,0,0.25)}
.stat-card::before {
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent)}
.stat-card::after {
content:'';
position:absolute;
bottom:0;
left:20px;
right:20px;
height:2px;
border-radius:99px;
background:var(--glow-color,var(--ac));
opacity:0.45}
.stat-glow {
position:absolute;
top:-30px;
right:-30px;
width:90px;
height:90px;
border-radius:50%;
filter:blur(28px);
opacity:0.18;
pointer-events:none}
.stat-card .label {
font-size:9px;
color:var(--mt);
text-transform:uppercase;
letter-spacing:2px;
font-weight:800;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.stat-card .value {
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
font-size:26px;
font-weight:800;
margin:6px 0 4px;
color:var(--val-color,var(--text));
letter-spacing:-1px;
line-height:1}
.stat-card .sub {
font-family:'SF Mono','Fira Code','Consolas',monospace;
font-size:10px;
color:var(--t2);
margin-top:6px}
.stat-card .icon {
position:absolute;
right:14px;
top:14px;
font-size:22px;
opacity:1;
filter:drop-shadow(0 0 8px currentColor)}
.grid-2 {
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
margin-bottom:16px}
.grid-3 {
display:grid;
grid-template-columns:2fr 1fr;
gap:16px;
margin-bottom:16px}
.txn-item {
display:flex;
align-items:center;
gap:12px;
padding:12px 0;
border-bottom:1px solid rgba(255,255,255,0.04);
transition:background 0.12s}
.txn-item:last-child {
border-bottom:none}
.txn-item:hover {
background:rgba(255,255,255,0.02);
margin:0 -4px;
padding:12px 4px;
border-radius:10px}
.txn-icon {
width:38px;
height:38px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-size:17px;
flex-shrink:0;
border:1px solid rgba(255,255,255,0.06)}
.txn-info {
flex:1;
min-width:0}
.txn-name {
font-size:13px;
font-weight:600;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap}
.txn-cat {
font-size:11px;
color:var(--mt);
margin-top:1px}
.txn-amount {
font-family:'SF Mono','Fira Code','Consolas',monospace;
font-size:13px;
font-weight:600;
white-space:nowrap}
.txn-date {
font-family:'SF Mono','Fira Code','Consolas',monospace;
font-size:10px;
color:var(--mt);
text-align:right;
margin-top:2px}
.btn {
padding:9px 18px;
border-radius:11px;
border:none;
cursor:pointer;
font-size:13px;
font-weight:600;
transition:all 0.15s;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.btn-primary {
background:linear-gradient(135deg,#6366f1,#8b5cf6);
color:white;
box-shadow:0 4px 20px rgba(99,102,241,0.35)}
.btn-primary:hover {
transform:translateY(-1px);
box-shadow:0 6px 28px rgba(99,102,241,0.5)}
.btn-ghost {
background:rgba(255,255,255,0.05);
color:var(--t2);
border:1px solid var(--br)}
.btn-ghost:hover {
border-color:var(--border-h);
color:var(--text);
background:rgba(255,255,255,0.08)}
.btn-danger {
background:rgba(247,106,106,0.15);
color:var(--red);
border:1px solid rgba(247,106,106,0.3)}
.btn-success {
background:rgba(106,247,184,0.15);
color:var(--green);
border:1px solid rgba(106,247,184,0.3)}
.btn-sm {
padding:5px 10px;
font-size:11px}
.btn-icon {
padding:5px;
border-radius:7px;
background:none;
border:none;
cursor:pointer;
color:var(--mt);
font-size:15px}
.btn-icon:hover {
color:var(--red)}
.form-group {
margin-bottom:14px}
.form-group label {
display:block;
font-size:11px;
color:var(--mt);
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea {
width:100%;
background:rgba(255,255,255,0.05);
border:1px solid var(--br);
border-radius:11px;
padding:11px 13px;
color:var(--text);
font-size:13px;
outline:none;
transition:border-color 0.15s;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.form-group input:focus,.form-group select:focus {
border-color:var(--ac);
background:rgba(255,255,255,0.07)}
.form-group select option {
background:#0e0e23;
color:#eeeeff}
.form-row {
display:grid;
grid-template-columns:1fr 1fr;
gap:12px}
.tabs {
display:flex;
gap:3px;
background:var(--c2);
padding:3px;
border-radius:10px;
width:fit-content}
.tab {
padding:7px 16px;
border-radius:8px;
border:none;
background:transparent;
color:var(--mt);
cursor:pointer;
font-size:13px;
font-weight:500;
transition:all 0.15s}
.tab.active {
background:var(--ac);
color:white}
.badge {
display:inline-flex;
align-items:center;
padding:2px 8px;
border-radius:20px;
font-size:11px;
font-weight:500}
.badge-green {
background:rgba(106,247,184,0.15);
color:var(--green)}
.badge-red {
background:rgba(247,106,106,0.15);
color:var(--red)}
.badge-yellow {
background:rgba(247,201,106,0.15);
color:var(--yellow)}
.badge-purple {
background:rgba(124,106,247,0.15);
color:var(--ac)}
.progress-bar {
background:var(--br);
border-radius:99px;
height:7px;
overflow:hidden}
.progress-fill {
height:100%;
border-radius:99px;
transition:width 0.5s}
.modal-overlay {
position:fixed;
inset:0;
background:rgba(0,0,0,0.7);
backdrop-filter:blur(6px);
z-index:1000;
display:none;
align-items:center;
justify-content:center;
padding:16px}
.modal {
will-change:transform}
.modal-overlay.open {
display:flex}
.modal {
background:rgba(14,14,35,0.95);
backdrop-filter:blur(32px);
-webkit-backdrop-filter:blur(32px);
border:1px solid var(--border-h);
border-radius:20px;
padding:22px;
width:100%;
max-width:500px;
max-height:90vh;
overflow-y:auto;
animation:slideUp 0.25s ease;
box-shadow:0 24px 80px rgba(0,0,0,0.6)}
@keyframes slideUp {
from {
opacity:0;
transform:translateY(20px)}
to {
opacity:1;
transform:translateY(0)}
}
.modal-header {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px}
.modal-header h3 {
font-size:17px;
font-weight:700}
.modal-close {
background:none;
border:none;
color:var(--mt);
cursor:pointer;
font-size:18px;
padding:4px}
.type-toggle {
display:flex;
gap:6px;
margin-bottom:14px}
.type-btn {
flex:1;
padding:9px;
border-radius:9px;
border:1px solid var(--br);
background:transparent;
color:var(--mt);
cursor:pointer;
font-size:13px;
font-weight:500;
transition:all 0.15s}
.type-btn.income.active {
background:rgba(106,247,184,0.15);
color:var(--green);
border-color:var(--green)}
.type-btn.expense.active {
background:rgba(247,106,106,0.15);
color:var(--red);
border-color:var(--red)}
.ai-messages {
height:300px;
overflow-y:auto;
padding:14px;
background:var(--c2);
border-radius:10px;
margin-bottom:12px;
display:flex;
flex-direction:column;
gap:10px}
.ai-msg {
display:flex;
gap:8px}
.ai-msg.user {
flex-direction:row-reverse}
.ai-bubble {
padding:9px 13px;
border-radius:12px;
max-width:85%;
font-size:13px;
line-height:1.6;
white-space:pre-wrap}
.ai-msg:not(.user) .ai-bubble {
background:var(--card);
border:1px solid var(--br)}
.ai-msg.user .ai-bubble {
background:var(--ac);
color:white}
.ai-avatar {
width:28px;
height:28px;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
flex-shrink:0;
background:rgba(124,106,247,0.2)}
.ai-input-row {
display:flex;
gap:8px}
.ai-input {
flex:1;
background:var(--c2);
border:1px solid var(--br);
border-radius:9px;
padding:10px 12px;
color:var(--text);
font-size:13px;
outline:none;
font-family:inherit}
.ai-input:focus {
border-color:var(--ac)}
.reminder-item {
display:flex;
align-items:flex-start;
gap:12px;
padding:14px;
margin-bottom:10px;
background:var(--c2);
border-radius:14px;
border:1px solid var(--br);
transition:transform 0.15s,box-shadow 0.15s;
position:relative;
overflow:hidden}
.reminder-item::before {
content:'';
position:absolute;
left:0;
top:0;
bottom:0;
width:3px;
background:var(--rem-color,var(--ac));
border-radius:3px 0 0 3px}
.reminder-item:hover {
transform:translateY(-1px);
box-shadow:0 4px 16px rgba(0,0,0,0.2)}
.reminder-item:last-child {
margin-bottom:0}
.rem-icon-wrap {
width:42px;
height:42px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
flex-shrink:0;
background:var(--rem-color-bg,rgba(124,106,247,0.12));
border:1.5px solid var(--rem-color-border,rgba(124,106,247,0.25))}
.emoji-picker-wrap {
position:relative}
.emoji-preview-btn {
width:52px;
height:52px;
border-radius:12px;
border:2px dashed var(--br);
background:var(--c2);
cursor:pointer;
font-size:26px;
display:flex;
align-items:center;
justify-content:center;
transition:border-color 0.15s,background 0.15s}
.emoji-preview-btn:hover {
border-color:var(--ac);
background:rgba(124,106,247,0.08)}
.emoji-picker-panel {
position:absolute;
top:60px;
left:0;
z-index:1000;
background:var(--card);
border:1px solid var(--br);
border-radius:16px;
padding:14px;
width:300px;
box-shadow:0 8px 32px rgba(0,0,0,0.4);
display:none}
.emoji-picker-panel.open {
display:block}
.emoji-pack-tabs {
display:flex;
gap:6px;
margin-bottom:10px;
flex-wrap:wrap}
.emoji-pack-tab {
padding:4px 10px;
border-radius:20px;
font-size:11px;
cursor:pointer;
background:var(--c2);
border:1px solid var(--br);
color:var(--mt);
transition:all 0.15s}
.emoji-pack-tab.active {
background:rgba(124,106,247,0.2);
border-color:var(--ac);
color:var(--ac)}
.emoji-search {
width:100%;
background:var(--c2);
border:1px solid var(--br);
border-radius:8px;
padding:7px 10px;
color:var(--text);
font-size:12px;
outline:none;
margin-bottom:8px;
box-sizing:border-box}
.emoji-grid {
display:grid;
grid-template-columns:repeat(8,1fr);
gap:4px;
max-height:160px;
overflow-y:auto}
.emoji-opt {
font-size:20px;
padding:4px;
border-radius:6px;
cursor:pointer;
text-align:center;
transition:background 0.1s}
.emoji-opt:hover {
background:rgba(124,106,247,0.15)}
.emoji-custom-input {
margin-top:8px;
display:flex;
gap:6px;
align-items:center}
.emoji-custom-input input {
flex:1;
background:var(--c2);
border:1px solid var(--br);
border-radius:8px;
padding:6px 10px;
color:var(--text);
font-size:13px;
outline:none}
.reminder-dot {
width:9px;
height:9px;
border-radius:50%;
flex-shrink:0;
margin-top:5px}
.reminder-info {
flex:1}
.reminder-title {
font-size:13px;
font-weight:500}
.reminder-time {
font-size:11px;
color:var(--mt);
margin-top:2px}
.sched-type-btn {
background:var(--c2);
border:1px solid var(--br);
border-radius:9px;
padding:10px 6px;
text-align:center;
cursor:pointer;
color:var(--mt);
transition:all 0.15s}
.sched-type-btn:hover {
border-color:var(--ac);
color:var(--text)}
.sched-type-btn.active {
border-color:var(--ac);
background:rgba(124,106,247,0.15);
color:var(--text)}
.week-day {
background:var(--c2);
border:1px solid var(--br);
border-radius:10px;
padding:8px 6px;
min-height:80px}
.week-day.today {
border-color:var(--ac);
background:rgba(124,106,247,0.08)}
.week-day-header {
font-size:10px;
color:var(--mt);
text-align:center;
text-transform:uppercase;
letter-spacing:0.5px;
margin-bottom:4px}
.week-day-num {
font-size:15px;
font-weight:700;
text-align:center;
margin-bottom:6px}
.week-day.today .week-day-num {
color:var(--ac)}
.week-event {
font-size:10px;
padding:2px 6px;
border-radius:4px;
margin-bottom:3px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
cursor:pointer}
.week-more {
font-size:10px;
color:var(--mt);
text-align:center;
margin-top:2px}
.asset-card {
background:var(--c2);
border:1px solid var(--br);
border-radius:12px;
padding:16px}
.asset-card:hover {
border-color:var(--ac)}
.asset-header {
display:flex;
align-items:center;
gap:10px;
margin-bottom:12px}
.asset-logo {
width:36px;
height:36px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
flex-shrink:0}
.asset-name {
font-size:14px;
font-weight:700}
.asset-ticker {
font-size:11px;
color:var(--mt)}
.asset-row {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:5px}
.asset-row-label {
font-size:11px;
color:var(--mt)}
.asset-row-val {
font-size:12px;
font-weight:500}
.assets-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:12px;
margin-bottom:16px}
.price-up {
color:var(--green)}
.price-down {
color:var(--red)}
.asset-type-btn {
background:var(--c2);
border:1px solid var(--br);
border-radius:10px;
padding:12px 6px;
text-align:center;
cursor:pointer;
color:var(--mt);
transition:all 0.15s}
.asset-type-btn:hover {
border-color:var(--ac);
color:var(--text)}
.asset-type-btn.active {
border-color:var(--ac);
background:rgba(124,106,247,0.15);
color:var(--text)}
.field-hint {
font-size:11px;
color:var(--mt);
margin-top:4px;
line-height:1.5}
.preview-row {
display:flex;
justify-content:space-between;
align-items:center;
padding:4px 0;
border-bottom:1px solid rgba(42,42,58,0.4)}
.preview-row:last-child {
border-bottom:none}
.preview-label {
color:var(--mt);
font-size:12px}
.preview-val {
font-size:13px;
font-weight:700}
.account-tabs {
display:flex;
gap:3px;
background:var(--c2);
padding:3px;
border-radius:10px;
margin-bottom:18px}
.account-tab {
flex:1;
padding:8px;
border-radius:8px;
border:none;
background:transparent;
color:var(--mt);
cursor:pointer;
font-size:13px;
font-weight:500;
transition:all 0.15s;
text-align:center}
.account-tab.active {
background:var(--ac);
color:white}
.acct-badge {
display:inline-flex;
align-items:center;
gap:4px;
padding:2px 8px;
border-radius:6px;
font-size:10px;
font-weight:600}
.acct-trading {
background:rgba(247,106,106,0.15);
color:var(--red)}
.acct-invest {
background:rgba(106,247,184,0.15);
color:var(--green)}
.portfolio-stats-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-bottom:16px}
.portfolio-stat {
background:var(--c2);
border:1px solid var(--br);
border-radius:10px;
padding:14px}
.portfolio-stat .ps-label {
font-size:10px;
color:var(--mt);
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:5px}
.portfolio-stat .ps-val {
font-size:17px;
font-weight:800}
.section-title {
font-size:15px;
font-weight:700;
margin-bottom:14px;
display:flex;
align-items:center;
gap:8px}
.empty-state {
text-align:center;
padding:30px 16px;
color:var(--mt)}
.empty-state .emoji {
font-size:36px;
margin-bottom:10px}
.empty-state p {
font-size:13px}
.divider {
height:1px;
background:var(--br);
margin:16px 0}
.budget-item {
margin-bottom:16px}
.budget-header {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:6px}
.settings-btn {
background:var(--c2);
border:1px solid var(--br);
border-radius:10px;
padding:12px 16px;
display:flex;
align-items:center;
gap:10px;
cursor:pointer;
transition:all 0.15s}
.settings-btn:hover {
border-color:var(--ac)}
.settings-icon {
font-size:20px}
.settings-text {
font-size:13px;
font-weight:500}
.loading-spinner {
display:inline-block;
width:12px;
height:12px;
border:2px solid var(--br);
border-top-color:var(--ac);
border-radius:50%;
animation:spin 0.8s linear infinite;
margin-right:5px;
vertical-align:middle}
@keyframes spin {
to {
transform:rotate(360deg)}
}
.toast {
position:fixed;
bottom:70px;
right:16px;
background:var(--card);
border:1px solid var(--br);
border-radius:10px;
padding:12px 16px;
font-size:13px;
display:flex;
align-items:center;
gap:8px;
z-index:9999;
opacity:0;
transform:translateY(10px);
transition:all 0.25s;
pointer-events:none;
max-width:320px}
.toast.show {
opacity:1;
transform:translateY(0)}
.toast.success {
border-color:var(--green)}
.toast.error {
border-color:var(--red)}
.toast.info {
border-color:var(--ac)}
.notif-banner {
position:fixed;
top:16px;
right:16px;
max-width:300px;
z-index:9998;
background:var(--card);
border:1px solid var(--ac);
border-radius:12px;
padding:14px 18px;
box-shadow:0 8px 32px rgba(0,0,0,0.4);
display:none}
.notif-banner.show {
display:block}
.notif-title {
font-size:13px;
font-weight:700;
margin-bottom:3px}
.notif-body {
font-size:12px;
color:var(--mt)}
.notif-close {
position:absolute;
top:8px;
right:12px;
background:none;
border:none;
color:var(--mt);
cursor:pointer}
.glow-dot {
width:7px;
height:7px;
border-radius:50%;
background:var(--green);
display:inline-block;
margin-right:5px}
.page {
display:none}
.page.active {
display:block}
.chart-wrapper {
position:relative;
height:200px}
::-webkit-scrollbar {
width:4px}
::-webkit-scrollbar-thumb {
background:var(--br);
border-radius:99px}
@media (max-width:900px) {
.stats-grid {
grid-template-columns:repeat(2,1fr)}
.grid-2,.grid-3 {
grid-template-columns:1fr}
.portfolio-stats-grid {
grid-template-columns:1fr 1fr}
}
@media (max-width:500px) {
.portfolio-stats-grid {
grid-template-columns:1fr}
.form-row {
grid-template-columns:1fr}
.stats-grid {
grid-template-columns:1fr 1fr}
}
.ai-suggestion {
background:var(--c2);
border:1px solid var(--br);
border-radius:9px;
padding:10px 13px;
cursor:pointer;
font-size:12px;
color:var(--mt);
text-align:left;
width:100%;
transition:all 0.15s;
line-height:1.4}
.ai-suggestion:hover {
border-color:var(--ac);
color:var(--text)}
.ai-features {
background:rgba(124,106,247,0.07);
border:1px solid rgba(124,106,247,0.2);
border-radius:10px;
padding:12px 14px;
margin-bottom:14px}
.ai-features p {
font-size:12px;
color:var(--mt);
margin-bottom:8px}
.ai-features ul {
padding-left:16px}
.ai-features li {
font-size:12px;
color:var(--mt);
margin-bottom:3px}
.gold-type-tabs {
display:flex;
gap:3px;
background:var(--c2);
padding:3px;
border-radius:10px;
margin-bottom:14px}
.gold-type-tab {
flex:1;
padding:7px;
border-radius:8px;
border:none;
background:transparent;
color:var(--mt);
cursor:pointer;
font-size:12px;
font-weight:500;
transition:all 0.15s;
text-align:center}
.gold-type-tab.active {
background:var(--a2);
color:#000}
#auth-screen {
position:fixed;
inset:0;
z-index:99999;
background:var(--bg);
display:flex;
align-items:center;
justify-content:center;
padding:16px;
background-image:radial-gradient(ellipse at 20% 50%,rgba(124,106,247,0.12) 0%,transparent 55%),radial-gradient(ellipse at 80% 20%,rgba(247,201,106,0.08) 0%,transparent 50%)}
#auth-screen.hidden {
display:none}
.auth-box {
background:rgba(14,14,35,0.92);
backdrop-filter:blur(28px);
-webkit-backdrop-filter:blur(28px);
border:1px solid var(--border-h);
border-radius:22px;
padding:32px 36px;
width:100%;
max-width:400px;
box-shadow:0 24px 64px rgba(0,0,0,0.6)}
.auth-logo {
text-align:center;
margin-bottom:24px}
.auth-logo h1 {
font-size:26px;
font-weight:800;
background:linear-gradient(135deg,var(--ac),var(--a2));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text}
.auth-logo p {
font-size:10px;
color:var(--mt);
letter-spacing:2.5px;
text-transform:uppercase;
margin-top:4px}
.auth-tabs {
display:flex;
background:var(--c2);
border-radius:10px;
padding:3px;
margin-bottom:22px}
.auth-tab {
flex:1;
text-align:center;
padding:8px;
border-radius:8px;
cursor:pointer;
font-size:13px;
font-weight:600;
color:var(--mt);
transition:all 0.15s}
.auth-tab.active {
background:var(--ac);
color:#fff}
.auth-form {
display:flex;
flex-direction:column;
gap:12px}
.auth-input {
width:100%;
background:var(--c2);
border:1px solid var(--br);
border-radius:9px;
padding:11px 13px;
color:var(--text);
font-size:13px;
outline:none;
transition:border-color 0.15s;
font-family:inherit}
.auth-input:focus {
border-color:var(--ac)}
.auth-input::placeholder {
color:var(--mt)}
.auth-btn {
background:linear-gradient(135deg,var(--ac),#5c4de0);
color:#fff;
border:none;
border-radius:9px;
padding:12px;
font-size:13px;
font-weight:700;
cursor:pointer;
transition:opacity 0.15s;
margin-top:4px;
letter-spacing:0.3px}
.auth-btn:hover {
opacity:0.88}
.auth-error {
background:rgba(247,106,106,0.1);
border:1px solid rgba(247,106,106,0.3);
border-radius:8px;
padding:9px 12px;
font-size:12px;
color:var(--red);
display:none;
margin-bottom:4px}
.auth-error.show {
display:block}
.auth-demo {
text-align:center;
margin-top:16px;
font-size:11px;
color:var(--mt);
line-height:1.8}
.auth-demo-btn {
background:var(--c2);
border:1px solid var(--br);
border-radius:7px;
padding:4px 10px;
font-size:11px;
color:var(--mt);
cursor:pointer;
transition:all 0.15s;
display:inline-block;
margin:2px}
.auth-demo-btn:hover {
border-color:var(--ac);
color:var(--ac)}
.sidebar-user {
margin-top:auto;
padding:10px 0;
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
border-top:1px solid var(--br);
width:100%}
.user-card {
display:flex;
flex-direction:column;
align-items:center;
gap:4px}
.user-avatar {
width:38px;
height:38px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-size:15px;
font-weight:800;
cursor:pointer;
box-shadow:0 4px 16px rgba(99,102,241,0.3);
transition:transform 0.15s}
.user-avatar:hover {
transform:scale(1.06)}
.user-info {
display:none}
.sidebar .sidebar-user-info {
display:none !important}
.sidebar .btn-logout {
display:none !important}
.user-name {
font-size:13px;
font-weight:600;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
.role-badge {
font-size:10px;
padding:1px 7px;
border-radius:99px;
font-weight:600;
margin-top:2px;
display:inline-block}
.role-bos {
background:linear-gradient(135deg,rgba(247,106,106,0.25),rgba(247,201,106,0.2));
color:#ff8c42;
border:1px solid rgba(255,140,66,0.4)}
.role-admin {
background:rgba(247,201,106,0.2);
color:var(--yellow)}
.role-premium {
background:rgba(106,247,184,0.2);
color:var(--green)}
.role-free {
background:rgba(107,107,133,0.2);
color:var(--mt)}
.btn-logout {
background:none;
border:none;
color:var(--mt);
cursor:pointer;
font-size:15px;
padding:3px;
flex-shrink:0;
transition:color 0.15s}
.btn-logout:hover {
color:var(--red)}
.upgrade-nudge {
margin-top:8px;
background:linear-gradient(135deg,rgba(247,201,106,0.12),rgba(247,201,106,0.05));
border:1px solid rgba(247,201,106,0.25);
border-radius:9px;
padding:8px 10px;
text-align:center;
cursor:pointer;
font-size:12px;
color:var(--yellow);
font-weight:600;
transition:all 0.15s}
.upgrade-nudge:hover {
background:rgba(247,201,106,0.2)}
.limit-info {
display:flex;
align-items:center;
gap:7px;
background:var(--c2);
border:1px solid var(--br);
border-radius:8px;
padding:7px 10px;
font-size:11px;
color:var(--mt);
margin-bottom:10px}
.limit-info.warn {
border-color:rgba(247,201,106,0.35);
color:var(--yellow)}
.limit-info.full {
border-color:rgba(247,106,106,0.35);
color:var(--red)}
.upgrade-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin:14px 0}
.upgrade-perk {
background:var(--c2);
border:1px solid rgba(106,247,184,0.15);
border-radius:9px;
padding:10px 12px;
font-size:12px;
font-weight:600;
display:flex;
align-items:flex-start;
gap:6px}
.upgrade-perk span {
display:block;
font-size:10px;
color:var(--mt);
font-weight:400;
margin-top:2px}
.plan-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
margin:14px 0}
.plan-card {
border:2px solid var(--br);
border-radius:12px;
padding:12px 8px;
text-align:center;
cursor:pointer;
transition:all .15s;
position:relative}
.plan-card:hover {
border-color:var(--ac)}
.plan-card.selected {
border-color:var(--yellow);
background:rgba(247,201,106,0.08)}
.plan-card .plan-mo {
font-size:11px;
color:var(--mt);
margin-bottom:4px}
.plan-card .plan-price {
font-size:16px;
font-weight:800;
color:var(--text)}
.plan-card .plan-save {
font-size:9px;
background:rgba(106,247,184,0.2);
color:var(--green);
border-radius:99px;
padding:1px 6px;
margin-top:4px;
display:inline-block}
.plan-card .plan-badge {
position:absolute;
top:-8px;
left:50%;
transform:translateX(-50%);
font-size:9px;
background:var(--ac);
color:white;
border-radius:99px;
padding:2px 8px;
white-space:nowrap}
.payment-box {
background:var(--c2);
border:1px solid var(--br);
border-radius:12px;
padding:16px;
margin:14px 0;
text-align:left}
.payment-bank {
display:flex;
align-items:center;
gap:10px;
margin-bottom:10px}
.payment-bank .bank-logo {
width:40px;
height:40px;
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
background:rgba(247,201,106,0.15)}
.payment-step {
font-size:12px;
color:var(--mt);
margin-bottom:6px;
display:flex;
gap:8px}
.payment-step b {
color:var(--text)}
.payment-ref {
background:var(--card);
border:1px dashed var(--ac);
border-radius:8px;
padding:10px 14px;
font-size:18px;
font-weight:800;
letter-spacing:3px;
text-align:center;
color:var(--ac);
margin:10px 0;
cursor:pointer;
user-select:all}
.payment-ref:hover::after {
content:' 📋'}
.pending-badge {
display:inline-flex;
align-items:center;
gap:5px;
background:rgba(247,201,106,0.12);
border:1px solid rgba(247,201,106,0.3);
border-radius:99px;
padding:3px 10px;
font-size:11px;
color:var(--yellow)}
.pending-card {
background:var(--c2);
border:1px solid rgba(247,201,106,0.25);
border-radius:12px;
padding:14px;
margin-bottom:10px;
display:flex;
gap:12px;
align-items:flex-start}
.pending-card .pend-info {
flex:1}
.pend-user {
font-weight:700;
font-size:13px}
.pend-detail {
font-size:11px;
color:var(--mt);
margin-top:3px}
.premium-expiry {
font-size:11px;
color:var(--yellow);
margin-top:4px;
display:flex;
align-items:center;
gap:4px}
.admin-stats-grid {
display:grid;
grid-template-columns:repeat(5,1fr);
gap:12px;
margin-bottom:18px}
.admin-stat {
background:var(--card);
border:1px solid var(--br);
border-radius:12px;
padding:14px 16px}
.admin-stat .as-label {
font-size:10px;
color:var(--mt);
text-transform:uppercase;
letter-spacing:1px}
.admin-stat .as-val {
font-size:22px;
font-weight:800;
margin-top:6px}
.admin-tbl {
width:100%;
border-collapse:collapse;
font-size:12px}
.admin-tbl th {
text-align:left;
padding:9px 12px;
color:var(--mt);
font-size:10px;
letter-spacing:1px;
text-transform:uppercase;
border-bottom:1px solid var(--br)}
.admin-tbl td {
padding:9px 12px;
border-bottom:1px solid rgba(42,42,58,0.5);
vertical-align:middle}
.admin-tbl tr:last-child td {
border-bottom:none}
.admin-tbl tr:hover td {
background:rgba(124,106,247,0.04)}
.role-sel {
background:var(--c2);
border:1px solid var(--br);
border-radius:7px;
padding:4px 8px;
color:var(--text);
font-size:11px;
cursor:pointer;
outline:none}
.role-sel:focus {
border-color:var(--ac)}
.adm-btn {
background:none;
border:1px solid var(--br);
border-radius:6px;
color:var(--mt);
padding:3px 9px;
font-size:11px;
cursor:pointer;
transition:all 0.15s}
.adm-btn:hover {
border-color:var(--red);
color:var(--red)}
.adm-btn.safe:hover {
border-color:var(--ac);
color:var(--ac)}
.log-item {
display:flex;
align-items:flex-start;
gap:10px;
padding:8px 0;
border-bottom:1px solid rgba(42,42,58,0.4);
font-size:12px}
.log-item:last-child {
border-bottom:none}
.log-time {
color:var(--mt);
font-size:10px;
white-space:nowrap;
margin-top:2px}
@media (max-width:900px) {
.admin-stats-grid {
grid-template-columns:1fr 1fr}
}
@media (max-width:500px) {
.upgrade-grid {
grid-template-columns:1fr}
.plan-grid {
grid-template-columns:repeat(2,1fr)}
}
.goal-card {
background:var(--c2);
border:1px solid var(--br);
border-radius:14px;
padding:16px;
transition:border-color 0.15s}
.goal-card:hover {
border-color:var(--ac)}
.goal-card.done {
border-color:var(--green);
background:rgba(106,247,184,0.05)}
.goal-icon {
width:42px;
height:42px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
flex-shrink:0}
.goal-header {
display:flex;
align-items:center;
gap:12px;
margin-bottom:12px}
.goal-name {
font-size:14px;
font-weight:700}
.goal-meta {
font-size:11px;
color:var(--mt);
margin-top:2px}
.goal-pct {
font-size:22px;
font-weight:800}
.debt-card {
background:var(--c2);
border:1px solid var(--br);
border-radius:12px;
padding:14px 16px;
display:flex;
align-items:center;
gap:12px;
transition:border-color 0.15s}
.debt-card:hover {
border-color:var(--ac)}
.debt-card.lunas {
opacity:0.5}
.debt-type-badge {
padding:3px 9px;
border-radius:7px;
font-size:11px;
font-weight:700}
.debt-hutang {
background:rgba(247,106,106,0.15);
color:var(--red)}
.debt-piutang {
background:rgba(106,247,184,0.15);
color:var(--green)}
.rec-card {
background:var(--c2);
border:1px solid var(--br);
border-radius:12px;
padding:14px 16px;
display:flex;
align-items:center;
gap:12px;
transition:border-color 0.15s}
.rec-card:hover {
border-color:var(--ac)}
.rec-active {
border-left:3px solid var(--green)}
.rec-inactive {
opacity:0.55}
.profile-avatar-big {
width:72px;
height:72px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:28px;
font-weight:800;
margin:0 auto 14px;
border:3px solid var(--br)}
.profile-stat {
background:var(--c2);
border:1px solid var(--br);
border-radius:10px;
padding:12px;
text-align:center}
.profile-stat .ps-num {
font-size:20px;
font-weight:800}
.profile-stat .ps-lbl {
font-size:10px;
color:var(--mt);
text-transform:uppercase;
letter-spacing:1px;
margin-top:3px}
.lap-month-card {
background:var(--c2);
border:1px solid var(--br);
border-radius:10px;
padding:12px 14px;
cursor:pointer;
transition:all 0.15s}
.lap-month-card:hover {
border-color:var(--ac)}
.lap-month-card.active {
border-color:var(--ac);
background:rgba(124,106,247,0.12)}
.lap-grid {
display:grid;
grid-template-columns:repeat(6,1fr);
gap:8px;
margin-bottom:16px}
@media (max-width:700px) {
.lap-grid {
grid-template-columns:repeat(3,1fr)}
}
#offline-banner {
position:fixed;
bottom:24px;
left:50%;
transform:translateX(-50%);
background:var(--card);
border:1px solid var(--red);
color:var(--red);
border-radius:10px;
padding:10px 16px;
font-size:12px;
font-weight:600;
z-index:99999;
display:none;
align-items:center;
gap:10px;
box-shadow:0 4px 20px rgba(0,0,0,0.5);
white-space:nowrap;
animation:fadeUp 0.3s ease}
#offline-banner.show {
display:flex}
#offline-banner button {
background:none;
border:none;
color:var(--mt);
cursor:pointer;
font-size:14px;
line-height:1;
padding:0;
margin-left:4px}
#offline-banner button:hover {
color:var(--red)}
#storage-warn {
position:fixed;
bottom:24px;
left:50%;
transform:translateX(-50%);
background:var(--card);
border:1px solid var(--yellow);
color:var(--yellow);
border-radius:10px;
padding:10px 16px;
font-size:12px;
font-weight:600;
z-index:99998;
display:none;
align-items:center;
gap:8px;
box-shadow:0 4px 20px rgba(0,0,0,0.5);
white-space:nowrap}
#storage-warn.show {
display:flex}
@keyframes fadeUp {
from {
opacity:0;
transform:translateX(-50%) translateY(10px)}
to {
opacity:1;
transform:translateX(-50%) translateY(0)}
}
@media (max-width:700px) {
#offline-banner,#storage-warn {
bottom:70px}
}
.security-note {
font-size:10px;
color:var(--mt);
text-align:center;
margin-top:14px;
padding:8px 10px;
border:1px solid rgba(107,107,133,0.3);
border-radius:8px;
line-height:1.5}
:focus-visible {
outline:2px solid var(--ac);
outline-offset:2px;
border-radius:4px}
.btn:focus-visible,.nav-item:focus-visible {
outline-offset:3px}
.insight-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:12px;
margin-bottom:18px}
.insight-card {
background:var(--c2);
border:1px solid var(--br);
border-radius:12px;
padding:14px 16px;
display:flex;
gap:12px;
align-items:flex-start;
border-left:3px solid transparent}
.insight-card.up {
border-left-color:var(--red)}
.insight-card.down {
border-left-color:var(--green)}
.insight-card.info {
border-left-color:var(--ac)}
.insight-card.warn {
border-left-color:var(--yellow)}
.insight-icon {
font-size:24px;
flex-shrink:0;
line-height:1}
.insight-body {
flex:1}
.insight-title {
font-size:13px;
font-weight:700;
margin-bottom:3px}
.insight-desc {
font-size:12px;
color:var(--mt);
line-height:1.5}
.insight-val {
font-size:11px;
font-weight:700;
margin-top:4px}
.insight-val.pos {
color:var(--green)}
.insight-val.neg {
color:var(--red)}
.insight-val.neu {
color:var(--ac)}
.xp-bar-wrap {
background:var(--c2);
border-radius:99px;
height:8px;
overflow:hidden;
margin:6px 0}
.xp-bar-fill {
height:100%;
border-radius:99px;
background:linear-gradient(90deg,var(--ac),var(--a2));
transition:width 0.6s cubic-bezier(0.34,1.56,0.64,1)}
.level-badge {
display:inline-flex;
align-items:center;
gap:6px;
background:linear-gradient(135deg,rgba(124,106,247,0.2),rgba(247,201,106,0.15));
border:1px solid rgba(124,106,247,0.3);
border-radius:99px;
padding:4px 12px;
font-size:12px;
font-weight:700}
.achievement-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
gap:10px}
.achievement-card {
background:var(--c2);
border:1px solid var(--br);
border-radius:12px;
padding:14px 10px;
text-align:center;
position:relative;
transition:border-color .15s}
.achievement-card.unlocked {
border-color:var(--ac);
background:rgba(124,106,247,0.07)}
.achievement-card.locked {
opacity:0.45;
filter:grayscale(60%)}
.ach-icon {
font-size:28px;
margin-bottom:6px}
.ach-name {
font-size:11px;
font-weight:700;
margin-bottom:2px}
.ach-desc {
font-size:10px;
color:var(--mt);
line-height:1.4}
.ach-lock {
position:absolute;
top:6px;
right:8px;
font-size:11px;
color:var(--mt)}
.streak-card {
display:flex;
align-items:center;
gap:14px;
background:linear-gradient(135deg,rgba(247,201,106,0.1),rgba(247,106,184,0.08));
border:1px solid rgba(247,201,106,0.3);
border-radius:14px;
padding:16px 20px}
.streak-num {
font-size:36px;
font-weight:900;
color:var(--yellow);
line-height:1}
.heatmap-wrap {
overflow-x:auto;
padding-bottom:6px}
.heatmap-grid {
display:grid;
grid-template-rows:repeat(7,14px);
grid-auto-flow:column;
gap:3px;
width:max-content}
.heatmap-cell {
width:14px;
height:14px;
border-radius:3px;
cursor:pointer;
transition:transform .1s}
.heatmap-cell:hover {
transform:scale(1.3)}
.hm0 {
background:var(--c2)}
.hm1 {
background:rgba(124,106,247,0.25)}
.hm2 {
background:rgba(124,106,247,0.5)}
.hm3 {
background:rgba(124,106,247,0.75)}
.hm4 {
background:rgba(124,106,247,1)}
.heatmap-legend {
display:flex;
align-items:center;
gap:6px;
font-size:11px;
color:var(--mt);
margin-top:8px}
.heatmap-months {
display:flex;
gap:3px;
width:max-content;
margin-bottom:4px;
font-size:10px;
color:var(--mt)}
@media print {
.sidebar,.sidebar-toggle,.btn,#offline-banner,#storage-warn,#a2hs-banner,#toast,.notif-banner,.page:not(.active),.page-header button {
display:none !important}
.main {
margin-left:0 !important;
max-width:100% !important}
.page.active {
display:block !important}
.card {
break-inside:avoid;
border:1px solid #ddd !important;
box-shadow:none !important}
body {
background:white !important;
color:#111 !important}
.stat-card {
background:#f5f5f5 !important}
}
.remind-strip-wrap {
margin-bottom:16px}
.remind-strip-label {
font-size:10px;
color:var(--mt);
font-weight:700;
text-transform:uppercase;
letter-spacing:1.5px;
margin-bottom:10px}
.remind-strip {
display:flex;
gap:10px;
overflow-x:auto;
padding-bottom:6px;
scrollbar-width:none}
.remind-strip::-webkit-scrollbar {
display:none}
.remind-chip {
flex-shrink:0;
background:var(--c2);
border:1px solid var(--br);
border-radius:16px;
padding:13px 15px;
display:flex;
flex-direction:column;
gap:5px;
min-width:145px;
cursor:pointer;
transition:all 0.18s;
position:relative;
overflow:hidden}
.remind-chip::before {
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent)}
.remind-chip:hover {
border-color:var(--border-hover,rgba(255,255,255,0.15));
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(0,0,0,0.25)}
.chip-emoji {
font-size:20px}
.chip-title {
font-size:12px;
font-weight:700;
color:var(--text);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:120px}
.chip-time {
font-size:10px;
color:var(--mt)}
.remind-strip-empty {
font-size:12px;
color:var(--mt);
padding:8px 0}
.dok-toolbar {
display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap;
margin-bottom:18px}
.dok-search {
flex:1;
min-width:160px;
background:var(--c2);
border:1px solid var(--br);
border-radius:10px;
padding:8px 12px;
color:var(--text);
font-size:13px}
.dok-search::placeholder {
color:var(--mt)}
.dok-filter {
background:var(--c2);
border:1px solid var(--br);
border-radius:10px;
padding:8px 10px;
color:var(--text);
font-size:12px;
cursor:pointer}
.dok-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
gap:12px}
.dok-card {
background:var(--c2);
border:1px solid var(--br);
border-radius:16px;
padding:14px;
cursor:pointer;
transition:all 0.18s;
position:relative;
overflow:hidden}
.dok-card:hover {
border-color:var(--border-hover);
transform:translateY(-2px);
box-shadow:0 6px 20px rgba(0,0,0,0.25)}
.dok-card-thumb {
width:100%;
height:90px;
border-radius:10px;
object-fit:cover;
background:var(--card3);
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
margin-bottom:10px;
overflow:hidden}
.dok-card-thumb img {
width:100%;
height:100%;
object-fit:cover;
border-radius:10px}
.dok-card-name {
font-size:12px;
font-weight:700;
color:var(--text);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
.dok-card-meta {
font-size:10px;
color:var(--mt);
margin-top:3px}
.dok-card-tag {
display:inline-block;
font-size:9px;
font-weight:700;
padding:2px 7px;
border-radius:5px;
margin-top:5px}
.dok-del {
position:absolute;
top:8px;
right:8px;
width:22px;
height:22px;
background:rgba(248,113,113,0.15);
border:none;
border-radius:6px;
color:#f87171;
font-size:12px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:opacity 0.15s}
.dok-card:hover .dok-del {
opacity:1}
.dok-upload-zone {
border:2px dashed var(--br);
border-radius:16px;
padding:32px;
text-align:center;
cursor:pointer;
transition:all 0.18s;
background:var(--card);
margin-bottom:18px}
.dok-upload-zone:hover,.dok-upload-zone.dragover {
border-color:var(--ac);
background:rgba(99,102,241,0.05)}
.dok-upload-icon {
font-size:36px;
margin-bottom:10px}
.dok-upload-text {
font-size:13px;
color:var(--t2)}
.dok-upload-sub {
font-size:11px;
color:var(--mt);
margin-top:4px}
.dok-progress {
height:4px;
background:var(--br);
border-radius:99px;
overflow:hidden;
margin-top:8px;
display:none}
.dok-progress-bar {
height:100%;
background:linear-gradient(90deg,#6366f1,#a78bfa);
border-radius:99px;
width:0%;
transition:width 0.3s}
.dok-empty {
text-align:center;
padding:48px 20px;
color:var(--mt)}
.dok-empty .emoji {
font-size:40px;
margin-bottom:12px}
.txn-attach-wrap {
margin-top:4px}
.txn-attach-btn {
display:flex;
align-items:center;
gap:8px;
padding:9px 14px;
background:var(--c2);
border:1px dashed var(--br);
border-radius:10px;
color:var(--t2);
font-size:12px;
cursor:pointer;
transition:all 0.15s;
width:100%}
.txn-attach-btn:hover {
border-color:var(--ac);
color:var(--ac)}
.txn-attach-preview {
display:none;
margin-top:8px;
position:relative;
background:var(--c2);
border-radius:10px;
padding:8px;
display:flex;
align-items:center;
gap:10px}
.txn-attach-preview img {
width:44px;
height:44px;
object-fit:cover;
border-radius:7px}
.txn-attach-preview .attach-icon {
font-size:28px}
.txn-attach-preview .attach-name {
font-size:11px;
color:var(--t2);
flex:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis}
.txn-attach-remove {
background:none;
border:none;
color:var(--mt);
cursor:pointer;
font-size:16px;
padding:0 4px}
.txn-attach-chip {
display:inline-flex;
align-items:center;
gap:4px;
font-size:10px;
color:var(--a2);
cursor:pointer;
background:rgba(129,140,248,0.1);
padding:2px 7px;
border-radius:5px;
margin-top:3px;
transition:background 0.12s}
.txn-attach-chip:hover {
background:rgba(129,140,248,0.2)}

.u-muted11 {
font-size:11px;
color:var(--mt)}

.u-muted12 {
font-size:12px;
color:var(--mt)}

.u-fw7-14 {
font-size:14px;
font-weight:700}

.u-flex-sb {
display:flex;
justify-content:space-between}

.u-flex-center {
display:flex;
align-items:center}

.u-flex-end {
display:flex;
gap:8px;
justify-content:flex-end;
margin-top:6px}

.u-flex-end2 {
display:flex;
gap:10px;
justify-content:flex-end}

.u-mt2 {
margin-top:2px}

.u-mt4 {
margin-top:4px}

.u-w100 {
width:100%}