.login-container{display:flex;justify-content:center;align-items:center;height:100vh;background-color:#f5f5f5}.login-card{background-color:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:30px;width:100%;max-width:400px}.login-card h2{text-align:center;margin-bottom:24px;color:#333}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#333}.form-group input{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-size:14px}.form-group input:focus{outline:none;border-color:#2c88d9;box-shadow:0 0 0 2px #2c88d91a}.login-button{width:100%;background-color:#2c88d9;color:#fff;border:none;padding:12px;border-radius:4px;cursor:pointer;font-size:16px;font-weight:500;margin-top:10px}.login-button:hover{background-color:#1a73e8}.login-button:disabled{background-color:#a0a0a0;cursor:not-allowed}.error-message{background-color:#ffebee;color:#c62828;padding:10px 15px;border-radius:4px;margin-bottom:20px;text-align:center}.login-hint{background-color:#e3f2fd;color:#1565c0;padding:15px;border-radius:4px;margin-bottom:20px;text-align:center;border-left:4px solid #2196f3}.login-hint p{margin:5px 0;font-size:14px}.login-hint code{background-color:#f5f5f5;padding:2px 4px;border-radius:3px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:13px;color:#333}.dashboard{padding:20px;max-width:1200px;margin:0 auto}.dashboard h1{margin-bottom:16px;color:#333}.dashboard p{color:#555;margin-bottom:30px}.dashboard-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.dashboard-card{background-color:#fff;border:1px solid #eee;border-radius:8px;padding:20px;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 5px #0000000d}.dashboard-card:hover{transform:translateY(-5px);box-shadow:0 5px 15px #0000001a}.dashboard-card h3{color:#2c88d9;margin-bottom:10px}.dashboard-card p{color:#666;margin-bottom:0}.modal-content{background-color:#fff;border-radius:4px;box-shadow:0 2px 10px #0003;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #eee}.modal-header h2{margin:0;font-size:1.5rem;color:#333}.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:#777}.modal-close:hover{color:#333}@media (max-width: 768px){.modal-small,.modal-medium,.modal-large{width:95%;max-width:none}}.form-group label .optional{color:#777;font-size:.9em;font-weight:400}.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:2px solid #e9ecef;border-radius:6px;font-size:14px;transition:border-color .2s ease,box-shadow .2s ease;box-sizing:border-box;font-family:inherit}.form-group textarea.monospace{font-family:Monaco,Menlo,Ubuntu Mono,monospace;min-height:150px}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 .2rem #007bff40}.form-group input:disabled,.form-group select:disabled,.form-group textarea:disabled{background-color:#f8f9fa;color:#6c757d;cursor:not-allowed}.form-group input:invalid,.form-group select:invalid,.form-group textarea:invalid{border-color:#dc3545}.form-group input:invalid:focus,.form-group select:invalid:focus,.form-group textarea:invalid:focus{border-color:#dc3545;box-shadow:0 0 0 .2rem #dc354540}.form-group input[type=checkbox],.form-group input[type=radio]{width:auto;margin-right:8px;transform:scale(1.1)}.form-group label input[type=checkbox],.form-group label input[type=radio]{margin-bottom:0}.permissions-list{margin-top:10px;display:flex;flex-direction:column;gap:8px;padding:12px;background-color:#f8f9fa;border-radius:6px;border:1px solid #e9ecef}.permission-item{display:flex;align-items:center}.mode-selector{display:flex;margin-bottom:20px;border-bottom:1px solid #eee;background-color:#f8f9fa;border-radius:6px 6px 0 0;overflow:hidden}.mode-selector button{padding:12px 20px;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:14px;font-weight:500;color:#666;flex:1;transition:all .2s ease}.mode-selector button.active{color:#007bff;border-bottom-color:#007bff;background-color:#fff}.mode-selector button:hover:not(.active){color:#0056b3;background-color:#e9ecef}.help-text{display:block;margin-top:5px;font-size:12px;color:#6c757d;font-style:italic}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:30px;padding-top:20px;border-top:1px solid #eee}.form-actions .btn{min-width:100px}.form-error{background-color:#f8d7da;color:#721c24;padding:12px 16px;border-radius:6px;margin-bottom:20px;border:1px solid #f5c6cb;font-size:14px}.form-success{background-color:#d4edda;color:#155724;padding:12px 16px;border-radius:6px;margin-bottom:20px;border:1px solid #c3e6cb;font-size:14px}.form-info{background-color:#d1ecf1;color:#0c5460;padding:12px 16px;border-radius:6px;margin-bottom:20px;border:1px solid #bee5eb;font-size:14px}.form-group input[pattern],.form-group input[type=url]{font-family:Monaco,Menlo,Ubuntu Mono,monospace}.form-fieldset{border:1px solid #e9ecef;border-radius:6px;padding:20px;margin-bottom:20px}.form-fieldset legend{font-weight:600;color:#495057;padding:0 10px;margin-bottom:0}.form-inline{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.form-inline .form-group{margin-bottom:0;flex:1;min-width:200px}@media (max-width: 768px){.form-actions{flex-direction:column}.form-actions .btn{width:100%}.mode-selector{flex-direction:column}.mode-selector button{border-bottom:none;border-left:3px solid transparent}.mode-selector button.active{border-left-color:#007bff;border-bottom-color:transparent}.form-inline{flex-direction:column;align-items:stretch}.form-inline .form-group{min-width:auto}}@media (max-width: 480px){.form-group input,.form-group select,.form-group textarea{padding:8px 10px;font-size:16px}.permissions-list{padding:8px}}.key-detail-content{width:100%}.detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #e9ecef}.detail-title{margin:0;color:#333;font-size:18px;font-weight:600}.header-actions{display:flex;gap:10px}.header-button{border:none;border-radius:6px;cursor:pointer;padding:8px 14px;font-size:13px;font-weight:500;transition:all .2s ease;display:flex;align-items:center;gap:5px}.copy-link-btn{background-color:#28a745;color:#fff}.copy-link-btn:hover{background-color:#218838;transform:translateY(-1px)}.install-btn{background-color:#ff9800;color:#fff}.install-btn:hover{background-color:#f57c00;transform:translateY(-1px)}.key-info{margin-bottom:15px}.info-row{display:flex;margin-bottom:8px;align-items:center}.label{min-width:100px;font-weight:600;color:#555;font-size:14px}.value{flex:1;word-break:break-all;font-size:14px}.key-content{margin-top:20px}.key-section{margin-bottom:20px}.key-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.key-section-header h3{margin:0;color:#333;font-size:16px;font-weight:600}.button-group{display:flex;gap:6px;align-items:center}.copy-button-inline{background-color:#2c88d9;color:#fff;border:none;border-radius:4px;cursor:pointer;padding:5px 10px;font-size:11px;font-weight:500;transition:all .2s ease;white-space:nowrap}.copy-button-inline:hover{background-color:#1a73e8;transform:translateY(-1px)}.copy-button-inline.copy-link-btn{background-color:#28a745}.copy-button-inline.copy-link-btn:hover{background-color:#218838}.copy-button-inline.install-btn{background-color:#ff9800}.copy-button-inline.install-btn:hover{background-color:#f57c00}.key-box{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;padding:12px;max-height:200px;overflow-y:auto}.key-box pre{white-space:pre-wrap;word-break:break-all;font-family:Monaco,Menlo,Ubuntu Mono,monospace;margin:0;font-size:12px;line-height:1.4;color:#333}@media (max-width: 768px){.detail-header{flex-direction:column;align-items:flex-start;gap:12px}.header-actions{width:100%;justify-content:flex-end}.info-row{flex-direction:column;align-items:flex-start}.label{margin-bottom:4px}.key-section-header{flex-direction:column;align-items:flex-start;gap:10px}.button-group{width:100%;justify-content:flex-end;flex-wrap:wrap;gap:4px}.copy-button-inline{font-size:10px;padding:4px 8px}.header-button{font-size:12px;padding:6px 10px}}.management-container{padding:20px;max-width:1200px;margin:0 auto}.management-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:20px;border-bottom:2px solid #eee}.management-header h1{margin:0;color:#333;font-size:28px;font-weight:600}.btn{padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;text-decoration:none;display:inline-block}.btn-primary{background-color:#007bff;color:#fff}.btn-primary:hover{background-color:#0056b3;transform:translateY(-1px)}.btn-secondary{background-color:#6c757d;color:#fff}.btn-secondary:hover{background-color:#545b62;transform:translateY(-1px)}.btn-success{background-color:#28a745;color:#fff}.btn-success:hover{background-color:#218838;transform:translateY(-1px)}.btn-danger{background-color:#dc3545;color:#fff}.btn-danger:hover{background-color:#c82333;transform:translateY(-1px)}.btn-warning{background-color:#ffc107;color:#212529}.btn-warning:hover{background-color:#e0a800;transform:translateY(-1px)}.btn-small{padding:6px 12px;font-size:12px;margin:0 2px}.management-message{padding:12px 20px;border-radius:6px;margin-bottom:20px;font-weight:500}.management-message.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.management-message.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.management-message.warning{background-color:#fff3cd;color:#856404;border:1px solid #ffeaa7}.management-message.info{background-color:#d1ecf1;color:#0c5460;border:1px solid #bee5eb}.management-loading{text-align:center;padding:40px;color:#666;font-size:16px}.management-table{background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;overflow:hidden;margin-bottom:20px}.management-table th,.management-table td{padding:12px 8px;text-align:left;border-bottom:1px solid #eee;vertical-align:middle}.management-table th{background-color:#f8f9fa;font-weight:600;color:#333;position:sticky;top:0;z-index:10}.management-table tr:hover{background-color:#f8f9fa}.management-table tr.expired{background-color:#fff3cd}.table-actions{display:flex;gap:5px;align-items:center;justify-content:flex-start}.status-badge{padding:4px 8px;border-radius:12px;font-size:12px;font-weight:600;text-transform:uppercase;display:inline-block;vertical-align:middle}.status-badge.active{background-color:#d4edda;color:#155724}.status-badge.inactive{background-color:#f8d7da;color:#721c24}.status-badge.expired{background-color:#fff3cd;color:#856404}.status-badge.pending{background-color:#d1ecf1;color:#0c5460}.type-badge{padding:4px 8px;border-radius:12px;font-size:12px;font-weight:600;text-transform:uppercase;display:inline-block;vertical-align:middle}.type-badge.redirect{background-color:#d1ecf1;color:#0c5460}.type-badge.proxy{background-color:#d4edda;color:#155724}.copy-btn{background:none;border:none;outline:none;cursor:pointer;padding:0;margin-left:8px;font-size:14px;transition:all .2s ease;color:inherit;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;box-shadow:none}.copy-btn:hover{background:none;border:none;outline:none;transform:scale(1.1)}.copy-btn:active{background:none;border:none;outline:none;transform:scale(.95)}.copy-btn:focus{background:none;border:none;outline:none;box-shadow:none}.copy-icon{display:inline-block;width:16px;height:16px;text-align:center;line-height:16px;font-size:14px}.table-id{font-weight:600;vertical-align:middle}.table-url{color:#007bff;text-decoration:none;word-break:break-all;max-width:300px;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;line-height:1.4}.management-pagination{display:flex;justify-content:center;align-items:center;gap:15px;margin-top:20px;padding:20px}.management-pagination span{font-weight:500;color:#666}.management-empty{text-align:center;padding:60px 20px;color:#666}.management-empty h3{margin:0 0 10px;color:#999}.management-empty p{margin:0;font-size:14px}.tabs{display:flex;border-bottom:1px solid #ddd;margin-bottom:20px}.tab{padding:10px 20px;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;transition:all .3s ease}.tab:hover{background-color:#f5f5f5}.tab.active{border-bottom-color:#007bff;color:#007bff;font-weight:700}.filters{display:flex;gap:10px;margin-bottom:20px;align-items:center}.filter-input{padding:8px 12px;border:1px solid #ddd;border-radius:4px;min-width:200px}.content-cell{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:700;text-transform:uppercase}.status.active{background-color:#d4edda;color:#155724}.status.inactive{background-color:#f8d7da;color:#721c24}.status.pending{background-color:#fff3cd;color:#856404}.pagination{display:flex;justify-content:center;align-items:center;gap:15px;margin-top:20px;padding:20px 0}.pagination button{padding:8px 16px;border:1px solid #ddd;background:#fff;cursor:pointer;border-radius:4px;transition:all .3s ease}.pagination button:hover:not(:disabled){background-color:#f5f5f5;border-color:#007bff}.pagination button:disabled{opacity:.5;cursor:not-allowed}.message{padding:12px;margin-bottom:20px;border-radius:4px;text-align:center}.message.success{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.message.error{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.loading{text-align:center;padding:40px;color:#666;font-size:16px}@media (max-width: 768px){.management-container{padding:10px}.management-header{flex-direction:column;gap:15px;align-items:stretch}.management-table{overflow-x:auto}.management-table th,.management-table td{padding:8px 10px;font-size:14px}.table-actions{flex-direction:column;gap:3px}.management-pagination{flex-direction:column;gap:10px}}@media (max-width: 600px){.management-table.card-layout table,.management-table.card-layout thead,.management-table.card-layout tbody,.management-table.card-layout th,.management-table.card-layout td,.management-table.card-layout tr{display:block}.management-table.card-layout thead tr{position:absolute;top:-9999px;left:-9999px}.management-table.card-layout tr{border:1px solid #ccc;margin-bottom:15px;padding:15px;border-radius:8px;background:#fff}.management-table.card-layout td{border:none;position:relative;padding-left:45%!important;padding-top:8px;padding-bottom:8px}.management-table.card-layout td:before{content:attr(data-label) ": ";position:absolute;left:10px;width:40%;padding-right:10px;white-space:nowrap;font-weight:600;color:#333}}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal{background-color:#fff;border-radius:8px;box-shadow:0 4px 20px #0003;max-height:90vh;overflow-y:auto;width:90%;max-width:500px}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #eee;background-color:#f8f9fa;border-radius:8px 8px 0 0}.modal-header h2{margin:0;font-size:18px;font-weight:600;color:#333}.close-btn{background:none;border:none;font-size:24px;cursor:pointer;color:#777;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.close-btn:hover{color:#333;background-color:#f1f1f1}.modal form{padding:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#333;font-size:14px}.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:6px;font-size:14px;transition:border-color .2s ease;box-sizing:border-box}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.form-group input[type=checkbox]{width:auto;margin-right:8px}.form-group label:has(input[type=checkbox]){display:flex;align-items:center;cursor:pointer}.help-text{display:block;margin-top:5px;font-size:12px;color:#666}.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:20px;border-top:1px solid #eee;background-color:#f8f9fa;border-radius:0 0 8px 8px}@media (max-width: 768px){.modal{width:95%;max-width:none;margin:10px}.modal-header,.modal form,.modal-actions{padding:15px}.modal-actions{flex-direction:column}.modal-actions .btn{width:100%;margin:0}}:root{--primary-color: #007bff;--primary-color-dark: #0056b3;--primary-color-10: rgba(0, 123, 255, .1);--primary-color-20: rgba(0, 123, 255, .2);--secondary-color: #6c757d;--secondary-color-dark: #545b62;--success-color: #28a745;--success-color-dark: #218838;--success-color-10: rgba(40, 167, 69, .1);--success-color-20: rgba(40, 167, 69, .2);--error-color: #dc3545;--error-color-dark: #c82333;--error-color-10: rgba(220, 53, 69, .1);--error-color-20: rgba(220, 53, 69, .2);--warning-color: #ffc107;--warning-color-dark: #e0a800;--warning-color-10: rgba(255, 193, 7, .1);--warning-color-20: rgba(255, 193, 7, .2);--warning-color-30: rgba(255, 193, 7, .3);--info-color: #17a2b8;--info-color-dark: #138496;--info-color-10: rgba(23, 162, 184, .1);--info-color-20: rgba(23, 162, 184, .2);--info-color-30: rgba(23, 162, 184, .3);--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-tertiary: #e9ecef;--text-primary: #333333;--text-secondary: #666666;--text-tertiary: #999999;--border-color: #e9ecef;--border-color-light: #f1f3f4;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 12px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 25px rgba(0, 0, 0, .15);--transition-default: all .2s ease;--transition-default-fast: all .1s ease;--transition-default-slow: all .3s ease}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:14px;font-weight:500;text-decoration:none;transition:var(--transition-default);box-sizing:border-box;min-width:80px}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.btn-primary{background:var(--primary-color);color:#fff}.btn-primary:hover:not(:disabled){background:var(--primary-color-dark);transform:translateY(-1px)}.btn-secondary{background:var(--secondary-color);color:#fff}.btn-secondary:hover:not(:disabled){background:var(--secondary-color-dark);transform:translateY(-1px)}.btn-success{background:var(--success-color);color:#fff}.btn-success:hover:not(:disabled){background:var(--success-color-dark);transform:translateY(-1px)}.btn-danger{background:var(--error-color);color:#fff}.btn-danger:hover:not(:disabled){background:var(--error-color-dark);transform:translateY(-1px)}.btn-warning{background:var(--warning-color);color:var(--text-primary)}.btn-warning:hover:not(:disabled){background:var(--warning-color-dark);transform:translateY(-1px)}.btn-outline{background:transparent;border:2px solid var(--primary-color);color:var(--primary-color)}.btn-outline:hover:not(:disabled){background:var(--primary-color);color:#fff}.btn-small{padding:6px 12px;font-size:12px;min-width:60px}.btn-large{padding:14px 28px;font-size:16px;min-width:120px}.form-container{width:100%}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:var(--text-primary);font-size:14px}.form-group label .optional{color:var(--text-secondary);font-size:.9em;font-weight:400}.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:2px solid var(--border-color);border-radius:var(--radius-sm);font-size:14px;transition:border-color .2s ease,box-shadow .2s ease;box-sizing:border-box;font-family:inherit}.form-group textarea{min-height:120px;resize:vertical}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 .2rem #007bff40}.form-group input:disabled,.form-group select:disabled,.form-group textarea:disabled{background-color:var(--bg-secondary);color:var(--text-secondary);cursor:not-allowed}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:30px;padding-top:20px;border-top:1px solid var(--border-color)}.message{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:20px;display:flex;justify-content:space-between;align-items:center;font-size:14px}.message button{background:none;border:none;font-size:18px;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:var(--transition-default)}.message.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.message.error button{color:#721c24}.message.error button:hover{background:#f5c6cb}.message.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.message.success button{color:#155724}.message.success button:hover{background:#c3e6cb}.message.warning{background:#fff3cd;color:#856404;border:1px solid #ffeaa7}.message.warning button{color:#856404}.message.warning button:hover{background:#ffeaa7}.message.info{background:#d1ecf1;color:#0c5460;border:1px solid #bee5eb}.message.info button{color:#0c5460}.message.info button:hover{background:#bee5eb}.error-message{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb;padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:20px;display:flex;justify-content:space-between;align-items:center;font-size:14px}.error-message button{background:none;border:none;color:#721c24;font-size:18px;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:var(--transition-default)}.error-message button:hover{background:#f5c6cb}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}.modal-content{background-color:var(--bg-primary);border-radius:8px;box-shadow:0 4px 20px #00000026;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;animation:slideIn .3s ease}.modal-small{width:400px}.modal-medium{width:600px}.modal-large{width:80%;max-width:900px}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.modal-header h2{margin:0;font-size:1.5rem;color:var(--text-primary)}.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--text-secondary);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:var(--transition-default)}.modal-close:hover{color:var(--text-primary);background-color:var(--border-color)}.modal-body{padding:20px;overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:scale(.9) translateY(-20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;box-shadow:var(--shadow-sm);transition:var(--transition-default)}.card:hover{transform:translateY(-2px);box-shadow:0 4px 16px #00000026}.card-header{padding:16px 20px;border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary)}.card-body{padding:20px}.card-footer{padding:16px 20px;border-top:1px solid var(--border-color);background-color:var(--bg-secondary)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--spacing-lg);margin-top:var(--spacing-lg)}.card-grid-large{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}.card-grid-small{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.table-container{background:var(--bg-primary);border-radius:8px;box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:20px}.table{width:100%;border-collapse:collapse;font-size:14px}.table th,.table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border-color)}.table th{background-color:var(--bg-secondary);font-weight:600;color:var(--text-primary);position:sticky;top:0;z-index:10}.table tr{transition:background-color .2s ease}.table tr:hover{background-color:var(--bg-secondary)}.table tr:last-child td{border-bottom:none}.detail-container{width:100%;max-width:800px;margin:0 auto}.detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:2px solid var(--border-color)}.detail-title{margin:0;color:var(--text-primary);font-size:18px;font-weight:600}.header-actions{display:flex;gap:var(--spacing-xs)}.info-row{display:flex;margin-bottom:var(--spacing-xs);align-items:center}.info-label{min-width:120px;font-weight:600;color:var(--text-secondary);font-size:14px}.info-value{flex:1;word-break:break-all;font-size:14px;color:var(--text-primary)}.key-section{margin-bottom:var(--spacing-lg)}.key-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xs)}.key-section-header h3{margin:0;color:var(--text-primary);font-size:16px;font-weight:600}.key-box{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:var(--spacing-md);max-height:200px;overflow-y:auto}.key-box pre{white-space:pre-wrap;word-break:break-all;font-family:Monaco,Menlo,Ubuntu Mono,monospace;margin:0;font-size:12px;line-height:1.4;color:var(--text-primary)}.management-container{padding:var(--spacing-lg);max-width:1200px;margin:0 auto}.management-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:2px solid var(--border-color)}.management-header h1{margin:0;color:var(--text-primary);font-size:28px;font-weight:600}.management-table{background:var(--bg-primary);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:var(--spacing-lg)}.management-table table{width:100%;border-collapse:collapse;font-family:monospace;font-size:14px}.management-table th,.management-table td{padding:var(--spacing-sm);text-align:left;border-bottom:1px solid var(--border-color)}.management-table th{background-color:var(--bg-secondary);font-weight:600;color:var(--text-primary);position:sticky;top:0;z-index:10}.management-table tr{transition:background-color .2s ease}.management-table tr:hover{background-color:var(--bg-secondary)}.management-table tr.inactive{opacity:.6}.management-table tr.expired{background-color:var(--warning-color-10)}.table-actions{display:flex;gap:var(--spacing-xs);align-items:center}.table-id{font-weight:600;color:var(--text-primary)}.table-url{color:var(--primary-color);text-decoration:none;word-break:break-all;max-width:300px;display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table-url:hover{text-decoration:underline}.copy-btn{background:none;border:none;cursor:pointer;padding:var(--spacing-xs);margin-left:var(--spacing-xs);border-radius:var(--radius-xs);font-size:12px;color:var(--text-secondary);transition:all .2s ease}.copy-btn:hover{background-color:var(--bg-secondary);color:var(--text-primary)}.copy-button-inline{background-color:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-xs);cursor:pointer;padding:var(--spacing-xs) var(--spacing-sm);font-size:11px;font-weight:500;transition:all .2s ease;white-space:nowrap}.copy-button-inline:hover{background-color:var(--primary-color-dark);transform:translateY(-1px)}.copy-button-inline.copy-link-btn{background-color:var(--success-color)}.copy-button-inline.copy-link-btn:hover{background-color:var(--success-color-dark)}.copy-button-inline.install-btn{background-color:var(--warning-color);color:var(--text-primary)}.copy-button-inline.install-btn:hover{background-color:var(--warning-color-dark)}.management-pagination{display:flex;justify-content:center;align-items:center;gap:var(--spacing-md);margin-top:var(--spacing-lg);padding:var(--spacing-lg)}.management-pagination span{font-weight:500;color:var(--text-secondary)}.status-badge{padding:var(--spacing-xs) var(--spacing-sm);border-radius:12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.status-badge.active{background-color:var(--success-color-10);color:var(--success-color-dark)}.status-badge.inactive{background-color:var(--error-color-10);color:var(--error-color-dark)}.status-badge.expired{background-color:var(--warning-color-10);color:var(--warning-color-dark)}.status-badge.pending{background-color:var(--info-color-10);color:var(--info-color-dark)}.button-group{display:flex;gap:var(--spacing-xs);align-items:center}.page-container{max-width:1200px;margin:0 auto;padding:var(--spacing-lg)}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:2px solid var(--border-color)}.page-header h1{margin:0;color:var(--text-primary);font-size:28px;font-weight:600}@media (max-width: 768px){.page-container{padding:10px}.page-header{flex-direction:column;gap:15px;align-items:stretch}.form-actions{flex-direction:column}.btn{width:100%}.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.modal-small,.modal-medium,.modal-large{width:95%;max-width:none;margin:10px}}@media (max-width: 480px){.form-group input,.form-group select,.form-group textarea{padding:8px 10px;font-size:16px}}@media (max-width: 600px){.management-table.card-layout table,.management-table.card-layout thead,.management-table.card-layout tbody,.management-table.card-layout th,.management-table.card-layout td,.management-table.card-layout tr{display:block}.management-table.card-layout thead tr{position:absolute;top:-9999px;left:-9999px}.management-table.card-layout tr{border:1px solid var(--border-color);margin-bottom:var(--spacing-md);padding:var(--spacing-md);border-radius:var(--radius-md);background:var(--bg-primary)}.management-table.card-layout td{border:none;position:relative;padding-left:45%!important;padding-top:var(--spacing-xs);padding-bottom:var(--spacing-xs)}.management-table.card-layout td:before{content:attr(data-label) ": ";position:absolute;left:var(--spacing-sm);width:40%;padding-right:var(--spacing-sm);white-space:nowrap;font-weight:600;color:var(--text-primary)}}.circular-progress{position:relative;width:60px;height:60px;display:flex;align-items:center;justify-content:center}.progress-ring{width:100%;height:100%;transform:rotate(-90deg)}.progress-ring circle{fill:none;stroke-width:4;stroke-linecap:round}.progress-ring-background{stroke:var(--border-color)}.progress-ring-progress{transition:stroke-dashoffset 1s linear,stroke .3s ease}.progress-time{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:18px;font-weight:700;color:var(--text-secondary);transition:color .3s ease;line-height:1;text-align:center;z-index:1}.search-input{width:100%;max-width:400px;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:14px;background:var(--bg-secondary);transition:var(--transition-default)}.search-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-color-10)}.totp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:var(--spacing-lg);margin-top:var(--spacing-lg)}.totp-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);transition:var(--transition-default)}.totp-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.totp-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color)}.totp-card-header h3{margin:0;font-size:16px;font-weight:600;color:var(--text-primary)}.totp-label{font-style:italic;font-weight:400;color:var(--text-secondary);margin-left:var(--spacing-xs);font-size:14px}.totp-card-actions{display:flex;gap:var(--spacing-xs)}.totp-card-actions .btn{padding:var(--spacing-xs) var(--spacing-sm);font-size:12px}.totp-card-body{color:var(--text-secondary)}.totp-code-section{margin-top:var(--spacing-md)}.code-display{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md)}.code-value{display:flex;align-items:center;gap:var(--spacing-md);position:relative;justify-content:space-between;margin-bottom:0}.code-digits{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:1.6rem;font-weight:600;letter-spacing:2px;min-width:120px;padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-secondary);border-radius:var(--radius-sm);border:2px solid transparent;transition:all .3s ease;-webkit-user-select:none;user-select:none;cursor:pointer;display:inline-block}.code-digits:hover{background:var(--bg-tertiary);border-color:var(--primary-color-20);transform:translateY(-1px)}.copy-tip{position:absolute;top:-35px;left:50%;transform:translate(-50%);background:var(--success-color);color:#fff;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);font-size:12px;white-space:nowrap;z-index:10;animation:fadeInOut 2s ease-in-out}@keyframes fadeInOut{0%,to{opacity:0;transform:translate(-50%) translateY(-5px)}10%,90%{opacity:1;transform:translate(-50%) translateY(0)}}.page-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md);margin:var(--spacing-lg) 0}.search-container{flex:1;max-width:400px}.loading{text-align:center;padding:var(--spacing-xl);color:var(--text-secondary);font-size:16px}.empty-state{text-align:center;padding:var(--spacing-xl);color:var(--text-secondary);background:var(--bg-secondary);border-radius:var(--radius-md);border:2px dashed var(--border-color)}.totp-list{min-height:400px}.quick-import{margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background:var(--info-color-10);border:1px solid var(--info-color-20);border-radius:var(--radius-md)}.quick-import h4{margin:0 0 var(--spacing-sm) 0;color:var(--info-color-dark)}.quick-import-input{width:100%;padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--info-color-30);border-radius:var(--radius-xs);font-size:14px;margin-bottom:var(--spacing-sm);background:var(--bg-primary)}.quick-import-actions{display:flex;gap:var(--spacing-sm)}@media (max-width: 768px){.totp-grid{grid-template-columns:1fr;gap:var(--spacing-md)}.page-controls{flex-direction:column;align-items:stretch}.search-container{max-width:none}.totp-card-header{flex-direction:column;gap:var(--spacing-sm)}.totp-card-actions{align-self:flex-start}.code-display{flex-direction:column;align-items:center;gap:var(--spacing-sm)}.code-digits{font-size:20px}}.totp-detail{max-width:600px;margin:0 auto;padding:var(--spacing-lg)}.totp-header{text-align:center;margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:2px solid var(--border-color)}.totp-header h3{margin:0 0 var(--spacing-sm) 0;color:var(--text-primary);font-size:1.8rem;font-weight:600}.totp-label{color:var(--text-secondary);font-size:1rem;margin:0}.totp-detail .code-value{justify-content:center;margin-bottom:var(--spacing-lg)}.totp-detail .code-digits{font-size:2rem;min-width:160px;padding:var(--spacing-md) var(--spacing-lg);border-width:3px}.totp-detail .circular-progress{margin-left:var(--spacing-lg)}.totp-detail .progress-time{font-size:16px}.totp-qr-section{margin:var(--spacing-xl) 0;text-align:center}.qr-code-display{margin-top:var(--spacing-lg);padding:var(--spacing-lg);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.qr-code-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.qr-code-wrapper{text-align:center}.qr-svg-container{margin-bottom:var(--spacing-md)}.qr-uri{word-break:break-all;background:var(--bg-tertiary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-xs);font-family:monospace;font-size:12px;margin:var(--spacing-sm) 0;color:var(--text-secondary)}.totp-actions{display:flex;justify-content:center;gap:var(--spacing-md);margin:var(--spacing-xl) 0;padding-top:var(--spacing-lg);border-top:1px solid var(--border-color)}.totp-details{margin-top:var(--spacing-xl);padding:var(--spacing-lg);background:var(--bg-secondary);border-radius:var(--radius-lg);border:1px solid var(--border-color)}.totp-details h4{margin:0 0 var(--spacing-md) 0;color:var(--text-primary);font-size:1.2rem}.totp-config{display:flex;flex-direction:column;gap:var(--spacing-sm)}.config-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xs) 0;border-bottom:1px solid var(--border-color)}.config-item:last-child{border-bottom:none}.config-item label{font-weight:500;color:var(--text-primary)}.config-item span{color:var(--text-secondary);font-family:monospace}.copy-btn{background:none;border:1px solid var(--border-color);padding:var(--spacing-xs);border-radius:var(--radius-sm);cursor:pointer;font-size:16px;color:var(--text-secondary);transition:all .2s ease}.copy-btn:hover{background-color:var(--bg-secondary);color:var(--text-primary);border-color:var(--primary-color-20)}.time-progress{display:flex;align-items:center;gap:var(--spacing-md)}.progress-bar{flex:1;height:8px;background:var(--border-color);border-radius:var(--radius-xs);overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--success-color),var(--warning-color),var(--error-color));transition:width 1s linear;border-radius:var(--radius-xs)}.time-remaining{font-family:Courier New,monospace;font-size:14px;font-weight:700;color:var(--text-secondary);min-width:30px;text-align:right}.totp-form{width:100%}.secret-input-group{display:flex;gap:var(--spacing-sm);align-items:stretch}.secret-input-group input{flex:1}.secret-input-group button{padding:var(--spacing-sm) var(--spacing-md);white-space:nowrap}.quick-import-section{margin-bottom:var(--spacing-lg);padding:var(--spacing-lg);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md)}.quick-import-section h3{margin:0 0 var(--spacing-md) 0;color:var(--text-primary);font-size:1.1em;font-weight:600}.quick-import-toggle{width:100%;margin-bottom:0}.quick-import-form,.quick-import-input-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.quick-import-input-group input{padding:var(--spacing-sm) var(--spacing-md);border:2px solid var(--border-color);border-radius:var(--radius-md);font-size:14px;font-family:monospace;word-break:break-all;background:var(--bg-primary)}.quick-import-input-group input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-color-10)}.quick-import-input-group input.error{border-color:var(--error-color);box-shadow:0 0 0 3px var(--error-color-10)}.quick-import-buttons{display:flex;gap:var(--spacing-sm)}.quick-import-help{margin-top:var(--spacing-xs)}.quick-import-help small{color:var(--text-secondary);font-size:12px;line-height:1.4}.import-success{background:var(--success-color-10);color:var(--success-color-dark);border:1px solid var(--success-color-20);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md);font-size:14px;font-weight:500}.uri-examples{margin-top:var(--spacing-sm)}.uri-examples summary{cursor:pointer;color:var(--primary-color);font-size:12px;margin-bottom:var(--spacing-xs);font-weight:500}.uri-examples summary:hover{text-decoration:underline}.examples-content{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-xs);padding:var(--spacing-sm);margin-top:var(--spacing-xs)}.examples-content code{display:block;margin-bottom:var(--spacing-xs);padding:var(--spacing-xs);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xs);font-family:monospace;font-size:11px;word-break:break-all;color:var(--text-secondary)}.examples-content code:last-child{margin-bottom:0}.form-divider{text-align:center;margin:var(--spacing-lg) 0;position:relative;color:var(--text-secondary);font-size:14px}.form-divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border-color);z-index:1}.form-divider span{background:var(--bg-primary);padding:0 var(--spacing-md);position:relative;z-index:2}.toggle-detailed-form{width:100%;padding:var(--spacing-md);background:var(--bg-primary);border:1px solid var(--primary-color);color:var(--primary-color);border-radius:var(--radius-xs);font-weight:500;cursor:pointer;transition:var(--transition-default)}.toggle-detailed-form:hover{background:var(--primary-color);color:#fff}.detailed-form-section{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.detailed-form-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--border-color)}.detailed-form-header h3{margin:0;color:var(--text-primary);font-size:1.1em;font-weight:600}.back-to-quick,.btn-text{background:none!important;border:none!important;padding:var(--spacing-xs) var(--spacing-sm)!important;color:var(--primary-color)!important;cursor:pointer;font-size:14px;text-decoration:none;border-radius:var(--radius-xs);transition:var(--transition-default)}.back-to-quick:hover,.btn-text:hover{background-color:var(--primary-color-10)!important;text-decoration:underline}.error-text{color:var(--error-color);font-size:12px;margin-top:var(--spacing-xs);display:block}@media (max-width: 768px){.totp-form{max-width:none}.secret-input-group,.quick-import-input-group{flex-direction:column}.quick-import-section{padding:var(--spacing-md)}.examples-content code{font-size:10px}}.navbar{position:fixed;top:0;left:0;right:0;height:60px;background-color:#fff;box-shadow:0 1px 4px #0000001a;display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:100}.navbar-logo a{font-size:18px;font-weight:700;color:#2c88d9;text-decoration:none}.navbar-links{display:flex;gap:20px}.navbar-links a{color:#555;text-decoration:none;padding:6px 0;position:relative}.navbar-links a:hover,.navbar-links a.active{color:#2c88d9}.navbar-links a.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background-color:#2c88d9}.navbar-actions{display:flex;align-items:center}.logout-button{background:none;border:none;color:#666;cursor:pointer;padding:8px 12px;font-size:14px;border-radius:4px}.logout-button:hover{background-color:#f1f3f4;color:#333}@media (max-width: 768px){.navbar{padding:0 10px}.navbar-logo a{font-size:16px}.navbar-links{gap:10px}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:#f9f9f9;color:#333;line-height:1.6}.app-container{min-height:100vh}.content-container{min-height:calc(100vh - 80px);padding:80px 20px 20px}.container{padding-top:70px;min-height:100vh}.loading{display:flex;justify-content:center;align-items:center;height:100vh;font-size:18px;color:#666}.auth-error{display:flex;justify-content:center;align-items:center;height:100vh;font-size:18px;color:#d32f2f;background-color:#ffebee}.error-boundary{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;padding:20px;text-align:center}.not-found{display:flex;justify-content:center;align-items:center;height:50vh;font-size:24px;color:#666}button{cursor:pointer}button:disabled{cursor:not-allowed}a{text-decoration:none;color:inherit}