:root{--bg-primary:#ffffff;--bg-secondary:#f8fafc;--bg-tertiary:#f1f5f9;--bg-hover:#f0fdfa;--bg-code:#f9fafb;--text-primary:#1e293b;--text-secondary:#64748b;--text-muted:#94a3b8;--text-weakest:#cbd5e1;--text-white:#ffffff;--border-color:#e2e8f0;--border-light:#f0f0f0;--border-input:#e0e0e0;--accent:#14b8a6;--accent-hover:#0d9488;--accent-active:#0f766e;--accent-bg:#f0fdfa;--accent-bg-hover:#ccfbf1;--accent-focus-ring:rgba(20,184,166,0.08);--accent-focus-ring-md:rgba(20,184,166,0.1);--shadow-sm:rgba(0,0,0,0.06);--shadow-md:rgba(0,0,0,0.08);--shadow-lg:rgba(0,0,0,0.12);--panel-header-bg:#f8f8f8;--panel-header-border:#eee;--scrollbar-thumb:#d1d5db;--selection-bg:rgba(20,184,166,0.2);--tooltip-bg:#334155;--cm-gutter-bg:#fafafa;--cm-gutter-border:#eee;--cm-text:#000;--cm-border:#ddd;--navbar-from:#ffffff;--navbar-to:#f0fdfa;--navbar-shadow:rgba(20,184,166,0.08);--status-bg:#333;--drag-handle:#ccc;--bg-highlight:#fff3cd;--btn-primary-bg:#1e293b;--brand-red:#ac1817;--success-color:#28a745;--error-color:#dc3545} [data-theme="dark"]{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--bg-hover:#293548;--bg-code:#1e293b;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#7c8fa3;--text-weakest:#475569;--text-white:#ffffff;--border-color:#334155;--border-light:#334155;--border-input:#334155;--accent:#2dd4bf;--accent-hover:#14b8a6;--accent-active:#0d9488;--accent-bg:#042f2e;--accent-bg-hover:#064e3b;--accent-focus-ring:rgba(45,212,191,0.15);--accent-focus-ring-md:rgba(45,212,191,0.2);--shadow-sm:rgba(0,0,0,0.2);--shadow-md:rgba(0,0,0,0.3);--shadow-lg:rgba(0,0,0,0.4);--panel-header-bg:#1e293b;--panel-header-border:#334155;--scrollbar-thumb:#475569;--selection-bg:rgba(45,212,191,0.3);--tooltip-bg:#1e293b;--cm-gutter-bg:#0f172a;--cm-gutter-border:#334155;--cm-text:#e2e8f0;--cm-border:#334155;--navbar-from:#0f172a;--navbar-to:#042f2e;--navbar-shadow:rgba(0,0,0,0.3);--status-bg:#334155;--drag-handle:#475569;--bg-highlight:#3d3520;--btn-primary-bg:#334155;--brand-red:#f87171;--success-color:#6ee7b7;--error-color:#f87171} *{margin:0;padding:0;box-sizing:border-box} html,body{height:100%} html{scroll-behavior:smooth}::selection{background:var(--selection-bg);color:inherit}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent)} *{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background-color:var(--bg-secondary);color:var(--text-primary);line-height:1.6;overflow-x:hidden} .navbar{background:linear-gradient(135deg,var(--navbar-from),var(--navbar-to));position:sticky;top:0;z-index:1000;box-shadow:0 1px 3px var(--navbar-shadow),0 2px 8px var(--shadow-sm)} .navbar-content{position:relative;max-width:1400px;margin:0 auto;padding:0 20px;height:52px;display:flex;align-items:center;justify-content:flex-start;gap:12px} .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text-primary);white-space:nowrap;flex-shrink:0} .logo-icon{width:28px;height:28px;border-radius:6px;transition:transform 0.25s ease;flex-shrink:0} .logo-text{font-weight:600;font-size:17px;color:var(--text-primary)} .logo:hover .logo-icon{transform:rotate(-8deg)} .logo:hover{color:var(--text-primary)} .navbar-links{display:flex;gap:0;align-items:center;flex:1;flex-wrap:nowrap;overflow:visible} .nav-dropdown{position:relative;display:inline-flex;align-items:center} .nav-link{display:flex;align-items:center;gap:3px;padding:4px 10px;text-decoration:none;color:var(--text-secondary);font-size:12px;border-radius:6px;white-space:nowrap;transition:color 0.2s ease,background 0.2s ease;cursor:pointer;touch-action:manipulation} .nav-link:hover{color:var(--accent);background:var(--bg-tertiary)} .nav-link.active{color:var(--accent);font-weight:600} .arrow{font-size:10px;margin-left:2px} .dropdown-menu{display:none;position:absolute;top:100%;left:0;right:auto;background:var(--bg-primary);border:none;border-radius:10px;min-width:170px;max-width:280px;box-shadow:0 8px 30px var(--shadow-lg);z-index:999;padding:4px 0;opacity:0;transform:translateY(8px);transition:opacity 0.2s cubic-bezier(0.16,1,0.3,1),transform 0.2s cubic-bezier(0.16,1,0.3,1);overflow:hidden;box-sizing:border-box} .nav-dropdown:hover .dropdown-menu{display:block;opacity:1;transform:translateY(0)} .dropdown-menu a{display:block;padding:6px 16px;color:var(--text-secondary);text-decoration:none;font-size:12px;border:none;background:none;cursor:pointer;transition:all 0.15s ease;width:calc(100% - 8px);margin:1px 4px;border-radius:4px;text-align:left;box-sizing:border-box} .dropdown-menu a:hover{background-color:var(--bg-tertiary);color:var(--accent)} .dropdown-menu a.dropdown-active{background-color:var(--accent-bg);color:var(--accent);font-weight:600} .navbar-right{display:flex;align-items:center;gap:2px;margin-left:auto;flex-shrink:0} .nav-weather{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 8px;border-radius:8px;color:var(--text-secondary);cursor:pointer;transition:all 0.2s ease;user-select:none;white-space:nowrap;touch-action:manipulation} .nav-weather:hover{color:var(--accent);background:var(--accent-bg)} .weather-icon{font-size:16px;line-height:1} .weather-temp{font-weight:500;font-size:13px} .weather-city{font-size:12px;color:var(--text-muted);transition:color 0.2s ease} .weather-city:hover{color:var(--accent);text-decoration:underline} .weather-panel{position:fixed;top:50px;min-width:200px;width:fit-content;z-index:1001;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:10px;box-shadow:0 8px 30px var(--shadow-lg);padding:14px;font-size:13px;color:var(--text-primary);pointer-events:auto} .weather-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .weather-panel-city{font-weight:600;font-size:14px;color:var(--text-primary);cursor:pointer;transition:color 0.2s ease} .weather-panel-city:hover{color:var(--accent)} .weather-panel-desc{font-size:12px;color:var(--text-secondary)} .weather-panel-current{display:flex;align-items:center;gap:8px;margin-bottom:8px} .weather-panel-icon{font-size:28px;line-height:1} .weather-panel-temp{font-size:24px;font-weight:600;color:var(--text-primary)} .weather-panel-detail{display:flex;gap:16px;font-size:12px;color:var(--text-muted);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--border-light)} .weather-panel-forecast{display:flex;flex-direction:column;gap:6px} .weather-forecast-row{display:flex;align-items:center;gap:10px;font-size:12px} .forecast-day{width:80px;color:var(--text-secondary)} .forecast-icon{font-size:14px} .forecast-desc{color:var(--text-secondary);font-size:12px;min-width:36px} .forecast-range{color:var(--text-primary);font-weight:500} .weather-city-header{font-weight:600;font-size:14px;color:var(--text-primary);margin-bottom:10px} .weather-city-search{margin-bottom:8px} .weather-city-search input{width:100%;padding:6px 10px;border:1px solid var(--border-color);border-radius:6px;font-size:13px;outline:none;transition:border-color 0.2s ease;box-sizing:border-box} .weather-city-search input:focus{border-color:var(--accent)} .weather-city-body{display:flex;gap:0;max-height:280px} .city-province-list{width:76px;flex-shrink:0;max-height:280px;overflow-y:auto;border-right:1px solid var(--border-light);padding-right:4px;margin-right:4px} .city-province-item{padding:5px 6px;font-size:12px;color:var(--text-secondary);cursor:pointer;border-radius:4px;transition:all 0.15s ease;white-space:nowrap} .city-province-item:hover{background:var(--accent-bg);color:var(--accent)} .city-province-item.active{background:var(--accent);color:var(--text-white)} .city-detail-list{flex:1;max-height:280px;overflow-y:auto;display:flex;flex-wrap:wrap;gap:2px;align-content:flex-start} .weather-city-item{padding:4px 10px;font-size:12px;color:var(--text-secondary);cursor:pointer;border-radius:4px;transition:all 0.15s ease;white-space:nowrap} .weather-city-item:hover{background:var(--accent-bg);color:var(--accent)} .weather-city-item.active{background:var(--accent);color:var(--text-white)} .weather-city-empty{padding:10px;font-size:12px;color:var(--text-muted);text-align:center;width:100%} .city-province-list::-webkit-scrollbar,.city-detail-list::-webkit-scrollbar{width:4px} .city-province-list::-webkit-scrollbar-thumb,.city-detail-list::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:2px} .hamburger{display:none;background:none;border:none;font-size:22px;color:var(--text-secondary);cursor:pointer;padding:4px 8px;border-radius:6px;transition:background 0.2s ease;touch-action:manipulation} .hamburger:hover{background:var(--bg-tertiary)} .hamburger:active{background:var(--border-color)} .hamburger span{display:block;width:22px;height:2px;background:var(--text-secondary);margin:5px 0;border-radius:1px;transition:all 0.3s ease} .hamburger:hover span{background:var(--accent)} .btn-theme{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;transition:all 0.2s ease} .btn-theme:hover{background:var(--accent-bg);color:var(--accent)} .btn-theme:active{background:var(--accent-bg-hover);transform:scale(0.98)} .btn-theme svg{transition:transform 0.35s ease} .btn-theme:hover svg{transform:rotate(30deg)} .btn-theme .icon-moon{display:block} .btn-theme .icon-sun{display:none} [data-theme="dark"] .btn-theme .icon-moon{display:none} [data-theme="dark"] .btn-theme .icon-sun{display:block} .btn-search{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;transition:all 0.2s ease} .btn-search:hover{background:var(--accent-bg);color:var(--accent)} .btn-search:active{background:var(--accent-bg-hover);transform:scale(0.98)} .btn-search svg{transition:transform 0.35s ease} .btn-search:hover svg{transform:scale(1.1)} .search-panel{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:2000;background:rgba(0,0,0,0.4);backdrop-filter:blur(2px);flex-direction:column;align-items:center;padding-top:80px} .search-input-wrap{width:520px;max-width:calc(100% - 32px);display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px 12px 0 0;box-shadow:0 -4px 24px var(--shadow-lg)} .search-input-wrap svg{flex-shrink:0;color:var(--text-muted)} .search-input{flex:1;border:none;outline:none;font-size:16px;background:transparent;color:var(--text-primary);font-family:inherit} .search-input::placeholder{color:var(--text-muted)} .search-kbd{padding:2px 6px;font-size:11px;font-family:inherit;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-muted);flex-shrink:0} .search-results{width:520px;max-width:calc(100% - 32px);max-height:400px;overflow-y:auto;background:var(--bg-primary);border:1px solid var(--border-color);border-top:none;border-radius:0 0 12px 12px;box-shadow:0 8px 24px var(--shadow-lg)} .search-category{padding:8px 16px 4px;font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px} .search-item{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;color:var(--text-primary);text-decoration:none;transition:background 0.1s ease;cursor:pointer} .search-item:hover,.search-item-active{background:var(--accent-bg)} .search-item-name{font-size:14px;font-weight:500} .search-item-path{font-size:12px;color:var(--text-muted);font-family:'Monaco','Menlo',monospace} .search-empty{padding:24px 16px;text-align:center;color:var(--text-muted);font-size:14px} @media (max-width:768px){.search-panel{padding-top:60px} .search-input-wrap,.search-results{width:calc(100% - 24px);max-width:none} .search-kbd{display:none} } .tag-link{padding:4px 12px;background:var(--accent-bg);border:1px solid transparent;border-radius:6px;font-size:12px;color:var(--accent);text-decoration:none;transition:all 0.15s ease} .tag-link:hover{background:var(--accent);border-color:var(--accent);color:var(--text-white)} [data-theme="dark"] .tag-link{color:var(--accent)} .section-tip{margin-top:16px;padding:20px 16px;background:var(--bg-primary);border-radius:8px;border:none;border-left:3px solid var(--accent);box-shadow:0 1px 3px var(--shadow-sm)} .section-tip-h{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:10px} .section-tip-p{font-size:13px;color:var(--text-secondary);line-height:1.8;margin:0} .section-tip-list{font-size:12px;color:var(--text-secondary);line-height:1.8} .text-link{color:var(--accent)} [data-theme="dark"] .text-link{color:var(--accent)} .text-label{color:var(--text-secondary)} .form-label-sm{display:block;margin-bottom:8px;font-size:12px;color:var(--text-secondary);font-weight:600} .heading-sm{font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:8px} .label-xs{font-size:11px;color:var(--text-secondary);margin-bottom:6px;font-weight:600} .para-sm{font-size:13px;color:var(--text-secondary);line-height:1.8;margin:0 0 8px 0} .para-xs{font-size:12px;color:var(--text-secondary);line-height:1.8;padding-left:0} .para-xs li{margin-left:0;padding-left:0;list-style:none} .code-tag{background:var(--bg-tertiary);padding:1px 4px;border-radius:3px;font-size:12px} .result-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;padding:14px;transition:all 0.2s ease;position:relative} .result-card:hover{border-color:var(--text-muted);box-shadow:0 2px 8px var(--shadow-sm)} .result-card-title{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px} .result-card-value{font-size:15px;color:var(--text-primary);font-weight:500;word-break:break-all} .result-card-copy{position:absolute;top:8px;right:8px;background:var(--bg-primary);color:var(--text-muted);border:none;padding:4px 8px;font-size:12px;cursor:pointer;border-radius:4px;opacity:0;transition:opacity 0.2s ease,background 0.2s ease} .result-card:hover .result-card-copy{opacity:1} .result-card-copy:hover{background:var(--accent-bg);color:var(--accent)} .result-card-divider{border-top:1px solid var(--border-light);margin:10px 0} @media (max-width:1200px){.nav-link{padding:8px 10px;font-size:13px} .nav-weather{padding:6px 8px} } @media (max-width:900px){.nav-link{padding:6px 6px;font-size:13px} .weather-city{display:none} .nav-weather{padding:6px 6px} } @media (max-width:768px){.hamburger{display:block;margin-left:auto;padding:10px 12px} .navbar-links{display:none;position:absolute;top:52px;left:0;right:0;background:var(--bg-primary);flex-direction:column;padding:8px 0;box-shadow:0 8px 24px var(--shadow-lg);border-top:1px solid var(--border-light)} .navbar-links.mobile-open{display:flex} .nav-dropdown{flex-direction:column;width:100%} .nav-dropdown .dropdown-menu{position:static;box-shadow:none;border-radius:0;padding:0 0 0 24px;min-width:auto;opacity:1;transform:none;transition:none} .nav-dropdown.open .dropdown-menu{display:block !important} .nav-dropdown:hover .dropdown-menu{display:none} .nav-link{width:100%;padding:12px 20px;border-radius:0} .nav-dropdown.open>.nav-link .arrow{transform:rotate(180deg)} .arrow{transition:transform 0.2s ease} .dropdown-menu a{margin:0;width:100%;border-radius:0;padding:10px 20px 10px 36px} .navbar-right{display:flex;gap:8px} .nav-weather .weather-city{display:none} .nav-weather{display:inline-flex} .result-copy{opacity:1;pointer-events:auto} .time-item .time-copy-btn{opacity:1;pointer-events:auto} } .nav-link:focus-visible,.dropdown-menu a:focus-visible,.nav-weather:focus-visible,.navbar-right:focus-visible,.btn-search:focus-visible,.hamburger:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} .container{max-width:1100px;margin:0 auto;padding:12px 20px;animation:fadeIn 0.3s ease} @keyframes fadeIn{from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} } header{text-align:center;margin-bottom:8px} header h1{font-size:22px;font-weight:700;color:var(--text-primary);margin-bottom:4px} .subtitle{font-size:13px;color:var(--accent-hover);font-weight:400} .subtitle-row{display:flex;align-items:center;justify-content:space-between;position:relative;width:100%;min-height:40px} .subtitle-row>.subtitle{position:absolute;left:50%;transform:translateX(-50%);text-align:center;margin:0;white-space:nowrap} .subtitle-left-placeholder{flex:1} .subtitle-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;flex:1;justify-content:flex-end} .subtitle-favorite,.btn-like{display:inline-flex;align-items:center;justify-content:center;gap:3px;padding:2px 8px;border:1px solid var(--border-input);border-radius:14px;background:transparent;color:var(--text-muted);font-size:13px;font-family:inherit;line-height:1.4;text-decoration:none;cursor:pointer;transition:all 0.2s ease;user-select:none;vertical-align:middle;-webkit-appearance:none;appearance:none} .subtitle-favorite{white-space:nowrap;margin-right:8px} .subtitle-favorite svg,.btn-like svg{width:13px;height:13px;flex-shrink:0} .subtitle-favorite svg{transition:fill 0.2s ease,stroke 0.2s ease} .btn-like svg{transition:transform 0.3s ease} .subtitle-favorite:hover,.btn-like:hover{border-color:#e74c3c;color:#e74c3c;background:rgba(231,76,60,0.06)} .subtitle-favorite:hover svg{fill:rgba(231,76,60,0.1)} .subtitle-favorite:active{background:rgba(231,76,60,0.1)} .subtitle-favorite.favorited{color:var(--text-muted);border-color:var(--border-input);background:transparent} .subtitle-favorite.favorited svg{fill:none;stroke:var(--text-muted)} .btn-like.liked{color:#e74c3c;border-color:#e74c3c;background:rgba(231,76,60,0.1);cursor:default} .btn-like.liked:hover{background:rgba(231,76,60,0.1)} .btn-like.liked svg{transform:scale(1.15);fill:#e74c3c} .btn-refresh{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--accent-hover);cursor:pointer;transition:background 0.2s ease,color 0.2s ease} .btn-refresh:hover{background:var(--accent-bg);color:var(--accent-active)} .btn-refresh:active{background:var(--accent-bg-hover)} .btn-refresh svg{transition:transform 0.35s ease} .btn-refresh:hover svg{transform:rotate(180deg)} .btn-refresh:active svg{transform:rotate(360deg)} .btn-refresh[data-tooltip]::after{content:attr(data-tooltip);position:absolute;top:100%;right:0;margin-top:6px;padding:4px 10px;font-size:12px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--text-white);background:var(--tooltip-bg);border-radius:4px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity 0.15s ease,visibility 0.15s ease;pointer-events:none} .btn-refresh[data-tooltip]:hover::after{opacity:1;visibility:visible} .editor-container{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px} .editor-panel{display:flex;flex-direction:column;border:1px solid var(--border-input);border-radius:6px;background:var(--bg-primary);overflow:hidden;min-height:340px;box-shadow:0 1px 4px var(--shadow-sm);position:relative} .panel-drag-handle{height:5px;background:transparent;cursor:ns-resize;position:relative;z-index:10;transition:background 0.15s} .panel-drag-handle:hover,.panel-drag-handle.dragging{background:linear-gradient(to right,transparent,var(--accent),transparent)} .panel-drag-handle::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:3px;background:var(--drag-handle);border-radius:2px;opacity:0;transition:opacity 0.15s} .panel-drag-handle:hover::after{opacity:1} .editor-panel .CodeMirror{flex:1;height:auto !important;font-size:13px;line-height:1.6} .panel-header{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;background:var(--panel-header-bg);border-bottom:1px solid var(--panel-header-border);font-weight:600;font-size:12px;color:var(--text-primary)} .panel-actions{display:flex;gap:10px} .panel-link{cursor:pointer;color:var(--text-muted);font-size:12px;font-weight:normal;transition:color 0.2s ease} .panel-link:hover{color:var(--accent)} .editor-panel textarea{flex:1;padding:8px 12px;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:12px;line-height:1.5;border:none;resize:vertical;min-height:140px;background:transparent;color:var(--text-primary)} .editor-panel textarea:focus{outline:none} .editor-panel textarea::placeholder{color:var(--text-weakest)} .home-editor-container .editor-panel textarea{color:var(--brand-red)} .home-editor-container .editor-panel textarea::placeholder{color:var(--brand-red)} .encoding-editor-container .editor-panel{min-height:240px} .encoding-editor-container .editor-panel textarea{min-height:100px} .crypto-container .textarea-field{color:var(--brand-red) !important} .crypto-container .textarea-field::placeholder{color:var(--brand-red) !important} .time-container .input-field{color:var(--brand-red) !important} .time-container .input-field::placeholder{color:var(--brand-red) !important} .CodeMirror{border:1px solid var(--cm-border) !important;border-radius:4px;font-family:'Monaco','Menlo','Ubuntu Mono',monospace !important;font-size:14px !important;line-height:1.5 !important;color:var(--cm-text) !important;background:var(--bg-primary) !important} .CodeMirror-gutters{background-color:var(--bg-secondary);border-right:1px solid var(--cm-gutter-border)} .btn{padding:7px 14px;font-size:12px;border:1px solid var(--border-input);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;border-radius:6px;transition:all 0.2s ease;font-weight:500;white-space:nowrap} .btn:hover:not(:disabled){border-color:var(--text-muted);background:var(--bg-hover);box-shadow:0 2px 6px var(--shadow-sm)} .btn:active:not(:disabled){background:var(--bg-tertiary)} .btn:disabled{opacity:0.6;cursor:not-allowed} .btn-primary{background:var(--btn-primary-bg);color:var(--text-white);border-color:var(--btn-primary-bg)} .btn-primary:hover:not(:disabled){background:var(--accent);border-color:var(--accent);box-shadow:0 2px 8px var(--shadow-lg)} .btn-primary:active:not(:disabled){background:var(--accent-hover)} .btn-large{padding:9px 18px;font-size:13px} .btn-small{padding:5px 14px;font-size:13px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:5px;cursor:pointer;transition:all 0.2s ease;color:var(--text-secondary);font-weight:500} .btn-small:hover{border-color:var(--text-muted);background:var(--bg-hover);color:var(--text-primary)} .btn-sm{padding:5px 10px;font-size:12px;border-radius:4px} .btn-outline{background:transparent;color:var(--text-secondary);border-color:var(--border-input)} .btn-outline:hover:not(:disabled){background:var(--bg-tertiary);border-color:var(--text-weakest);color:var(--text-primary)} .action-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 12px;background:var(--bg-primary);border:1px solid var(--border-input);border-radius:4px;margin-bottom:8px;flex-wrap:wrap} .action-left{display:flex;gap:8px;flex-wrap:wrap} .action-right{display:flex;gap:20px;align-items:center;flex-wrap:wrap} .auto-format-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:14px;color:var(--text-secondary)} .auto-format-toggle input[type="checkbox"]{cursor:pointer} .auto-format-toggle:hover{color:var(--text-primary)} select{padding:6px 10px;border:1px solid var(--border-input);background:var(--bg-primary);color:var(--text-primary);font-size:14px;border-radius:4px;cursor:pointer;transition:border-color 0.2s ease,box-shadow 0.2s ease} select:hover{border-color:var(--text-muted)} select:focus{outline:none;border-color:var(--accent)} .tool-section{margin-bottom:14px;background:var(--bg-primary);padding:10px;border:1px solid var(--border-color);border-radius:6px;transition:all 0.2s ease} .tool-section:hover{box-shadow:0 2px 8px var(--shadow-sm)} .tool-section h2{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border-light)} .tool-content{display:flex;flex-direction:column;gap:10px} .tool-content>*{min-width:0} .tool-content .textarea-field,.tool-content .input-field,.tool-content .select-field,.tool-content .result-box{max-width:100%;box-sizing:border-box} .tool-content .textarea-field{width:100%;min-width:0} .tool-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;margin-bottom:12px} .input-field,.textarea-field{padding:8px 10px;font-size:14px;border:1px solid var(--border-input);background:var(--bg-primary);color:var(--text-primary);border-radius:6px;font-family:inherit;transition:all 0.2s ease} .tool-row>.input-field,.tool-row>.textarea-field{flex:1;min-width:0;width:0} .form-row{display:flex;gap:12px;margin-bottom:12px} .form-row>div{flex:1;min-width:0} .form-row>.input-field,.form-row>.textarea-field{width:100%;box-sizing:border-box;min-width:0} .input-field,.select-field{box-sizing:border-box} .textarea-field{min-height:70px;max-height:120px;resize:vertical;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:12px;padding:8px 10px} .input-field:hover,.textarea-field:hover{border-color:var(--border-input)} .input-field:focus,.textarea-field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-focus-ring)} .input-field::placeholder,.textarea-field::placeholder{color:var(--text-weakest)} .select-field{padding:10px 12px;font-size:14px;border:1px solid var(--border-input);background:var(--bg-primary);color:var(--text-primary);border-radius:6px;cursor:pointer;transition:all 0.2s ease;flex:1;min-width:150px} .tool-row .select-field{flex:0 1 auto;min-width:auto;max-width:220px} .select-field:hover{border-color:var(--text-muted)} .select-field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-focus-ring-md)} .result-box{padding:9px 50px 9px 11px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;font-size:11px;color:var(--text-primary);font-family:'Monaco','Menlo','Ubuntu Mono',monospace;line-height:1.5;word-break:break-all;min-height:50px;max-height:300px;overflow-y:auto;transition:all 0.2s ease} .result-box.success{border-color:#d4edda;background:#f8fff9;color:#155724} .result-box.error{border-color:#f5c6cb;background:#fff8f8;color:#721c24} .result-box-wrapper{position:relative;margin-top:16px} .container>section,.container>.related-tools{max-width:860px;margin-left:auto;margin-right:auto} .result-box-wrapper:hover .result-box{border-color:var(--text-weakest)} .result-copy{position:absolute;top:calc(50%+3px);right:10px;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity 0.2s ease,transform 0.2s ease} .result-box-wrapper:hover .result-copy{opacity:1;pointer-events:auto} .btn-copy-mini{padding:5px 10px;font-size:12px;border:none;background:transparent;color:var(--text-weakest);border-radius:4px;cursor:pointer;transition:all 0.2s ease;font-weight:500} .btn-copy-mini:hover{color:var(--text-muted);background:transparent} .breadcrumb{max-width:1100px;margin:0 auto;padding:6px 0 12px;background:transparent;border:none} .breadcrumb-list{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:0;margin:0;padding:0;font-size:12px;color:var(--text-secondary);line-height:1.4} .breadcrumb-item{display:inline-flex;align-items:center} .breadcrumb-item a{display:inline-block;padding:3px 8px;color:var(--text-secondary);text-decoration:none;border-radius:4px;transition:all 0.15s ease} .breadcrumb-item a:hover{color:var(--accent);background:var(--accent-bg)} .breadcrumb-item:not(:last-child)::after{content:'>';margin:0 4px;color:var(--text-weakest);font-size:11px;user-select:none} .breadcrumb-item:last-child{padding:3px 8px;color:var(--text-primary);font-weight:500} @media (max-width:600px){.breadcrumb{padding:2px 0 8px} .breadcrumb-list{font-size:11px} .breadcrumb-item a{min-height:28px;padding:6px 10px;line-height:1.3} .breadcrumb-item:last-child{padding:6px 10px;min-height:28px} } .inline-copy-wrapper{position:relative} .inline-copy-wrapper>.result-box,.inline-copy-wrapper>textarea{padding-right:70px} .inline-copy-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);padding:3px 10px;font-size:12px;cursor:pointer;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-secondary);transition:all 0.15s ease;white-space:nowrap;z-index:2} .inline-copy-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--bg-primary)} .quote-display{text-align:center;margin:10px auto 0;padding:8px 16px;max-width:860px;opacity:0;transition:opacity 0.6s ease} .quote-display.quote-visible{opacity:1} .quote-text{font-size:13px;color:var(--text-muted);letter-spacing:0.3px;line-height:1.6} .quote-display.quote-inline{display:inline-flex;align-items:center;margin:0 8px 0 0;padding:0;width:280px;max-width:280px;flex-shrink:0;overflow:hidden;position:relative} .quote-display.quote-inline .quote-text{font-size:12px;color:var(--text-muted);white-space:nowrap;display:inline-block} @keyframes quote-scroll{0%{transform:translateX(280px)} 100%{transform:translateX(calc(-100%))} } @media (max-width:768px){.quote-display{margin:8px 4px 0;padding:6px 12px} .subtitle-actions{position:static !important;transform:none !important;display:flex !important;flex-direction:row !important;align-items:center !important;width:100% !important;gap:8px !important;overflow:hidden !important} .quote-display.quote-inline{flex:1 1 auto !important;min-width:0 !important;overflow:hidden !important;margin:0 !important;padding:0 !important} .quote-display.quote-inline .quote-text{font-size:11px !important;white-space:nowrap !important;overflow:visible !important;display:inline-block !important;line-height:1.45 !important} .page-stats{flex-shrink:0 !important;white-space:nowrap !important;justify-content:flex-end !important} } @media (prefers-reduced-motion:reduce){.quote-display{opacity:1 !important;transition:none} } .crypto-selector{display:flex;justify-content:center;margin-bottom:24px} .crypto-dropdown{padding:8px 16px;font-size:14px;border:1px solid var(--border-input);background:var(--bg-primary);color:var(--text-primary);border-radius:4px;cursor:pointer;transition:all 0.2s ease} .crypto-dropdown:hover{border-color:var(--text-muted)} .crypto-dropdown:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-focus-ring-md)} .btn-row{display:flex;gap:8px;flex-wrap:wrap} .time-display{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px} .time-item{background:var(--bg-primary);padding:14px;border:1px solid var(--border-color);border-radius:6px;display:flex;flex-direction:column;position:relative;cursor:pointer;transition:all 0.2s ease;min-height:100px;justify-content:space-between;align-items:center;text-align:center} .time-item:hover{border-color:var(--text-muted);background:var(--bg-secondary);box-shadow:0 2px 8px var(--shadow-sm)} .time-item .time-copy-btn{align-self:flex-end;opacity:0.6;pointer-events:auto;transition:all 0.2s ease;padding:4px 10px;font-size:12px;border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-secondary);border-radius:4px;cursor:pointer} .time-item:hover .time-copy-btn{opacity:1;background:var(--accent);border-color:var(--accent);color:var(--text-white)} .time-label{font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.8px;order:-1} .time-value{font-size:15px;color:var(--text-primary);font-family:'Monaco','Menlo','Ubuntu Mono',monospace;word-break:break-all;flex:1;display:flex;align-items:center;justify-content:center;padding:12px 0;line-height:1.6} .time-copy-btn{align-self:flex-start;padding:4px 8px;font-size:12px;border:none;background:transparent;color:var(--text-weakest);border-radius:3px;cursor:pointer;transition:all 0.2s ease} .time-copy-btn:hover{color:var(--text-secondary);background:transparent} .timestamp-results{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--border-light)} .timestamp-item{flex:1;min-width:180px;background:var(--bg-primary);padding:14px;border:1px solid var(--border-color);border-radius:6px;transition:all 0.2s ease} .timestamp-item:hover{border-color:var(--text-muted);background:var(--bg-secondary);box-shadow:0 2px 8px var(--shadow-sm)} .timestamp-label{display:block;font-size:11px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:10px} .date-input-wrapper{display:flex;gap:10px;flex:1} .date-picker{padding:10px 12px;font-size:14px;border:1px solid var(--border-input);background:var(--bg-primary);color:var(--text-primary);border-radius:6px;transition:all 0.2s ease;flex:1} .date-picker:hover{border-color:var(--border-input)} .date-picker:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-focus-ring)} .btn-date-action{padding:8px 16px;font-size:14px;border:1px solid var(--border-input);background:var(--bg-primary);color:var(--text-secondary);border-radius:6px;cursor:pointer;transition:all 0.2s ease;font-weight:500;white-space:nowrap} .btn-date-action:hover{border-color:var(--text-muted);background:var(--bg-hover)} .auth-buttons{display:inline-flex;align-items:center;gap:0} .nav-btn{display:inline-flex;align-items:center;padding:4px 4px;font-size:12px;color:var(--text-secondary);text-decoration:none;cursor:pointer;transition:color 0.2s ease;white-space:nowrap;border-radius:6px} .nav-btn-login{margin-right:2px} .nav-btn:hover{color:var(--accent);background:var(--bg-tertiary)} .nav-btn-login{color:var(--text-secondary)} .nav-btn-login:hover{color:var(--accent);background:var(--bg-tertiary)} .nav-btn-register{color:var(--text-secondary)} .nav-btn-register:hover{color:var(--accent);background:var(--bg-tertiary)} .user-menu{position:relative;display:inline-flex;align-items:center} .user-avatar-btn{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer} .user-avatar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:linear-gradient(135deg,var(--accent),var(--accent-hover));border-radius:50%;color:white;font-weight:600;font-size:14px;cursor:pointer;transition:all 0.2s ease;position:relative} .user-avatar:hover{box-shadow:0 2px 8px var(--shadow-md);transform:scale(1.05)} .user-avatar::after{content:'';position:absolute;bottom:0;right:0;width:8px;height:8px;background:#28a745;border:2px solid var(--bg-primary);border-radius:50%} .user-dropdown{display:none;position:absolute;top:100%;right:0;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:10px;min-width:200px;box-shadow:0 8px 30px var(--shadow-lg);z-index:1001;padding:8px 0;margin-top:8px} .user-dropdown.show{display:block} .user-dropdown-header{padding:12px 16px;border-bottom:1px solid var(--border-light);margin-bottom:4px} .user-dropdown-name{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:2px} .user-dropdown-email{font-size:12px;color:var(--text-muted)} .user-dropdown a{display:block;padding:10px 16px;color:var(--text-secondary);text-decoration:none;font-size:14px;cursor:pointer;transition:all 0.15s ease} .user-dropdown a:hover{background-color:var(--bg-tertiary);color:var(--accent)} .user-dropdown-divider{height:1px;background:var(--border-light);margin:4px 0} .status{display:none;position:fixed;bottom:20px;right:20px;padding:14px 20px;background:var(--status-bg);color:var(--text-white);font-size:14px;font-weight:500;border-radius:8px;z-index:9999;box-shadow:0 6px 16px rgba(0,0,0,0.12);letter-spacing:0.3px;transition:opacity 0.3s ease,transform 0.3s ease;opacity:1;max-height:200px;overflow:hidden} .status.show{display:block;animation:slideIn 0.35s cubic-bezier(0.34,1.56,0.64,1)} .status.hiding{opacity:0;transform:translateY(-10px);max-height:0} .status.success{background:#22863a} .status.error{background:#f44336;animation:shake 0.4s ease-in-out} @keyframes slideIn{from{transform:translateX(420px);opacity:0} to{transform:translateX(0);opacity:1} } @keyframes shake{0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} } .sample-value{color:var(--text-muted) !important} @media (max-width:1024px){.container{padding:12px 16px} .editor-container{gap:10px} .editor-panel{min-height:280px} header h1{font-size:20px} .tool-section{padding:8px} .tool-row{margin-bottom:8px} .time-display{gap:12px;margin-bottom:16px} .time-item{padding:12px;min-height:80px} } @media (max-width:768px){.container{padding:12px 16px} header h1{font-size:20px} .editor-container{grid-template-columns:1fr;gap:16px} .action-bar{flex-direction:column;align-items:stretch;gap:12px} .action-left{flex-direction:column} .action-right{flex-direction:column;gap:12px} .action-left .btn,.action-right .btn{width:100%} .tool-section{padding:16px 12px} .tool-row{flex-direction:column} .form-row{flex-direction:column} .tool-row .input-field,.tool-row .textarea-field,.tool-row .select-field{width:100%;min-width:auto} .action-bar .btn{width:100%} .time-display{grid-template-columns:repeat(2,1fr);gap:16px} .timestamp-results{flex-direction:column} .date-input-wrapper{flex-direction:column} .date-picker{width:100%} .btn-date-action{width:100%} .status{bottom:10px;right:10px;left:10px;border-radius:0} } .password-options{display:flex;flex-direction:column;gap:14px;margin-bottom:14px;padding:12px;background:var(--bg-code);border-radius:5px} .option-group{display:flex;flex-direction:column;gap:10px} .option-group label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer} .option-group input[type="checkbox"]{cursor:pointer;width:16px;height:16px} .range-control{display:flex;gap:10px;align-items:center} .range-control input[type="range"]{flex:1;height:6px;border-radius:3px;background:var(--border-input);outline:none} .range-control input[type="number"]{width:70px;padding:6px 10px;border:1px solid var(--border-input);border-radius:4px;font-size:14px} .password-input-wrapper{position:relative;display:flex;gap:10px;margin-bottom:10px} .password-input-wrapper .textarea-field{flex:1;color:var(--brand-red) !important} .password-input-wrapper .textarea-field::placeholder{color:var(--brand-red) !important} .password-toggle{display:flex;align-items:center} .strength-indicator{margin-bottom:14px;padding:12px;background:var(--bg-code);border-radius:5px} .strength-bar{height:8px;background:var(--border-input);border-radius:4px;overflow:hidden;margin-bottom:10px} .strength-level{height:100%;width:0%;background:var(--text-muted);transition:width 0.3s ease,background-color 0.3s ease} .strength-text{font-size:14px;font-weight:600;color:var(--text-muted)} .strength-details{display:flex;flex-direction:column;gap:8px;margin-top:12px;font-size:13px} .detail-item{display:flex;align-items:center;gap:6px} .calculator-display{border-radius:8px;font-weight:600;text-align:right;word-break:break-all;min-height:48px} .calculator-grid{display:grid;grid-template-columns:repeat(4,1fr)} .calc-btn{font-weight:600;border-radius:8px;cursor:pointer;transition:all 0.15s ease} .calc-btn:hover{border-color:var(--border-input)} .calc-btn:active{transform:scale(0.96)} .calc-btn-clear{color:#dc2626} .calc-btn-clear:hover{} .calc-btn-delete{color:#ca8a04} .calc-btn-delete:hover{} .calc-btn-operator{color:var(--accent)} .calc-btn-operator:hover{} .calc-btn-equals{color:#fff} .calc-btn-equals:hover{} .history-list{display:flex;flex-direction:column;gap:10px} .history-item{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;background:var(--bg-code);border:1px solid var(--border-color);border-radius:5px;transition:all 0.2s ease} .history-item:hover{background:var(--bg-hover);border-color:var(--border-input);box-shadow:0 2px 6px var(--shadow-sm)} .history-expression{flex:1;font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:14px;color:var(--text-primary);word-break:break-all} .history-empty{padding:30px;text-align:center;color:var(--text-muted);font-size:14px} @media (max-width:768px){.calculator-grid{grid-template-columns:repeat(4,1fr);gap:8px} .calculator-display{font-size:22px} .password-options{gap:15px} } @media (max-width:480px){.navbar-content{gap:12px} .logo-text{display:none} header h1{font-size:18px} .btn-large{padding:8px 16px;font-size:13px} .tool-section{padding:12px 10px} .time-display{grid-template-columns:1fr} .time-item{min-height:100px;padding:16px} } .time-display .time-value{color:var(--brand-red) !important} .website-footer{background:linear-gradient(180deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);border-top:1px solid var(--border-color);margin-top:30px;padding:24px 0 16px;text-align:center;font-size:12px;color:var(--text-secondary)} .footer-content{max-width:1400px;margin:0 auto;padding:0 20px} .footer-friendly-links{margin:0 0 10px 0;font-size:12px;color:var(--text-secondary);line-height:1.6;word-break:break-word;overflow-wrap:break-word} .footer-links-label{font-weight:normal;margin-right:6px;color:var(--text-secondary);letter-spacing:0.5px} .footer-copyright-icp{margin:0 0 10px 0;font-size:12px;font-weight:normal;color:var(--text-secondary);line-height:1.6;display:block;word-wrap:break-word;word-break:break-word} .footer-separator{display:inline-block;margin:0 6px;color:var(--border-input)} .footer-copyright-link{color:var(--accent);text-decoration:none;transition:color 0.2s ease;cursor:pointer} .footer-copyright-link:hover{color:var(--accent-hover);text-decoration:underline} .footer-icp-link{color:var(--accent);text-decoration:none;transition:color 0.2s ease;cursor:pointer} .footer-icp-link:hover{color:var(--accent-hover)} .footer-beian-icon{display:inline-block;width:15px !important;height:15px !important;margin-right:4px;margin-top:-1px;vertical-align:middle;opacity:0.8;transition:opacity 0.2s ease} .footer-beian-icon:hover{opacity:1} .footer-links{margin:10px 0 0 0;font-size:12px;color:var(--text-secondary);line-height:1.6;word-break:break-word;overflow-wrap:break-word} .separator{margin:0 6px;color:var(--border-input)} @media (max-width:768px){.website-footer{margin-top:25px;padding:14px 0;font-size:11px} .footer-content{padding:0 10px} .footer-friendly-links{font-size:11px;margin-bottom:8px} .footer-copyright-icp{font-size:11px;margin-bottom:8px} .footer-links{font-size:11px;margin-top:8px} .separator{margin:0 4px} } .auth-page-container{max-width:500px;margin:40px auto 0;padding:0 20px} .auth-title{font-size:22px;font-weight:700;color:var(--text-primary);text-align:center;margin-bottom:24px;letter-spacing:-0.3px} .auth-links{text-align:center;margin-top:12px;font-size:13px} .auth-links a{color:var(--text-secondary);text-decoration:none;transition:color 0.2s ease} .auth-links a:hover{color:var(--accent)} .auth-links .divider{margin:0 8px;color:var(--text-weakest)} .info-header{text-align:center;padding:40px 20px 30px;background:var(--bg-primary);border-bottom:1px solid var(--border-light);margin-bottom:40px} .info-header h1{font-size:32px;font-weight:700;color:var(--text-primary);margin:0 0 12px 0;letter-spacing:-0.5px} .info-header .subtitle{font-size:15px;color:var(--text-muted);margin:0;font-weight:400;letter-spacing:0.3px} .info-header--simple{padding-bottom:12px;margin-bottom:16px} .info-header--simple+.quote-display{margin-top:4px} .info-container{max-width:900px;margin:0 auto;padding:0 20px 60px} .info-section{margin-bottom:24px;padding:24px;background:var(--bg-primary);border-radius:6px;border:1px solid var(--border-light);box-shadow:0 1px 3px var(--shadow-sm);transition:all 0.3s ease} .info-section:hover{border-color:var(--border-input);box-shadow:0 2px 8px var(--shadow-sm)} .info-section h2{font-size:18px;font-weight:700;color:var(--text-primary);margin:0 0 18px 0;padding-bottom:0;border-bottom:none;letter-spacing:-0.3px} .info-section h3{font-size:15px;font-weight:600;color:var(--text-primary);margin:18px 0 10px 0;letter-spacing:-0.2px} .info-section h4{font-size:14px;font-weight:600;color:var(--text-secondary);margin:14px 0 8px 0} .info-section p{font-size:15px;color:var(--text-secondary);line-height:1.7;margin:0 0 14px 0} .info-section ul{margin:14px 0;padding-left:22px} .info-section li{font-size:15px;color:var(--text-secondary);line-height:1.8;margin-bottom:8px} .info-section a{color:var(--accent);text-decoration:none;transition:all 0.2s ease;font-weight:500} .info-section a:hover{color:var(--accent-hover);text-decoration:underline} .info-section details{margin-bottom:16px;padding:14px 0;border-bottom:1px solid var(--border-light)} .info-section details summary{cursor:pointer;font-weight:600;color:var(--text-primary);padding:8px 0;user-select:none;transition:color 0.2s ease;font-size:15px} .info-section details summary:hover{color:var(--accent)} .info-section details>p{margin:12px 0 0 0;padding-left:0;border-left:none;font-size:15px;color:var(--text-secondary);line-height:1.7} .info-section details>ul{margin-top:12px;margin-left:0;padding-left:22px} .feedback-form{background:var(--bg-primary);padding:32px;border-radius:6px;border:1px solid var(--border-light);max-width:500px;margin:0 auto} .feedback-form .form-control{width:100%} .feedback-form .btn-large{width:auto} .feedback-form .btn-primary{background:var(--accent);color:var(--text-white)} .feedback-form .btn-primary:hover{background:var(--accent-hover)} .form-group{margin-bottom:20px} .form-group label{display:block;font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:6px} .form-control{width:100%;padding:10px 14px;font-size:14px;border:1px solid var(--border-input);border-radius:6px;font-family:inherit;box-sizing:border-box;transition:all 0.2s ease;color:var(--text-primary);background:#ffffff} } .form-control:hover{border-color:var(--border-input)} .form-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-focus-ring)} .form-control::placeholder{color:var(--text-weakest)} textarea.form-control{font-family:'Monaco','Menlo','Ubuntu Mono',monospace;font-size:13px;resize:vertical;min-height:120px;max-height:200px} .password-toggle-btn{padding:0 16px;min-width:48px;border:1px solid var(--border-input);border-radius:6px;background:var(--bg-primary);cursor:pointer;transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center} .password-toggle-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)} .password-toggle-btn:hover svg{transform:scale(1.1)} .password-toggle-btn:active{background:var(--accent-bg-hover);transform:scale(0.95)} .password-toggle-btn svg{transition:transform 0.2s ease,opacity 0.2s ease} .password-strength{margin-top:8px;display:none} .strength-bar-container{display:flex;gap:4px;height:4px;margin-bottom:6px} .strength-bar{flex:1;background:#e2e8f0;border-radius:2px;transition:background 0.3s ease} .strength-bar.weak{background:#ef4444} .strength-bar.medium{background:#f59e0b} .strength-bar.strong{background:#10b981} .strength-bar.very-strong{background:#059669} .strength-text{font-size:12px;color:#64748b;transition:color 0.3s ease} .strength-text.weak{color:#ef4444} .strength-text.medium{color:#f59e0b} .strength-text.strong{color:#10b981} .strength-text.very-strong{color:#059669} .version-section{margin-bottom:40px} .version-item{margin-bottom:24px;padding:24px;background:var(--bg-primary);border:1px solid var(--border-light);border-radius:6px;box-shadow:0 1px 3px var(--shadow-sm);transition:all 0.3s ease} .version-item:hover{border-color:var(--border-input);box-shadow:0 2px 8px var(--shadow-sm)} .version-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border-light)} .version-header h2{font-size:17px;font-weight:700;color:var(--text-primary);margin:0} .version-date{font-size:13px;color:var(--text-muted);font-weight:500} .version-content{font-size:15px;color:var(--text-secondary);line-height:1.7} .version-content ul{margin:12px 0;padding-left:22px} .version-content li{margin-bottom:8px;line-height:1.7} .version-tag{display:inline-block;padding:4px 10px;border-radius:3px;font-weight:600;font-size:12px;margin:8px 0;margin-right:8px} .tag-new{background:#e8f5e9;color:#22863a} .tag-improve{background:#f3e5f5;color:#6a1b9a} .tag-optimize{background:#fff3e0;color:#e65100} .tag-fix{background:#ffebee;color:#c62828} .contact-item{margin-bottom:16px;padding:18px;background:var(--bg-primary);border:1px solid var(--border-light);border-radius:6px;transition:all 0.3s ease} .contact-item:hover{border-color:var(--accent);box-shadow:0 3px 12px var(--shadow-lg)} .contact-item h3{font-size:15px;font-weight:700;color:var(--text-primary);margin:0 0 10px 0} .contact-item p{margin:0 0 6px 0;font-size:15px} .contact-item .text-muted{color:var(--text-muted);font-size:14px} .contact-link{color:var(--accent);text-decoration:none;font-weight:600;transition:all 0.2s ease} .contact-link:hover{color:var(--accent-hover);text-decoration:underline} .feedback-method{margin-bottom:16px;padding:16px;background:var(--bg-code);border:1px solid var(--border-light);border-radius:6px} .feedback-method h3{font-size:15px;font-weight:700;color:var(--text-primary);margin:0 0 8px 0} .feedback-method p{margin:0;font-size:15px;color:var(--text-secondary);line-height:1.6} .feedback-example{margin-bottom:20px;padding:18px;background:var(--bg-code);border:1px solid var(--border-light);border-radius:6px} .feedback-example h4{font-size:15px;font-weight:700;color:var(--text-primary);margin:0 0 12px 0} .feedback-example p{font-size:15px;color:var(--text-secondary);margin:0 0 10px 0;line-height:1.7} .text-muted{color:var(--text-muted);font-size:14px} .highlight-box{padding:18px;background:var(--accent-bg);border-left:3px solid var(--accent);border-radius:6px;color:var(--text-primary);line-height:1.8;font-size:15px;margin-bottom:20px} .footer-nav-link{color:var(--text-secondary);text-decoration:none;transition:all 0.2s ease;font-weight:normal;cursor:pointer} .footer-nav-link:hover{color:var(--accent);text-decoration:underline} @media (max-width:768px){.info-header{padding:30px 15px 20px} .info-header--simple{padding-bottom:8px;margin-bottom:12px} .info-header h1{font-size:26px} .info-container{padding:0 15px 40px} .info-section{padding:18px;margin-bottom:18px} .info-section h2{font-size:16px;margin-bottom:14px} .form-control{font-size:16px} textarea.form-control{min-height:100px} .version-item{padding:18px} .version-header{flex-direction:column;align-items:flex-start;gap:8px} .contact-item{padding:14px} .panel-drag-handle::after{opacity:0.5} input,textarea,select{font-size:16px} .input-field,.textarea-field,.select-field,.crypto-dropdown,.editor-panel textarea{font-size:16px} .CodeMirror{font-size:16px !important} } @media (max-width:480px){.info-header{padding:20px 12px 15px;margin-bottom:25px} .info-header--simple{padding-bottom:6px;margin-bottom:8px} .info-header h1{font-size:22px;margin-bottom:8px} .info-header .subtitle{font-size:14px} .info-container{padding:0 12px 30px} .info-section{padding:14px;margin-bottom:14px} .info-section h2{font-size:15px;margin-bottom:12px} .info-section h3{font-size:14px;margin:12px 0 8px 0} .info-section p{font-size:14px;margin-bottom:10px} .info-section li{font-size:14px} .form-group label{font-size:13px} .form-control{font-size:16px;padding:10px 12px} textarea.form-control{min-height:100px} .version-item{padding:14px;margin-bottom:12px} .version-header h2{font-size:15px} .version-date{font-size:12px} .contact-item{padding:12px;margin-bottom:12px} .feedback-method{padding:12px;margin-bottom:12px} .feedback-example{padding:12px;margin-bottom:14px} .highlight-box{padding:14px;font-size:14px;line-height:1.6} } [data-theme="dark"] .result-box.success{border-color:#065f46;background:#064e3b;color:#6ee7b7} [data-theme="dark"] .result-box.error{border-color:#991b1b;background:#450a0a;color:#fca5a5} [data-theme="dark"] .user-dropdown{background:var(--bg-secondary);border-color:var(--border-color)} [data-theme="dark"] .subtitle-favorite.favorited{color:var(--text-muted);border-color:var(--border-input);background:transparent} [data-theme="dark"] .tag-new{background:#064e3b;color:#6ee7b7} [data-theme="dark"] .tag-improve{background:#3b0764;color:#c084fc} [data-theme="dark"] .tag-optimize{background:#431407;color:#fdba74} [data-theme="dark"] .tag-fix{background:#450a0a;color:#fca5a5} [data-theme="dark"] .status.success{background:#065f46} [data-theme="dark"] .status.error{background:#991b1b} [data-theme="dark"] .calc-btn-clear{color:var(--brand-red)} [data-theme="dark"] .calc-btn-delete{color:#fbbf24} [data-theme="dark"] .calc-btn-equals{color:#fff} [data-theme="dark"]::selection{background:rgba(45,212,191,0.3)} [data-theme="dark"] .weather-city-search input{background:var(--bg-secondary);color:var(--text-primary);border-color:var(--border-color)} [data-theme="dark"] .form-control{background:var(--bg-secondary);border-color:var(--bg-tertiary)} [data-theme="dark"] input:-webkit-autofill,[data-theme="dark"] input:-webkit-autofill:hover,[data-theme="dark"] input:-webkit-autofill:focus,[data-theme="dark"] textarea:-webkit-autofill,[data-theme="dark"] textarea:-webkit-autofill:hover,[data-theme="dark"] textarea:-webkit-autofill:focus,[data-theme="dark"] select:-webkit-autofill,[data-theme="dark"] select:-webkit-autofill:hover,[data-theme="dark"] select:-webkit-autofill:focus{-webkit-text-fill-color:var(--text-primary);transition:background-color 5000s ease-in-out 0s;background-color:var(--bg-secondary) !important} [data-theme="dark"] .city-province-item.active,[data-theme="dark"] .weather-city-item.active{background:var(--accent);color:var(--text-white)} [data-theme="dark"] .CodeMirror-gutters{background:var(--cm-gutter-bg) !important;border-right-color:var(--cm-gutter-border) !important} [data-theme="dark"] .CodeMirror-linenumber{color:var(--text-weakest) !important} [data-theme="dark"] .CodeMirror-cursor{border-left-color:var(--text-primary) !important} [data-theme="dark"] .CodeMirror-selected{background:var(--selection-bg) !important} [data-theme="dark"] .CodeMirror-activeline-background{background:var(--bg-hover) !important} [data-theme="dark"] .cm-s-default .cm-string{color:#6ee7b7 !important} [data-theme="dark"] .cm-s-default .cm-number{color:#fbbf24 !important} [data-theme="dark"] .cm-s-default .cm-atom{color:#93c5fd !important} [data-theme="dark"] .cm-s-default .cm-property{color:#c4b5fd !important} [data-theme="dark"] .cm-s-default .cm-punctuation{color:var(--text-secondary) !important} [data-theme="dark"] .cm-s-default .cm-def{color:#93c5fd !important} [data-theme="dark"] .CodeMirror-foldgutter-open,[data-theme="dark"] .CodeMirror-foldgutter-folded{color:var(--text-weakest) !important} .btn-calendar{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;transition:all 0.2s ease;touch-action:manipulation} .btn-calendar:hover{background:var(--accent-bg);color:var(--accent)} .btn-calendar:active{background:var(--accent-bg-hover);transform:scale(0.98)} .btn-calendar svg{transition:transform 0.35s ease} .btn-calendar:hover svg{transform:scale(1.1)} .calendar-panel{position:fixed;top:50px;right:20px;min-width:280px;width:fit-content;z-index:1001;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:10px;box-shadow:0 8px 30px var(--shadow-lg);padding:14px;font-size:13px;color:var(--text-primary);pointer-events:auto;display:none} .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .calendar-nav-btn{padding:6px 10px;border:none;background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;border-radius:6px;transition:all 0.15s ease;display:inline-flex;align-items:center;justify-content:center;min-width:32px} .calendar-nav-btn:hover{background:var(--accent-bg);color:var(--accent)} .calendar-title{font-weight:600;font-size:14px;color:var(--text-primary)} .calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px} .calendar-weekday{text-align:center;font-size:12px;font-weight:600;color:var(--text-muted);padding:4px 0} .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .calendar-day{text-align:center;padding:4px 0;font-size:13px;border-radius:4px;color:var(--text-secondary);cursor:pointer;transition:all 0.15s ease;display:flex;flex-direction:column;align-items:center;gap:2px} .calendar-day-num{line-height:1.2} .calendar-day-lunar{font-size:10px;color:var(--text-muted);line-height:1} .calendar-day:hover{background:var(--accent-bg)} .calendar-day:hover .calendar-day-num{color:var(--accent)} .calendar-day:hover .calendar-day-lunar{color:var(--accent);opacity:0.8} .calendar-day.today{background:var(--accent)} .calendar-day.today .calendar-day-num{color:var(--text-white);font-weight:600} .calendar-day.today .calendar-day-lunar{color:var(--text-white);opacity:0.9} .calendar-day.other-month{opacity:0.5} .points-summary-section{margin-bottom:16px} .points-summary-card{background:var(--bg-primary);border:1px solid var(--border-light);border-radius:8px;padding:32px;text-align:center;box-shadow:0 2px 8px var(--shadow-sm)} .points-total-wrapper{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px} .points-label{font-size:14px;color:var(--text-secondary);font-weight:500} .points-value{font-size:48px;font-weight:700;color:var(--accent);line-height:1} .points-tips{font-size:13px;color:var(--text-muted);background:var(--accent-bg);padding:10px 16px;border-radius:6px;display:inline-block} .points-tips strong{color:var(--accent)} .points-history-list{display:flex;flex-direction:column;gap:10px} .points-history-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--bg-primary);border:1px solid var(--border-light);border-radius:6px;transition:all 0.2s ease} .points-history-item:hover{border-color:var(--border-input);box-shadow:0 2px 6px var(--shadow-sm)} .points-item-info{display:flex;flex-direction:column;gap:4px} .points-item-title{font-size:14px;font-weight:600;color:var(--text-primary)} .points-item-time{font-size:12px;color:var(--text-muted)} .points-item-score{font-size:18px;font-weight:700;color:var(--accent)} .history-empty{text-align:center;padding:40px;color:var(--text-muted);font-size:14px} .loading-spinner{display:none;text-align:center;padding:40px} .spinner{width:32px;height:32px;border:3px solid var(--border-light);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;margin:0 auto 12px} @keyframes spin{to{transform:rotate(360deg)} } } .calendar-day.other-month .calendar-day-num,.calendar-day.other-month .calendar-day-lunar{color:var(--text-weakest)} .calendar-day.holiday{background:rgba(239,68,68,0.1)} .calendar-day.holiday .calendar-day-num{color:#ef4444;font-weight:600} .calendar-day.holiday .calendar-day-lunar{color:#ef4444;opacity:0.7} .calendar-day.workday{background:rgba(245,158,11,0.1)} .calendar-day.workday .calendar-day-num{color:#f59e0b;font-weight:600} .calendar-day.workday .calendar-day-lunar{color:#f59e0b;opacity:0.7} .calendar-day.solar-term .calendar-day-lunar{color:#22c55e;font-weight:500} .calendar-day-badge{position:absolute;top:2px;right:2px;font-size:9px;padding:1px 4px;border-radius:3px;font-weight:600;line-height:1} .calendar-day{position:relative} .holiday-badge{background:#ef4444;color:white} .workday-badge{background:#f59e0b;color:white} .calendar-day.today.holiday{background:var(--accent)} .calendar-day.today.holiday .calendar-day-num,.calendar-day.today.holiday .calendar-day-lunar,.calendar-day.today.workday .calendar-day-num,.calendar-day.today.workday .calendar-day-lunar{color:var(--text-white)} .calendar-day.today.workday{background:var(--accent)} .calendar-day.today .calendar-day-badge{background:rgba(255,255,255,0.25);color:var(--text-white)} .btn-back-to-top{position:fixed;right:20px;bottom:60px;width:38px;height:38px;padding:0;border:none;border-radius:8px;background:var(--accent);color:var(--text-white);cursor:pointer;box-shadow:0 2px 8px var(--shadow-lg);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(20px);transition:all 0.3s ease;z-index:999} .btn-back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)} .btn-back-to-top:hover{background:var(--accent-hover);transform:translateY(-4px);box-shadow:0 4px 12px var(--shadow-lg)} .btn-back-to-top:active{background:var(--accent-active);transform:translateY(0) scale(0.95)} .btn-back-to-top svg{width:18px;height:18px} @media (max-width:768px){.calendar-panel{right:16px;left:16px;width:auto;top:56px} .btn-back-to-top{right:16px;bottom:54px;width:36px;height:36px} .btn-back-to-top svg{width:16px;height:16px} } [data-tooltip]{position:relative} .btn-back-to-top[data-tooltip]{position:fixed} .btn-feedback{position:fixed;right:20px;bottom:20px;width:38px;height:38px;padding:0;border:none;border-radius:8px;background:var(--accent);color:var(--text-white);cursor:pointer;box-shadow:0 2px 8px var(--shadow-lg);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all 0.3s ease;z-index:999} .btn-feedback:hover{background:var(--accent-hover);transform:translateY(-4px);box-shadow:0 4px 12px var(--shadow-lg)} .btn-feedback:active{background:var(--accent-active);transform:translateY(0) scale(0.95)} .btn-feedback svg{width:18px;height:18px} @media (max-width:768px){.btn-feedback{right:16px;bottom:12px;width:36px;height:36px} .btn-feedback svg{width:16px;height:16px} } [data-tooltip]::after{content:attr(data-tooltip);position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;padding:4px 10px;font-size:12px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--text-white);background:var(--tooltip-bg);border-radius:4px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity 0.15s ease,visibility 0.15s ease;pointer-events:none;z-index:1001} [data-tooltip]:hover::after{opacity:1;visibility:visible} .support-container{max-width:800px;margin:0 auto} .support-intro{background:var(--bg-secondary);border-radius:8px;padding:24px 28px;margin-bottom:32px} .support-intro p{margin:8px 0;color:var(--text-secondary);line-height:1.8} .support-intro p:first-child{margin-top:0} .support-intro p:last-child{margin-bottom:0} .qr-codes-section h2,.support-thanks-section h2{font-size:20px;color:var(--text-primary);margin-bottom:20px;text-align:center} .qr-codes{display:flex;justify-content:center;gap:40px;margin-bottom:40px;flex-wrap:wrap} .qr-code-item{text-align:center} .qr-code-box{width:240px;height:240px;border:2px solid var(--border-color);border-radius:12px;padding:12px;background:white;display:flex;align-items:center;justify-content:center;margin-bottom:12px;transition:border-color 0.2s ease} .qr-code-box:hover{border-color:var(--accent)} .qr-code-box img{max-width:100%;max-height:100%;object-fit:contain} .qr-label{color:var(--text-secondary);font-size:14px;margin:0} .thanks-list{max-width:600px;margin:0 auto} .thank-item{padding:10px 0;border-bottom:1px solid var(--border-light);font-size:14px;color:var(--text-secondary);display:flex;align-items:center;gap:0 8px;line-height:1.5} .thank-item:last-child{border-bottom:none} .thank-nickname{color:var(--text-primary);font-weight:normal;white-space:nowrap} .thank-separator{color:var(--border-color);user-select:none} .thank-amount{color:var(--accent);font-weight:500;white-space:nowrap} .thank-method{color:var(--text-muted);white-space:nowrap} .thank-time{color:var(--text-weakest);white-space:nowrap} .thank-message{color:var(--text-secondary);font-size:14px;line-height:1.6;margin:0} .thank-empty{text-align:center;color:var(--text-muted);padding:40px 20px;font-size:14px} @media (max-width:768px){.qr-codes{gap:24px} .qr-code-box{width:200px;height:200px} } @media (max-width:480px){.qr-codes{flex-direction:column;align-items:center} .qr-code-box{width:220px;height:220px} .support-intro{padding:20px} } .info-card{background:linear-gradient(135deg,var(--bg-primary) 0%,var(--bg-secondary) 100%);border-radius:16px;padding:0;box-shadow:0 4px 20px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.05);border:1px solid var(--border-color);transition:all 0.3s ease;position:relative;overflow:hidden} .info-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#14b8a6,#0d9488)} .info-card:hover{box-shadow:0 8px 30px rgba(0,0,0,0.12),0 2px 6px rgba(0,0,0,0.08);transform:translateY(-2px)} .info-user-avatar{display:flex;flex-direction:column;align-items:center;padding:24px 24px 20px;border-bottom:1px solid var(--border-color);background:rgba(0,0,0,0.02)} .info-avatar-circle{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#14b8a6,#0d9488);display:flex;align-items:center;justify-content:center;margin-bottom:14px;font-size:28px;font-weight:700;color:white;box-shadow:0 4px 16px rgba(20,184,166,0.3);transition:all 0.3s ease} .info-avatar-circle:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(20,184,166,0.4)} .info-user-name{font-size:20px;font-weight:700;color:var(--text-primary);margin-bottom:6px} .info-user-email{font-size:14px;color:var(--text-muted);margin-bottom:12px} .info-status{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted)} .info-status-dot{width:8px;height:8px;border-radius:50%;background:#10b981;animation:pulse-status 2s infinite} @keyframes pulse-status{0%,100%{opacity:1} 50%{opacity:0.5} } .info-details{padding:20px 24px 24px} .info-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px dashed var(--border-light)} .info-row:last-child{border-bottom:none} .info-label{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--text-muted);transition:color 0.2s ease} .info-label::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:0.6} .info-row:first-child .info-label{color:var(--accent)} .info-row:first-child .info-label::before{background:var(--accent);opacity:1} .info-value{font-size:14px;font-weight:600;color:var(--text-primary);background:rgba(0,0,0,0.03);padding:6px 14px;border-radius:8px;font-family:'Monaco','Consolas',-apple-system,BlinkMacSystemFont,monospace;transition:all 0.2s ease} .info-value:hover{background:rgba(var(--accent),0.08)} .info-date{color:var(--text-muted);font-weight:400;font-size:13px} @media (max-width:480px){.info-card{border-radius:12px} .info-user-avatar{padding:20px 16px 16px} .info-avatar-circle{width:64px;height:64px;font-size:24px;margin-bottom:12px} .info-user-name{font-size:18px} .info-user-email{font-size:13px} .info-details{padding:16px} .info-row{padding:10px 0} .info-label,.info-value{font-size:13px} .info-value{padding:4px 10px} } .password-toggle-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-muted);cursor:pointer;transition:all 0.2s ease;flex-shrink:0} .password-toggle-btn:hover{background:var(--bg-primary);color:var(--text-primary);border-color:var(--accent)} .password-toggle-btn:active{transform:scale(0.95)} .password-toggle-btn svg{width:20px;height:20px} .danger-panel{border:1px solid #ffedd5;border-radius:8px;overflow:hidden;transition:all 0.3s ease} .danger-panel-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:transparent;cursor:pointer;transition:background 0.2s} .danger-panel-header:hover{background:#fff7ed} .danger-panel-title{font-size:15px;font-weight:600;color:#f97316} .danger-panel-icon{font-size:12px;color:#f97316;transition:transform 0.3s} .danger-panel-content{padding:16px 18px 20px;border-top:1px solid #ffedd5;animation:fadeIn 0.3s ease} @keyframes fadeIn{from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} } .btn-danger-outline:hover{background:#dc2626 !important;color:white !important} .btn-danger-outline:active{background:#b91c1c !important;color:white !important;transform:scale(0.98)} .btn-history{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;transition:all 0.2s ease;touch-action:manipulation} .btn-history:hover{background:var(--accent-bg);color:var(--accent)} .btn-history:active{background:var(--accent-bg-hover);transform:scale(0.98)} .btn-history svg{transition:transform 0.35s ease} .btn-history:hover svg{transform:scale(1.1)} .history-panel{position:fixed;top:50px;right:20px;min-width:320px;max-width:400px;max-height:calc(100vh - 70px);z-index:1001;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:10px;box-shadow:0 8px 30px var(--shadow-lg);padding:0;font-size:13px;color:var(--text-primary);pointer-events:auto;display:none;overflow:hidden} .history-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border-color);background:var(--bg-secondary)} .history-title{font-size:15px;font-weight:600;color:var(--text-primary);margin:0} .history-actions{display:flex;gap:8px} .btn-clear-history{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid var(--border-color);border-radius:6px;background:transparent;color:var(--text-muted);cursor:pointer;font-size:12px;font-family:inherit;transition:all 0.2s ease} .btn-clear-history:hover{border-color:#ef4444;color:#ef4444;background:rgba(239,68,68,0.06)} .btn-clear-history svg{width:14px;height:14px} .history-list{max-height:calc(100vh - 130px);overflow-y:auto;padding:8px 0} .history-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center} .history-empty svg{width:48px;height:48px;color:var(--text-weakest);margin-bottom:16px} .history-empty p{font-size:14px;color:var(--text-muted);margin:0 0 8px 0;font-weight:500} .history-empty span{font-size:12px;color:var(--text-weakest)} .history-group{margin-bottom:8px} .history-group:last-child{margin-bottom:0} .history-group-title{padding:6px 16px;font-size:11px;font-weight:600;color:var(--text-weakest);text-transform:uppercase;letter-spacing:0.5px} .history-item{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;transition:background 0.15s ease} .history-item:hover{background:var(--bg-secondary)} .history-item-link{flex:1;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;min-width:0} .history-item-name{font-size:13px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .history-item-time{font-size:11px;color:var(--text-weakest)} .history-item-delete{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:4px;background:transparent;color:var(--text-weakest);cursor:pointer;transition:all 0.15s ease;flex-shrink:0;margin-left:8px} .history-item-delete:hover{background:rgba(239,68,68,0.1);color:#ef4444} .history-item-delete svg{width:14px;height:14px} @media (max-width:768px){.history-panel{left:16px !important;right:16px !important;top:56px !important;min-width:unset;max-width:unset;width:auto;max-height:calc(100vh - 72px);border-radius:8px} .history-list{max-height:calc(100vh - 136px)} } .history-page-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:var(--bg-secondary);border-radius:8px;margin-bottom:24px} .history-stats{display:flex;gap:24px} .stat-item{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--text-secondary)} .stat-item svg{color:var(--accent)} .stat-item span{font-weight:600;color:var(--text-primary)} .history-actions-bar{display:flex;gap:12px} .btn-secondary{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid var(--border-color);border-radius:6px;background:white;color:var(--text-secondary);cursor:pointer;font-size:14px;font-family:inherit;transition:all 0.2s ease} .btn-secondary:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)} .btn-danger{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid #ef4444;border-radius:6px;background:white;color:#ef4444;cursor:pointer;font-size:14px;font-family:inherit;transition:all 0.2s ease} .btn-danger:hover{background:#ef4444;color:white} .history-page-container{min-height:400px} .history-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;text-align:center} .history-empty-state svg{width:80px;height:80px;color:var(--text-weakest);margin-bottom:24px} .history-empty-state h3{font-size:20px;color:var(--text-primary);margin:0 0 12px 0} .history-empty-state p{font-size:14px;color:var(--text-muted);margin:0} .history-group-section{margin-bottom:32px} .history-group-section:last-child{margin-bottom:0} .group-title{font-size:14px;font-weight:600;color:var(--text-muted);margin-bottom:12px;padding-left:4px;text-transform:uppercase;letter-spacing:0.5px} .history-list{display:grid;gap:12px} .history-record-item{display:flex;align-items:center;justify-content:space-between;padding:16px;background:white;border:1px solid var(--border-color);border-radius:8px;transition:all 0.2s ease} .history-record-item:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(20,184,166,0.1);transform:translateY(-2px)} .record-link{display:flex;align-items:center;gap:16px;flex:1;text-decoration:none;color:inherit;min-width:0} .record-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--accent-bg);border-radius:8px;color:var(--accent);flex-shrink:0} .record-content{flex:1;min-width:0} .record-name{font-size:15px;font-weight:500;color:var(--text-primary);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .record-path{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .record-meta{display:flex;align-items:center;gap:12px;flex-shrink:0} .record-time{font-size:13px;color:var(--text-weakest);white-space:nowrap} .btn-delete-record{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;border-radius:6px;background:transparent;color:var(--text-weakest);cursor:pointer;transition:all 0.15s ease} .btn-delete-record:hover{background:rgba(239,68,68,0.1);color:#ef4444} .error-state{text-align:center;padding:60px 24px;color:var(--text-muted)} .error-state p{font-size:16px;margin:0} @media (max-width:768px){.history-page-header{flex-direction:column;gap:16px;align-items:flex-start} .history-stats{width:100%;justify-content:space-between} .history-actions-bar{width:100%;justify-content:stretch} .history-actions-bar button{flex:1;justify-content:center} .history-record-item{padding:12px} .record-icon{width:36px;height:36px} .record-name{font-size:14px} .record-time{font-size:12px} } @media (max-width:1200px){.navbar-content{gap:8px} .nav-link{padding:6px 12px;font-size:13px} .navbar-right{gap:2px} } @media (max-width:768px){.navbar-content{gap:4px;padding:0 8px;height:48px} .logo-text{display:none} .logo-icon{width:24px;height:24px;font-size:12px} .nav-weather .weather-city,.nav-weather .weather-temp{display:none} .nav-weather{width:28px;height:28px;padding:4px;justify-content:center} .btn-search,.btn-history,.btn-calendar,.btn-theme{width:28px;height:28px;padding:3px} .btn-search svg,.btn-history svg,.btn-calendar svg,.btn-theme svg{width:14px;height:14px} .hamburger{display:block !important;margin-left:auto;padding:6px 8px;flex-shrink:0} .hamburger span{width:20px;height:2px;margin:4px 0} .auth-buttons{display:none} } @media (max-width:480px){.navbar-content{gap:3px;padding:0 6px} .btn-calendar,.nav-weather{display:none} .btn-search,.btn-history,.btn-theme{width:26px;height:26px;padding:2px} .btn-search svg,.btn-history svg,.btn-theme svg{width:13px;height:13px} }