[data-theme] body { background: var(--bg-primary); color: var(--text-primary); }
[data-theme] .side-nav { background: var(--bg-sidebar); }
[data-theme] .side-nav .nav-brand-title { color: #FFFFFF; }
[data-theme] .side-nav .nav-item { color: var(--bg-sidebar-text); }
[data-theme] .side-nav .nav-item.active { background: var(--bg-sidebar-active); color: #FFFFFF; border-left-color: var(--primary); }
[data-theme] .side-nav .nav-group { color: var(--bg-sidebar-text); opacity: 0.6; }
[data-theme] .app-header { background: var(--bg-card); backdrop-filter: var(--blur-heavy); -webkit-backdrop-filter: var(--blur-heavy); border-bottom-color: var(--border-color); }
[data-theme] .app-header-title { color: var(--text-primary); }
[data-theme] .app-content { background: var(--bg-primary); }
[data-theme] .card {
background: var(--bg-card);
backdrop-filter: var(--blur-amount);
-webkit-backdrop-filter: var(--blur-amount);
border-color: var(--border-color);
box-shadow: var(--shadow-md);
border-radius: var(--radius-lg);
}
[data-theme] .card:hover {
background: var(--bg-card-hover);
box-shadow: var(--shadow-lg);
border-color: var(--border-active);
}
[data-theme] .kpi-card {
background: var(--bg-kpi);
backdrop-filter: var(--blur-amount);
-webkit-backdrop-filter: var(--blur-amount);
border-color: var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
[data-theme] .btn-primary { background: var(--primary); }
[data-theme] .btn-primary:hover { background: var(--primary-dark); }
[data-theme] .btn-success { background: var(--color-success); }
[data-theme] .btn-danger { background: var(--color-danger); }
[data-theme] .btn-warning { background: var(--color-warning); }
[data-theme] .btn-rose { background: var(--color-pink); }
[data-theme] .tab-bar { background: var(--bg-input); }
[data-theme] .tab-btn { color: var(--text-tertiary); }
[data-theme] .tab-btn.active {
background: var(--bg-secondary);
color: var(--primary);
box-shadow: var(--shadow-sm);
}
[data-theme] .search-input, [data-theme] .search-select, [data-theme] .form-input {
background: var(--bg-input);
border-color: var(--border-color);
color: var(--text-primary);
}
[data-theme] select.search-select, [data-theme] select.form-input {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
}
[data-theme] .search-input:focus, [data-theme] .form-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}
[data-theme] .data-table th { background: var(--bg-tertiary); color: var(--text-secondary); border-bottom-color: var(--border-color); }
[data-theme] .data-table td { border-bottom-color: var(--border-color); }
[data-theme] .data-table tr:hover td { background: var(--bg-tertiary); }
[data-theme] .modal-box { background: var(--bg-secondary); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); }
[data-theme] .modal-header { border-bottom-color: var(--border-color); }
[data-theme] .modal-title { color: var(--text-primary); }
[data-theme] .modal-footer { border-top-color: var(--border-color); }
[data-theme] .page-title { color: var(--text-primary); }
[data-theme] .greeting-bar { background: var(--bg-greeting); border-radius: var(--radius-lg); }
[data-theme] .notif-panel { background: var(--bg-card); backdrop-filter: var(--blur-amount); border-color: var(--border-color); border-radius: var(--radius-lg); }
[data-theme] .app-header-btn { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); }
[data-theme] .app-header-btn:hover { background: var(--bg-card-hover); }
[data-theme] .nav-logout { border-color: rgba(255,255,255,0.15); color: var(--bg-sidebar-text); }
[data-theme] .progress-bar { background: var(--bg-input); }
[data-theme] .mobile-tab-bar { background: var(--bg-card); backdrop-filter: var(--blur-heavy); border-top-color: var(--border-color); }
[data-theme] .mobile-tab-item { color: var(--text-tertiary); }
[data-theme] .mobile-tab-item.active { color: var(--primary); }
[data-theme] .empty-state { color: var(--text-tertiary); }
[data-theme] .app-toast { border-radius: var(--radius-md); }
.theme-picker-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,0.45);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
z-index: 10000; display: none; align-items: center; justify-content: center;
}
.theme-picker-box {
background: var(--bg-secondary, #fff); border-radius: 20px;
width: 520px; max-width: 96vw; max-height: 88vh; overflow-y: auto;
box-shadow: 0 24px 64px rgba(0,0,0,0.18); padding: 20px;
animation: bounceIn 0.3s;
}
.theme-picker-header {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.theme-picker-title {
font-size: 16px; font-weight: 800; color: var(--text-primary, #1c1c1e);
}
.theme-picker-subtitle {
font-size: 11px; color: var(--text-tertiary, #8e8e93); margin-top: 2px;
}
.theme-picker-close {
width: 28px; height: 28px; border-radius: 50%; border: none;
background: var(--bg-input, rgba(142,142,147,0.12));
color: var(--text-tertiary, #8e8e93); font-size: 12px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.2s;
}
.theme-picker-close:hover { background: var(--color-danger, #FF3B30); color: #fff; }
.theme-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.theme-card {
border: 2px solid var(--border-color, #e5e5ea);
border-radius: 12px; padding: 0; cursor: pointer;
transition: all 0.2s ease; overflow: hidden; position: relative;
}
.theme-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); }
.theme-card.active { border-color: var(--primary, #007AFF); box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 0,122,255), 0.2); }
.theme-card .theme-preview {
height: 52px; display: flex;
}
.theme-card .theme-preview .preview-sidebar {
width: 26%; height: 100%; display: flex; flex-direction: column;
padding: 4px; gap: 2px;
}
.theme-card .theme-preview .preview-sidebar .preview-nav-item {
height: 3px; border-radius: 1.5px; opacity: 0.4;
}
.theme-card .theme-preview .preview-sidebar .preview-nav-item:first-child { opacity: 0.9; }
.theme-card .theme-preview .preview-main {
flex: 1; padding: 4px; display: flex; flex-direction: column; gap: 2px;
}
.theme-card .theme-preview .preview-main .preview-header {
height: 4px; border-radius: 2px;
}
.theme-card .theme-preview .preview-main .preview-card {
flex: 1; border-radius: 3px; display: flex; gap: 2px;
}
.theme-card .theme-preview .preview-main .preview-card .preview-kpi {
flex: 1; border-radius: 2px;
}
.theme-card .theme-name {
padding: 5px 4px; font-size: 11px; font-weight: 600;
text-align: center; line-height: 1.3;
}
.theme-card .theme-tagline {
display: block; font-size: 9px; font-weight: 400;
color: var(--text-tertiary, #8e8e93); margin-top: 1px;
}
.theme-card .theme-check {
position: absolute; top: 4px; right: 4px;
width: 20px; height: 20px; border-radius: 50%;
background: var(--primary, #007AFF);
color: #fff; font-size: 10px; display: none;
align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.theme-card.active .theme-check { display: flex; }
[data-theme] .glass-card {
background: var(--bg-card);
backdrop-filter: var(--blur-amount);
-webkit-backdrop-filter: var(--blur-amount);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
[data-theme] .sidebar-nav-item-icon {
transition: all 0.2s;
}
[data-theme] .sidebar-nav-item-icon:hover {
transform: scale(1.1);
}
@keyframes themeTransition {
from { opacity: 0.8; }
to { opacity: 1; }
}
[data-theme] .app-shell {
animation: themeTransition 0.4s ease;
}
[data-theme] ::selection{background:rgba(var(--primary-rgb),0.22);}
[data-theme] ::-webkit-scrollbar-thumb{background:rgba(var(--primary-rgb),0.22);}
[data-theme] ::-webkit-scrollbar-thumb:hover{background:rgba(var(--primary-rgb),0.38);}
[data-theme] .side-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.15);}
[data-theme] .app-content{
background:
radial-gradient(1100px 360px at 15% -8%, rgba(var(--primary-rgb),0.07), transparent 62%),
radial-gradient(900px 320px at 88% -12%, rgba(var(--primary-rgb),0.045), transparent 60%),
var(--bg-primary);
}
[data-theme="ink-dark"] .app-content{
background:
radial-gradient(1100px 360px at 15% -8%, rgba(var(--primary-rgb),0.1), transparent 62%),
radial-gradient(900px 320px at 88% -12%, rgba(var(--secondary,168,85,247),0.06), transparent 60%),
var(--bg-primary);
}
@media(min-width:1600px){ .app-content{max-width:1680px;} }
[data-theme] .page-section .card{font-variant-numeric:tabular-nums;}
[data-theme] .page-section .card:hover{
transform:translateY(-1px);
box-shadow:var(--shadow-lg);
}
[data-theme] .page-section .card{transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;}
[data-theme] .page-section .card h3{
font-size:15.5px !important;
font-weight:800 !important;
line-height:1.45;
letter-spacing:.2px;
margin-bottom:12px;
}
[data-theme] .page-section .card h3 > span:first-child{font-size:17px;}
[data-theme] .greeting-bar{
position:relative;
overflow:hidden;
border-radius:var(--radius-lg);
box-shadow:var(--shadow-lg);
}
[data-theme] .greeting-bar::before{
content:'';
position:absolute;right:-46px;top:-72px;
width:190px;height:190px;border-radius:50%;
background:rgba(255,255,255,0.13);
pointer-events:none;
}
[data-theme] .greeting-bar::after{
content:'';
position:absolute;right:64px;bottom:-92px;
width:150px;height:150px;border-radius:50%;
background:rgba(255,255,255,0.08);
pointer-events:none;
}
[data-theme] .greeting-bar > *{position:relative;z-index:1;}
.notify-quickbar{
display:flex;align-items:center;gap:12px;
background:var(--bg-card);
backdrop-filter:var(--blur-amount);
-webkit-backdrop-filter:var(--blur-amount);
border:1px solid var(--border-color);
border-radius:var(--radius-md);
padding:10px 16px;margin-bottom:16px;
box-shadow:var(--shadow-sm);
cursor:pointer;
transition:border-color .2s, box-shadow .2s, transform .2s;
}
.notify-quickbar:hover{border-color:var(--border-active);box-shadow:var(--shadow-md);transform:translateY(-1px);}
.notify-quickbar .nq-icon{
width:38px;height:38px;border-radius:12px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:18px;
background:rgba(var(--primary-rgb),0.1);color:var(--primary);
position:relative;
}
.notify-quickbar .nq-dot{
position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;
border-radius:9px;background:#DC2626;color:#fff;
font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;
padding:0 4px;line-height:1;box-shadow:0 2px 6px rgba(220,38,38,.35);
}
.notify-quickbar .nq-title{font-size:13.5px;font-weight:700;color:var(--text-primary);line-height:1.35;}
.notify-quickbar .nq-sub{font-size:11.5px;color:var(--text-tertiary);margin-top:1px;}
.notify-quickbar .nq-arrow{margin-left:auto;color:var(--text-tertiary);font-size:14px;flex-shrink:0;}
.rk-row{
display:flex;align-items:center;gap:10px;
padding:8px 10px;border-radius:10px;
background:var(--bg-tertiary);
border:1px solid var(--border-color);
margin-bottom:6px;font-size:13.5px;
transition:border-color .18s, transform .18s, background .18s;
}
.rk-row:hover{border-color:var(--border-active);transform:translateX(2px);}
.rk-row.me{background:rgba(var(--primary-rgb),0.08);border-color:rgba(var(--primary-rgb),0.3);}
.rk-idx{width:24px;text-align:center;font-size:13px;flex-shrink:0;font-variant-numeric:tabular-nums;}
.rk-name{flex:1;min-width:0;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rk-name.me{color:var(--primary);font-weight:700;}
.rk-sub{font-size:11.5px;color:var(--text-tertiary);flex-shrink:0;white-space:nowrap;}
.rk-meta{font-size:11.5px;color:var(--text-tertiary);flex-shrink:0;white-space:nowrap;}
.rk-bar{width:72px;height:5px;border-radius:3px;background:var(--bg-input);overflow:hidden;flex-shrink:0;}
.rk-bar>div{height:100%;border-radius:3px;}
.rk-score{font-weight:900;font-variant-numeric:tabular-nums;min-width:40px;text-align:right;flex-shrink:0;font-size:14.5px;}
.qa-tile{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
min-height:92px;border-radius:14px;cursor:pointer;text-align:center;
transition:transform .18s, box-shadow .18s;
-webkit-tap-highlight-color:transparent;
}
.qa-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.qa-tile:active{transform:scale(.97);}
.qa-icon{
width:42px;height:42px;border-radius:13px;
display:flex;align-items:center;justify-content:center;font-size:21px;line-height:1;
}
.qa-label{font-size:12.5px;font-weight:700;color:var(--text-secondary);letter-spacing:.2px;}
.li-row{
display:flex;align-items:center;gap:10px;
padding:9px 10px;border-radius:10px;
background:var(--bg-secondary);
border:1px solid var(--border-color);
margin-bottom:7px;cursor:pointer;font-size:13px;
transition:border-color .18s, transform .18s;
}
.li-row:hover{border-color:var(--border-active);transform:translateX(2px);}
.li-row .li-title{flex:1;min-width:0;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.li-row .li-title.muted{color:var(--text-secondary);font-weight:500;}
.li-row .li-time{font-size:11px;color:var(--text-tertiary);flex-shrink:0;font-variant-numeric:tabular-nums;}
.li-row .li-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.dc-sub{font-size:12px;font-weight:700;color:var(--text-tertiary);letter-spacing:.3px;margin:10px 0 6px;display:flex;align-items:center;gap:6px;}
.dc-sub::after{content:'';flex:1;height:1px;background:var(--border-color);}
.dc-empty{
text-align:center;padding:26px 14px;
background:var(--bg-tertiary);
border:1px dashed var(--border-color);
border-radius:12px;
}
.dc-empty .dc-empty-icon{font-size:30px;line-height:1;margin-bottom:6px;}
.dc-empty .dc-empty-text{font-size:13px;font-weight:700;color:var(--text-secondary);}
.dc-empty .dc-empty-hint{font-size:11.5px;color:var(--text-tertiary);margin-top:4px;}
.theme-picker-box{padding:22px;border-radius:22px;box-shadow:0 24px 72px rgba(0,0,0,0.22);}
.theme-grid{gap:10px;}
.theme-card{border-radius:14px;}
.theme-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,0.12);}
.theme-card .theme-preview{height:56px;}
.theme-card .theme-name{padding:7px 4px 8px;font-size:11.5px;}
.theme-card .theme-tagline{font-size:9.5px;}
@media(max-width:767px){
.dg-2,.dg-21,.dg-21b,.dg-3s,.dg-3mix,.dg-3mixB,.dg-4mix{grid-template-columns:1fr !important;}
.dg-4{grid-template-columns:repeat(2,1fr) !important;}
.dg-4q{grid-template-columns:repeat(2,1fr) !important;}
.dg-5{grid-template-columns:repeat(3,1fr) !important;gap:8px !important;}
.dg-7{grid-template-columns:repeat(4,1fr) !important;gap:6px !important;}
.dg-3q{grid-template-columns:repeat(3,1fr) !important;gap:8px !important;}
.dg-3k{grid-template-columns:repeat(3,1fr) !important;gap:8px !important;}
.dg-todo{grid-template-columns:1fr !important;}
.dg-5>div,.dg-4>div{padding:10px 4px !important;border-radius:11px !important;}
.dg-5>div>div:first-child,.dg-4>div>div:first-child{font-size:19px !important;}
.dg-7>div{padding:8px 2px !important;}
.dg-7>div>div:first-child{font-size:16px !important;}
.qa-tile{min-height:78px;border-radius:12px;}
.qa-icon{width:36px;height:36px;font-size:18px;border-radius:11px;}
.qa-label{font-size:11.5px;}
.att-bar{flex-wrap:wrap;gap:10px !important;}
.att-bar>div:nth-child(2){flex-basis:100%;order:3;gap:10px !important;flex-wrap:wrap;}
.greeting-bar{flex-wrap:wrap;gap:8px;padding:16px 18px;}
.greet-msg{font-size:16px !important;}
.greet-quote{font-size:12px !important;}
.greet-info{font-size:12px !important;}
}
@media(max-width:480px){
.dg-4q{grid-template-columns:1fr !important;}
}
@media(max-width:420px){
.dg-5{grid-template-columns:repeat(2,1fr) !important;}
.dg-7{grid-template-columns:repeat(3,1fr) !important;}
.dg-3q{grid-template-columns:repeat(2,1fr) !important;}
.dg-4q{grid-template-columns:repeat(2,1fr) !important;}
.theme-grid{grid-template-columns:repeat(2,1fr) !important;}
.theme-picker-box{padding:14px;}
.theme-card .theme-name{font-size:12px;}
}
@media(max-width:360px){
.theme-grid{grid-template-columns:1fr !important;}
}