:root {
--bg-panel: rgba(255, 255, 255, 0.05);
--color-primary: #3b82f6;
--color-primary-light: #60a5fa;
--color-primary-dark: #2563eb;
--color-danger: #ef4444;
--color-warning: #f59e0b;
--color-success: #10b981;
--color-info: #6b7280;
--bg-blur: 0px;
--bg-opacity: 0.3;
--bg-glass: rgba(255, 255, 255, 0.1);
--bg-glass-border: rgba(255, 255, 255, 0.15);
--bg-dark: #111111;
--bg-darker: #0a0a0a;
--bg-light: rgba(255, 255, 255, 0.05);
--item-radius: 15px;
--item-size: 82px;
--panel-width: 500px;
--search-bar-width: 540px;
--search-bar-height: 50px;
--time-size: 70px;
--sidebar-width: 70px;
--font-main: system-ui, -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
--font-serif: 'Georgia', serif;
--font-mono: 'Courier New', monospace;
--font-kai: 'LXGW WenKai', 'STKaiti', serif;
--transition-fast: 0.15s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
--shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
--shadow-md: 0 4px 8px rgba(0,0,0,0.2);
--shadow-lg: 0 8px 16px rgba(0,0,0,0.3);
--shadow-xl: 0 10px 30px rgba(0,0,0,0.5);
--shadow-primary: 0 4px 15px rgba(59, 130, 246, 0.4);
}
@media (max-width: 768px) {
:root {
--search-bar-width: 90vw;
--panel-width: 95vw;
--item-size: 70px;
--time-size: 50px;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
background: var(--bg-dark);
color: #ffffff;
font-family: var(--font-main);
font-size: 14px;
line-height: 1.5;
transition: background-color var(--transition-slow), font-family 0.3s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#bg-layer {
position: fixed;
inset: 0;
z-index: -2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: background-image 0.8s ease-in-out, filter 0.35s ease-in-out;
-webkit-filter: blur(var(--bg-blur));
filter: blur(var(--bg-blur));
}
#bg-layer-2 {
position: fixed;
inset: 0;
z-index: -2;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
-webkit-filter: blur(var(--bg-blur));
filter: blur(var(--bg-blur));
opacity: 0;
transition: opacity 0.8s ease-in-out;
pointer-events: none;
}
#bg-mask {
position: fixed;
inset: 0;
z-index: -1;
background: rgba(0, 0, 0, var(--bg-opacity));
pointer-events: none;
}
#sidebar-toggle {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 60px;
background: rgba(0, 0, 0, 0.7);
border-radius: 0 10px 10px 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 101;
transition: all var(--transition-normal);
border: 1px solid rgba(255, 255, 255, 0.1);
border-left: none;
}
#sidebar-toggle:hover {
background: rgba(0, 0, 0, 0.9);
width: 24px;
}
#sidebar-toggle i {
font-size: 12px;
opacity: 0.7;
transition: all var(--transition-normal);
}
#sidebar-toggle:hover i {
opacity: 1;
}
#sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: var(--sidebar-width);
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(20px);
border-right: 1px solid var(--bg-glass-border);
z-index: 100;
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 0;
transform: translateX(0);
transition: transform var(--transition-normal);
}
#sidebar.hidden {
transform: translateX(-100%);
}
main.sidebar-hidden {
width: 100vw !important;
margin-left: 0 !important;
}
.cat-item {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-bottom: 20px;
transition: all var(--transition-normal);
color: rgba(255, 255, 255, 0.3);
font-size: 1.1rem;
position: relative;
pointer-events: auto !important;
user-select: none;
}
.cat-item.active {
background: var(--color-primary);
color: white;
box-shadow: var(--shadow-primary);
}
#cat-list {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
width: 100%;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,0.2) transparent;
}
#cat-list::-webkit-scrollbar { width: 6px; }
#cat-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
.cat-item .cat-name {
position: absolute;
left: 50px;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.8);
padding: 5px 10px;
border-radius: 6px;
font-size: 0.75rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-fast);
z-index: 102;
font-family: var(--font-main);
}
.cat-item:hover .cat-name {
opacity: 1;
}
.add-cat-btn {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: auto;
margin-bottom: 10px;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.5);
font-size: 1.2rem;
transition: all var(--transition-normal);
}
.add-cat-btn:hover {
background: var(--color-success);
color: white;
transform: scale(1.1);
}
main {
height: 100vh;
width: calc(100vw - var(--sidebar-width));
margin-left: var(--sidebar-width);
display: flex;
flex-direction: column;
align-items: center;
padding: 6vh 0;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--color-info) transparent;
transition: all var(--transition-normal);
}
main::-webkit-scrollbar {
width: 6px;
}
main::-webkit-scrollbar-track {
background: transparent;
}
main::-webkit-scrollbar-thumb {
background: var(--color-info);
border-radius: 3px;
}
#clock-area {
text-align: center;
margin-bottom: 40px;
cursor: default;
user-select: none;
font-family: var(--font-main);
}
#time-text {
line-height: 1;
margin-bottom: 12px;
font-size: var(--time-size);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
transition: font-size var(--transition-normal);
font-family: var(--font-main);
font-weight: 500;
}
#time-text .time-unit {
display: inline-block;
min-width: 1ch;
transition: opacity 0.3s ease, transform 0.3s ease;
}
#time-text .time-unit.fade {
opacity: 0.3;
transform: translateY(-2px);
}
#time-text .time-sep {
opacity: 0.6;
}
#date-text {
font-size: 0.95rem;
font-family: var(--font-main);
opacity: 0.8;
font-weight: 300;
}
.search-container {
width: 90%;
max-width: min(var(--search-bar-width), calc(100vw - 32px));
margin-bottom: 60px;
position: relative;
z-index: 10;
transition: all var(--transition-normal);
font-family: var(--font-main);
margin-left: auto;
margin-right: auto;
}
.search-bar {
background: var(--bg-glass);
backdrop-filter: blur(25px);
border-radius: 30px;
border: 1px solid var(--bg-glass-border);
display: flex;
align-items: center;
padding: 0 20px;
transition: all var(--transition-normal);
height: var(--search-bar-height);
box-shadow: var(--shadow-md);
width: 100%;
}
.search-bar:focus-within {
background: rgba(255, 255, 255, 0.15);
border-color: var(--color-primary);
box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
transform: translateY(-2px);
}
@media (max-width: 768px) {
.search-container {
width: 95%;
margin-bottom: 40px;
}
.search-bar {
padding: 0 15px;
}
}
#cur-engine {
width: 22px;
height: 22px;
cursor: pointer;
margin-right: 15px;
border-radius: 4px;
transition: transform var(--transition-fast);
}
#cur-engine:hover {
transform: scale(1.1);
}
#search-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: white;
padding: 0;
font-size: 1rem;
height: 100%;
font-family: var(--font-main);
}
#search-input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
#grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--item-size), 1fr));
gap: 25px;
width: 100%;
max-width: 1400px;
padding: 16px 16px 144px;
padding-bottom: 120px;
transition: grid-template-columns var(--transition-normal);
grid-template-columns: repeat(auto-fill, 64px);
grid-auto-rows: 96px;
grid-auto-flow: row dense;
align-items: start;
}
.icon-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.icon-item.add-item {
border: none;
border-radius: var(--item-radius);
padding: 0;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 65px;
height: 65px;
}
.icon-item.add-item:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.icon-item.add-item .icon-box {
background: #2196f3 !important;
border: none !important;
border-radius: 50% !important;
width: 30px !important;
height: 30px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3) !important;
}
.icon-item.add-item .icon-box:hover {
background: #1976d2 !important;
transform: scale(1.05) !important;
box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4) !important;
}
.icon-item.add-item i {
font-size: 20px;
color: white;
transition: all 0.3s ease;
}
.icon-item.add-item:hover i {
transform: scale(1.1);
}
.icon-item.add-item .icon-name {
font-size: 10px;
color: #666;
margin-top: 4px;
font-weight: 400;
transition: all 0.3s ease;
}
.icon-item.add-item:hover .icon-name {
color: #2196f3;
}
.icon-box {
width: var(--item-size);
height: var(--item-size);
border-radius: 20px;
background: var(--bg-glass);
border: 1px solid var(--bg-glass-border);
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
transition: all var(--transition-normal);
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-md);
border-radius: var(--item-radius) !important;
}
.icon-box:hover {
transform: translateY(-6px) scale(1.08);
border-color: var(--color-primary);
box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 2px rgba(59,130,246,0.25);
}
.icon-box::before {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
background: radial-gradient(ellipse at center, rgba(59,130,246,0.25) 0%, transparent 70%);
opacity: 0;
transition: opacity var(--transition-normal);
pointer-events: none;
z-index: -1;
}
.icon-box:hover::before {
opacity: 1;
}
.editing .icon-box {
cursor: inherit;
}
.icon-name {
margin-top: 10px;
font-size: 0.75rem;
opacity: 0.7;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: var(--item-size);
text-align: center;
transition: opacity var(--transition-fast);
font-family: var(--font-main);
}
.icon-item:hover .icon-name {
opacity: 1;
}
.icon-ico {
width: 48px;
height: 48px;
object-fit: contain;
}
.folder-preview {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
padding: 12px;
width: 100%;
height: 100%;
}
.f-dot {
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
border-radius: calc(var(--item-radius) / 2) !important;
}
.folder-child-remove {
position: absolute;
top: -8px;
right: -8px;
width: 20px;
height: 20px;
background: var(--color-danger);
color: #fff;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
z-index: 5;
border: 2px solid rgba(0,0,0,0.5);
font-size: 10px;
cursor: pointer;
}
.folder-grid .icon-item:hover .folder-child-remove { display: flex; }
#folder-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(20px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition-normal), visibility var(--transition-normal);
}
#folder-overlay.show {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.folder-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--bg-glass-border);
padding: 40px;
border-radius: 32px;
width: 90%;
max-width: 500px;
position: relative;
transform: translateY(20px) scale(0.96);
transition: transform var(--transition-normal) cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: var(--shadow-xl);
}
#folder-overlay.show .folder-card {
transform: translateY(0) scale(1);
}
.folder-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
gap: 20px;
margin-top: 20px;
}
.del-badge {
position: absolute;
top: -8px;
right: -8px;
width: 22px;
height: 22px;
background: var(--color-danger);
color: white;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
z-index: 100;
border: 2px solid var(--bg-dark);
font-size: 14px;
cursor: pointer;
transition: all var(--transition-fast);
}
.del-badge:hover {
transform: scale(1.1);
background: #ff2e4d;
}
.del-badge-x {
font-size: 15px;
font-weight: 700;
line-height: 1;
color: #fff;
pointer-events: none;
}
.editing .del-badge {
display: flex;
}
.editing .icon-box {
animation: shake 0.4s infinite;
border-style: dashed;
}
@keyframes shake {
0%, 100% { transform: rotate(0); }
25% { transform: rotate(1.5deg); }
75% { transform: rotate(-1.5deg); }
}
#exit-edit-btn {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: var(--color-danger);
color: white;
padding: 12px 30px;
border-radius: 30px;
display: none;
cursor: pointer;
z-index: 500;
font-size: 0.9rem;
border: none;
box-shadow: var(--shadow-xl);
transition: all var(--transition-normal);
}
#exit-edit-btn:hover {
background: #ff2e4d;
transform: translateX(-50%) translateY(-2px);
}
#side-panel {
position: fixed;
right: -600px;
top: 0;
bottom: 0;
width: var(--panel-width);
backdrop-filter: blur(40px);
border-left: 1px solid #333;
z-index: 1000;
transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
overflow: hidden;
box-shadow: var(--shadow-xl);
}
#side-panel.open {
right: 0;
}
.panel-nav {
width: 152px;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
border-right: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: column;
gap: 2px;
padding: 14px 10px;
overflow-y: auto;
box-shadow: inset 1px 0 3px rgba(0, 0, 0, 0.1);
}
.p-nav-group {
font-size: 11px;
font-weight: 500;
color: rgba(255, 255, 255, 0.38);
letter-spacing: 0.03em;
padding: 12px 10px 6px;
}
.p-nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
font-size: 0.82rem;
text-align: left;
cursor: pointer;
color: rgba(255, 255, 255, 0.62);
border-radius: 10px;
position: relative;
transition: background 0.16s, color 0.16s;
}
.p-nav-item i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
font-size: 0.92rem;
margin: 0;
transition: color 0.16s;
}
.p-nav-item:hover {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
transform: none;
}
.p-nav-item:hover i { color: #ffffff; }
.p-nav-item.active {
background: var(--color-primary);
color: #ffffff;
box-shadow: var(--shadow-primary);
}
.p-nav-item.active i {
color: #ffffff;
transform: none;
}
.p-nav-item:last-child { margin-top: auto; }
.p-nav-item:last-child:hover {
background: rgba(239, 68, 68, 0.14);
color: #ffffff;
}
.p-nav-item:last-child:hover i { color: var(--color-danger); }
body.theme-light .p-nav-group { color: rgba(0, 0, 0, 0.4); }
body.theme-light .p-nav-item { color: rgba(0, 0, 0, 0.6); }
body.theme-light .p-nav-item:hover { color: #111; background: rgba(0, 0, 0, 0.06); }
body.theme-light .p-nav-item.active { color: #fff; background: var(--color-primary); }
.panel-content {
flex: 1;
padding: 25px;
overflow-y: auto;
display: none;
font-family: var(--font-main);
}
.panel-content.active {
display: block;
}
.panel-h {
font-size: 0.75rem;
color: var(--color-primary);
margin-bottom: 15px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 1px solid #222;
padding-bottom: 5px;
font-family: var(--font-main);
}
.ctrl-row {
margin-bottom: 15px;
}
.ctrl-label {
display: block;
font-size: 0.7rem;
margin-bottom: 5px;
font-family: var(--font-main);
}
.ctrl-input {
width: 100%;
background: #222;
border: 1px solid #444;
color: #fff;
padding: 10px;
border-radius: 10px;
outline: none;
font-size: 0.85rem;
transition: all var(--transition-fast);
}
.ctrl-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.btn-m {
padding: 8px 12px;
background: #333;
border: none;
color: #eee;
border-radius: 8px;
cursor: pointer;
font-size: 0.75rem;
transition: all var(--transition-fast);
font-family: var(--font-main);
}
.btn-m:hover {
background: #444;
transform: translateY(-1px);
}
.btn-m.active {
background: var(--color-primary);
color: white;
}
.color-picker-wrapper {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}
#bg-color-pick {
width: 50px;
height: 40px;
border: none;
background: none;
cursor: pointer;
border-radius: 6px;
overflow: hidden;
}
.gradient-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
gap: 10px;
margin-top: 10px;
}
.grad-item {
width: 100%;
aspect-ratio: 1;
border-radius: 10px;
border: 2px solid transparent;
cursor: pointer;
transition: all var(--transition-fast);
}
.grad-item:hover {
transform: scale(1.05);
}
.grad-item.active {
border-color: var(--color-primary);
box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}
.bg-fav-item {
position: relative;
width: 100%;
aspect-ratio: 1;
}
.bg-fav-thumb {
width: 100%;
height: 100%;
border-radius: 10px;
border: 2px solid transparent;
cursor: pointer;
background-size: cover;
background-position: center;
transition: all var(--transition-fast);
}
.bg-fav-thumb:hover {
transform: scale(1.05);
border-color: var(--color-primary);
}
.bg-fav-remove {
position: absolute;
top: -6px;
right: -6px;
width: 18px;
height: 18px;
background: var(--color-danger);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
cursor: pointer;
border: 2px solid rgba(0,0,0,0.5);
}
.eng-item img {
width: 20px;
height: 20px;
display: block;
background: #222;
object-fit: contain;
border-radius: 4px;
}
.qrcode-container {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 20px;
}
.qrcode-item {
text-align: center;
}
.qrcode-img {
width: 140px;
height: 140px;
border-radius: 12px;
border: 1px solid #444;
margin-bottom: 8px;
transition: transform var(--transition-normal);
}
.qrcode-img:hover {
transform: scale(1.05);
}
.qrcode-label {
font-size: 0.7rem;
color: #aaa;
}
.cat-edit-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
padding: 10px;
background: #222;
border-radius: 10px;
transition: all var(--transition-fast);
}
.cat-edit-row:hover {
background: #2a2a2a;
}
.cat-edit-emoji {
width: 40px;
height: 30px;
background: #111;
border: 1px solid #444;
color: #fff;
border-radius: 6px;
font-size: 1rem;
text-align: center;
}
.cat-edit-input {
flex: 1;
background: #111;
border: 1px solid #444;
color: #fff;
padding: 8px;
border-radius: 6px;
font-size: 0.75rem;
}
.icon-type-selector {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 15px;
}
.icon-type-btn {
padding: 10px;
text-align: center;
border-radius: 8px;
cursor: pointer;
background: #222;
transition: all var(--transition-fast);
font-size: 0.75rem;
}
.icon-type-btn.active {
background: var(--color-primary);
}
#context-menu {
position: fixed;
display: none;
border-radius: 12px;
z-index: 2100;
width: 130px;
padding: 6px 0;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(5px); }
to { opacity: 1; transform: translateY(0); }
}
.menu-opt {
padding: 10px 15px;
cursor: pointer;
font-size: 0.8rem;
display: flex;
align-items: center;
gap: 10px;
transition: all var(--transition-fast);
}
.menu-opt:hover {
background: var(--color-primary);
border-radius: 5px;
}
#notification {
position: fixed;
top: 20px;
right: 20px;
background: var(--color-success);
color: white;
padding: 12px 20px;
border-radius: 8px;
box-shadow: var(--shadow-lg);
z-index: 3000;
display: none;
align-items: center;
gap: 10px;
animation: slideInRight 0.3s ease;
}
.noti-action {
margin-left: 4px;
padding: 4px 12px;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 6px;
background: rgba(255, 255, 255, 0.15);
color: #fff;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
}
.noti-action:hover { background: rgba(255, 255, 255, 0.3); }
.w-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px;
min-height: 64px;
color: rgba(255, 255, 255, 0.55);
text-align: center;
font-size: 0.8rem;
}
.w-state i.fa-spinner { color: var(--color-primary); }
.w-state-error i { color: #f87171; }
.w-state-btn {
margin-top: 4px;
padding: 5px 14px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-size: 0.75rem;
cursor: pointer;
}
.w-state-btn:hover { background: var(--color-primary); border-color: var(--color-primary); }
body.theme-light .w-state { color: rgba(0, 0, 0, 0.5); }
body.theme-light .w-state-btn { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.75); }
@keyframes slideInRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
#loading {
position: fixed;
inset: 0;
background: var(--bg-dark);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.5s ease;
}
.spinner {
width: 50px;
height: 50px;
border: 3px solid rgba(255, 255, 255, 0.1);
border-radius: 50%;
border-top-color: var(--color-primary);
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@media (max-width: 768px) {
:root {
--sidebar-width: 0;
--panel-width: 90vw;
--search-bar-width: 90%;
}
#sidebar-toggle {
display: none;
}
#sidebar {
transform: translateX(-100%);
}
#sidebar.show {
transform: translateX(0);
}
main {
width: 100vw;
margin-left: 0;
}
#grid {
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
}
.qrcode-container {
flex-direction: column;
align-items: center;
}
}
.tooltip {
position: absolute;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px 10px;
border-radius: 6px;
font-size: 0.75rem;
white-space: nowrap;
z-index: 10000;
pointer-events: none;
opacity: 0;
transition: opacity var(--transition-fast);
}
.sortable-ghost { opacity: 0.2; transform: scale(0.8); background: var(--color-primary) !important; border-radius: 20px; }
.sortable-chosen { box-shadow: 0 0 20px var(--color-primary); }
.editing .icon-item { cursor: grab; }
.editing .icon-item:active { cursor: grabbing; }
#quote-container {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
text-align: center;
color: white;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
z-index: 10;
max-width: 80%;
transition: opacity 0.5s ease;
pointer-events: none;
}
#quote-text {
font-size: 0.75rem;
font-weight: 500;
margin-bottom: 5px;
}
#quote-author {
font-size: 0.85rem;
opacity: 0.8;
}
.modal-overlay {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.7);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none; transition: 0.3s; z-index: 1000;
}
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-content {
background: var(--bg-panel);
padding: 30px; border-radius: 20px;
border: 1px solid var(--bg-glass-border);
backdrop-filter: blur(20px);
}
.resource-list {
max-height: 400px;
overflow-y: auto;
padding: 5px;
background: #1a1a1a;
border-radius: 10px;
}
.resource-item {
position: relative;
display: flex;
align-items: center;
padding: 10px;
margin-bottom: 8px;
background: #222;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
border: 2px solid transparent;
}
.resource-item:hover {
background: #2a2a2a;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.resource-item.selected {
border-color: var(--color-primary);
background: rgba(66, 153, 225, 0.1);
}
.resource-item .select-checkbox {
display: none;
margin-right: 10px;
}
.resource-item.selected .select-checkbox {
display: block;
color: var(--color-primary);
}
.resource-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
margin-right: 12px;
font-size: 1.2rem;
}
.resource-icon img {
width: 24px;
height: 24px;
border-radius: 4px;
object-fit: contain;
}
.resource-info {
flex: 1;
min-width: 0;
}
.resource-name {
font-size: 0.85rem;
font-weight: 500;
color: #fff;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.resource-desc {
font-size: 0.7rem;
color: #888;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.resource-actions {
display: flex;
gap: 8px;
opacity: 0;
transition: opacity 0.2s ease;
}
.resource-item:hover .resource-actions {
opacity: 1;
}
.resource-action-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: #333;
color: #aaa;
cursor: pointer;
transition: all 0.2s ease;
}
.resource-action-btn:hover {
background: var(--color-primary);
color: white;
}
#resource-search {
background: #222 !important;
border: 1px solid #444 !important;
border-radius: 8px !important;
padding: 0 10px !important;
}
.resource-empty {
text-align: center;
padding: 40px 20px;
color: #666;
}
.resource-empty i {
font-size: 3rem;
margin-bottom: 15px;
opacity: 0.3;
}
.add-tag-button {
cursor: pointer;
transition: all 0.3s ease;
position: relative;
opacity: 0.8;
}
.add-tag-button:hover {
opacity: 1;
transform: scale(1.05);
}
.add-tag-button .icon-box {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important;
border: 2px dashed rgba(255, 255, 255, 0.3);
animation: pulse 2s infinite;
}
.add-tag-button .icon-name {
color: var(--color-primary);
font-weight: bold;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(66, 153, 225, 0.5);
}
70% {
box-shadow: 0 0 0 10px rgba(66, 153, 225, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(66, 153, 225, 0);
}
}
.cat-transition .add-tag-button {
animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 0.8;
transform: translateY(0);
}
}
.main-view.editing .add-tag-button {
animation: none;
opacity: 0.9;
}
.main-view.editing .add-tag-button:hover {
opacity: 1;
}
.icon-item.drag-over {
transform: scale(1.05);
z-index: 10;
}
.icon-item.drag-over .icon-box {
box-shadow: 0 0 0 3px var(--color-primary), 0 0 15px rgba(0, 150, 255, 0.5);
border: 2px solid var(--color-primary);
}
.folder-item.drag-over .folder-preview {
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.icon-item[draggable="true"] {
cursor: grab;
}
.icon-item[draggable="true"]:active {
cursor: grabbing;
}
.sortable-ghost {
opacity: 0.4;
background: rgba(0, 150, 255, 0.1);
border: 2px dashed var(--color-primary);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
@media (max-width: 1100px) and (min-width: 769px) {
:root {
--search-bar-width: 460px;
--item-size: 70px;
--panel-width: 440px;
}
#grid { grid-template-columns: repeat(auto-fill, 56px); }
}
.sortable-chosen {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.folder-preview {
position: relative;
width: 40px;
height: 40px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 4px;
margin: 0 auto;
}
.f-dot {
width: 100%;
height: 100%;
border-radius: 4px;
transition: transform 0.2s;
}
.f-count {
background: var(--color-primary) !important;
color: white;
font-size: 0.6rem;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.resource-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 500px;
overflow-y: auto;
}
.resource-item {
display: flex;
align-items: center;
padding: 10px;
background: #2a2a2a;
border-radius: 8px;
cursor: pointer;
transition: background 0.2s;
}
.resource-item.selected {
background: #3a3a3a;
border-left: 3px solid var(--color-primary);
}
.resource-item:hover {
background: #333;
}
.select-checkbox {
width: 20px;
height: 20px;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
opacity: 0;
}
.resource-item.selected .select-checkbox {
opacity: 1;
}
.resource-icon {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
color: white;
}
.resource-icon img {
width: 24px;
height: 24px;
object-fit: contain;
}
.resource-info {
flex: 1;
overflow: hidden;
}
.resource-name {
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.resource-desc {
font-size: 0.7rem;
color: #888;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.resource-actions {
display: flex;
gap: 5px;
}
.resource-action-btn {
width: 28px;
height: 28px;
border-radius: 4px;
background: #333;
display: flex;
align-items: center;
justify-content: center;
color: #888;
cursor: pointer;
transition: all 0.2s;
}
.resource-action-btn:hover {
background: var(--color-primary);
color: white;
}
.resource-empty {
text-align: center;
padding: 40px;
opacity: 0.5;
}
.resource-empty i {
font-size: 2.5rem;
margin-bottom: 10px;
display: block;
}
#popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
}
.popup-container {
width: 750px;
height: 550px;
max-width: 90vw;
max-height: 90vh;
background: #1a1a1a;
border-radius: 10px;
display: flex;
flex-direction: column;
overflow: hidden;
margin-top: -10px;
}
.popup-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background: #222;
border-bottom: 1px solid #333;
}
.popup-title {
font-weight: 500;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
text-align: center;
margin-right: 40px;
}
.popup-controls {
display: flex;
gap: 5px;
}
.popup-btns {
display: flex;
gap: 8px;
align-items: center;
}
.popup-btn {
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.popup-btn.mac-btn.close {
background: #ff5f57;
}
.popup-btn.mac-btn.close:hover {
background: #ff3b30;
}
.popup-btn.mac-btn.minimize {
background: #ffbd2e;
}
.popup-btn.mac-btn.minimize:hover {
background: #ffaa00;
}
.popup-content {
flex: 1;
overflow: hidden;
}
#popup-frame {
flex: 1;
width: 800px;
background: white;
height: 700px;
}
.popup-footer {
padding: 10px 15px;
background: #222;
border-top: 1px solid #333;
display: flex;
justify-content: space-between;
align-items: center;
}
.popup-url {
font-size: 0.7rem;
color: #888;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
margin-right: 10px;
}
#quote-container {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
max-width: 80%;
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
line-height: 1.5;
}
#quote-author {
font-size: 0.8rem;
margin-top: 5px;
color: rgba(255, 255, 255, 0.5);
}
.modal-overlay {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 9999;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
@media (max-width: 768px) {
main {
width: 100vw;
margin-left: 0;
padding: 4vh 0;
}
main.sidebar-hidden {
width: 100vw !important;
}
#sidebar {
transform: translateX(-100%);
}
#sidebar.active {
transform: translateX(0);
}
#grid {
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 15px;
padding: 0 15px;
}
.icon-item {
width: 80px;
height: 80px;
}
.icon-box {
width: 50px;
height: 50px;
}
.icon-name {
font-size: 12px;
}
#time-text {
font-size: 3rem;
}
#date-text {
font-size: 0.8rem;
}
.search-container {
width: 95%;
margin-bottom: 40px;
}
.search-bar {
padding: 0 15px;
}
#cur-engine {
width: 20px;
height: 20px;
}
#search-input {
font-size: 14px;
}
#side-panel {
width: 95vw;
}
.panel-content {
padding: 20px;
}
.popup-container {
width: 95%;
height: 90%;
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.widgets-container {
margin-bottom: 20px;
}
.widget-item {
background: #222;
border-radius: 10px;
padding: 15px;
margin-bottom: 15px;
}
.widget-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #333;
}
.widget-header h5 {
margin: 0;
font-size: 1rem;
font-weight: 500;
color: white;
}
.weekdays-selector {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 5px;
}
.weekdays-selector label {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.9rem;
color: #ccc;
}
.time-range {
display: flex;
align-items: center;
gap: 10px;
margin-top: 5px;
}
.time-range input[type="time"] {
background: #333;
border: 1px solid #444;
border-radius: 5px;
padding: 5px;
color: white;
font-size: 0.9rem;
}
.time-range span {
color: #888;
}
.display-options {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 5px;
}
.display-options label {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.9rem;
color: #ccc;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media (prefers-contrast: high) {
:root {
--bg-glass: rgba(255, 255, 255, 0.2);
--bg-glass-border: rgba(255, 255, 255, 0.3);
}
.search-bar {
border: 2px solid rgba(255, 255, 255, 0.5);
}
.icon-item {
border: 1px solid rgba(255, 255, 255, 0.3);
}
}
.modal-content {
border-radius: 15px;
padding: 20px;
max-width: 400px;
width: 90%;
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
transform: scale(0.92) translateY(10px);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay.active .modal-content {
transform: scale(1) translateY(0);
}
#weather-widget {
display: none;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
font-size: 0.95rem;
opacity: 0.9;
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
#weather-widget i { font-size: 1.1rem; }
#weather-widget .w-temp { font-weight: 600; font-size: 1.05rem; }
#weather-widget .w-city { opacity: 0.85; }
#weather-widget .w-cond,
#weather-widget .w-hum,
#weather-widget .w-wind { font-size: 0.8rem; opacity: 0.75; }
.widget-strip {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-start;
margin-bottom: 4px;
}
.widget-tile {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
height: 100%;
align-self: stretch;
z-index: 1;
}
.widget-surface {
position: relative;
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
min-height: 0;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.widget-tile:hover .widget-surface {
transform: translateY(-2px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24), 0 4px 10px rgba(0, 0, 0, 0.1);
}
.widget-tile.selected .widget-surface {
outline: 3px solid var(--color-primary, #4f7cff);
outline-offset: 2px;
}
.theme-white .widget-surface { background: #ffffff; color: #1c1c1e; }
.theme-blue .widget-surface { background: linear-gradient(160deg, #5ac8fa 0%, #0a84ff 100%); color: #ffffff; }
.theme-dark .widget-surface { background: #0b0b0d; color: #ffffff; }
.theme-orange .widget-surface { background: linear-gradient(160deg, #ffc046 0%, #ff8a00 100%); color: #ffffff; }
.widget-body {
flex: 1;
min-height: 0;
padding: 16px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.widget-remove {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.22);
color: #fff;
font-size: 13px;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s, background 0.15s;
z-index: 2;
}
.widget-tile:hover .widget-remove { opacity: 1; }
.widget-remove:hover { background: #ff3b30; }
.widget-label {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 8px;
font-size: 12px;
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
text-align: center;
}
.widget-label i { font-size: 12px; opacity: 0.9; }
.w-clock {
align-items: center;
justify-content: center;
text-align: center;
gap: 2px;
}
.w-clock-time {
font-size: 2.6rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: 1px;
line-height: 1;
}
.w-clock-date {
font-size: 0.9rem;
opacity: 0.9;
margin-top: 8px;
}
.w-clock-lunar {
font-size: 0.78rem;
opacity: 0.6;
}
.w-cal { gap: 10px; }
.cal-head {
display: flex;
align-items: center;
gap: 12px;
}
.cal-big {
font-size: 2.6rem;
font-weight: 800;
color: #ff3b30;
line-height: 1;
}
.cal-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.cal-ym { font-size: 0.95rem; font-weight: 600; }
.cal-lunar { font-size: 0.78rem; color: #8e8e93; }
.cal-doy { font-size: 0.72rem; color: #b0b0b5; }
.cal-mini { margin-top: auto; }
.cal-mini-head {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
font-size: 0.65rem;
color: #b0b0b5;
text-align: center;
margin-bottom: 2px;
}
.cal-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.cal-cell {
text-align: center;
font-size: 0.75rem;
padding: 3px 0;
border-radius: 6px;
color: #3a3a3c;
}
.cal-cell.empty { visibility: hidden; }
.cal-cell.weekend { color: #ff3b30; }
.cal-cell.today { background: #ff3b30; color: #fff; font-weight: 700; }
.w-notes .w-notes-input {
flex: 1;
width: 100%;
box-sizing: border-box;
background: transparent;
border: none;
outline: none;
resize: none;
color: inherit;
font-size: 0.95rem;
line-height: 1.55;
font-family: inherit;
}
.w-notes .w-notes-input::placeholder { color: rgba(255, 255, 255, 0.72); }
.w-rmb { gap: 10px; }
.w-rmb .rmb-row {
display: flex;
align-items: center;
gap: 8px;
}
.w-rmb .rmb-cur {
font-size: 1.4rem;
font-weight: 700;
color: #e2231a;
}
.w-rmb .w-input {
flex: 1;
min-width: 0;
background: #f2f2f7;
border: 1px solid #e5e5ea;
border-radius: 10px;
color: #1c1c1e;
padding: 8px 10px;
font-size: 0.95rem;
outline: none;
}
.w-rmb .rmb-out {
font-size: 1.2rem;
font-weight: 700;
word-break: break-all;
line-height: 1.4;
}
.w-weather { color: #fff; }
.w-w-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.w-w-city {
font-size: 0.9rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 5px;
}
.w-w-city i { font-size: 0.75rem; opacity: 0.9; }
.w-w-emoji { font-size: 2.2rem; line-height: 1; }
.w-w-temp { font-size: 3.2rem; font-weight: 800; line-height: 1.05; margin-top: 2px; }
.w-w-cond { font-size: 0.95rem; opacity: 0.95; }
.w-w-meta { margin-top: auto; font-size: 0.75rem; opacity: 0.85; line-height: 1.5; }
.w-forex { gap: 8px; }
.fx-head {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
font-weight: 700;
}
.fx-head .fx-flag { font-size: 1.3rem; }
.w-forex .w-forex-list {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: auto;
}
.w-forex .fx-row {
display: flex;
align-items: center;
gap: 8px;
padding: 2px 0;
}
.w-forex .fx-flag { font-size: 1rem; }
.w-forex .fx-code { font-size: 0.8rem; color: #8e8e93; min-width: 34px; }
.w-forex .fx-val {
margin-left: auto;
font-size: 0.9rem;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.panel-sub {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 10px;
}
.wg-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.wg-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 2px 0 10px;
margin: 4px 0 12px;
overflow-x: auto;
flex-shrink: 0;
}
.wg-tabs::-webkit-scrollbar { display: none; }
.wg-tab {
flex: 0 0 auto;
padding: 6px 14px;
font-size: 0.78rem;
border: 1px solid transparent;
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.55);
border-radius: 999px;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.wg-tab:hover {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
.wg-tab.active {
background: rgba(74, 155, 255, 0.18);
color: #7db8ff;
border-color: rgba(74, 155, 255, 0.35);
}
body.theme-light .wg-tab {
background: rgba(0, 0, 0, 0.045);
color: rgba(0, 0, 0, 0.55);
}
body.theme-light .wg-tab:hover {
background: rgba(0, 0, 0, 0.08);
color: inherit;
}
body.theme-light .wg-tab.active {
background: rgba(74, 155, 255, 0.15);
color: #2563eb;
border-color: rgba(74, 155, 255, 0.35);
}
.wg-list-panel {
gap: 8px;
}
.wg-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 14px 8px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: #fff;
}
.wg-item i {
font-size: 1.4rem;
opacity: 0.9;
}
.wg-item span {
font-size: 0.82rem;
}
.wg-add {
margin-top: 4px;
padding: 4px 14px;
border: none;
border-radius: 20px;
background: var(--color-primary, #4f7cff);
color: #fff;
font-size: 0.78rem;
cursor: pointer;
}
.wg-current-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.wg-cur-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
font-size: 0.85rem;
}
.wg-cur-rm {
padding: 3px 10px;
border: none;
border-radius: 14px;
background: rgba(255, 80, 90, 0.85);
color: #fff;
font-size: 0.75rem;
cursor: pointer;
}
.wg-cur-rm:hover {
background: #ff2e4d;
}
body.theme-light .widget-label {
color: #1f2937;
text-shadow: none;
}
body.theme-light .panel-sub,
body.theme-light .wg-cur-row {
color: #1f2937;
}
body.theme-light .wg-item {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.1);
color: #1f2937;
}
.icon-item.kb-focus .icon-box {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
box-shadow: var(--shadow-primary);
}
.icon-item.kb-focus .icon-name { color: var(--color-primary-light); }
.icon-item.add-item { cursor: default; }
.search-container { position: relative; }
.search-suggest {
display: none;
position: absolute;
left: 0; right: 0; top: 100%;
margin-top: 8px;
background: rgba(20,20,20,0.92);
backdrop-filter: blur(12px);
border: 1px solid var(--bg-glass-border);
border-radius: 12px;
overflow: hidden;
z-index: 50;
box-shadow: var(--shadow-lg);
}
.search-suggest.show { display: block; }
.search-suggest .sg-item {
padding: 10px 16px;
cursor: pointer;
font-size: 0.9rem;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.search-suggest .sg-item:last-child { border-bottom: none; }
.search-clear {
display: none;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-left: 8px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
font-size: 0.8rem;
transition: background var(--transition-fast), color var(--transition-fast);
}
.search-clear:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
body.theme-light .search-clear { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.6); }
body.theme-light .search-clear:hover { background: rgba(0, 0, 0, 0.12); }
.kb-help { position: fixed; inset: 0; z-index: 2000; display: none; }
.kb-help.show { display: block; }
.kb-help-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); }
.kb-help-box {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: min(440px, 92vw); max-height: 84vh; overflow: auto;
background: #1c1c20; border: 1px solid #333; border-radius: 16px;
padding: 22px 22px 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); color: #e8eaf0;
}
.kb-help-head { font-size: 1.05rem; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kb-help-hint { font-size: 0.72rem; font-weight: 400; color: rgba(255, 255, 255, 0.4); white-space: nowrap; }
.kb-help-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.kb-help-row:last-child { border-bottom: none; }
.kb-kbd { flex: 0 0 120px; font-family: var(--font-mono, monospace); font-size: 0.78rem; color: #9ec5ff; background: rgba(74, 155, 255, 0.12); border: 1px solid rgba(74, 155, 255, 0.25); border-radius: 6px; padding: 3px 8px; text-align: center; }
.kb-desc { font-size: 0.84rem; color: rgba(255, 255, 255, 0.78); }
body.theme-light .kb-help-box { background: #fff; color: #1f2937; border-color: #e5e7eb; }
body.theme-light .kb-help-hint { color: rgba(0, 0, 0, 0.4); }
body.theme-light .kb-help-row { border-color: rgba(0, 0, 0, 0.07); }
body.theme-light .kb-desc { color: rgba(0, 0, 0, 0.7); }
body.theme-light .kb-kbd { color: #2f74e0; background: rgba(74, 155, 255, 0.1); border-color: rgba(74, 155, 255, 0.3); }
.search-suggest .sg-item:hover,
.search-suggest .sg-item.active { background: rgba(59,130,246,0.25); }
.search-suggest .sg-item i { margin-right: 10px; width: 14px; text-align: center; opacity: 0.6; font-size: 0.8rem; }
.search-suggest .sg-item.sg-local { display: flex; align-items: center; }
.search-suggest .sg-item.sg-local .sg-local-name { font-weight: 600; flex-shrink: 0; }
.search-suggest .sg-item.sg-local .sg-local-desc { margin-left: 10px; font-size: 0.8rem; opacity: 0.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest .sg-item.sg-baidu i { color: #4a9bff; opacity: 1; }
.search-suggest .sg-item.sg-local::after {
content: '';
}
.search-suggest .sg-item.sg-baidu:first-child { border-top: 1px dashed rgba(255,255,255,0.12); }
@media (max-width: 768px) {
#main-view {
padding: 0 16px;
justify-content: center;
gap: 24px;
}
#clock-area { margin-top: 8vh; }
#time-text { font-size: var(--time-size); }
.search-container { width: 90vw; max-width: 90vw; }
#sidebar { width: 56px; }
#grid { gap: 18px; max-height: calc(100vh - 230px); }
.icon-item { width: var(--item-size); }
#weather-widget { font-size: 0.85rem; }
#side-panel { width: 92vw; right: -92vw; }
}
body.theme-light {
--bg-dark: #f0f2f5;
--bg-darker: #e5e7eb;
--bg-glass: rgba(0,0,0,0.04);
--bg-glass-border: rgba(0,0,0,0.08);
--bg-light: rgba(0,0,0,0.04);
color: #1f2937;
background: var(--bg-dark);
}
body.theme-light #bg-mask { background: rgba(255,255,255,0.45); }
body.theme-light .btn-m { background: #e5e7eb; color: #111; }
body.theme-light #side-panel,
body.theme-light .panel-content,
body.theme-light #engine-mgr-list,
body.theme-light .resource-list,
body.theme-light #cat-manager-box,
body.theme-light #form-box,
body.theme-light #context-menu,
body.theme-light #donate-modal,
body.theme-light .quote-widget,
body.theme-light .eng-item,
body.theme-light .resource-item { background: #ffffff !important; color: #1f2937 !important; }
body.theme-light [style*="#222"] { background: #ffffff !important; }
body.theme-light input,
body.theme-light textarea,
body.theme-light select { background: #ffffff; color: #111; border-color: #ccc; }
body.theme-light #time-text,
body.theme-light #date-text,
body.theme-light .icon-name,
body.theme-light #weather-widget { text-shadow: none; color: #1f2937; }
body.theme-light .search-suggest { background: rgba(255,255,255,0.97); border-color: rgba(0,0,0,0.1); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
body.theme-light .search-suggest .sg-item { color: #1f2937; border-bottom-color: rgba(0,0,0,0.06); }
body.theme-light .search-suggest .sg-item:hover,
body.theme-light .search-suggest .sg-item.active { background: rgba(0,0,0,0.06); }
body.theme-light #donate-modal p,
body.theme-light #donate-modal span { color: #555 !important; }
body.theme-light .spinner { border-color: rgba(0,0,0,0.12); }
select { color-scheme: dark; }
select option { background-color: #202024; color: #e8eaf0; }
body.theme-light select { color-scheme: light; }
body.theme-light select option { background-color: #ffffff; color: #111111; }
#grid {
max-height: none;
overflow: visible;
padding: 6px;
}
main {
padding-bottom: 48px;
scrollbar-width: none;
}
#grid::-webkit-scrollbar { width: 8px; }
#grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }
@supports (padding: env(safe-area-inset-top)) {
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
#side-panel {
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box;
}
#exit-edit-btn { bottom: calc(30px + env(safe-area-inset-bottom)); }
#quote-container { bottom: calc(30px + env(safe-area-inset-bottom)); }
}
.side-util-btn {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-bottom: 10px;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.5);
font-size: 1.2rem;
transition: all var(--transition-normal);
}
.side-util-btn:hover {
background: var(--color-primary);
color: white;
transform: scale(1.1);
}
.icon-item.selected .icon-box {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
}
.icon-item.selected::after {
content: '\2713';
position: absolute;
top: 0;
right: 0;
background: var(--color-primary);
color: #fff;
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
}
#batch-toolbar {
position: fixed;
bottom: calc(30px + env(safe-area-inset-bottom));
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(20px);
padding: 10px 16px;
border-radius: 30px;
z-index: 600;
display: none;
align-items: center;
gap: 10px;
color: #fff;
box-shadow: var(--shadow-xl);
}
#batch-toolbar button, #batch-toolbar select {
background: rgba(255,255,255,0.12);
color: #fff;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 16px;
padding: 6px 12px;
cursor: pointer;
font-size: 0.85rem;
}
#batch-toolbar select option { background-color: #202024; color: #e8eaf0; }
.w-menu {
position: fixed;
min-width: 218px;
max-width: 272px;
background: rgba(247, 247, 249, 0.94);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 16px;
padding: 6px;
z-index: 10050;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.06);
color: #1c1c1e;
font-size: 0.86rem;
animation: wMenuIn 0.12s ease;
}
@keyframes wMenuIn {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
.w-menu-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 10px 10px;
}
.w-menu-title {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
font-size: 0.82rem;
font-weight: 600;
color: #1c1c1e;
}
.w-menu-title i { color: #0a84ff; font-size: 0.82rem; }
.w-menu-badge {
font-size: 0.66rem;
font-weight: 600;
color: #8e8e93;
background: rgba(0, 0, 0, 0.05);
border-radius: 999px;
padding: 2px 8px;
white-space: nowrap;
}
.w-menu-group {
font-size: 0.66rem;
font-weight: 500;
color: #9a9aa0;
padding: 8px 10px 4px;
letter-spacing: 0.02em;
}
.w-menu-item {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 10px;
cursor: pointer;
white-space: nowrap;
color: #1c1c1e;
transition: background 0.12s;
}
.w-menu-item > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
.w-menu-item:hover { background: rgba(0, 0, 0, 0.06); }
.w-menu-item > i:first-child { width: 17px; text-align: center; font-size: 0.84rem; color: #4a4a4f; }
.w-menu-item.danger { color: #ff3b30; }
.w-menu-item.danger > i:first-child { color: #ff3b30; }
.w-menu-arrow { margin-left: auto; font-size: 0.68rem; color: #c2c2c8; }
.w-menu-check { margin-left: auto; font-size: 0.78rem; color: #0a84ff; }
.w-menu-sep { height: 1px; background: rgba(0, 0, 0, 0.08); margin: 6px 8px; }
.w-menu-empty { padding: 8px 10px; color: #9a9aa0; font-size: 0.8rem; }
.w-menu-item.checked,
.w-menu-item.checked:hover {
background: #0a84ff;
color: #fff;
}
.w-menu-item.checked > i:first-child,
.w-menu-item.checked .w-menu-check { color: #fff; }
.w-menu-sub {
display: none;
position: absolute;
left: 100%;
top: -6px;
margin-left: 6px;
z-index: 2;
min-width: 156px;
background: rgba(250, 250, 252, 0.97);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 14px;
padding: 6px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.06);
}
.w-menu-item.has-sub:hover > .w-menu-sub { display: block; }
.w-menu.sub-left .w-menu-sub { left: auto; right: 100%; margin-left: 0; margin-right: 6px; }
.w-menu-item.has-sub::after {
content: '';
position: absolute;
top: 0;
right: -10px;
width: 10px;
height: 100%;
display: none;
}
.w-menu-item.has-sub:hover::after { display: block; }
.w-menu.sub-left .w-menu-item.has-sub::after {
right: auto;
left: -10px;
}
.widget-tile .widget-surface { cursor: grab; }
.widget-tile .widget-surface input,
.widget-tile .widget-surface textarea { cursor: text; }
.widget-tile .widget-surface button { cursor: pointer; }
.widget-tile.widget-ghost { opacity: 0.35; }
.widget-tile.widget-chosen .widget-surface {
transform: scale(1.03);
box-shadow: 0 22px 48px rgba(0, 0, 0, 0.3);
cursor: grabbing;
}
.widget-strip.is-sorting .widget-tile .widget-surface { transition: none; }
.w-edit-mask {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 10060;
}
.w-edit-box {
width: 340px;
max-width: 90vw;
background: #1e1e22;
color: #fff;
border-radius: 16px;
padding: 18px;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.w-edit-head {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 600;
margin-bottom: 12px;
}
.w-edit-close {
border: none;
background: rgba(255, 255, 255, 0.1);
color: #fff;
width: 26px;
height: 26px;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
}
.w-edit-body label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 0.85rem;
opacity: 0.9;
}
.w-edit-input {
width: 100%;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 10px;
color: #fff;
padding: 9px 10px;
font-size: 0.9rem;
outline: none;
font-family: inherit;
}
.w-edit-hint { opacity: 0.6; font-size: 0.85rem; }
.w-edit-foot { display: flex; gap: 10px; margin-top: 16px; }
.w-edit-foot button {
flex: 1;
padding: 9px 0;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 0.88rem;
}
.w-edit-cancel { background: rgba(255, 255, 255, 0.12); color: #fff; }
.w-edit-save { background: var(--color-primary, #4f7cff); color: #fff; }
#widget-batch-bar {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%) translateY(20px);
display: none;
align-items: center;
gap: 8px;
background: rgba(28, 28, 30, 0.96);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
padding: 8px 12px;
z-index: 10040;
box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
color: #fff;
font-size: 0.85rem;
opacity: 0;
transition: opacity 0.15s, transform 0.15s;
}
#widget-batch-bar.open {
display: flex;
opacity: 1;
transform: translateX(-50%) translateY(0);
}
#widget-batch-bar button {
border: none;
border-radius: 9px;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.12);
color: #fff;
cursor: pointer;
font-size: 0.82rem;
}
#widget-batch-bar button:hover { background: rgba(255, 255, 255, 0.2); }
#widget-batch-bar select {
border: none;
border-radius: 9px;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 0.82rem;
}
#widget-batch-count { opacity: 0.7; margin-left: 4px; }
@media (max-width: 560px) {
.widget-tile {
grid-column: 1 / -1 !important;
grid-row: span 2 !important;
}
}
.widget-tile.sortable-ghost { opacity: 0.3; }
.widget-tile.sortable-chosen { z-index: 3; }
.widget-tile.sortable-chosen .widget-surface {
transform: scale(1.02);
box-shadow: 0 22px 48px rgba(0, 0, 0, 0.3);
}
.widget-surface {
container-type: size;
container-name: widget;
}
.widget-body {
padding: clamp(10px, 5.2cqh, 18px);
}
.w-clock-time {
font-size: clamp(1.05rem, 15.5cqw, 2.6rem);
}
.w-clock-date {
font-size: clamp(0.62rem, 5.6cqh, 0.9rem);
margin-top: clamp(2px, 1.6cqh, 8px);
}
.w-clock-lunar {
font-size: clamp(0.56rem, 4.6cqh, 0.78rem);
}
.w-cal {
gap: clamp(3px, 2cqh, 12px);
min-height: 0;
overflow: hidden;
}
.cal-head {
flex: 0 0 auto;
gap: clamp(6px, 3.4cqh, 14px);
min-height: 0;
}
.cal-big { font-size: clamp(1.35rem, 18.5cqh, 2.9rem); line-height: 0.95; }
.cal-info {
flex: 1;
min-width: 0;
gap: clamp(0px, 0.5cqh, 3px);
overflow: hidden;
}
.cal-ym { font-size: clamp(0.7rem, min(7.2cqh, 11cqw), 1rem); }
.cal-lunar { font-size: clamp(0.58rem, min(5.4cqh, 8.6cqw), 0.8rem); }
.cal-doy { font-size: clamp(0.52rem, min(4.6cqh, 7.4cqw), 0.72rem); }
.cal-ym, .cal-lunar, .cal-doy {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cal-mini {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
margin-top: 0;
}
.cal-mini-head {
flex: 0 0 auto;
font-size: clamp(0.5rem, 4.4cqh, 0.66rem);
margin-bottom: clamp(1px, 0.6cqh, 3px);
}
.cal-grid {
flex: 1 1 auto;
min-height: 0;
grid-auto-rows: minmax(0, 1fr);
gap: clamp(1px, 0.6cqh, 3px);
}
.cal-cell {
display: flex;
align-items: center;
justify-content: center;
min-height: 0;
padding: 0;
line-height: 1;
font-size: clamp(0.5rem, min(4.8cqh, 9cqw), 0.8rem);
border-radius: clamp(3px, 1.4cqh, 7px);
}
.w-w-temp { font-size: clamp(1.6rem, 24cqh, 3.4rem); }
.w-w-emoji { font-size: clamp(1.2rem, 13cqh, 2.2rem); }
.w-w-city { font-size: clamp(0.68rem, 6.2cqh, 0.9rem); }
.w-w-cond { font-size: clamp(0.66rem, 6.4cqh, 0.95rem); }
.w-w-meta { font-size: clamp(0.56rem, 5.2cqh, 0.75rem); }
.w-forex {
gap: clamp(4px, 2.6cqh, 10px);
padding: clamp(10px, 4cqh, 16px);
border-radius: 14px;
background: linear-gradient(135deg, #fbfbfd, #f0f1f6);
}
.fx-head {
display: flex;
align-items: center;
gap: clamp(4px, 2.4cqh, 8px);
font-size: clamp(0.72rem, 6.6cqh, 1rem);
font-weight: 700;
}
.fx-head .fx-flag { font-size: clamp(1.1rem, 9cqh, 1.6rem); }
.w-forex .w-forex-list {
display: flex;
flex-direction: column;
gap: clamp(3px, 2cqh, 7px);
margin-top: auto;
}
.w-forex .fx-row {
display: flex;
align-items: center;
gap: clamp(6px, 2.6cqh, 10px);
padding: clamp(4px, 2.2cqh, 8px) clamp(8px, 2.4cqw, 12px);
background: #fff;
border-radius: clamp(8px, 3cqh, 12px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.w-forex .fx-flag {
width: clamp(20px, 7cqh, 28px);
height: clamp(20px, 7cqh, 28px);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f4f5f9;
font-size: clamp(0.78rem, 5cqh, 1.05rem);
}
.w-forex .fx-val {
margin-left: auto;
display: flex;
align-items: baseline;
gap: 4px;
font-weight: 700;
font-variant-numeric: tabular-nums;
font-size: clamp(0.7rem, 5.6cqh, 0.95rem);
}
.w-forex .fx-val em {
font-style: normal;
font-weight: 600;
color: #8e8e93;
font-size: 0.82em;
}
.w-stk {
gap: clamp(4px, 2cqh, 9px);
padding: clamp(10px, 4cqh, 15px);
border-radius: 14px;
background: linear-gradient(135deg, #fff, #f4f5f9);
color: #1c1c1e;
}
.w-stk-head {
display: flex;
align-items: center;
justify-content: space-between;
font-size: clamp(0.72rem, 6.4cqh, 0.98rem);
font-weight: 700;
}
.w-stk-head i { color: #ff6a3d; margin-right: 5px; }
.w-stk-time {
font-size: clamp(0.6rem, 5cqh, 0.82rem);
font-weight: 600;
color: #8e8e93;
font-variant-numeric: tabular-nums;
}
.w-stk-list {
display: flex;
flex-direction: column;
gap: clamp(3px, 1.8cqh, 7px);
margin-top: auto;
}
.w-stk-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(6px, 2.4cqw, 12px);
padding: clamp(5px, 2.2cqh, 8px) clamp(8px, 2.4cqw, 12px);
background: #fff;
border-radius: clamp(8px, 3cqh, 11px);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.w-stk-name {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.2;
}
.w-stk-name b {
font-size: clamp(0.66rem, 5.4cqh, 0.9rem);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.w-stk-name span {
font-size: clamp(0.5rem, 4.2cqh, 0.66rem);
color: #9a9aa2;
}
.w-stk-num {
display: flex;
flex-direction: column;
align-items: flex-end;
line-height: 1.2;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.w-stk-num b { font-size: clamp(0.7rem, 5.4cqh, 0.92rem); font-weight: 700; }
.w-stk-num em { font-style: normal; font-weight: 700; font-size: clamp(0.6rem, 4.8cqh, 0.8rem); }
.w-stk-row.up .w-stk-num b,
.w-stk-row.up .w-stk-num em { color: #e63736; }
.w-stk-row.down .w-stk-num b,
.w-stk-row.down .w-stk-num em { color: #11a36b; }
.wd-mask.wd-stock .wd-box { width: min(980px, 95vw); background: #fbfbfd; color: #1c1c1e; }
.wd-mask.wd-stock .wd-title { color: #1c1c1e; }
.wd-mask.wd-stock .wd-close { background: rgba(0, 0, 0, 0.06); color: #333; }
.wd-mask.wd-stock .wd-close:hover { background: rgba(0, 0, 0, 0.12); }
.wd-stk {
display: flex;
gap: 14px;
height: 100%;
min-height: 420px;
}
.wd-stk-brand {
display: flex;
align-items: center;
gap: 8px;
padding: 2px 2px 4px;
font-size: 15px;
font-weight: 700;
color: #1c1c1e;
}
.wd-stk-brand i { color: #ff6a3d; }
.wd-stk-side {
width: 220px;
flex: 0 0 220px;
display: flex;
flex-direction: column;
gap: 10px;
padding: 4px 6px 4px 0;
}
.wd-stk-search {
display: flex;
gap: 6px;
}
.wd-stk-search input {
flex: 1;
min-width: 0;
padding: 8px 10px;
border: 1px solid #e3e3e8;
border-radius: 9px;
font-size: 13px;
outline: none;
background: #fff;
}
.wd-stk-search input:focus { border-color: #ff6a3d; }
.wd-stk-search button {
padding: 0 14px;
border: none;
border-radius: 9px;
background: #ff6a3d;
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: filter .15s;
}
.wd-stk-search button:hover { filter: brightness(1.06); }
.wd-stk-items {
display: flex;
flex-direction: column;
gap: 7px;
overflow-y: auto;
flex: 1;
}
.wd-stk-item {
position: relative;
padding: 9px 12px;
border-radius: 11px;
background: #f6f6fa;
cursor: pointer;
transition: background .15s, box-shadow .15s;
}
.wd-stk-item:hover { background: #efeff4; }
.wd-stk-item.active { background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); border: 1px solid #ffe2d6; }
.wd-stk-it-name {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 3px;
}
.wd-stk-it-name b {
font-size: 13.5px;
color: #1c1c1e;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wd-stk-it-name span {
font-size: 11px;
color: #9a9aa2;
}
.wd-stk-it-num {
display: flex;
align-items: baseline;
gap: 6px;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.wd-stk-it-num b { font-size: 14px; }
.wd-stk-it-num em {
font-style: normal;
font-weight: 600;
font-size: 12px;
}
.wd-stk-it-num.up { color: #e63736; }
.wd-stk-it-num.down { color: #11a36b; }
.wd-stk-del {
position: absolute;
top: 7px;
right: 9px;
font-style: normal;
font-size: 15px;
line-height: 1;
color: #c2c2c8;
cursor: pointer;
opacity: 0;
transition: opacity .15s, color .15s;
}
.wd-stk-item:hover .wd-stk-del { opacity: 1; }
.wd-stk-del:hover { color: #e63736; }
.wd-stk-main {
flex: 1;
min-width: 0;
background: #f6f6fa;
border-radius: 14px;
padding: clamp(16px, 3vw, 28px);
overflow-y: auto;
}
.wd-stk-empty {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
color: #b5b5bd;
text-align: center;
}
.wd-stk-empty i { font-size: 38px; }
.wd-stk-quote { display: flex; flex-direction: column; gap: 18px; }
.wd-stk-title {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.wd-stk-title h2 {
margin: 0 0 4px;
font-size: clamp(18px, 2.4vw, 26px);
color: #1c1c1e;
}
.wd-stk-title > div > span {
font-size: 12px;
color: #9a9aa2;
}
.wd-stk-big {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.wd-stk-big b {
font-size: clamp(22px, 3vw, 34px);
font-weight: 800;
}
.wd-stk-big em {
display: block;
font-style: normal;
font-weight: 700;
font-size: clamp(13px, 1.6vw, 17px);
margin-top: 2px;
}
.wd-stk-big.up { color: #e63736; }
.wd-stk-big.down { color: #11a36b; }
.wd-stk-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.wd-stk-grid > div {
background: #fff;
border-radius: 11px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.wd-stk-grid > div span {
font-size: 12px;
color: #9a9aa2;
}
.wd-stk-grid > div b {
font-size: 16px;
font-weight: 700;
color: #1c1c1e;
font-variant-numeric: tabular-nums;
}
.wd-stk-chart {
background: #fff;
border-radius: 11px;
padding: 14px 16px 10px;
}
.wd-stk-chart-head {
display: flex;
align-items: baseline;
justify-content: space-between;
font-size: 13px;
font-weight: 600;
color: #1c1c1e;
margin-bottom: 8px;
}
.wd-stk-chart-hi {
font-size: 12px;
color: #9a9aa2;
font-variant-numeric: tabular-nums;
}
.wd-stk-svg {
display: block;
width: 100%;
height: 150px;
}
.wd-stk-gl { stroke: #ececf1; stroke-width: 1; stroke-dasharray: 4 4; }
.wd-stk-yc { stroke: #c9c9d2; stroke-width: 1; stroke-dasharray: 5 4; }
.wd-stk-line { fill: none; stroke: #ff6a3d; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wd-stk-dot.up { fill: #e63736; }
.wd-stk-dot.down { fill: #11a36b; }
.wd-stk-chart-foot {
display: flex;
justify-content: space-between;
margin-top: 6px;
font-size: 12px;
color: #9a9aa2;
font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
.wd-stk { flex-direction: column; }
.wd-stk-side { width: auto; flex: none; }
.wd-stk-grid { grid-template-columns: repeat(2, 1fr); }
}
.w-notes .w-notes-input { font-size: clamp(0.64rem, 5.6cqh, 0.95rem); }
.w-rmb { gap: clamp(4px, 3cqh, 10px); }
.w-rmb .rmb-cur { font-size: clamp(0.9rem, 9cqh, 1.4rem); }
.w-rmb .w-input { font-size: clamp(0.66rem, 6cqh, 0.9rem); }
.w-rmb .rmb-out { font-size: clamp(0.66rem, 6cqh, 1rem); }
.panel-nav {
width: 150px;
padding: 16px 10px;
gap: 1px;
}
.p-nav-group {
font-size: 10.5px;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.32);
padding: 14px 10px 6px;
}
.p-nav-item {
padding: 9px 11px;
border-radius: 9px;
font-size: 0.8rem;
}
.p-nav-item.active {
background: var(--color-primary);
box-shadow: none;
}
.panel-content {
padding: 26px 24px 40px;
}
.panel-h {
font-size: 0.82rem;
font-weight: 600;
color: var(--color-primary);
margin: 22px 0 10px;
padding: 0;
border: none;
letter-spacing: 0.01em;
text-transform: none;
}
.panel-content > .panel-h:first-child { margin-top: 0; }
.panel-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
margin-bottom: 16px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.panel-card .field { display: flex; flex-direction: column; }
.panel-content .ctrl-row { margin-bottom: 14px; }
.panel-content .ctrl-label {
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 6px;
letter-spacing: 0.01em;
}
.panel-content .ctrl-input {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: rgba(255, 255, 255, 0.92);
min-height: 40px;
padding: 9px 12px;
font-size: 0.82rem;
box-shadow: none;
}
.panel-content .ctrl-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.panel-content .ctrl-input:focus {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(74, 155, 255, 0.6);
box-shadow: 0 0 0 3px rgba(74, 155, 255, 0.14);
}
.panel-content input[type="range"].ctrl-input,
.panel-content .ctrl-range {
width: 100%;
height: 20px;
min-height: 20px;
padding: 0;
background: transparent;
border: none;
accent-color: var(--color-primary);
box-shadow: none;
}
.panel-content .btn-m {
border-radius: 10px;
padding: 9px 14px;
font-size: 0.78rem;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.9);
}
.panel-content .btn-m:hover {
background: rgba(255, 255, 255, 0.14);
transform: none;
}
.panel-content .btn-primary { background: var(--color-primary); color: #fff; }
.panel-content .btn-primary:hover { background: var(--color-primary-dark); }
.eng-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.eng-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.eng-item img {
width: 24px;
height: 24px;
border-radius: 6px;
object-fit: contain;
background: rgba(255, 255, 255, 0.08);
}
.eng-name {
flex: 1;
min-width: 0;
font-size: 0.84rem;
color: rgba(255, 255, 255, 0.9);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.eng-ops { display: flex; align-items: center; gap: 2px; }
.eng-btn {
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 7px;
background: transparent;
color: rgba(255, 255, 255, 0.42);
cursor: pointer;
font-size: 0.72rem;
transition: background 0.15s, color 0.15s;
}
.eng-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.eng-btn.danger:hover { background: rgba(255, 69, 58, 0.16); color: #ff453a; }
.eng-btn:disabled { opacity: 0.25; cursor: default; background: transparent; }
.panel-content [style*="background:#222"],
.panel-content [style*="background: #222"] {
background: rgba(255, 255, 255, 0.045) !important;
border-color: rgba(255, 255, 255, 0.07) !important;
}
.panel-content .ctrl-row[style*="border-top"] {
border-top-color: rgba(255, 255, 255, 0.07) !important;
}
@media (max-width: 768px) {
.panel-content { padding: 20px 16px 32px; }
.panel-nav { width: 132px; padding: 12px 8px; }
.p-nav-item { font-size: 0.76rem; padding: 8px 10px; }
}
body.theme-light .panel-h { color: #0a84ff; }
body.theme-light .panel-card,
body.theme-light .eng-item {
background: rgba(0, 0, 0, 0.035);
border-color: rgba(0, 0, 0, 0.06);
}
body.theme-light .eng-name { color: #1f2937; }
body.theme-light .eng-btn { color: rgba(0, 0, 0, 0.45); }
body.theme-light .eng-btn:hover { background: rgba(0, 0, 0, 0.06); color: #111; }
body.theme-light .panel-content .ctrl-input {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
color: #111;
}
body.theme-light .panel-content .ctrl-label { color: rgba(0, 0, 0, 0.5); }
body.theme-light .panel-content [style*="background:#222"],
body.theme-light .panel-content [style*="background: #222"] {
background: rgba(0, 0, 0, 0.04) !important;
}
main,
#grid {
scrollbar-width: none;
-ms-overflow-style: none;
}
main::-webkit-scrollbar,
#grid::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
#sidebar {
padding: 18px 0 14px;
gap: 6px;
background: rgba(14, 16, 22, 0.55);
border-right: 1px solid rgba(255, 255, 255, 0.07);
}
#cat-list {
flex: 0 1 auto;
min-height: 0;
max-height: 100%;
gap: 8px;
padding: 2px 0;
scrollbar-width: none;
}
#cat-list::-webkit-scrollbar { display: none; }
.cat-item {
width: 46px;
height: 46px;
margin: 0;
border-radius: 14px;
font-size: 1.28rem;
color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.085);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
transition: background var(--transition-fast), color var(--transition-fast),
transform var(--transition-fast), box-shadow var(--transition-fast);
}
.cat-item:hover {
background: rgba(255, 255, 255, 0.14);
color: #fff;
transform: translateY(-1px);
}
.cat-item.active {
background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
color: #fff;
border-color: transparent;
box-shadow: var(--shadow-primary);
}
.cat-item .cat-name {
left: 56px;
padding: 6px 10px;
border-radius: 8px;
background: rgba(18, 20, 26, 0.92);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
font-size: 0.74rem;
}
.add-cat-btn,
.side-util-btn {
width: 46px;
height: 46px;
margin: 0;
border-radius: 14px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.55);
font-size: 1.05rem;
}
.add-cat-btn:hover,
.side-util-btn:hover {
background: rgba(255, 255, 255, 0.14);
color: #fff;
}
#sidebar .add-cat-btn { margin-top: 6px; }
#sidebar .side-util-btn {
margin-top: auto;
margin-bottom: 2px;
position: relative;
}
#sidebar .side-util-btn::before {
content: '';
position: absolute;
top: -12px;
left: 50%;
width: 26px;
height: 1px;
margin-left: -13px;
background: rgba(255, 255, 255, 0.12);
}
body.theme-light #sidebar {
background: rgba(255, 255, 255, 0.55);
border-right-color: rgba(0, 0, 0, 0.06);
}
body.theme-light .cat-item {
color: rgba(0, 0, 0, 0.5);
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.04);
}
body.theme-light .cat-item.active {
color: #fff;
background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
}
.res-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 14px;
}
.res-head .panel-h { margin: 0; }
.res-head-actions { display: flex; gap: 6px; }
.res-head-actions .btn-m {
width: 34px;
height: 34px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.res-head-actions .btn-m i { font-size: 0.8rem; }
.res-search {
display: flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 12px;
margin-bottom: 12px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.res-search i { color: rgba(255, 255, 255, 0.32); font-size: 0.82rem; }
.res-search input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
color: rgba(255, 255, 255, 0.9);
font-size: 0.82rem;
font-family: inherit;
}
.res-search input::placeholder { color: rgba(255, 255, 255, 0.3); }
#p-resource #resource-search {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
color: rgba(255, 255, 255, 0.9);
height: auto;
}
body.theme-light #p-resource #resource-search { color: #111; }
.res-search:focus-within {
border-color: rgba(74, 155, 255, 0.6);
background: rgba(255, 255, 255, 0.09);
}
.res-filter { display: none; }
.res-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding-bottom: 2px;
margin-bottom: 12px;
}
.res-tabs::-webkit-scrollbar { display: none; }
.res-chip {
flex: 0 0 auto;
padding: 6px 12px;
border-radius: 999px;
font-size: 0.76rem;
color: rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.06);
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: background var(--transition-fast), color var(--transition-fast);
}
.res-chip:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.res-chip.active {
background: rgba(74, 155, 255, 0.18);
color: #7db8ff;
border-color: rgba(74, 155, 255, 0.35);
}
.res-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
gap: 10px;
padding: 2px;
}
.res-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(255, 255, 255, 0.07);
transition: background var(--transition-fast), border-color var(--transition-fast),
transform var(--transition-fast);
}
.res-card:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.12);
transform: translateY(-1px);
}
.res-card-top {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.res-icon {
position: relative;
flex: 0 0 auto;
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: #4b5563;
}
.res-icon img {
width: 22px;
height: 22px;
object-fit: contain;
border-radius: 4px;
}
.res-icon i { font-size: 1rem; }
.res-badge {
position: absolute;
right: -4px;
bottom: -4px;
width: 15px;
height: 15px;
border-radius: 50%;
background: #2ecc71;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 7px;
border: 2px solid rgba(20, 22, 28, 0.9);
}
.res-title {
flex: 1;
min-width: 0;
font-size: 0.8rem;
font-weight: 600;
line-height: 1.35;
color: rgba(255, 255, 255, 0.92);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.res-links {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.72rem;
}
.res-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: #7db8ff;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
}
.res-link:hover { color: #a8d0ff; text-decoration: underline; }
.res-link.muted { color: rgba(255, 255, 255, 0.38); }
.res-link.danger { color: #ff6b63; }
.res-link.danger:hover { color: #ff9a94; }
.res-desc {
font-size: 0.72rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.42);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.2em;
}
.res-empty {
grid-column: 1 / -1;
text-align: center;
padding: 40px 16px;
color: rgba(255, 255, 255, 0.4);
}
.res-empty i {
display: block;
font-size: 2.4rem;
margin-bottom: 12px;
opacity: 0.35;
}
.res-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 2px;
}
.res-tag {
font-size: 0.64rem;
padding: 1px 7px;
border-radius: 999px;
background: rgba(74, 155, 255, 0.16);
color: #9ec5ff;
white-space: nowrap;
}
.res-tag-hint {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.4);
margin-right: 4px;
align-self: center;
}
#grid.drag-over {
outline: 2px dashed var(--color-primary);
outline-offset: 6px;
border-radius: 14px;
background: rgba(74, 155, 255, 0.06);
}
body.theme-light .res-tag { background: rgba(74, 155, 255, 0.14); color: #2f74e0; }
body.theme-light .res-tag-hint { color: rgba(0, 0, 0, 0.4); }
body.theme-light .res-search {
background: rgba(0, 0, 0, 0.04);
border-color: rgba(0, 0, 0, 0.08);
}
body.theme-light .res-search input { color: #111; }
body.theme-light .res-chip { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.55); }
body.theme-light .res-chip.active { background: rgba(74, 155, 255, 0.14); color: #2f74e0; }
body.theme-light .res-card { background: rgba(0, 0, 0, 0.035); border-color: rgba(0, 0, 0, 0.06); }
body.theme-light .res-title { color: #1f2937; }
body.theme-light .res-desc { color: rgba(0, 0, 0, 0.45); }
body.theme-light .res-link.muted { color: rgba(0, 0, 0, 0.35); }
.theme-green .widget-surface {
background: linear-gradient(160deg, #2b5f4c 0%, #0f211b 100%);
color: #e9f7f0;
}
.theme-red .widget-surface {
background: linear-gradient(160deg, #8f1d16 0%, #260907 100%);
color: #fff;
}
.w-muyu {
cursor: pointer;
gap: clamp(2px, 1.4cqh, 6px);
}
.w-my-head {
display: flex;
flex-direction: column;
gap: 1px;
flex: 0 0 auto;
}
.w-my-head > span:first-child {
font-size: clamp(0.66rem, 6.2cqh, 0.9rem);
font-weight: 600;
color: #1c1c1e;
}
.w-my-head b { color: #c98b52; font-size: 1.15em; }
.w-my-sub {
font-size: clamp(0.5rem, 4.2cqh, 0.68rem);
color: #a08b74;
}
.w-my-fish {
flex: 1;
min-height: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.w-my-fish svg {
height: 100%;
width: auto;
max-width: 100%;
transition: transform 0.12s ease;
}
.w-my-fish.hit { animation: myu-hit 0.18s ease; }
.w-my-tip {
position: absolute;
right: 0;
bottom: 0;
font-size: 0.55rem;
color: #b7a18a;
opacity: 0.8;
}
@keyframes myu-hit {
0% { transform: scale(1); }
50% { transform: scale(0.93); }
100% { transform: scale(1); }
}
.w-ow {
position: relative;
gap: 0;
}
.w-ow-main {
flex: 1;
display: flex;
flex-direction: column;
gap: clamp(2px, 1.6cqh, 8px);
justify-content: center;
min-height: 0;
}
.w-ow-card-label {
font-size: clamp(0.56rem, 4.8cqh, 0.74rem);
opacity: 0.72;
flex: 0 0 auto;
}
.w-ow-card-time { line-height: 1; }
.w-ow-card-time b {
font-size: clamp(1.5rem, 18cqh, 2.6rem);
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.w-ow-card-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(4px, 2cqh, 8px);
margin-top: clamp(2px, 1.4cqh, 6px);
}
.w-ow-card-stats > div {
background: rgba(255, 255, 255, 0.1);
border-radius: clamp(6px, 2.6cqh, 10px);
padding: clamp(3px, 1.8cqh, 7px) 8px;
}
.w-ow-card-stats span {
display: block;
font-size: clamp(0.48rem, 4.2cqh, 0.64rem);
opacity: 0.66;
}
.w-ow-card-stats b {
display: block;
font-size: clamp(0.72rem, 6.4cqh, 0.98rem);
font-weight: 700;
line-height: 1.15;
}
.w-ow-cat {
position: absolute;
top: clamp(6px, 3cqh, 12px);
right: clamp(6px, 3cqw, 12px);
font-size: clamp(1.1rem, 9cqh, 1.7rem);
pointer-events: none;
}
.w-we {
align-items: center;
justify-content: space-between;
text-align: center;
gap: clamp(3px, 2.4cqh, 9px);
}
.w-we-title {
font-size: clamp(0.7rem, 6.6cqh, 0.92rem);
font-weight: 700;
color: #1c1c1e;
}
.w-we-result {
font-size: clamp(0.98rem, 10.5cqh, 1.45rem);
font-weight: 800;
color: #f08a24;
line-height: 1.15;
word-break: break-all;
}
.w-we-result.pop { animation: we-pop 0.3s ease; }
.w-we-btn {
border: none;
width: 100%;
padding: clamp(4px, 3.2cqh, 9px) 0;
border-radius: 999px;
background: linear-gradient(135deg, #ffb03a, #ff8a00);
color: #fff;
font-size: clamp(0.64rem, 5.6cqh, 0.8rem);
font-weight: 600;
cursor: pointer;
font-family: inherit;
}
.w-tomato { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; }
.w-tm-ring { width: 80px; height: 80px; }
.w-tm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.w-tm-prog { transition: stroke-dashoffset 0.5s linear; }
.w-tm-time { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.05em; }
.w-tm-label { font-size: 0.7rem; opacity: 0.75; }
.w-tm-rounds { font-size: 0.65rem; opacity: 0.5; }
.w-tm-btns { display: flex; gap: 8px; margin-top: 2px; }
.w-tm-btns button { border: none; background: rgba(255,255,255,0.12); color: inherit; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 0.85rem; transition: background 0.2s; }
.w-tm-btns button:hover { background: rgba(255,255,255,0.22); }
.w-anniv { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; }
.w-an-name { font-size: 0.8rem; opacity: 0.8; margin-bottom: 2px; }
.w-an-num { font-size: 2.2rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, #ff6b6b, #ffd166); -webkit-background-clip: text; background-clip: text; color: transparent; }
.w-an-suffix { font-size: 0.8rem; font-weight: 500; opacity: 0.7; }
.w-an-sub { font-size: 0.65rem; opacity: 0.5; margin-top: 4px; }
.w-dang { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 8px; }
.w-dang-word { font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; }
.w-dang-ph { font-size: 0.65rem; opacity: 0.6; font-family: 'Courier New', monospace; }
.w-dang-def { font-size: 0.68rem; opacity: 0.85; margin-top: 2px; }
.w-dang-ex { font-size: 0.65rem; opacity: 0.6; margin-top: 4px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.w-dang-btns { display: flex; gap: 4px; margin-top: 4px; }
.w-dang-btns button { border: none; background: rgba(255,255,255,0.1); color: inherit; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 0.65rem; }
.w-dang-btns button:hover { background: rgba(255,255,255,0.2); }
.w-nasa { display: flex; flex-direction: column; height: 100%; }
.w-nasa-img { flex: 1; border-radius: 8px 8px 0 0; background-size: cover; background-position: center; background-color: rgba(255,255,255,0.05); min-height: 60px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); }
.w-nasa-title { font-size: 0.65rem; padding: 4px 6px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85; }
.wd-tm { padding: 16px; color: inherit; }
.wd-tm-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; background: rgba(255,255,255,0.05); border-radius: 10px; margin-bottom: 14px; }
.wd-tm-settings { display: flex; flex-direction: column; gap: 10px; }
.wd-tm-row { display: flex; align-items: center; gap: 10px; }
.wd-tm-row > span:first-child { width: 90px; font-size: 0.85rem; color: #d0d0d0; }
.wd-tm-row em { font-style: normal; font-size: 0.75rem; color: #888; }
.wd-tm-ctrl { display: flex; align-items: center; gap: 4px; flex: 1; }
.wd-tm-ctrl input { width: 50px; text-align: center; padding: 4px 6px; border: 1px solid rgba(255,255,255,0.15); border-radius: 5px; font-size: 0.85rem; background: #252535; color: #e0e0e0; }
.wd-tm-ctrl button, .wd-tm-switch { width: 26px; height: 26px; border: 1px solid rgba(255,255,255,0.15); background: #252535; color: #ccc; border-radius: 5px; cursor: pointer; font-size: 0.8rem; }
.wd-tm-switch { width: 44px; height: 26px; background: #3a3a4a; color: #999; border: none; border-radius: 13px; position: relative; font-size: 0.65rem; }
.wd-tm-switch.on { background: #4facfe; color: #fff; }
.wd-tm-hint { font-size: 0.75rem; color: #777; margin-top: 12px; line-height: 1.5; }
.wd-an { padding: 16px; color: inherit; }
.wd-an-head { margin-bottom: 12px; }
.wd-an-add { padding: 8px 14px; border: none; background: linear-gradient(135deg, #4facfe, #00f2fe); color: #fff; border-radius: 8px; cursor: pointer; font-size: 0.85rem; font-weight: 500; box-shadow: 0 2px 8px rgba(79,172,254,0.25); }
.wd-an-list { display: flex; flex-direction: column; gap: 8px; }
.wd-an-item { display: flex; align-items: center; gap: 10px; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px; }
.wd-an-info { flex: 1; }
.wd-an-name { font-weight: 600; font-size: 0.9rem; color: #e0e0e0; }
.wd-an-meta { display: flex; gap: 8px; margin-top: 2px; font-size: 0.75rem; color: #999; align-items: center; }
.wd-an-yearly { padding: 1px 6px; background: rgba(79,172,254,0.2); color: #60a5fa; border-radius: 10px; font-size: 0.65rem; }
.wd-an-days { margin-left: auto; color: #fbbf24; font-weight: 600; }
.wd-an-del { border: none; background: transparent; cursor: pointer; font-size: 0.9rem; color: #aaa; opacity: 0.5; padding: 4px; }
.wd-an-del:hover { opacity: 1; color: #fff; }
.wd-an-empty { font-size: 0.85rem; color: #777; padding: 20px; text-align: center; }
.wd-da { padding: 20px; color: inherit; text-align: center; }
.wd-da-main { margin-bottom: 16px; }
.wd-da-word { font-size: 2.4rem; font-weight: 800; letter-spacing: 0.03em; color: #60a5fa; }
.wd-da-ph { font-size: 1rem; color: #9bb3c9; opacity: 0.75; font-family: 'Courier New', monospace; margin-top: 4px; }
.wd-da-def { font-size: 1rem; margin-top: 12px; font-weight: 500; color: #ccc; }
.wd-da-ex-en { font-size: 0.95rem; margin-top: 14px; opacity: 0.85; line-height: 1.5; padding: 10px; background: rgba(255,255,255,0.05); border-radius: 8px; font-style: italic; color: #b0b0b0; }
.wd-da-ex-cn { font-size: 0.85rem; color: #888; margin-top: 6px; }
.wd-da-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wd-da-btns button { padding: 8px 16px; border: 1px solid rgba(255,255,255,0.15); background: #252535; color: #ccc; border-radius: 8px; cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
.wd-da-btns button:hover { border-color: #60a5fa; color: #60a5fa; }
.wd-da-hint { font-size: 0.75rem; color: #777; margin-top: 14px; }
.wd-nasa { padding: 16px; color: inherit; max-width: 600px; margin: 0 auto; }
.wd-nasa-loading { text-align: center; padding: 40px; font-size: 0.9rem; opacity: 0.6; }
.wd-nasa-img-wrap { margin-bottom: 12px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,0.05); }
.wd-nasa-img-wrap img { width: 100%; display: block; }
.wd-nasa-img-wrap iframe { width: 100%; height: 340px; border: none; }
.wd-nasa-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; color: #fff; }
.wd-nasa-date { font-size: 0.8rem; opacity: 0.5; margin-bottom: 10px; }
.wd-nasa-expl { font-size: 0.9rem; line-height: 1.7; opacity: 0.9; }
.wd-nasa-copy { font-size: 0.75rem; opacity: 0.5; margin-top: 10px; font-style: italic; }
.wd-nasa-btns { display: flex; gap: 10px; margin-top: 16px; }
.wd-nasa-btns button, .wd-nasa-hd a { padding: 8px 16px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.1); color: #fff; border-radius: 8px; cursor: pointer; font-size: 0.85rem; text-decoration: none; display: inline-block; transition: all 0.2s; }
.wd-nasa-btns button:hover, .wd-nasa-hd a:hover { background: rgba(255,255,255,0.2); }
@keyframes we-pop {
0% { transform: scale(0.72); opacity: 0.2; }
100% { transform: scale(1); opacity: 1; }
}
.cg-modal {
padding: 0;
border-radius: 14px;
overflow: hidden;
animation: cg-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cg-in {
from { transform: scale(0.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.cg-titlebar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cg-title {
font-size: 1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.cg-close {
border: none;
background: transparent;
cursor: pointer;
padding: 6px;
opacity: 0.5;
border-radius: 6px;
transition: all 0.2s;
}
.cg-close:hover { opacity: 1; background: rgba(0,0,0,0.06); }
.cg-preview {
height: 140px;
margin: 16px 18px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
border: 1px solid rgba(0,0,0,0.06);
transition: background 0.12s linear;
}
.cg-row {
padding: 10px 18px;
border-top: 1px solid rgba(0,0,0,0.04);
}
.cg-row > label {
font-size: 0.8rem;
font-weight: 500;
display: block;
margin-bottom: 8px;
opacity: 0.8;
}
.cg-btngroup {
display: flex;
gap: 6px;
}
.cg-typebtn {
flex: 1;
padding: 8px 0;
border: 1px solid rgba(0,0,0,0.12);
background: #fff;
border-radius: 8px;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.2s;
}
.cg-typebtn.active {
border-color: #4facfe;
background: #e7f4ff;
color: #0066cc;
font-weight: 600;
}
.cg-anglectrl {
display: flex;
flex-direction: column;
gap: 8px;
}
.cg-anglectrl input[type="range"] {
width: 100%;
height: 6px;
-webkit-appearance: none;
background: linear-gradient(90deg, #4facfe, #00f2fe);
border-radius: 3px;
outline: none;
}
.cg-anglectrl input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 2px solid #4facfe;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.cg-angleval {
font-size: 1.3rem;
font-weight: 700;
text-align: center;
color: #4facfe;
}
.cg-anglepresets {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.cg-anglepreset {
flex: 1;
padding: 5px 0;
border: 1px solid rgba(0,0,0,0.1);
background: #fafafa;
border-radius: 5px;
cursor: pointer;
font-size: 0.7rem;
transition: all 0.15s;
min-width: 36px;
}
.cg-anglepreset:hover {
border-color: #4facfe;
background: #e7f4ff;
}
.cg-stops {
display: flex;
flex-direction: column;
gap: 8px;
}
.cg-stop {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: #f7f7f7;
border-radius: 8px;
}
.cg-stop-color {
width: 32px;
height: 32px;
border: none;
border-radius: 6px;
cursor: pointer;
padding: 0;
background: transparent;
}
.cg-stop-pos {
width: 60px;
padding: 4px 8px;
border: 1px solid rgba(0,0,0,0.12);
border-radius: 5px;
font-size: 0.85rem;
text-align: center;
}
.cg-stop-del {
margin-left: auto;
border: none;
background: #ff6b6b;
color: #fff;
width: 24px;
height: 24px;
border-radius: 50%;
cursor: pointer;
font-size: 1rem;
line-height: 1;
transition: transform 0.15s;
}
.cg-stop-del:hover { transform: scale(1.1); }
.cg-addstop {
margin-top: 8px;
padding: 7px 0;
width: 100%;
border: 1px dashed rgba(0,0,0,0.2);
background: transparent;
border-radius: 8px;
cursor: pointer;
font-size: 0.8rem;
opacity: 0.7;
transition: all 0.2s;
}
.cg-addstop:hover {
border-color: #4facfe;
color: #4facfe;
opacity: 1;
}
.cg-fpresets {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.cg-fpreset {
aspect-ratio: 2/1;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 8px;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
}
.cg-fpreset:hover {
transform: scale(1.06);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.cg-actions {
display: flex;
gap: 10px;
padding: 16px 18px;
border-top: 1px solid rgba(0,0,0,0.06);
}
.cg-cancel {
flex: 1;
padding: 10px;
border: 1px solid rgba(0,0,0,0.12);
background: #fff;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.2s;
}
.cg-cancel:hover { background: #f5f5f5; }
.cg-apply {
flex: 2;
padding: 10px;
border: none;
background: linear-gradient(135deg, #4facfe, #00f2fe);
color: #fff;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.2s;
}
.cg-apply:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,172,254,0.4); }
.theme-dark .cg-modal,
.theme-dark .cg-typebtn,
.theme-dark .cg-stop,
.theme-dark .cg-cancel {
background: #1e1e2a;
border-color: rgba(255,255,255,0.1);
color: #e0e0e0;
}
.theme-dark .cg-titlebar,
.theme-dark .cg-row,
.theme-dark .cg-actions {
border-color: rgba(255,255,255,0.08);
}
.theme-dark .cg-anglepreset {
background: #252535;
border-color: rgba(255,255,255,0.1);
color: #ccc;
}
.theme-dark .cg-stop-pos {
background: #252535;
border-color: rgba(255,255,255,0.1);
color: #ccc;
}
.theme-dark .cg-typebtn.active {
background: rgba(79,172,254,0.2);
border-color: #4facfe;
color: #4facfe;
}
.w-grad { position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.w-grad-preview { width: 70%; aspect-ratio: 2/1; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
.w-grad-label { font-size: 0.7rem; opacity: 0.75; margin-top: 2px; }
.w-grad-apply {
border: none;
padding: 3px 10px;
font-size: 0.65rem;
background: rgba(0,0,0,0.4);
color: #fff;
border-radius: 10px;
cursor: pointer;
backdrop-filter: blur(4px);
transition: all 0.15s;
}
.w-grad-apply:hover { background: rgba(0,0,0,0.6); transform: scale(1.05); }
.w-grad-pop { animation: wg-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes wg-pop { 0% { transform: scale(0.9); } 100% { transform: scale(1); } }
.wd-grad { padding: 18px; color: inherit; }
.wd-grad-preview { height: 100px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); margin-bottom: 14px; transition: background 0.1s linear; }
.wd-grad-actions-top { display: flex; gap: 8px; margin-bottom: 16px; }
.wd-grad-apply { flex: 2; padding: 10px; border: none; background: linear-gradient(135deg, #4facfe, #00f2fe); color: #fff; border-radius: 8px; cursor: pointer; font-size: 0.9rem; font-weight: 600; }
.wd-grad-random { flex: 1; padding: 10px; border: 1px solid rgba(255,255,255,0.15); background: #252535; color: #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 0.9rem; }
.wd-grad-random:hover { border-color: #4facfe; color: #4facfe; }
.wd-grad-section-title { font-size: 0.8rem; font-weight: 600; margin: 14px 0 8px; color: #bbb; }
.wd-grad-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.wd-grad-item { aspect-ratio: 1; border: 2px solid transparent; border-radius: 8px; cursor: pointer; transition: all 0.15s; }
.wd-grad-item:hover { transform: scale(1.1); }
.wd-grad-item.active { border-color: #4facfe; box-shadow: 0 0 0 2px rgba(79,172,254,0.5); }
.wd-grad-custom { width: 100%; padding: 12px; border: 2px dashed rgba(255,255,255,0.25); background: transparent; color: #aaa; border-radius: 10px; cursor: pointer; font-size: 0.9rem; opacity: 0.7; transition: all 0.2s; }
.wd-grad-custom:hover { border-color: #4facfe; color: #4facfe; opacity: 1; }
.theme-light .wd-tm-preview { background: rgba(0,0,0,0.03); }
.theme-light .wd-tm-row > span:first-child { color: inherit; opacity: 0.8; }
.theme-light .wd-tm-row em { opacity: 0.5; color: inherit; }
.theme-light .wd-tm-hint { opacity: 0.5; color: inherit; }
.theme-light .wd-tm-ctrl input { background: #fff; border-color: rgba(0,0,0,0.15); color: inherit; }
.theme-light .wd-tm-ctrl button { background: #fff; border-color: rgba(0,0,0,0.15); color: inherit; }
.theme-light .wd-tm-switch { background: #eee; color: #999; }
.theme-light .wd-an-item { background: rgba(0,0,0,0.04); }
.theme-light .wd-an-name { color: inherit; }
.theme-light .wd-an-meta { color: inherit; opacity: 0.6; }
.theme-light .wd-an-yearly { background: #e0f2fe; color: #0284c7; }
.theme-light .wd-an-days { color: #f59e0b; }
.theme-light .wd-an-del { color: inherit; }
.theme-light .wd-an-del:hover { opacity: 1; }
.theme-light .wd-an-empty { opacity: 0.5; color: inherit; }
.theme-light .wd-da-word { color: #4facfe; }
.theme-light .wd-da-ph { opacity: 0.6; color: inherit; }
.theme-light .wd-da-def { color: inherit; }
.theme-light .wd-da-ex-en { background: rgba(0,0,0,0.04); color: inherit; }
.theme-light .wd-da-ex-cn { opacity: 0.6; color: inherit; }
.theme-light .wd-da-hint { opacity: 0.4; color: inherit; }
.theme-light .wd-da-btns button { background: #fff; border-color: rgba(0,0,0,0.15); color: inherit; }
.theme-light .wd-da-btns button:hover { border-color: #4facfe; color: #4facfe; }
.theme-light .wd-nasa-img-wrap { background: rgba(0,0,0,0.05); }
.theme-light .wd-nasa-title { color: inherit; }
.theme-light .wd-nasa-btns button, .theme-light .wd-nasa-hd a { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.15); color: inherit; }
.theme-light .wd-nasa-btns button:hover, .theme-light .wd-nasa-hd a:hover { background: rgba(0,0,0,0.12); }
.theme-light .wd-grad-random { background: #fff; border-color: rgba(0,0,0,0.12); color: inherit; }
.theme-light .wd-grad-custom { border-color: rgba(0,0,0,0.15); color: inherit; }
.theme-light .wd-grad-custom:hover { border-color: #4facfe; color: #4facfe; }
.theme-light .wd-grad-section-title { color: inherit; opacity: 0.7; }
.theme-light .wd-grad-item.active { box-shadow: 0 0 0 2px rgba(79,172,254,0.4); }
.w-wc {
position: relative;
justify-content: center;
padding: clamp(8px, 3cqh, 14px);
background: radial-gradient(120% 120% at 0% 0%, #23262e, #15171c 65%, #101115);
color: #fff;
}
.w-wc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(4px, 2.6cqh, 12px) clamp(6px, 4cqw, 18px);
width: 100%;
}
.w-wc-cell {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
padding: clamp(4px, 2.4cqh, 10px) clamp(6px, 2.6cqw, 12px);
border-radius: clamp(8px, 3cqh, 12px);
background: rgba(255, 255, 255, 0.05);
}
.w-wc-cell.primary { background: rgba(90, 150, 255, 0.16); }
.w-wc-cell b {
font-size: clamp(1.02rem, 11cqh, 1.6rem);
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.08;
letter-spacing: 0.01em;
}
.w-wc-cell span {
font-size: clamp(0.52rem, 4.6cqh, 0.7rem);
opacity: 0.6;
}
.wd-cdc {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(6px, 1.6vh, 16px);
min-height: min(52vh, 420px);
padding: clamp(18px, 5vh, 60px) clamp(14px, 5vw, 60px);
border-radius: 18px;
background: radial-gradient(120% 120% at 50% 0%, #1c1d22, #0b0c10 70%);
color: #fff;
}
.wd-cdc-time {
display: flex;
align-items: baseline;
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.wd-cdc-hm { font-size: clamp(3rem, 15vh, 8rem); font-weight: 700; }
.wd-cdc-sec { font-size: clamp(1.6rem, 7vh, 3.6rem); font-weight: 600; color: #ff6b6b; }
.wd-cdc-date { font-size: clamp(0.9rem, 2.4vh, 1.2rem); color: #cfd3dc; }
.wd-cdc-lunar { font-size: clamp(0.78rem, 2vh, 1rem); color: #858b98; }
.w-cf {
display: flex;
align-items: center;
justify-content: center;
padding: clamp(4px, 2cqh, 10px);
}
.w-cf-wrap {
width: min(100%, 100cqh);
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
}
.cf-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cf-ring { fill: #ffffff; stroke: #e6e6ea; stroke-width: 1.2; }
.cf-num {
font-size: 8px;
font-weight: 700;
fill: #1c1c1e;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.cf-hour { stroke: #1c1c1e; stroke-width: 3.4; stroke-linecap: round; }
.cf-min { stroke: #1c1c1e; stroke-width: 2.2; stroke-linecap: round; }
.cf-sec { stroke: #ff3b30; stroke-width: 1.2; stroke-linecap: round; }
.cf-pin { fill: #1c1c1e; }
.wd-mask.wd-clockface { padding: 0; }
.wd-mask.wd-clockface .wd-box {
width: 100vw;
height: 100vh;
max-height: none;
border-radius: 0;
background: #f2f2f6;
}
.wd-mask.wd-clockface .wd-content { padding: 0; display: flex; }
.wd-mask.wd-clockface .wd-cf { flex: 1; min-height: 0; }
.wd-mask.wd-clockface .wd-cf .cf-svg { width: min(80vh, 80vw); height: min(80vh, 80vw); }
.wd-cf {
display: flex;
align-items: center;
justify-content: center;
padding: clamp(12px, 3vh, 32px);
min-height: min(60vh, 560px);
background: radial-gradient(120% 120% at 50% 0%, #fbfbfd, #e9e9ef 70%);
}
.wd-cf .cf-svg { width: min(58vh, 480px); height: min(58vh, 480px); }
.w-hd {
display: flex;
flex-direction: column;
}
.w-hd-grid {
display: flex;
gap: clamp(4px, 2.2cqw, 10px);
width: 100%;
height: 100%;
flex: 1;
min-height: 0;
}
.w-hd-card {
position: relative;
flex: 1;
min-width: 0;
border-radius: clamp(9px, 3.4cqh, 15px);
overflow: hidden;
background-size: cover;
background-position: center;
}
.w-hd-card-mask { position: absolute; inset: 0; }
.w-hd-card-main {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1px;
height: 100%;
padding: clamp(6px, 3.4cqh, 14px) clamp(7px, 3cqw, 14px);
}
.w-hd-cd-days { display: flex; align-items: baseline; gap: 2px; line-height: 1; }
.w-hd-cd-days b { font-size: clamp(1.2rem, 17cqh, 2.4rem); font-weight: 800; }
.w-hd-cd-days span { font-size: clamp(0.5rem, 4.6cqh, 0.72rem); opacity: 0.8; }
.w-hd-cd-name {
margin-top: clamp(1px, 0.6cqh, 3px);
font-size: clamp(0.6rem, 5.2cqh, 0.82rem);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.w-hd-cd-date {
font-size: clamp(0.46rem, 4cqh, 0.62rem);
opacity: 0.72;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-variant-numeric: tabular-nums;
}
.w-hd-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(0.6rem, 5cqh, 0.8rem);
opacity: 0.5;
}
.w-cv { gap: clamp(4px, 2.4cqh, 9px); }
.w-cv-tabs { display: flex; gap: 4px; flex: 0 0 auto; }
.w-cv-tabs span {
padding: 2px 9px;
border-radius: 999px;
font-size: clamp(0.54rem, 4.4cqh, 0.7rem);
background: rgba(255, 255, 255, 0.08);
cursor: pointer;
white-space: nowrap;
}
.w-cv-tabs span.active {
background: rgba(74, 155, 255, 0.24);
color: #7db8ff;
}
.w-cv-row { display: flex; align-items: center; gap: 6px; min-height: 0; }
.w-cv-input,
.w-cv-out {
flex: 1;
min-width: 0;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: clamp(3px, 1.6cqh, 6px) 8px;
color: #fff;
font-size: clamp(0.68rem, 6cqh, 0.92rem);
font-family: inherit;
}
.w-cv-out { font-weight: 700; color: #7db8ff; }
.w-cv-sel {
max-width: 44%;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 8px;
color: #fff;
font-size: clamp(0.56rem, 4.8cqh, 0.76rem);
padding: 3px 4px;
font-family: inherit;
}
.w-cv-sel option { background-color: #202024; color: #e8eaf0; }
.w-poem,
.w-quote {
justify-content: center;
gap: clamp(3px, 2.4cqh, 10px);
}
.w-poem-lines p {
margin: 0;
font-size: clamp(0.66rem, 6cqh, 0.92rem);
line-height: 1.65;
letter-spacing: 0.01em;
}
.w-poem-meta,
.w-quote-src {
font-size: clamp(0.5rem, 4.4cqh, 0.68rem);
opacity: 0.5;
}
.w-quote-text {
font-size: clamp(0.66rem, 6cqh, 0.95rem);
line-height: 1.65;
}
.w-quote-src { text-align: right; }
.w-mv { position: relative; overflow: hidden; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.w-mv-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.04);
transition: opacity 0.5s ease;
z-index: 0;
}
.w-mv-bg.has { opacity: 1; }
.w-mv::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.72) 100%);
z-index: 1;
pointer-events: none;
}
.w-mv > *:not(.w-mv-bg) { position: relative; z-index: 2; }
.w-mv-head {
display: flex;
justify-content: space-between;
align-items: center;
font-size: clamp(0.48rem, 4.2cqh, 0.65rem);
opacity: 0.75;
flex: 0 0 auto;
}
.w-mv-film { display: inline-flex; align-items: center; gap: 4px; }
.w-mv-day {
font-size: clamp(1.7rem, 21cqh, 3.1rem);
font-weight: 800;
line-height: 1;
margin-top: auto;
}
.w-mv-quote {
font-size: clamp(0.58rem, 5cqh, 0.76rem);
line-height: 1.5;
opacity: 0.9;
}
.w-mv-title {
font-size: clamp(0.52rem, 4.6cqh, 0.7rem);
opacity: 0.55;
}
.w-hs { gap: clamp(2px, 1.4cqh, 6px); }
.w-hs-head {
display: flex;
align-items: center;
justify-content: space-between;
font-size: clamp(0.54rem, 4.8cqh, 0.72rem);
opacity: 0.8;
flex: 0 0 auto;
}
.w-hs-nav {
cursor: pointer;
padding: 0 5px;
opacity: 0.7;
font-size: 1.1em;
}
.w-hs-nav:hover { opacity: 1; }
.w-hs-year {
font-size: clamp(0.86rem, 8.6cqh, 1.25rem);
font-weight: 800;
color: #f0c674;
}
.w-hs-text {
font-size: clamp(0.6rem, 5.4cqh, 0.8rem);
line-height: 1.5;
}
.w-hs-empty { opacity: 0.5; }
.w-hs-foot {
margin-top: auto;
font-size: clamp(0.46rem, 4cqh, 0.6rem);
opacity: 0.32;
}
.w-sp {
align-items: center;
justify-content: center;
text-align: center;
gap: clamp(2px, 1.6cqh, 7px);
cursor: pointer;
}
.w-sp-icon {
width: clamp(46px, 30cqh, 86px);
height: clamp(46px, 30cqh, 86px);
display: flex;
align-items: center;
justify-content: center;
}
.w-sp-icon i {
font-size: clamp(1.9rem, 19cqh, 3.2rem);
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
}
.w-sp-val {
font-size: clamp(0.78rem, 7.6cqh, 1.12rem);
font-weight: 700;
}
.w-sp-sub {
font-size: clamp(0.48rem, 4.2cqh, 0.64rem);
opacity: 0.6;
}
@container widget (max-width: 200px) {
.w-ow-time b { font-size: clamp(1.15rem, 15cqw, 2rem); }
.w-ow-stats { gap: 2px; }
.w-ow-stats span { font-size: 0.42rem; letter-spacing: -0.02em; }
.w-hd-cd-days b { font-size: 1.25rem; }
.w-hd-cd-date { display: none; }
.w-cv-tabs span { padding: 1px 6px; }
.w-cv-sel { max-width: 48%; }
.w-cv-input,
.w-cv-out { padding: 3px 5px; }
.w-wc-cell b { font-size: clamp(0.72rem, 8.5cqh, 1.1rem); }
.w-sp-icon { width: 52px; height: 52px; }
.w-sp-icon i { font-size: 1.9rem; }
}
.widget-expand {
position: absolute;
top: 8px;
right: 38px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.22);
color: #fff;
font-size: 11px;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s, background 0.15s;
z-index: 2;
}
.widget-tile:hover .widget-expand,
.widget-tile:focus-within .widget-expand { opacity: 1; }
.widget-expand:hover { background: rgba(0, 0, 0, 0.45); }
.wd-mask {
position: fixed;
inset: 0;
z-index: 10080;
display: flex;
align-items: center;
justify-content: center;
padding: 3vh 3vw;
background: rgba(6, 10, 18, 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
animation: wdFade 0.18s ease;
}
@keyframes wdFade {
from { opacity: 0; }
to { opacity: 1; }
}
.wd-box {
position: relative;
display: flex;
flex-direction: column;
width: min(1040px, 94vw);
max-height: 92vh;
border-radius: 24px;
overflow: hidden;
background: #16181d;
color: #f2f4f8;
box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.3);
animation: wdIn 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes wdIn {
from { opacity: 0; transform: translateY(14px) scale(0.985); }
to { opacity: 1; transform: none; }
}
.wd-head {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 22px 12px;
}
.wd-title {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 0.98rem;
font-weight: 600;
opacity: 0.92;
}
.wd-title i { opacity: 0.7; font-size: 0.9rem; }
.wd-close {
width: 32px;
height: 32px;
flex: 0 0 auto;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.09);
color: inherit;
font-size: 13px;
cursor: pointer;
transition: background 0.15s;
}
.wd-close:hover { background: rgba(255, 255, 255, 0.2); }
.wd-content {
flex: 1;
min-height: 0;
overflow: auto;
padding: 0 22px 22px;
}
.wd-loading {
padding: 80px 0;
text-align: center;
font-size: 0.86rem;
opacity: 0.55;
}
.wd-mask.wd-calendar .wd-content,
.wd-mask.wd-notes .wd-content,
.wd-mask.wd-muyu .wd-content,
.wd-mask.wd-quote .wd-content {
display: flex;
flex-direction: column;
min-height: 0;
}
.wd-mask.wd-calendar .wd-cal,
.wd-mask.wd-notes .wd-nt,
.wd-mask.wd-muyu .wd-my,
.wd-mask.wd-quote .wd-q { flex: 1; min-height: 0; }
.wd-mask.wd-weather .wd-box {
background: linear-gradient(160deg, #47566e 0%, #2a3346 48%, #191e29 100%);
}
.wd-w { display: flex; flex-direction: column; gap: 18px; }
.wd-w-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.wd-w-city {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.92rem;
font-weight: 600;
}
.wd-w-city i { font-size: 0.8rem; opacity: 0.65; }
.wd-w-cityname { font-weight: 400; opacity: 0.45; margin-left: 6px; }
.wd-w-pub { margin-top: 4px; font-size: 0.7rem; opacity: 0.5; }
.wd-w-search { display: flex; gap: 8px; }
.wd-w-search input {
width: 190px;
border: none;
border-radius: 9px;
padding: 9px 12px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
font-size: 0.76rem;
outline: none;
}
.wd-w-search input::placeholder { color: rgba(255, 255, 255, 0.45); }
.wd-w-go {
width: 34px;
border: none;
border-radius: 9px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
cursor: pointer;
}
.wd-w-hero {
display: flex;
align-items: center;
gap: clamp(18px, 4vw, 48px);
padding: 6px 4px 0;
}
.wd-w-temp {
font-size: clamp(3.6rem, 7vw, 5.6rem);
font-weight: 200;
line-height: 0.9;
font-variant-numeric: tabular-nums;
}
.wd-w-temp span { font-size: 0.42em; vertical-align: top; font-weight: 300; }
.wd-w-side { display: flex; flex-direction: column; gap: 8px; }
.wd-w-cond { font-size: 1.05rem; }
.wd-w-aqi {
align-self: flex-start;
padding: 3px 11px;
border-radius: 999px;
background: rgba(90, 200, 120, 0.16);
color: #86e2a6;
font-size: 0.74rem;
}
.wd-w-aqi.ok { background: rgba(240, 196, 90, 0.16); color: #f2ce7a; }
.wd-w-aqi.bad { background: rgba(255, 140, 90, 0.16); color: #ffab7a; }
.wd-w-aqi.worse { background: rgba(255, 90, 90, 0.18); color: #ff8b8b; }
.wd-w-wind { font-size: 0.76rem; opacity: 0.6; }
.wd-w-tip { font-size: 0.8rem; opacity: 0.72; }
.wd-w-stats {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
padding: 13px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.055);
}
.wd-w-stats > div { display: flex; flex-direction: column; gap: 4px; }
.wd-w-stats span { font-size: 0.66rem; opacity: 0.45; }
.wd-w-stats b { font-size: 0.82rem; font-weight: 600; }
.wd-w-block {
padding: 15px 16px 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.05);
}
.wd-w-block-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-size: 0.82rem;
font-weight: 600;
opacity: 0.9;
}
.wd-w-block-title i { font-size: 0.75rem; opacity: 0.6; }
.wd-w-hourly {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(58px, 1fr);
gap: 4px;
overflow-x: auto;
padding-bottom: 4px;
}
.wd-w-hour {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 6px 2px;
border-radius: 10px;
font-size: 0.78rem;
}
.wd-w-hour:nth-child(2n) { background: rgba(255, 255, 255, 0.035); }
.wd-w-hh { font-size: 0.66rem; opacity: 0.5; }
.wd-w-he { font-size: 1.15rem; line-height: 1; }
.wd-w-hour b { font-weight: 600; }
.wd-w-pop { min-height: 12px; font-size: 0.6rem; color: #84baff; }
.wd-w-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.wd-w-day {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 10px 4px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.035);
font-size: 0.75rem;
}
.wd-w-day.today { background: rgba(74, 155, 255, 0.16); }
.wd-w-dl { font-weight: 600; }
.wd-w-dd { font-size: 0.64rem; opacity: 0.45; }
.wd-w-de { font-size: 1.15rem; line-height: 1.2; }
.wd-w-dt { max-width: 100%; font-size: 0.62rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-w-day b { margin-top: 2px; font-size: 0.82rem; }
.wd-w-dm { font-size: 0.7rem; opacity: 0.45; }
.wd-w-empty { font-size: 0.78rem; opacity: 0.45; }
.wd-mask.wd-calendar .wd-box { width: min(1120px, 94vw); height: min(760px, 90vh); background: #17181c; }
.wd-cal {
display: grid;
grid-template-columns: 1fr 336px;
grid-template-rows: minmax(0, 1fr);
gap: 20px;
height: 100%;
min-height: 0;
}
.wd-cal-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
.wd-cal-bar { display: flex; align-items: center; gap: 10px; padding: 2px 0 6px; }
.wd-cal-nav {
width: 30px;
height: 30px;
border: none;
border-radius: 8px;
background: rgba(255, 255, 255, 0.07);
color: #d5dae3;
cursor: pointer;
font-size: 0.72rem;
}
.wd-cal-nav:hover { background: rgba(255, 255, 255, 0.14); }
.wd-cal-ym { font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; }
.wd-cal-today {
margin-left: auto;
border: 1px solid rgba(255, 255, 255, 0.12);
background: transparent;
color: #cfd6e0;
border-radius: 8px;
padding: 6px 14px;
font-size: 0.74rem;
cursor: pointer;
}
.wd-cal-today:hover { background: rgba(255, 255, 255, 0.08); }
.wd-cal-week {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
font-size: 0.76rem;
opacity: 0.4;
padding-bottom: 2px;
}
.wd-cal-grid {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: minmax(0, 1fr);
gap: 6px;
}
.wd-cal-cell {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
min-height: 0;
border-radius: 12px;
cursor: pointer;
transition: background 0.12s;
}
.wd-cal-cell:hover { background: rgba(255, 255, 255, 0.07); }
.wd-cal-cell.other { opacity: 0.26; }
.wd-cal-cell.weekend .wd-cal-d { color: #ff8d8d; }
.wd-cal-cell.rest { background: rgba(255, 92, 82, 0.12); }
.wd-cal-cell.rest:hover { background: rgba(255, 92, 82, 0.2); }
.wd-cal-cell.today .wd-cal-d { color: #6aa8ff; font-weight: 700; }
.wd-cal-cell.sel { background: #2f6fed; box-shadow: 0 8px 22px rgba(47, 111, 237, 0.4); }
.wd-cal-cell.sel .wd-cal-d,
.wd-cal-cell.sel .wd-cal-sub,
.wd-cal-cell.sel .wd-cal-badge { color: #fff; }
.wd-cal-d { font-size: 1.02rem; font-weight: 600; line-height: 1.1; }
.wd-cal-sub { font-size: 0.58rem; opacity: 0.55; white-space: nowrap; }
.wd-cal-badge {
position: absolute;
top: 3px;
right: 6px;
font-size: 0.54rem;
color: #ff6b62;
opacity: 0.9;
}
.wd-cal-side {
display: flex;
flex-direction: column;
gap: 9px;
padding: 18px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.045);
overflow: auto;
min-height: 0;
}
.wd-cal-side-date { text-align: center; font-size: 0.76rem; opacity: 0.5; }
.wd-cal-big {
text-align: center;
font-size: 4rem;
font-weight: 700;
line-height: 1;
color: #5b9dff;
text-shadow: 0 8px 28px rgba(47, 111, 237, 0.35);
}
.wd-cal-lunar { text-align: center; font-size: 0.88rem; font-weight: 500; }
.wd-cal-gz { text-align: center; font-size: 0.78rem; opacity: 0.55; }
.wd-cal-weekno { text-align: center; font-size: 0.68rem; opacity: 0.4; margin-bottom: 2px; }
.wd-cal-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-cal-tag {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.06);
font-size: 0.68rem;
}
.wd-cal-tag i { font-style: normal; opacity: 0.45; }
.wd-cal-tag.rest { background: rgba(255, 92, 82, 0.16); color: #ff9c93; }
.wd-cal-yiji { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.wd-cal-yi,
.wd-cal-ji { display: flex; gap: 8px; font-size: 0.7rem; line-height: 1.6; }
.wd-cal-yi b,
.wd-cal-ji b {
flex: 0 0 auto;
width: 20px;
height: 20px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.64rem;
font-weight: 600;
}
.wd-cal-yi b { background: rgba(74, 200, 120, 0.2); color: #7ee2a2; }
.wd-cal-ji b { background: rgba(255, 90, 80, 0.18); color: #ff9187; }
.wd-cal-yi span,
.wd-cal-ji span { opacity: 0.8; }
.wd-cal-mini { display: flex; gap: 6px; }
.wd-cal-mini span {
flex: 1;
display: flex;
justify-content: space-between;
gap: 6px;
padding: 5px 9px;
border-radius: 6px;
background: rgba(255, 255, 255, 0.06);
font-size: 0.64rem;
opacity: 0.9;
}
.wd-cal-mini b { font-weight: 600; }
.wd-cal-shen {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 14px;
padding-top: 6px;
border-top: 1px dashed rgba(255, 255, 255, 0.1);
font-size: 0.64rem;
}
.wd-cal-shen > div { display: flex; flex-direction: column; gap: 2px; }
.wd-cal-shen span { opacity: 0.4; }
.wd-cal-shen b { font-size: 0.72rem; font-weight: 600; }
.wd-cal-foot { margin-top: auto; font-size: 0.62rem; opacity: 0.3; text-align: center; }
.wd-mask.wd-moviecal .wd-box {
width: min(1000px, 94vw);
background: radial-gradient(120% 90% at 28% 0%, #54180f 0%, #2a0c08 42%, #160806 100%);
}
.wd-mv {
display: grid;
grid-template-columns: 1fr 250px;
gap: clamp(18px, 3vw, 34px);
padding-top: 4px;
}
.wd-mv-main { display: flex; flex-direction: column; gap: 13px; min-width: 0; }
.wd-mv-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; opacity: 0.55; }
.wd-mv-name { margin: 0; font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: 0.03em; }
.wd-mv-rate { display: flex; align-items: center; gap: 8px; }
.wd-mv-stars { color: #ffb02e; letter-spacing: 2px; font-size: 0.9rem; }
.wd-mv-rate b { color: #ffb02e; font-size: 1.15rem; }
.wd-mv-rate em { font-style: normal; font-size: 0.68rem; opacity: 0.4; }
.wd-mv-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.wd-mv-tags span {
padding: 2px 10px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
font-size: 0.68rem;
opacity: 0.8;
}
.wd-mv-dir { font-size: 0.76rem; opacity: 0.65; display: flex; align-items: center; gap: 6px; }
.wd-mv-quotebar {
display: flex;
align-items: center;
gap: 14px;
padding: 11px 16px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.06);
font-size: 0.82rem;
}
.wd-mv-quotebar span { color: #ffb02e; font-weight: 700; opacity: 0.65; font-size: 0.72rem; }
.wd-mv-quotebar i { flex: 1; text-align: center; font-style: normal; }
.wd-mv-desc {
padding: 14px 16px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
font-size: 0.79rem;
line-height: 1.75;
opacity: 0.85;
}
.wd-mv-desc h4 { margin: 0 0 8px; font-size: 0.74rem; font-weight: 600; opacity: 0.65; letter-spacing: 0.04em; }
.wd-mv-desc p { margin: 0; }
.wd-mv-link {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 7px;
color: #ff8a7c;
font-size: 0.78rem;
text-decoration: none;
padding: 4px 0;
}
.wd-mv-link:hover { color: #ffab9f; }
.wd-mv-poster {
position: relative;
align-self: start;
aspect-ratio: 2 / 3;
border-radius: 16px;
overflow: hidden;
background: linear-gradient(155deg, var(--c1), var(--c2));
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
}
.wd-mv-poster::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(115deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 7px);
opacity: 0.5;
}
.wd-mv-poster-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px; text-align: center; }
.wd-mv-poster-en { font-size: 0.58rem; letter-spacing: 0.34em; opacity: 0.7; }
.wd-mv-poster-title { font-size: 2rem; font-weight: 800; letter-spacing: 0.1em; writing-mode: vertical-rl; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); }
.wd-mv-poster-sub { font-size: 0.52rem; letter-spacing: 0.18em; opacity: 0.55; }
.wd-mv-poster-date { position: absolute; bottom: 12px; font-size: 0.6rem; opacity: 0.7; }
.wd-mask.wd-muyu .wd-box {
width: min(920px, 94vw);
height: min(660px, 90vh);
background: radial-gradient(120% 100% at 62% 6%, #6c5237 0%, #33251a 52%, #120d09 100%);
}
.wd-my {
position: relative;
height: 100%;
min-height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
overflow: hidden;
border-radius: 16px;
}
.wd-my-bg { position: absolute; inset: 0; display: flex; align-items: flex-end; pointer-events: none; }
.wd-my-bg svg { width: 62%; height: 100%; opacity: 0.85; }
.wd-my-title {
position: relative;
margin-bottom: 4px;
font-size: 1.06rem;
letter-spacing: 0.14em;
color: #f4dfb4;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.wd-my-fish {
position: relative;
width: clamp(200px, 33vh, 310px);
height: clamp(200px, 33vh, 310px);
border: none;
background: transparent;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.wd-my-fish svg {
width: 100%;
height: 100%;
filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.45));
transition: transform 0.08s ease;
}
.wd-my-fish.hit svg { animation: wdMyHit 0.18s ease; }
@keyframes wdMyHit {
0% { transform: scale(1); }
55% { transform: scale(0.92); }
100% { transform: scale(1); }
}
.wd-my-mallet { position: absolute; right: 2%; top: 24%; width: 28%; transform: rotate(26deg); }
.wd-my-mallet i { display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #d9ac6c, #b07a3d); }
.wd-my-mallet i::before {
content: '';
position: absolute;
top: -12px;
left: -16px;
width: 32px;
height: 30px;
border-radius: 8px;
background: linear-gradient(160deg, #e6bd83, #bd8748);
box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.18);
}
.wd-my-ring {
position: absolute;
inset: 14%;
border-radius: 50%;
border: 2px solid rgba(255, 220, 160, 0);
pointer-events: none;
}
.wd-my-fish.hit .wd-my-ring { animation: wdMyRing 0.55s ease-out; }
@keyframes wdMyRing {
0% { transform: scale(0.72); border-color: rgba(255, 220, 160, 0.55); opacity: 1; }
100% { transform: scale(1.25); border-color: rgba(255, 220, 160, 0); opacity: 0; }
}
.wd-my-bar {
display: flex;
align-items: center;
gap: 28px;
padding: 8px 24px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.07);
}
.wd-my-bar button { border: none; background: none; color: #e8d3ac; font-size: 0.98rem; cursor: pointer; opacity: 0.75; }
.wd-my-bar button:hover { opacity: 1; }
.wd-my-count { min-width: 44px; text-align: center; font-size: 1.28rem; font-weight: 700; color: #ffd89a; font-variant-numeric: tabular-nums; }
.wd-my-hint { font-size: 0.7rem; opacity: 0.4; }
.wd-my-floats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wd-my-plus {
position: absolute;
top: 46%;
transform: translateX(-50%);
color: #ffd89a;
font-size: 0.82rem;
font-weight: 600;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
animation: wdMyPlus 0.9s ease-out forwards;
}
@keyframes wdMyPlus {
0% { opacity: 0; transform: translate(-50%, 8px) scale(0.9); }
20% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%, -70px) scale(1.05); }
}
.wd-mask.wd-quote .wd-box {
width: min(1000px, 94vw);
height: min(640px, 90vh);
background: #0e1a12;
}
.wd-q {
position: relative;
height: 100%;
min-height: 440px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
overflow: hidden;
border-radius: 16px;
}
.wd-q-bg {
position: absolute;
inset: 0;
background:
radial-gradient(58% 46% at 50% 108%, #6f8f3a 0%, rgba(111, 143, 58, 0) 70%),
radial-gradient(46% 34% at 82% 20%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 70%),
linear-gradient(180deg, #8aa4ba 0%, #b3c3ce 44%, #7b9455 44.5%, #46602f 100%);
}
.wd-q-bg::after {
content: '';
position: absolute;
inset: 0;
background: rgba(24, 34, 24, 0.1);
}
.wd-q > * { position: relative; z-index: 1; }
.wd-q > .wd-q-bg { position: absolute; inset: 0; z-index: 0; }
.wd-q-date { font-size: 0.76rem; letter-spacing: 0.12em; opacity: 0.9; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28); }
.wd-q-time { font-size: clamp(2.8rem, 6vw, 4rem); font-weight: 700; line-height: 1; letter-spacing: 0.02em; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.28); }
.wd-q-body { max-width: 660px; padding: 20px; text-align: center; }
.wd-q-text { margin: 0 0 12px; font-size: clamp(1rem, 2vw, 1.22rem); line-height: 1.9; font-weight: 600; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); }
.wd-q-src { margin: 0; font-size: 0.78rem; opacity: 0.6; }
.wd-q-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
color: #fff;
cursor: pointer;
font-size: 0.8rem;
opacity: 0.85;
}
.wd-q-nav:hover { background: rgba(255, 255, 255, 0.26); }
.wd-q-nav.prev { left: 12px; }
.wd-q-nav.next { right: 12px; }
.wd-q-actions { display: flex; gap: 38px; margin-top: 16px; }
.wd-q-actions button {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
border: none;
background: none;
color: #fff;
font-size: 0.66rem;
opacity: 0.85;
cursor: pointer;
}
.wd-q-actions button:hover { opacity: 1; }
.wd-q-actions i { font-size: 1.15rem; }
.wd-q-fav.on i { color: #ff6b81; }
.wd-q-from { position: absolute; bottom: 12px; font-size: 0.6rem; opacity: 0.4; }
.wd-q.focus .wd-q-body { transform: scale(1.08); transition: transform 0.3s ease; }
.wd-mask.wd-forex .wd-box {
width: min(560px, 94vw);
background: #f7f8fa;
color: #1c1c1e;
}
.wd-mask.wd-forex .wd-title { color: #1c1c1e; }
.wd-mask.wd-forex .wd-close { background: rgba(0, 0, 0, 0.06); color: #333; }
.wd-mask.wd-forex .wd-close:hover { background: rgba(0, 0, 0, 0.12); }
.wd-fx { display: flex; flex-direction: column; gap: 10px; }
.wd-fx-bar { display: flex; gap: 10px; }
.wd-fx-base {
flex: 0 0 46%;
border: none;
border-radius: 10px;
padding: 11px 12px;
background: #eceef2;
font-size: 0.82rem;
color: #1c1c1e;
font-family: inherit;
}
.wd-fx-amount {
flex: 1;
min-width: 0;
border: none;
border-radius: 10px;
padding: 11px 14px;
background: #eceef2;
font-size: 0.95rem;
font-weight: 600;
color: #1c1c1e;
font-family: inherit;
}
.wd-fx-row {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 16px;
border-radius: 14px;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.wd-fx-flag { font-size: 1.22rem; }
.wd-fx-name { flex: 1; font-size: 0.86rem; }
.wd-fx-name em { font-style: normal; font-size: 0.68rem; opacity: 0.4; margin-left: 4px; }
.wd-fx-row b { font-size: 0.98rem; font-variant-numeric: tabular-nums; }
.wd-fx-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; font-size: 0.66rem; opacity: 0.5; }
.wd-fx-refresh { border: none; background: none; color: #1a73e8; font-size: 0.7rem; cursor: pointer; }
.wd-mask.wd-notes .wd-box {
width: min(1000px, 94vw);
height: min(660px, 90vh);
background: #fbfbfc;
color: #1c1c1e;
}
.wd-mask.wd-notes .wd-title { color: #1c1c1e; }
.wd-mask.wd-notes .wd-close { background: rgba(0, 0, 0, 0.06); color: #333; }
.wd-mask.wd-notes .wd-close:hover { background: rgba(0, 0, 0, 0.12); }
.wd-nt {
display: grid;
grid-template-columns: 248px 1fr;
height: 100%;
min-height: 400px;
border: 1px solid #ececef;
border-radius: 16px;
overflow: hidden;
background: #fff;
}
.wd-nt-side {
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px;
background: #f4f5f7;
border-right: 1px solid #ececef;
min-height: 0;
}
.wd-nt-search { display: flex; gap: 8px; }
.wd-nt-search input {
flex: 1;
min-width: 0;
border: none;
border-radius: 8px;
padding: 9px 10px;
background: #e9ebef;
font-size: 0.76rem;
color: #1c1c1e;
font-family: inherit;
}
.wd-nt-add {
flex: 0 0 auto;
width: 34px;
height: 34px;
border: none;
border-radius: 8px;
background: #1a73e8;
color: #fff;
cursor: pointer;
}
.wd-nt-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.wd-nt-item { padding: 9px 10px; border-radius: 9px; cursor: pointer; }
.wd-nt-item:hover { background: #e9ebef; }
.wd-nt-item.active { background: #e3edff; }
.wd-nt-item-title { font-size: 0.8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-nt-item-date { margin-top: 3px; font-size: 0.64rem; opacity: 0.4; }
.wd-nt-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 46px 0; font-size: 0.76rem; opacity: 0.35; }
.wd-nt-empty i { font-size: 2rem; }
.wd-nt-clear {
border: 1px solid #f0c0bf;
border-radius: 8px;
padding: 8px;
background: #fff;
color: #e0433a;
font-size: 0.76rem;
cursor: pointer;
font-family: inherit;
}
.wd-nt-main { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; min-height: 0; min-width: 0; }
.wd-nt-title {
border: none;
background: transparent;
outline: none;
font-size: 1.18rem;
font-weight: 600;
color: #1c1c1e;
padding: 2px 0;
font-family: inherit;
}
.wd-nt-meta {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 8px;
border-bottom: 1px solid #eee;
font-size: 0.66rem;
opacity: 0.45;
}
.wd-nt-del { border: none; background: none; color: #e0433a; font-size: 0.68rem; cursor: pointer; opacity: 0.85; }
.wd-nt-content {
flex: 1;
min-height: 0;
border: none;
outline: none;
resize: none;
background: transparent;
color: #333;
font-size: 0.84rem;
line-height: 1.8;
font-family: inherit;
}
.wd-nt-blank { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 0.8rem; opacity: 0.3; }
.wd-nt-blank i { font-size: 2.4rem; }
.wd-mask.wd-worldclock .wd-box {
width: min(1000px, 94vw);
background: #141519;
}
.wd-mask.wd-clock { padding: 0; }
.wd-mask.wd-clock .wd-box {
width: 100vw;
height: 100vh;
max-height: none;
border-radius: 0;
background: #141519;
}
.wd-mask.wd-clock .wd-content { padding: 0; display: flex; }
.wd-mask.wd-clock .wd-cdc { flex: 1; min-height: 0; border-radius: 0; }
.wd-ck { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 4px; }
.wd-ck-search {
align-self: flex-end;
display: flex;
align-items: center;
gap: 7px;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.wd-ck-search i { font-size: 0.76rem; opacity: 0.4; }
.wd-ck-search input {
width: 130px;
border: none;
outline: none;
background: transparent;
color: #fff;
font-size: 0.78rem;
font-family: inherit;
}
.wd-ck-time {
margin-top: 10px;
font-size: clamp(3rem, 9vw, 6rem);
font-weight: 700;
line-height: 1;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
text-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.wd-ck-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: 0.76rem; opacity: 0.55; }
.wd-ck-cities {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 16px;
max-width: 840px;
}
.wd-ck-chip {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 94px;
padding: 10px 16px;
border: none;
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
color: #e2e7ef;
cursor: pointer;
font-size: 0.74rem;
font-family: inherit;
}
.wd-ck-chip:hover { background: rgba(255, 255, 255, 0.11); }
.wd-ck-chip.active { background: rgba(74, 155, 255, 0.2); outline: 1px solid rgba(74, 155, 255, 0.5); }
.wd-ck-chip b { font-size: 0.8rem; font-weight: 600; }
.wd-ck-ct { font-size: 0.72rem; opacity: 0.55; font-variant-numeric: tabular-nums; }
.wd-ck-check {
position: absolute;
top: -6px;
left: -6px;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #1a73e8;
color: #fff;
font-size: 0.58rem;
opacity: 0;
transition: opacity 0.12s;
}
.wd-ck-check.on { opacity: 1; }
.wd-ck-chip:hover .wd-ck-check { opacity: 0.5; }
.wd-ck-chip:hover .wd-ck-check.on { opacity: 1; }
.wd-ck-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 12px;
font-size: 0.7rem;
opacity: 0.75;
}
.wd-ck-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 6px;
background: rgba(74, 155, 255, 0.14);
color: #8fc0ff;
}
.wd-ck-rm { cursor: pointer; opacity: 0.7; font-style: normal; }
.wd-ck-rm:hover { opacity: 1; }
.wd-ck-reset { border: none; background: none; color: #9aa4b2; cursor: pointer; font-size: 0.74rem; }
@media (max-width: 860px) {
.wd-cal { grid-template-columns: 1fr; }
.wd-cal-side { display: none; }
.wd-mv { grid-template-columns: 1fr; }
.wd-mv-poster { display: none; }
.wd-nt { grid-template-columns: 200px 1fr; }
.wd-w-stats { grid-template-columns: repeat(4, 1fr); }
.wd-w-days { grid-template-columns: repeat(4, 1fr); }
.wd-q-nav { display: none; }
}
.wd-mask.wd-history .wd-content,
.wd-mask.wd-whattoeat .wd-content,
.wd-mask.wd-holiday .wd-content,
.wd-mask.wd-converter .wd-content,
.wd-mask.wd-poem .wd-content,
.wd-mask.wd-countdown .wd-content,
.wd-mask.wd-offwork .wd-content,
.wd-mask.wd-hotsearch .wd-content { padding: 0; overflow: hidden; }
.wd-mask.wd-history .wd-box { width: min(1000px, 94vw); background: #f4f0e6; color: #3a3226; }
.wd-mask.wd-history .wd-title { color: #6b5d45; }
.wd-mask.wd-history .wd-close { background: rgba(0, 0, 0, .08); color: #3a3226; }
.wd-mask.wd-countdown .wd-box { width: min(1120px, 96vw); }
.wd-mask.wd-hotsearch .wd-box { width: min(1000px, 95vw); }
.wd-mask.wd-converter .wd-box { width: min(900px, 94vw); }
.wd-mask.wd-holiday .wd-box { width: min(1000px, 95vw); }
.wd-mask.wd-offwork .wd-box { width: min(1000px, 95vw); }
.wd-mask.wd-whattoeat .wd-box { width: min(980px, 94vw); background: #fbfaf7; color: #2b2b2b; }
.wd-mask.wd-poem .wd-box { width: min(980px, 94vw); background: #17121f; }
.wd-hs { display: flex; height: clamp(420px, 66vh, 640px); background: #f4f0e6; color: #3a3226; font-family: "Noto Serif SC", "Songti SC", serif; }
.wd-hs-side { flex: 0 0 320px; display: flex; flex-direction: column; background: #e9e3d2; border-right: 1px solid rgba(0, 0, 0, .06); }
.wd-hs-head { padding: 26px 24px 18px; font-size: 1.3rem; line-height: 1.35; font-weight: 700; letter-spacing: .02em; }
.wd-hs-head b { font-size: 1.5rem; }
.wd-hs-list { flex: 1; overflow: auto; padding: 0 12px 16px; }
.wd-hs-item { display: flex; gap: 12px; width: 100%; padding: 11px 12px; border: none; border-radius: 10px; background: none; color: inherit; text-align: left; cursor: pointer; font-size: .82rem; line-height: 1.45; }
.wd-hs-item:hover { background: rgba(0, 0, 0, .05); }
.wd-hs-item.active { background: #fffdf6; box-shadow: 0 6px 18px rgba(0, 0, 0, .06); }
.wd-hs-item b { flex: 0 0 52px; font-size: .78rem; color: #8a7a5c; font-weight: 600; }
.wd-hs-item span { flex: 1; }
.wd-hs-main { flex: 1; overflow: auto; padding: 38px 46px; }
.wd-hs-title { margin: 0 0 28px; font-size: 1.5rem; line-height: 1.4; font-weight: 700; }
.wd-hs-body p { margin: 0 0 18px; font-size: .92rem; line-height: 2; color: #4a4030; text-indent: 2em; }
.wd-hs-foot { margin-top: 26px; text-align: right; font-size: .76rem; color: #9a8a6a; }
.wd-we { position: relative; height: clamp(420px, 62vh, 600px); overflow: hidden; background: radial-gradient(circle at 50% 30%, #fff, #f6f2ec 70%); color: #2b2b2b; }
.wd-we-bg { position: absolute; inset: 0; pointer-events: none; }
.wd-we-bg span { position: absolute; font-size: 2rem; opacity: .5; animation: wdWeFloat 4s ease-in-out infinite; }
@keyframes wdWeFloat {
0%, 100% { transform: translateY(0) rotate(-6deg); }
50% { transform: translateY(-14px) rotate(6deg); }
}
.wd-we-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 18px; }
.wd-we-title { font-size: 2rem; font-weight: 800; letter-spacing: .06em; }
.wd-we-result { min-height: 2.6rem; font-size: 2rem; font-weight: 900; color: #f08a24; }
.wd-we-result.pop { animation: wdWePop .18s ease; }
@keyframes wdWePop {
0% { transform: scale(.82); opacity: .4; }
100% { transform: scale(1); opacity: 1; }
}
.wd-we-start { padding: 12px 54px; border: none; border-radius: 999px; background: linear-gradient(135deg, #ff9a3c, #f07a10); color: #fff; font-size: 1.05rem; font-weight: 700; cursor: pointer; box-shadow: 0 12px 28px rgba(240, 122, 16, .35); }
.wd-we-start:disabled { opacity: .6; }
.wd-we-friend, .wd-we-menu { position: absolute; bottom: 22px; z-index: 2; padding: 10px 18px; border: none; border-radius: 999px; font-size: .84rem; font-weight: 600; cursor: pointer; color: #fff; }
.wd-we-friend { left: 24px; background: #4a90e2; }
.wd-we-menu { right: 24px; background: #f08a24; }
.wd-hd { display: flex; position: relative; height: clamp(460px, 70vh, 660px); background: #17181c; color: #f2f4f8; }
.wd-hd-side { flex: 0 0 300px; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-right: 1px solid rgba(255, 255, 255, .07); overflow: auto; }
.wd-hd-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .84rem; }
.wd-hd-open { border: none; background: none; color: #9aa4b2; cursor: pointer; }
.wd-hd-label { margin-top: 8px; font-size: .76rem; color: #9aa4b2; }
.wd-hd-colors { display: flex; gap: 8px; }
.wd-hd-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.wd-hd-color.active { border-color: #4a90e2; box-shadow: 0 0 0 2px rgba(74, 144, 226, .35); }
.wd-hd-tabs { display: flex; gap: 6px; }
.wd-hd-tabs button { flex: 1; padding: 7px 0; border: none; border-radius: 8px; background: rgba(255, 255, 255, .06); color: #cfd6e0; font-size: .78rem; cursor: pointer; }
.wd-hd-tabs button.active { background: #4a90e2; color: #fff; }
.wd-hd-thumbs { display: flex; gap: 8px; overflow: auto; padding-bottom: 4px; }
.wd-hd-thumb { flex: 0 0 44px; height: 44px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.wd-hd-thumb.active { border-color: #4a90e2; }
.wd-hd-opacity b { font-size: .76rem; color: #9aa4b2; }
.wd-hd-opacity input { flex: 1; accent-color: #4a90e2; }
.wd-hd-done { margin-top: auto; padding: 11px; border: none; border-radius: 10px; background: #4a90e2; color: #fff; font-weight: 700; cursor: pointer; }
.wd-hd-main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 22px; overflow: auto; }
.wd-hd-sizes { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .07); }
.wd-hd-sizes button { padding: 6px 26px; border: none; border-radius: 999px; background: none; color: #cfd6e0; font-size: .8rem; cursor: pointer; }
.wd-hd-sizes button.active { background: #4a90e2; color: #fff; }
.wd-hd-preview-label { margin: 14px 0 18px; font-size: .76rem; color: #9aa4b2; }
.wd-hd-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: min(520px, 100%); }
.wd-hd.size-sm .wd-hd-preview { width: min(420px, 100%); }
.wd-hd.size-lg .wd-hd-preview { width: min(600px, 100%); }
.wd-hd-card { position: relative; min-height: 120px; border-radius: 14px; overflow: hidden; background-size: cover; background-position: center; }
.wd-hd-card-mask { position: absolute; inset: 0; }
.wd-hd-card-main { position: relative; z-index: 1; padding: 16px; }
.wd-hd-card-days { display: flex; align-items: baseline; gap: 4px; }
.wd-hd-card-days b { font-size: 2rem; line-height: 1; }
.wd-hd-card-days span { font-size: .8rem; }
.wd-hd-card-name { margin-top: 6px; font-size: .9rem; font-weight: 600; }
.wd-hd-card-date { margin-top: 2px; font-size: .72rem; opacity: .8; }
.wd-hd-empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: #9aa4b2; font-size: .84rem; }
.wd-hd-list { position: absolute; left: 0; top: 0; bottom: 0; width: 300px; z-index: 5; display: flex; flex-direction: column; background: #1b1d22; border-right: 1px solid rgba(255, 255, 255, .08); }
.wd-hd-list[hidden] { display: none; }
.wd-hd-list-head { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.wd-hd-back { border: none; background: none; color: #cfd6e0; font-size: 1.2rem; cursor: pointer; }
.wd-hd-list-body { flex: 1; overflow: auto; padding: 8px 14px; }
.wd-hd-list-item { display: flex; align-items: center; gap: 10px; padding: 11px 4px; font-size: .82rem; border-bottom: 1px solid rgba(255, 255, 255, .045); }
.wd-hd-list-item span { flex: 1; }
.wd-hd-list-item small { color: #9aa4b2; font-size: .72rem; }
.wd-hd-list-item input { accent-color: #4a90e2; }
.wd-cv { display: flex; height: clamp(460px, 70vh, 640px); }
.wd-cv-side { flex: 0 0 170px; overflow: auto; padding: 14px 8px; border-right: 1px solid rgba(255, 255, 255, .07); background: #1a1c21; }
.wd-cv-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; border-radius: 9px; background: none; color: #cfd6e0; font-size: .8rem; text-align: left; cursor: pointer; }
.wd-cv-item i { width: 16px; opacity: .7; }
.wd-cv-item.active { background: #4a90e2; color: #fff; }
.wd-cv-main { flex: 1; overflow: auto; padding: 22px; display: flex; flex-direction: column; justify-content: center; }
.wd-cv-form { display: flex; flex-direction: column; gap: 12px; max-width: 460px; margin: 0 auto; width: 100%; }
.wd-cv-field { display: flex; align-items: center; gap: 12px; }
.wd-cv-field > span { flex: 0 0 80px; font-size: .8rem; color: #9aa4b2; }
.wd-cv-field input, .wd-cv-field select { flex: 1; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 9px; background: rgba(255, 255, 255, .05); color: #f2f4f8; font-size: .86rem; outline: none; }
.wd-cv-result { display: flex; align-items: baseline; gap: 8px; padding: 18px; border-radius: 12px; background: rgba(74, 144, 226, .1); }
.wd-cv-result > span { font-size: .78rem; color: #9aa4b2; }
.wd-cv-result b { font-size: 1.8rem; font-weight: 800; color: #6db3ff; }
.wd-cv-result em { font-size: .8rem; color: #9aa4b2; font-style: normal; }
.wd-cv-tip { font-size: .74rem; color: #9aa4b2; }
.wd-cv-calc { display: flex; flex-direction: column; gap: 14px; max-width: 420px; margin: 0 auto; width: 100%; }
.wd-cv-display { padding: 16px; border-radius: 12px; background: rgba(0, 0, 0, .25); text-align: right; }
.wd-cv-expr { min-height: 1.1em; font-size: .78rem; color: #9aa4b2; overflow: hidden; text-overflow: ellipsis; }
.wd-cv-big { font-size: 2rem; font-weight: 700; color: #f2f4f8; }
.wd-cv-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.wd-cv-key { padding: 13px 0; border: none; border-radius: 9px; background: rgba(255, 255, 255, .07); color: #f2f4f8; font-size: .95rem; cursor: pointer; }
.wd-cv-key.op { background: rgba(74, 144, 226, .18); color: #8bc0ff; }
.wd-cv-key.eq { background: #4a90e2; color: #fff; }
.wd-cv-key.wide { grid-column: span 2; font-size: .82rem; }
.wd-cv-kin { display: flex; flex-direction: column; gap: 2px; max-width: 460px; margin: 0 auto; width: 100%; }
.wd-cv-kin div { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .055); font-size: .84rem; }
.wd-cv-kin b { color: #6db3ff; }
.wd-cd { display: flex; height: clamp(480px, 72vh, 680px); background: #141519; }
.wd-cd-side { flex: 0 0 190px; display: flex; flex-direction: column; padding: 16px 10px; border-right: 1px solid rgba(255, 255, 255, .07); background: #191b20; }
.wd-cd-brand { display: flex; align-items: center; gap: 8px; padding: 6px 10px 16px; font-size: 1rem; font-weight: 700; }
.wd-cd-brand i { color: #4a90e2; }
.wd-cd-cats { display: flex; flex-direction: column; gap: 2px; }
.wd-cd-cat { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: none; border-radius: 8px; background: none; color: #cfd6e0; font-size: .8rem; cursor: pointer; text-align: left; }
.wd-cd-cat i { width: 15px; opacity: .7; }
.wd-cd-cat span { flex: 1; }
.wd-cd-cat b { font-size: .72rem; color: #8f99a8; }
.wd-cd-cat.active { background: rgba(74, 144, 226, .16); color: #8bc0ff; }
.wd-cd-sidefoot { margin-top: auto; padding: 10px; color: #8f99a8; }
.wd-cd-mid { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 16px; }
.wd-cd-tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.wd-cd-tabs [data-tab] { padding: 6px 14px; border: none; border-radius: 999px; background: rgba(255, 255, 255, .06); color: #cfd6e0; font-size: .78rem; cursor: pointer; }
.wd-cd-tabs [data-tab].active { background: #4a90e2; color: #fff; }
.wd-cd-new { margin-left: auto; padding: 7px 14px; border: none; border-radius: 999px; background: #4a90e2; color: #fff; font-size: .78rem; font-weight: 600; cursor: pointer; }
.wd-cd-list { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.wd-cd-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 12px; background: #1b1d22; color: #f2f4f8; text-align: left; cursor: pointer; }
.wd-cd-card.active { border-color: rgba(74, 144, 226, .6); background: rgba(74, 144, 226, .12); }
.wd-cd-card-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, .06); color: #8bc0ff; }
.wd-cd-card-main { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.wd-cd-card-main b { font-size: .88rem; }
.wd-cd-card-main small { font-size: .72rem; color: #8f99a8; }
.wd-cd-card-days { font-size: .76rem; color: #8f99a8; }
.wd-cd-card-days b { font-size: 1rem; color: #6db3ff; }
.wd-cd-empty { padding: 60px 0; text-align: center; color: #8f99a8; font-size: .82rem; }
.wd-cd-form { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: #1b1d22; }
.wd-cd-form[hidden] { display: none; }
.wd-cd-form input, .wd-cd-form select { padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; background: rgba(255, 255, 255, .05); color: #f2f4f8; font-size: .8rem; }
.wd-cd-form input[name=title] { flex: 1; min-width: 120px; }
.wd-cd-form button { padding: 8px 14px; border: none; border-radius: 8px; background: #4a90e2; color: #fff; font-size: .8rem; cursor: pointer; }
.wd-cd-form .wd-cd-cancel { background: rgba(255, 255, 255, .08); color: #cfd6e0; }
.wd-cd-detail { flex: 0 0 300px; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-left: 1px solid rgba(255, 255, 255, .07); background: #191b20; overflow: auto; }
.wd-cd-detail-hero { padding: 18px; border-radius: 14px; background: linear-gradient(135deg, #1b2b4a, #2a3f66); }
.wd-cd-detail-title { font-size: .9rem; opacity: .9; }
.wd-cd-detail-title em { font-style: normal; color: #8bc0ff; }
.wd-cd-detail-days { display: flex; align-items: baseline; gap: 4px; margin: 8px 0 4px; }
.wd-cd-detail-days b { font-size: 2.4rem; line-height: 1; font-weight: 800; }
.wd-cd-detail-days span { font-size: .82rem; opacity: .8; }
.wd-cd-detail-date { font-size: .72rem; opacity: .65; }
.wd-cd-units { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.wd-cd-units button { flex: 1; padding: 6px 0; border: none; border-radius: 999px; background: none; color: #cfd6e0; font-size: .76rem; cursor: pointer; }
.wd-cd-units button.active { background: #4a90e2; color: #fff; }
.wd-cd-meta { display: flex; flex-direction: column; gap: 2px; }
.wd-cd-meta > div { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: .78rem; }
.wd-cd-meta span { color: #8f99a8; }
.wd-cd-switch { position: relative; width: 34px; height: 19px; border-radius: 999px; background: rgba(255, 255, 255, .14); cursor: pointer; transition: background .15s; }
.wd-cd-switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .15s; }
.wd-cd-switch.on { background: #4a90e2; }
.wd-cd-switch.on::after { transform: translateX(15px); }
.wd-cd-actions { display: flex; gap: 8px; margin-top: auto; }
.wd-cd-edit, .wd-cd-del { flex: 1; padding: 9px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 9px; background: none; color: #cfd6e0; font-size: .78rem; cursor: pointer; }
.wd-cd-del { color: #ff8a8a; border-color: rgba(255, 138, 138, .3); }
.wd-ow { display: flex; height: clamp(460px, 70vh, 640px); background: #141519; }
.wd-ow-preview { flex: 0 0 46%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; border-right: 1px solid rgba(255, 255, 255, .07); background: radial-gradient(circle at 50% 40%, #24262c, #141519); }
.wd-ow-preview-label { font-size: .76rem; color: #8f99a8; }
.wd-ow-card { position: relative; width: min(360px, 100%); padding: 20px; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 48px rgba(0, 0, 0, .4); }
.wd-ow-card-label { font-size: .76rem; opacity: .8; }
.wd-ow-card-time { margin: 6px 0 14px; font-size: 2.4rem; font-weight: 800; letter-spacing: .02em; }
.wd-ow-card-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.wd-ow-card-stats > div { padding: 8px; border-radius: 9px; background: rgba(255, 255, 255, .08); }
.wd-ow-card-stats span { display: block; font-size: .68rem; opacity: .75; }
.wd-ow-card-stats b { font-size: .86rem; }
.wd-ow-cat { position: absolute; right: 10px; bottom: 6px; font-size: 2.6rem; opacity: .9; }
.wd-ow-dots { display: flex; gap: 6px; }
.wd-ow-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.wd-ow-dots i:first-child { background: #4a90e2; }
.wd-ow-settings { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; overflow: auto; }
.wd-ow-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; font-size: .8rem; }
.wd-ow-row > span { flex: 0 0 66px; color: #9aa4b2; }
.wd-ow-days { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.wd-ow-days button, .wd-ow-toggles button, .wd-ow-bg button { padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; background: rgba(255, 255, 255, .04); color: #cfd6e0; font-size: .74rem; cursor: pointer; }
.wd-ow-days button.active, .wd-ow-toggles button.active, .wd-ow-bg button.active { background: #4a90e2; border-color: #4a90e2; color: #fff; }
.wd-ow-quick { color: #8bc0ff !important; }
.wd-ow-time { display: flex; align-items: center; gap: 6px; }
.wd-ow-time input, .wd-ow-font, .wd-ow-payday { padding: 7px 9px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; background: rgba(255, 255, 255, .05); color: #f2f4f8; font-size: .78rem; }
.wd-ow-bg { display: flex; gap: 6px; }
.wd-ow-swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.wd-ow-swatches button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.wd-ow-swatches button.active { border-color: #4a90e2; box-shadow: 0 0 0 2px rgba(74, 144, 226, .35); }
.wd-ow-toggles { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.wd-ow-income { display: flex; align-items: center; gap: 6px; }
.wd-ow-income input { width: 90px; padding: 7px 9px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; background: rgba(255, 255, 255, .05); color: #f2f4f8; text-align: center; }
.wd-ow-income button { width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 8px; background: rgba(255, 255, 255, .05); color: #cfd6e0; cursor: pointer; }
.wd-ow-done { margin-top: auto; padding: 11px; border: none; border-radius: 10px; background: #4a90e2; color: #fff; font-weight: 700; cursor: pointer; }
.wd-hot { display: flex; height: clamp(480px, 72vh, 680px); background: #141519; }
.wd-hot-side { flex: 0 0 210px; display: flex; flex-direction: column; gap: 14px; padding: 16px 12px; border-right: 1px solid rgba(255, 255, 255, .07); background: #191b20; }
.wd-hot-brand { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; }
.wd-hot-brand i { color: #ff5a3c; }
.wd-hot-search { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, .05); }
.wd-hot-search i { font-size: .76rem; color: #8f99a8; }
.wd-hot-search input { flex: 1; min-width: 0; border: none; background: none; color: #f2f4f8; font-size: .78rem; outline: none; }
.wd-hot-subs { display: flex; flex-direction: column; gap: 4px; }
.wd-hot-sub { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: none; border-radius: 8px; background: none; color: #cfd6e0; font-size: .8rem; cursor: pointer; }
.wd-hot-sub span { flex: 1; text-align: left; }
.wd-hot-sub b { color: #8f99a8; }
.wd-hot-sub.active { background: rgba(74, 144, 226, .14); color: #8bc0ff; }
.wd-hot-sidefoot { margin-top: auto; font-size: .72rem; color: #8f99a8; }
.wd-hot-main { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 16px 18px; }
.wd-hot-tabs { display: flex; gap: 6px; overflow: auto; padding-bottom: 10px; }
.wd-hot-tabs button { flex: 0 0 auto; padding: 6px 14px; border: none; border-radius: 999px; background: rgba(255, 255, 255, .06); color: #cfd6e0; font-size: .76rem; cursor: pointer; }
.wd-hot-tabs button.active { background: #4a90e2; color: #fff; }
.wd-hot-head { display: flex; align-items: center; gap: 8px; padding: 8px 0 10px; font-size: .86rem; font-weight: 600; }
.wd-hot-dot { padding: 2px 8px; border-radius: 6px; color: #fff; font-size: .72rem; }
.wd-hot-head i { margin-left: auto; color: #8f99a8; }
.wd-hot-updated { margin-left: auto; font-style: normal; font-size: .72rem; font-weight: 500; color: #8f99a8; }
.wd-hot-list { flex: 1; overflow: auto; display: flex; flex-direction: column; }
.wd-hot-item { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid rgba(255, 255, 255, .045); color: #f2f4f8; text-decoration: none; font-size: .84rem; }
.wd-hot-item:hover { background: rgba(255, 255, 255, .03); }
.wd-hot-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-hot-item b { font-size: .74rem; color: #8f99a8; font-weight: 500; }
.wd-hot-rank { flex: 0 0 18px; font-style: normal; font-size: .8rem; font-weight: 700; color: #8f99a8; text-align: center; }
.wd-hot-rank.r1 { color: #ff4d4f; }
.wd-hot-rank.r2 { color: #ff7a45; }
.wd-hot-rank.r3 { color: #ffa940; }
.wd-hot-loading { padding: 60px 0; text-align: center; font-size: .82rem; color: #8f99a8; }
.wd-hot-foot { padding-top: 10px; font-size: .7rem; color: #8f99a8; text-align: center; }
.wd-pm { position: relative; height: clamp(440px, 66vh, 620px); overflow: auto; background: radial-gradient(circle at 50% 0, #2a2035, #17121f 60%); color: #f6f1ff; }
.wd-pm-waves { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; overflow: hidden; pointer-events: none; }
.wd-pm-waves i { position: absolute; left: -10%; width: 120%; height: 120px; border-radius: 50%; background: rgba(170, 120, 200, .22); }
.wd-pm-waves i:nth-child(1) { bottom: -40px; }
.wd-pm-waves i:nth-child(2) { bottom: -70px; background: rgba(140, 90, 180, .18); }
.wd-pm-waves i:nth-child(3) { bottom: -100px; background: rgba(110, 70, 150, .14); }
.wd-pm-main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 50px 30px; text-align: center; }
.wd-pm-lines p { margin: 0 0 14px; font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: .08em; font-family: "Noto Serif SC", "Songti SC", serif; }
.wd-pm-src { margin: 14px 0 22px; font-size: .82rem; opacity: .65; }
.wd-pm-next { padding: 9px 26px; border: none; border-radius: 8px; background: rgba(255, 255, 255, .12); color: #fff; font-size: .82rem; cursor: pointer; }
.wd-pm-fullbtn { position: absolute; right: 20px; top: 14px; z-index: 2; border: none; background: none; color: #cfc6e6; font-size: .78rem; cursor: pointer; }
.wd-pm-full { display: none; position: relative; z-index: 1; margin: 0 auto 30px; width: min(620px, 86%); padding: 20px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(0, 0, 0, .25); }
.wd-pm-full.open { display: block; }
.wd-pm.show-full .wd-pm-main { min-height: auto; padding-bottom: 20px; }
.wd-pm-full-title { margin-bottom: 12px; font-size: .9rem; font-weight: 700; }
.wd-pm-full p { margin: 0 0 6px; font-size: .82rem; line-height: 1.9; opacity: .85; }
.w-cd {
position: relative;
flex-direction: row;
align-items: center;
gap: clamp(8px, 3cqw, 16px);
height: 100%;
padding: clamp(12px, 4cqh, 20px) clamp(14px, 3cqw, 20px);
overflow: hidden;
background: #0b1220;
color: #fff;
}
.w-cd-bg {
position: absolute;
inset: 0;
background:
radial-gradient(120px 120px at 74% 26%, rgba(120, 160, 255, 0.18), transparent 70%),
radial-gradient(320px 320px at 82% 10%, rgba(80, 110, 200, 0.28), transparent 70%),
linear-gradient(135deg, #0a1020, #12203a 60%, #0a1324);
}
.w-cd-bg::after {
content: '';
position: absolute;
top: clamp(4px, 4cqh, 22px);
right: clamp(8px, 6cqw, 44px);
width: clamp(46px, 34cqh, 104px);
height: clamp(46px, 34cqh, 104px);
border-radius: 50%;
background: radial-gradient(circle at 34% 30%, #dfe6ff, #7f92c8 52%, #2a3a66 100%);
box-shadow: 0 0 40px rgba(120, 150, 255, 0.45);
opacity: 0.92;
}
.w-cd-hero {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
min-width: 0;
}
.w-cd-hero-name { font-size: clamp(0.62rem, 4.6cqh, 0.82rem); color: #c7d2e6; }
.w-cd-hero-name b { color: #fff; }
.w-cd-hero-name em { font-style: normal; color: #8bc0ff; margin-left: 2px; }
.w-cd-hero-days { display: flex; align-items: baseline; gap: 4px; }
.w-cd-hero-days b {
font-size: clamp(1.6rem, 18cqh, 2.6rem);
font-weight: 800;
line-height: 1;
color: #fff;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.w-cd-hero-days span { font-size: clamp(0.6rem, 4.4cqh, 0.78rem); color: #a9b6cc; }
.w-cd-hero-date { font-size: clamp(0.52rem, 3.8cqh, 0.66rem); color: #8b98b0; }
.w-cd-list {
position: relative;
z-index: 1;
flex: 0 0 46%;
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(4px, 2.6cqh, 12px);
}
.w-cd-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
font-size: clamp(0.6rem, 4.4cqh, 0.78rem);
color: #d7e0f0;
}
.w-cd-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-cd-row b { color: #8bc0ff; font-weight: 700; white-space: nowrap; }
.w-cd-empty { position: relative; z-index: 1; padding: 24px 0; text-align: center; font-size: 0.76rem; opacity: 0.6; }
.w-hot { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.w-hot-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.w-hot-tabs { display: flex; gap: 6px; font-size: .72rem; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.w-hot-tabs::-webkit-scrollbar { display: none; }
.w-hot-tabs span { flex: 0 0 auto; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .06); opacity: .7; cursor: pointer; }
.w-hot-tabs span.active { background: rgba(74, 144, 226, .25); opacity: 1; color: #8bc0ff; }
.w-hot-title { flex: 0 0 auto; font-size: .72rem; font-weight: 700; opacity: .82; white-space: nowrap; }
.w-hot-list { display: flex; flex-direction: column; gap: 5px; }
.w-hot-row { display: flex; align-items: center; gap: 8px; font-size: .74rem; }
.w-hot-row i { flex: 0 0 14px; font-style: normal; font-weight: 700; color: #8f99a8; text-align: center; }
.w-hot-row:nth-child(1) i { color: #ff4d4f; }
.w-hot-row:nth-child(2) i { color: #ff7a45; }
.w-hot-row:nth-child(3) i { color: #ffa940; }
.w-hot-row span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-hot-row b { font-size: .68rem; opacity: .6; font-weight: 500; white-space: nowrap; }
.w-hot-loading { padding: 20px 0; text-align: center; font-size: .72rem; opacity: .6; }
.w-hot-foot { margin-top: auto; text-align: center; font-size: .68rem; opacity: .5; }
.wd-my-mallet { transform-origin: 90% 80%; }
.wd-my-fish.hit .wd-my-mallet { animation: wdMyMallet .3s ease; }
@keyframes wdMyMallet {
0% { transform: rotate(26deg); }
40% { transform: rotate(-28deg); }
100% { transform: rotate(26deg); }
}
@media (max-width: 860px) {
.wd-hs-side { flex: 0 0 44%; }
.wd-hs-main { padding: 22px 18px; }
.wd-hs-title { font-size: 1.15rem; }
.wd-cd-side, .wd-cd-detail { display: none; }
.wd-cv-side { flex: 0 0 118px; }
.wd-cv-item span { display: none; }
.wd-cv-item { justify-content: center; }
.wd-ow { flex-direction: column; height: auto; }
.wd-ow-preview { flex: 0 0 auto; }
.wd-hot-side { flex: 0 0 118px; }
.wd-hot-sub span { font-size: .74rem; }
.wd-hd-side { flex: 0 0 210px; }
.wd-we-title { font-size: 1.5rem; }
.wd-we-result { font-size: 1.5rem; }
}
#p-bg { padding-top: 20px; }
.set-sec {
margin-bottom: 22px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.set-sec:last-child { border-bottom: none; padding-bottom: 0; }
.set-sec-title {
display: block;
margin-bottom: 12px;
font-size: 0.82rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
}
.set-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 14px;
font-size: 0.8rem;
}
.set-row-label { color: rgba(255, 255, 255, 0.85); }
.set-select {
width: auto;
min-width: 132px;
padding: 8px 12px;
font-size: 0.78rem;
border-radius: 10px;
}
.theme-cards { display: flex; gap: 16px; }
.theme-card {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 10px;
border: 2px solid transparent;
border-radius: 16px;
background: rgba(255, 255, 255, 0.04);
cursor: pointer;
font-family: inherit;
color: inherit;
transition: border-color 0.15s, background 0.15s;
}
.theme-card:hover { background: rgba(255, 255, 255, 0.07); }
.theme-card.active { border-color: var(--color-primary); background: rgba(59, 130, 246, 0.08); }
.theme-preview {
width: 100%;
aspect-ratio: 16 / 10;
display: flex;
flex-direction: column;
gap: 10px;
padding: 14px 12px;
border-radius: 12px;
overflow: hidden;
}
.theme-preview.light { background: linear-gradient(160deg, #f4f6fa, #ffffff); color: #1c1c1e; }
.theme-preview.dark { background: linear-gradient(160deg, #2a2a2e, #131316); color: #e6e6ea; }
.tp-time { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; }
.tp-grid {
flex: 1;
border-radius: 6px;
background-image: radial-gradient(currentColor 1.4px, transparent 1.5px);
background-size: 13px 12px;
opacity: 0.18;
}
.theme-card-label {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.75);
padding: 2px 14px;
border-radius: 999px;
}
.theme-card.active .theme-card-label {
background: var(--color-primary);
color: #fff;
}
.switch { position: relative; display: inline-block; flex: 0 0 auto; width: 46px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.18);
border-radius: 999px;
transition: background 0.2s;
cursor: pointer;
}
.switch .slider::before {
content: '';
position: absolute;
left: 3px;
top: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
transition: transform 0.2s;
}
.switch input:checked + .slider { background: var(--color-primary); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.accent-dots { display: flex; flex-wrap: wrap; gap: 10px; }
.accent-dot {
width: 26px;
height: 26px;
border: 2px solid transparent;
border-radius: 50%;
cursor: pointer;
padding: 0;
transition: transform 0.12s, box-shadow 0.12s;
}
.accent-dot:hover { transform: scale(1.08); }
.accent-dot.active { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 0 0 4px var(--color-primary); }
.accent-dot.custom {
background: conic-gradient(#ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ef4444);
}
.wall-preview {
position: relative;
height: 150px;
border-radius: 14px;
overflow: hidden;
background-color: #1c1c22;
background-image: linear-gradient(135deg, #2b2b3a 0%, #14141a 60%, #1f2233 100%);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.wall-preview::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.42));
pointer-events: none;
}
.wall-preview-actions {
position: relative;
z-index: 1;
display: flex;
gap: 12px;
}
.wall-btn {
padding: 9px 20px;
border: none;
border-radius: 10px;
background: #fff;
color: #1c1c1e;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.wall-btn:hover { background: #f2f2f5; }
.wall-btn.ghost { background: rgba(255, 255, 255, 0.9); }
.wall-slider { margin-top: 16px; }
.wall-slider-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.85);
}
.wall-slider-head b { font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.55); }
.wall-range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 4px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.18);
outline: none;
cursor: pointer;
}
.wall-range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--color-primary);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.wall-range::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
border: 3px solid var(--color-primary);
}
.wp-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.wp-chip {
padding: 7px 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.7);
font-size: 0.76rem;
cursor: pointer;
transition: all 0.14s;
}
.wp-chip:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.wp-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.set-more > summary {
cursor: pointer;
list-style: none;
margin-bottom: 0;
}
.set-more > summary::-webkit-details-marker { display: none; }
.set-more[open] > summary { margin-bottom: 14px; }
#wall-switch-btn {
position: fixed;
right: 26px;
bottom: 26px;
z-index: 60;
width: 46px;
height: 46px;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: rgba(20, 20, 24, 0.55);
color: #fff;
font-size: 1rem;
cursor: pointer;
backdrop-filter: blur(8px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
transition: transform 0.15s, background 0.15s;
}
#wall-switch-btn:hover { transform: scale(1.08); background: rgba(20, 20, 24, 0.75); }
.mode-toggle {
position: fixed;
top: 18px;
right: 20px;
z-index: 60;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 13px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
background: rgba(20, 20, 24, 0.55);
color: #e8eaf0;
font-size: 0.78rem;
font-family: var(--font-main);
cursor: pointer;
backdrop-filter: blur(8px);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
transition: transform 0.15s, background 0.15s;
}
.mode-toggle:hover { transform: scale(1.05); background: rgba(30, 30, 36, 0.78); }
.mode-toggle i { font-size: 0.82rem; }
body.theme-light .mode-toggle { background: rgba(255, 255, 255, 0.78); color: #1f2937; border-color: rgba(0, 0, 0, 0.12); }
body.theme-light .mode-toggle:hover { background: #ffffff; }
body.simple-mode .widget-tile,
body.simple-mode .widget-strip,
body.simple-mode #quote-container,
body.simple-mode #weather-widget,
body.simple-mode #grid,
body.simple-mode #sidebar,
body.simple-mode #sidebar-toggle,
body.simple-mode #exit-edit-btn,
body.simple-mode #wall-switch-btn,
body.simple-mode #side-panel,
body.simple-mode #batch-toolbar,
body.simple-mode #widget-batch-bar { display: none !important; }
body.simple-mode #main-view {
height: 100vh;
width: 100vw;
margin-left: 0;
justify-content: center;
align-items: center;
padding: 0;
overflow-y: hidden;
}
body.simple-mode #clock-area { margin-bottom: 24px; }
body.simple-mode .search-container { margin-bottom: 0; }
body.theme-light .set-sec { border-bottom-color: rgba(0, 0, 0, 0.08); }
body.theme-light .set-sec-title { color: rgba(0, 0, 0, 0.85); }
body.theme-light .set-row-label { color: rgba(0, 0, 0, 0.8); }
body.theme-light .theme-card { background: rgba(0, 0, 0, 0.03); }
body.theme-light .theme-card:hover { background: rgba(0, 0, 0, 0.05); }
body.theme-light .theme-card-label { color: rgba(0, 0, 0, 0.6); }
body.theme-light .switch .slider { background: rgba(0, 0, 0, 0.18); }
body.theme-light .wall-slider-head { color: rgba(0, 0, 0, 0.8); }
body.theme-light .wall-slider-head b { color: rgba(0, 0, 0, 0.5); }
body.theme-light .wall-range { background: rgba(0, 0, 0, 0.14); }
body.theme-light .wp-chip { border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.65); }
body.theme-light .wp-chip:hover { background: rgba(0, 0, 0, 0.07); color: #111; }
body.theme-light .accent-dot.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary); }
.support-tip {
margin: 0 0 12px;
font-size: 0.78rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.62);
}
.support-btns { display: flex; gap: 10px; }
.support-btns .btn-m { flex: 1; }
.btn-m.ghost {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.85);
}
.btn-m.ghost:hover { background: rgba(255, 255, 255, 0.12); }
.support-badge {
margin-top: 12px;
padding: 8px 12px;
border-radius: 10px;
background: rgba(16, 185, 129, 0.12);
color: #10b981;
font-size: 0.76rem;
}
.support-links {
display: flex;
gap: 16px;
margin-top: 12px;
font-size: 0.76rem;
}
.support-links a { color: rgba(255, 255, 255, 0.55); }
.support-links a:hover { color: var(--color-primary); }
.donation-sec { margin-top: 4px; }
.donation-count { font-size: 0.82rem; color: var(--color-primary); margin-bottom: 8px; }
.donation-list { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow: auto; }
.donation-list li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 0.8rem; }
.dn-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,0.85); }
.dn-amt { color: var(--color-primary); font-weight: 600; white-space: nowrap; }
.dn-time { opacity: 0.45; font-size: 0.72rem; white-space: nowrap; }
.donation-empty { font-size: 0.78rem; opacity: 0.5; padding: 6px 0; }
.ad-slot {
margin-top: 14px;
padding-top: 10px;
border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.ad-slot-label {
margin-bottom: 6px;
font-size: 0.66rem;
letter-spacing: 0.08em;
color: rgba(255, 255, 255, 0.35);
}
.bk-list { display: flex; flex-direction: column; gap: 8px; }
.bk-empty {
padding: 12px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
font-size: 0.76rem;
color: rgba(255, 255, 255, 0.45);
text-align: center;
}
.bk-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
}
.bk-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-info b { font-size: 0.8rem; font-weight: 600; }
.bk-info span { font-size: 0.7rem; color: rgba(255, 255, 255, 0.45); }
.bk-ops { display: flex; gap: 6px; flex: 0 0 auto; }
.bk-btn {
padding: 5px 12px;
border: none;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
font-size: 0.72rem;
cursor: pointer;
}
.bk-btn:hover { background: var(--color-primary); color: #fff; }
.bk-btn.danger:hover { background: var(--color-danger); }
body.theme-light .support-tip { color: rgba(0, 0, 0, 0.6); }
body.theme-light .btn-m.ghost { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); color: rgba(0, 0, 0, 0.75); }
body.theme-light .ad-slot { border-top-color: rgba(0, 0, 0, 0.1); }
body.theme-light .donation-count { color: var(--color-primary); }
body.theme-light .donation-list li { border-bottom-color: rgba(0,0,0,0.06); }
body.theme-light .dn-name { color: rgba(0,0,0,0.8); }
body.theme-light .ad-slot-label { color: rgba(0, 0, 0, 0.35); }
body.theme-light .bk-item { border-color: rgba(0, 0, 0, 0.08); background: rgba(0, 0, 0, 0.02); }
body.theme-light .bk-info span { color: rgba(0, 0, 0, 0.45); }
body.theme-light .bk-empty { background: rgba(0, 0, 0, 0.02); color: rgba(0, 0, 0, 0.45); }
body.theme-light .bk-btn { background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.8); }
body.theme-light .support-links a { color: rgba(0, 0, 0, 0.5); }
.onb-overlay {
position: fixed;
inset: 0;
z-index: 3000;
background: rgba(0,0,0,0.75);
backdrop-filter: blur(16px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.onb-overlay.show { opacity: 1; visibility: visible; }
.onb-card {
background: rgba(30,30,40,0.95);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 24px;
padding: 40px 36px 28px;
max-width: 420px;
width: 90%;
text-align: center;
transform: scale(0.92) translateY(12px);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.onb-overlay.show .onb-card { transform: scale(1) translateY(0); }
.onb-icon { font-size: 3rem; margin-bottom: 12px; }
.onb-title { font-size: 1.3rem; font-weight: 600; margin-bottom: 8px; }
.onb-desc { font-size: 0.92rem; opacity: 0.7; line-height: 1.6; margin-bottom: 24px; }
.onb-btns { display: flex; gap: 12px; justify-content: center; }
.onb-btn {
padding: 10px 24px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.15);
background: rgba(255,255,255,0.06);
color: #fff;
cursor: pointer;
font-size: 0.9rem;
transition: background 0.2s;
}
.onb-btn:hover { background: rgba(255,255,255,0.14); }
.onb-btn.primary { background: #3b82f6; border-color: #3b82f6; }
.onb-btn.primary:hover { background: #2563eb; }
.onb-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; }
.onb-dots span {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(255,255,255,0.25);
transition: background 0.2s;
}
.onb-dots span.active { background: #3b82f6; }
.icon-box.broken::after {
content: '⚠';
position: absolute;
top: -4px; right: -4px;
background: #ef4444;
color: #fff;
font-size: 0.6rem;
width: 16px; height: 16px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(239,68,68,0.4);
z-index: 2;
}