:root{--primary: #6bbd99;--primary-hover: #5aaf89;--primary-color: #6bbd99;--primary-light: #84cfab;--primary-dark: #4a9e78;--primary-soft: rgba(107, 189, 153, .12);--glass-bg: rgba(255, 255, 255, .55);--glass-bg-hover: rgba(255, 255, 255, .75);--glass-bg-active: rgba(255, 255, 255, .85);--glass-border: rgba(0, 0, 0, .06);--glass-border-hover: rgba(0, 0, 0, .12);--success-color: #6bbd99;--success-soft: rgba(107, 189, 153, .1);--danger-color: #d9685e;--danger-soft: rgba(217, 104, 94, .08);--info-color: #888;--info-soft: rgba(0, 0, 0, .04);--text-primary: rgba(0, 0, 0, .82);--text-secondary: rgba(0, 0, 0, .48);--text-tertiary: rgba(0, 0, 0, .28);--bg-deep: #f5f3ef;--bg-surface: #faf9f7;--bg-elevated: #ffffff;--shadow-sm: 0 2px 12px rgba(0, 0, 0, .04);--shadow-md: 0 4px 24px rgba(0, 0, 0, .06);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .08);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 18px;--radius-full: 9999px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-size-2xl: 24px;--font-size-3xl: 28px;--transition-fast: .15s ease;--transition-normal: .25s ease;--blur-sm: blur(8px);--blur-md: blur(16px);--blur-lg: blur(24px)}*{margin:0;padding:0;box-sizing:border-box}html{background:var(--bg-deep)}body{font-family:var(--font-family);color:var(--text-primary);background:var(--bg-deep);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse 80% 60% at 20% 20%,rgba(107,189,153,.04) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 80% 70%,rgba(0,0,0,.02) 0%,transparent 60%),var(--bg-deep)}body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(0,0,0,.02) 28px,rgba(0,0,0,.02) 29px),repeating-linear-gradient(90deg,transparent,transparent 28px,rgba(0,0,0,.015) 28px,rgba(0,0,0,.015) 29px);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 30%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black 30%,transparent 100%)}.app{min-height:100vh;position:relative;z-index:1}.baground_image{display:none}.main-content{max-width:1200px;margin:0 auto;padding:var(--spacing-md);min-height:calc(100vh - 64px)}@media(max-width:768px){.main-content{padding:var(--spacing-sm)}}.glass-card{background:var(--glass-bg);backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);border:1px solid var(--glass-border);border-radius:var(--radius-lg)}.loading{display:flex;align-items:center;justify-content:center;min-height:200px;color:var(--text-secondary);font-size:var(--font-size-md);gap:var(--spacing-sm)}.loading:after{content:"";width:20px;height:20px;border:2px solid rgba(0,0,0,.06);border-top-color:var(--primary-color);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:var(--spacing-2xl) var(--spacing-lg);background:var(--glass-bg);backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);border-radius:var(--radius-lg);border:1px solid var(--glass-border)}.empty-state-icon{font-size:48px;margin-bottom:var(--spacing-md);opacity:.4}.empty-state-title{font-size:var(--font-size-lg);color:var(--text-primary);margin-bottom:var(--spacing-xs);font-weight:500}.empty-state-text{color:var(--text-secondary);margin-bottom:var(--spacing-lg);font-size:var(--font-size-sm)}.error-message{background:var(--danger-soft);color:var(--danger-color);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md);font-size:var(--font-size-sm);border:1px solid rgba(224,119,109,.2)}@media(max-width:480px){.main-content{padding:var(--spacing-xs)}}[class^=ic-]{display:inline-block;width:1.2em;height:1.2em;background-size:contain;background-repeat:no-repeat;background-position:center}.ic-tianjia{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236bbd99' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")}.ic-tixing{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236bbd99' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E")}.ic-guanbi{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300000077' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E")}.ic-sousuo{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")}.ic-letter{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300000070' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M22 6L12 13L2 6'/%3E%3Cpath d='M2 6h20v12H2z'/%3E%3C/svg%3E")}.ic-penpals{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300000070' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}.ic-calculator{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300000070' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2' ry='2'/%3E%3Cline x1='8' y1='8' x2='16' y2='8'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3Cline x1='8' y1='16' x2='12' y2='16'/%3E%3C/svg%3E")}.ic-admin{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300000070' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2L2 7v8l10 5 10-5V7l-10-5z'/%3E%3Cpath d='M2 7l10 5 10-5'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E")}.ic-logout{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300000070' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E")}.ic-jiechuguanxi{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9685e' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E")}.btn-primary{background:var(--primary-color);color:#1a1a1a;border:none;padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:var(--spacing-xs);box-shadow:0 2px 8px #6bbd9940}.btn-primary:hover:not(:disabled){background:var(--primary-light);box-shadow:0 4px 16px #6bbd9959;transform:translateY(-1px)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.btn-primary.btn-lg{padding:var(--spacing-md) var(--spacing-xl);font-size:var(--font-size-md);border-radius:var(--radius-lg)}.btn-primary [class^=ic-]{filter:brightness(0)}.btn-secondary{background:var(--glass-bg);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);color:var(--text-primary);border:1px solid var(--glass-border);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-md);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:var(--spacing-xs)}.btn-secondary:hover:not(:disabled){background:var(--glass-bg-hover);border-color:var(--glass-border-hover);box-shadow:var(--shadow-sm)}.btn-secondary:disabled{opacity:.4;cursor:not-allowed}.btn-success{background:var(--success-color);color:#1a1a1a;border:none;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.btn-success:hover:not(:disabled){background:#80d5ad;box-shadow:0 2px 12px #6bbd9959;transform:translateY(-1px)}.btn-danger{background:var(--danger-color);color:#fff;border:none;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.btn-danger:hover:not(:disabled){background:#f0887e;box-shadow:0 2px 12px #e0776d59;transform:translateY(-1px)}.btn-danger:active:not(:disabled){transform:translateY(0)}.spinner{display:inline-block;width:12px;height:12px;border:2px solid rgba(0,0,0,.06);border-top-color:var(--primary-color);border-radius:50%;animation:spin .5s linear infinite;margin-right:4px}.navbar{position:sticky;top:0;z-index:100;background:#faf9f7bf;backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg);border-bottom:1px solid var(--glass-border);box-shadow:0 1px 20px #0000000f}.navbar .nav-container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md);display:flex;align-items:center;justify-content:space-between;height:56px;gap:var(--spacing-md)}.navbar .logo{display:flex;align-items:center;gap:var(--spacing-sm);text-decoration:none;color:var(--text-primary);flex-shrink:0}.navbar .logo-image{width:32px;height:32px;border-radius:var(--radius-sm)}.navbar .logo h1{font-size:var(--font-size-lg);font-weight:600;background:linear-gradient(135deg,var(--primary-light),var(--primary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0}.navbar .menu-toggle{display:none;background:none;border:none;font-size:22px;color:var(--text-secondary);cursor:pointer;width:36px;height:36px;border-radius:var(--radius-sm);transition:all var(--transition-fast);align-items:center;justify-content:center}.navbar .menu-toggle:hover{background:var(--glass-bg);color:var(--text-primary)}@media(max-width:768px){.navbar .menu-toggle{display:flex}}.navbar .nav-links{display:flex;gap:var(--spacing-xs);align-items:center}@media(max-width:768px){.navbar .nav-links{display:none;position:absolute;top:56px;left:0;right:0;flex-direction:column;background:#faf9f7eb;backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg);padding:var(--spacing-md);border-bottom:1px solid var(--glass-border);box-shadow:var(--shadow-md)}.navbar .nav-links.open{display:flex}}.navbar .nav-links .menu-link{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-secondary);text-decoration:none;border-radius:var(--radius-md);transition:all var(--transition-fast);font-size:var(--font-size-sm);font-weight:500}.navbar .nav-links .menu-link [class^=ic-]{width:18px;height:18px}.navbar .nav-links .menu-link:hover{color:var(--text-primary);background:var(--glass-bg-hover)}.navbar .nav-links .menu-link.active{color:var(--primary-light);background:var(--primary-soft);box-shadow:inset 0 0 0 1px #6bbd9933}@media(max-width:768px){.navbar .nav-links .menu-link{width:100%;justify-content:center;padding:var(--spacing-sm) var(--spacing-md)}}.navbar .nav-actions{display:flex;align-items:center;gap:var(--spacing-md)}.navbar .nav-actions .user-info{display:flex;align-items:center;gap:var(--spacing-sm)}.navbar .nav-actions .user-info .user-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid rgba(107,189,153,.3)}.navbar .nav-actions .user-info .user-penname{font-size:var(--font-size-sm);color:var(--text-primary);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}@media(max-width:480px){.navbar .nav-actions .user-info .user-penname{display:none}}.navbar .nav-actions .logout-button{background:none;border:1px solid var(--glass-border);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-xs);transition:all var(--transition-fast);height:34px}.navbar .nav-actions .logout-button:hover{background:var(--danger-soft);border-color:var(--danger-color);color:var(--danger-color)}@media(max-width:480px){.navbar .nav-actions .logout-button span:not(.ic-logout){display:none}}.custom-select{position:relative;width:100%}.custom-select-trigger{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);background:#00000008;border:1px solid var(--glass-border);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);color:var(--text-primary);min-height:38px;transition:all var(--transition-fast)}.custom-select-trigger:hover{border-color:var(--glass-border-hover);background:#0000000a}.custom-select-arrow{transition:transform var(--transition-fast);width:16px;height:16px;color:var(--text-tertiary)}.custom-select.open .custom-select-arrow{transform:rotate(180deg)}.custom-select-options{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg-elevated);backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg);border:1px solid var(--glass-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:10;max-height:220px;overflow-y:auto}.custom-select-option{padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:background var(--transition-fast);font-size:var(--font-size-sm);color:var(--text-secondary)}.custom-select-option:hover{background:var(--glass-bg-hover);color:var(--text-primary)}.custom-select-option.selected{background:var(--primary-soft);color:var(--primary-light)}.custom-select.disabled .custom-select-trigger{opacity:.4;cursor:not-allowed}.auth-container{min-height:calc(100vh - 140px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-md)}.auth-container .auth-header{text-align:center;margin-bottom:var(--spacing-xl)}.auth-container .auth-header .auth-logo{width:72px;height:72px;margin-bottom:var(--spacing-md);border-radius:var(--radius-lg);box-shadow:0 4px 24px #6bbd9933}.auth-container .auth-header .auth-title{font-size:var(--font-size-3xl);background:linear-gradient(135deg,var(--primary-light),var(--primary-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--spacing-xs);font-weight:700;letter-spacing:2px}.auth-container .auth-header .auth-subtitle{color:var(--text-secondary);font-size:var(--font-size-sm);letter-spacing:4px}.auth-container .form-wrapper{width:100%;max-width:400px;background:var(--glass-bg);backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg);border-radius:var(--radius-xl);padding:var(--spacing-xl);border:1px solid var(--glass-border);box-shadow:var(--shadow-lg)}.auth-container .auth-tabs{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.auth-container .auth-tabs .auth-tab{flex:1;padding:var(--spacing-sm) var(--spacing-md);border:none;background:none;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.auth-container .auth-tabs .auth-tab:hover{color:var(--text-primary);background:var(--glass-bg-hover)}.auth-container .auth-tabs .auth-tab.active{color:var(--primary-light);background:var(--primary-soft);box-shadow:inset 0 0 0 1px #6bbd9933}.auth-container .auth-tabs .auth-tab:disabled{opacity:.5;cursor:not-allowed}.auth-container .form .form-group{margin-bottom:var(--spacing-md)}.auth-container .form .form-group .form-input{width:100%;padding:12px var(--spacing-md);background:#00000008;border:1px solid var(--glass-border);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--text-primary);transition:all var(--transition-fast);outline:none}.auth-container .form .form-group .form-input::placeholder{color:var(--text-tertiary)}.auth-container .form .form-group .form-input:focus{border-color:var(--primary-color);background:#0000000d;box-shadow:0 0 0 3px var(--primary-soft)}.auth-container .form .form-button{width:100%;padding:12px;background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:#1a1a1a;border:none;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 4px 16px #6bbd994d;margin-top:var(--spacing-md)}.auth-container .form .form-button:hover:not(:disabled){box-shadow:0 6px 24px #6bbd9973;transform:translateY(-1px)}.auth-container .form .form-button:active:not(:disabled){transform:translateY(0)}.auth-container .form .form-button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.auth-container .auth-footer{margin-top:var(--spacing-xl)}.auth-container .auth-footer .auth-version{color:var(--text-tertiary);font-size:var(--font-size-xs);letter-spacing:1px}.modal-overlay{position:fixed;inset:0;background:#0000008c;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn var(--transition-fast)}.modal-container{background:var(--bg-elevated);border:1px solid var(--glass-border);border-radius:var(--radius-lg);max-width:500px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:slideIn var(--transition-fast)}.modal-container .modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-lg) var(--spacing-lg) 0;border:none}.modal-container .modal-header .modal-title{font-size:var(--font-size-lg);color:var(--text-primary);margin:0;font-weight:600}.modal-container .modal-header .modal-close-button{width:32px;height:32px;border:none;background:var(--glass-bg);border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all var(--transition-fast)}.modal-container .modal-header .modal-close-button:hover{background:var(--danger-soft);color:var(--danger-color)}.modal-container .modal-header .modal-close-button .ic-guanbi{width:16px;height:16px}.modal-container .modal-content{padding:var(--spacing-lg)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translateY(-12px) scale(.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.timeline-container{max-width:900px;margin:0 auto}.timeline-container .timeline-header-section{background:var(--glass-bg);backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);border:1px solid var(--glass-border)}.timeline-container .timeline-header-section .timeline-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-md)}.timeline-container .timeline-header-section .timeline-header .timeline-title{font-size:var(--font-size-xl);color:var(--text-primary);margin:0;font-weight:600;letter-spacing:2px}.timeline-container .timeline-header-section .timeline-header .write-letter-btn{padding:var(--spacing-sm) var(--spacing-lg)}.timeline-container .timeline-header-section .timeline-header .write-letter-btn .ic-tianjia{width:16px;height:16px;filter:brightness(0)}.timeline-container .timeline-header-section .timeline-filters{display:flex;gap:var(--spacing-md);flex-wrap:wrap;align-items:center}@media(max-width:480px){.timeline-container .timeline-header-section .timeline-filters{flex-direction:column}}.timeline-container .timeline-header-section .timeline-filters .penpal-filter{min-width:140px}@media(max-width:480px){.timeline-container .timeline-header-section .timeline-filters .penpal-filter{width:100%}}.timeline-container .timeline-header-section .timeline-filters .letter-filter-buttons{display:flex;gap:2px;background:#00000008;padding:3px;border-radius:var(--radius-md);border:1px solid var(--glass-border)}.timeline-container .timeline-header-section .timeline-filters .letter-filter-buttons .filter-button{padding:var(--spacing-xs) var(--spacing-md);border:none;background:none;border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.timeline-container .timeline-header-section .timeline-filters .letter-filter-buttons .filter-button.active{background:var(--primary-color);color:#111}.timeline-container .timeline-header-section .timeline-filters .letter-filter-buttons .filter-button:hover:not(.active){color:var(--text-primary)}@media(max-width:480px){.timeline-container .timeline-header-section .timeline-filters .letter-filter-buttons .filter-button{flex:1}}.timeline-container .timeline{position:relative}.timeline-container .timeline:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(107,189,153,.25) 10%,rgba(107,189,153,.25) 90%,transparent)}@media(max-width:768px){.timeline-container .timeline:before{display:none}}.timeline-container .timeline-item{position:relative;width:46%;margin-bottom:var(--spacing-lg);background:var(--glass-bg);backdrop-filter:var(--blur-lg);-webkit-backdrop-filter:var(--blur-lg);border-radius:var(--radius-lg);padding:var(--spacing-lg);border:1px solid var(--glass-border);transition:all var(--transition-normal)}.timeline-container .timeline-item:hover{box-shadow:var(--shadow-md);z-index:2}.timeline-container .timeline-item-received{margin-right:auto;background:#6bbd990d;border:1px solid rgba(107,189,153,.15);border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px}.timeline-container .timeline-item-received:after{content:"";position:absolute;right:-8px;top:20px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid rgba(107,189,153,.12)}.timeline-container .timeline-item-received:before{content:"";position:absolute;right:-28px;top:22px;width:10px;height:10px;background:var(--primary-color);border-radius:50%;box-shadow:0 0 10px #6bbd9980;z-index:1}@media(max-width:768px){.timeline-container .timeline-item-received:before{display:none}}.timeline-container .timeline-item-received:hover{background:#6bbd9914;border-color:#6bbd994d;box-shadow:0 0 24px #6bbd991a}.timeline-container .timeline-item-received .timeline-message{background:#6bbd990a;border:1px solid rgba(107,189,153,.08)}.timeline-container .timeline-item-received .timeline-penname{color:var(--primary-color)}.timeline-container .timeline-item-sent{margin-left:auto;border-radius:var(--radius-lg) var(--radius-lg) 4px var(--radius-lg)}.timeline-container .timeline-item-sent:after{content:"";position:absolute;left:-8px;top:20px;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid var(--glass-border)}.timeline-container .timeline-item-sent:before{content:"";position:absolute;left:-28px;top:22px;width:10px;height:10px;background:#00000026;border-radius:50%;box-shadow:0 0 8px #0000000f;z-index:1}@media(max-width:768px){.timeline-container .timeline-item-sent:before{display:none}}.timeline-container .timeline-item-sent:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-hover)}.timeline-container .timeline-item-sent .timeline-message{background:#00000005;border:1px solid rgba(0,0,0,.04)}@media(max-width:768px){.timeline-container .timeline-item{width:100%;margin-left:0;margin-right:0;border-radius:var(--radius-lg)}.timeline-container .timeline-item:after,.timeline-container .timeline-item:before{display:none}.timeline-container .timeline-item-received{border-left:3px solid var(--primary-color)}.timeline-container .timeline-item-sent{border-left:3px solid rgba(0,0,0,.12)}}.timeline-container .timeline-item .timeline-content .timeline-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--spacing-sm);flex-wrap:wrap;gap:var(--spacing-xs)}.timeline-container .timeline-item .timeline-content .timeline-header-info{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}.timeline-container .timeline-item .timeline-content .timeline-header .timeline-penname{font-weight:700;font-size:var(--font-size-sm);letter-spacing:1px}.timeline-container .timeline-item .timeline-content .timeline-header .timeline-serial{font-size:10px;color:var(--text-tertiary);background:#00000008;padding:1px 8px;border-radius:var(--radius-full);border:1px solid rgba(0,0,0,.06);font-family:monospace}.timeline-container .timeline-item .timeline-content .timeline-header .timeline-date{font-size:var(--font-size-xs);color:var(--text-tertiary);font-family:monospace}.timeline-container .timeline-item .timeline-content .timeline-message{padding:var(--spacing-md);border-radius:var(--radius-md);margin-bottom:var(--spacing-sm);font-size:var(--font-size-sm);line-height:1.8;white-space:pre-wrap;word-break:break-word}.timeline-container .timeline-item .timeline-content .timeline-status{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);flex-wrap:wrap}.timeline-container .timeline-item .timeline-content .timeline-status .email-status{font-size:10px;padding:2px 10px;border-radius:var(--radius-full);font-weight:600;letter-spacing:1px}.timeline-container .timeline-item .timeline-content .timeline-status .email-status.status-sent{background:#0000000a;color:var(--text-tertiary)}.timeline-container .timeline-item .timeline-content .timeline-status .email-status.status-received{background:#6bbd9926;color:var(--primary-color)}.timeline-container .timeline-item .timeline-content .timeline-status .email-status.status-lost{background:var(--danger-soft);color:var(--danger-color)}.timeline-container .timeline-item .timeline-content .timeline-status .timeline-received-at{font-size:var(--font-size-xs);color:var(--text-tertiary)}.timeline-container .timeline-item .timeline-content .timeline-status-actions,.timeline-container .timeline-item .timeline-content .timeline-penpal-actions{display:flex;gap:var(--spacing-sm);flex-wrap:wrap;margin-top:var(--spacing-sm)}.timeline-container .timeline-item .timeline-content .timeline-status-actions button,.timeline-container .timeline-item .timeline-content .timeline-penpal-actions button{font-size:var(--font-size-xs);padding:var(--spacing-xs) var(--spacing-md)}.timeline-container .timeline-item .timeline-content .timeline-status-actions .status-action-button.received,.timeline-container .timeline-item .timeline-content .timeline-penpal-actions .status-action-button.received{background:#6bbd991f;color:var(--primary-color);border:1px solid rgba(107,189,153,.2);border-radius:var(--radius-md)}.timeline-container .timeline-item .timeline-content .timeline-status-actions .status-action-button.received:hover:not(:disabled),.timeline-container .timeline-item .timeline-content .timeline-penpal-actions .status-action-button.received:hover:not(:disabled){background:#6bbd9938}.timeline-container .timeline-item .timeline-content .timeline-status-actions .status-action-button.lost,.timeline-container .timeline-item .timeline-content .timeline-penpal-actions .status-action-button.lost{background:var(--danger-soft);color:var(--danger-color);border:1px solid rgba(224,119,109,.2);border-radius:var(--radius-md)}.timeline-container .timeline-item .timeline-content .timeline-status-actions .status-action-button.lost:hover:not(:disabled),.timeline-container .timeline-item .timeline-content .timeline-penpal-actions .status-action-button.lost:hover:not(:disabled){background:#e0776d38}.timeline-container .timeline-item .timeline-content .timeline-status-actions .add-penpal-button,.timeline-container .timeline-item .timeline-content .timeline-status-actions .reminder-toggle-button,.timeline-container .timeline-item .timeline-content .timeline-penpal-actions .add-penpal-button,.timeline-container .timeline-item .timeline-content .timeline-penpal-actions .reminder-toggle-button{background:#6bbd9914;color:var(--primary-color);border:1px solid rgba(107,189,153,.18);border-radius:var(--radius-md)}.timeline-container .timeline-item .timeline-content .timeline-status-actions .add-penpal-button:hover:not(:disabled),.timeline-container .timeline-item .timeline-content .timeline-status-actions .reminder-toggle-button:hover:not(:disabled),.timeline-container .timeline-item .timeline-content .timeline-penpal-actions .add-penpal-button:hover:not(:disabled),.timeline-container .timeline-item .timeline-content .timeline-penpal-actions .reminder-toggle-button:hover:not(:disabled){background:#6bbd992e}.timeline-container .timeline-item .timeline-content .timeline-status-actions .reminder-form,.timeline-container .timeline-item .timeline-content .timeline-penpal-actions .reminder-form{display:flex;gap:var(--spacing-sm);width:100%;flex-wrap:wrap}.timeline-container .timeline-item .timeline-content .timeline-status-actions .reminder-form .reminder-input,.timeline-container .timeline-item .timeline-content .timeline-penpal-actions .reminder-form .reminder-input{flex:1;min-width:160px;padding:var(--spacing-xs) var(--spacing-sm);background:#00000008;border:1px solid var(--glass-border);border-radius:var(--radius-md);font-size:var(--font-size-xs);color:var(--text-primary)}.timeline-container .timeline-item .timeline-content .timeline-status-actions .reminder-form .reminder-input:focus,.timeline-container .timeline-item .timeline-content .timeline-penpal-actions .reminder-form .reminder-input:focus{outline:none;border-color:var(--primary-color)}.timeline-container .timeline-item .timeline-content .timeline-status-actions .reminder-form .reminder-input::placeholder,.timeline-container .timeline-item .timeline-content .timeline-penpal-actions .reminder-form .reminder-input::placeholder{color:var(--text-tertiary)}.timeline-container .timeline-item .timeline-content .timeline-status-actions .reminder-form .reminder-form-actions,.timeline-container .timeline-item .timeline-content .timeline-penpal-actions .reminder-form .reminder-form-actions{display:flex;gap:var(--spacing-xs)}.timeline-container .write-letter-fab{position:fixed;bottom:var(--spacing-xl);right:var(--spacing-xl);width:52px;height:52px;border-radius:50%;background:var(--primary-color);color:#111;border:none;box-shadow:0 4px 24px #6bbd9959;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:all var(--transition-fast);z-index:90}.timeline-container .write-letter-fab:hover{transform:scale(1.1);box-shadow:0 6px 32px #6bbd9980}.timeline-container .write-letter-fab .ic-tianjia{width:22px;height:22px;filter:brightness(0)}@media(min-width:769px){.timeline-container .write-letter-fab{display:none}}.timeline-container .empty-state{max-width:400px;margin:var(--spacing-2xl) auto;text-align:center;background:#6bbd9908;border:1px solid rgba(107,189,153,.12)}.timeline-container .empty-state .empty-state-icon{font-size:56px;margin-bottom:var(--spacing-lg);opacity:.35}.timeline-container .empty-state .empty-state-title{color:var(--text-primary);margin-bottom:var(--spacing-sm)}.timeline-container .empty-state .empty-state-text{color:var(--text-secondary)}@media(max-width:480px){.timeline-item{padding:var(--spacing-md)}}.penpals-container{max-width:720px;margin:0 auto;display:grid;gap:var(--spacing-md)}.penpals-container .stats-card{background:var(--glass-bg);backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);border-radius:var(--radius-lg);padding:var(--spacing-xl);border:1px solid var(--glass-border);box-shadow:var(--shadow-sm)}.penpals-container .stats-card .stats-title{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--spacing-md);font-weight:500}.penpals-container .stats-card .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-md)}.penpals-container .stats-card .stat-item{text-align:center;padding:var(--spacing-sm);background:#00000005;border-radius:var(--radius-md)}.penpals-container .stats-card .stat-item .stat-value{font-size:var(--font-size-xl);font-weight:700;color:var(--text-primary);line-height:1.2}.penpals-container .stats-card .stat-item .stat-value.stat-received{color:var(--primary-light)}.penpals-container .stats-card .stat-item .stat-value.stat-sent{color:#6b7280}.penpals-container .stats-card .stat-item .stat-value.stat-total{color:var(--primary-color)}.penpals-container .stats-card .stat-item .stat-label{font-size:var(--font-size-xs);color:var(--text-tertiary);margin-top:2px;display:block}.penpals-container .user-info-card{background:var(--glass-bg);backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);border-radius:var(--radius-lg);padding:var(--spacing-xl);border:1px solid var(--glass-border);box-shadow:var(--shadow-sm)}.penpals-container .user-info-card .user-info-header{display:flex;gap:var(--spacing-md);align-items:center;margin-bottom:var(--spacing-lg)}.penpals-container .user-info-card .user-info-header .user-avatars{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid rgba(107,189,153,.25);box-shadow:0 0 16px #6bbd991f}.penpals-container .user-info-card .user-info-header .user-info-main h2{font-size:var(--font-size-lg);margin-bottom:2px;font-weight:600;color:var(--text-primary)}.penpals-container .user-info-card .user-info-header .user-info-main .user-role{color:var(--primary-light);font-size:var(--font-size-xs);background:var(--primary-soft);display:inline-block;padding:2px 8px;border-radius:var(--radius-full);border:1px solid rgba(107,189,153,.18)}.penpals-container .user-info-card .user-info-details{margin-bottom:var(--spacing-lg)}.penpals-container .user-info-card .user-info-details .user-info-item{display:flex;padding:var(--spacing-sm) 0;border-bottom:1px solid rgba(0,0,0,.04);font-size:var(--font-size-sm)}.penpals-container .user-info-card .user-info-details .user-info-item .user-info-label{width:50px;color:var(--text-secondary);flex-shrink:0}.penpals-container .user-info-card .user-info-details .user-info-item .user-info-value{flex:1;color:var(--text-primary)}.penpals-container .user-info-card .user-info-details .user-info-item .user-info-value .email-form{display:flex;gap:var(--spacing-xs)}.penpals-container .user-info-card .user-info-details .user-info-item .user-info-value .email-form input{flex:1;padding:var(--spacing-xs) var(--spacing-sm);background:#00000008;border:1px solid var(--glass-border);border-radius:var(--radius-md);font-size:var(--font-size-xs);color:var(--text-primary)}.penpals-container .user-info-card .user-info-details .user-info-item .user-info-value .email-form input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-soft)}.penpals-container .user-info-card .user-info-details .user-info-item .user-info-value .bind-email-button{background:none;border:1px dashed rgba(107,189,153,.3);color:var(--primary-light);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-xs);transition:all var(--transition-fast)}.penpals-container .user-info-card .user-info-details .user-info-item .user-info-value .bind-email-button:hover{background:var(--primary-soft);border-style:solid}.penpals-container .user-info-card .user-info-details .user-info-item .user-info-value .submit-email-button{background:var(--primary-color);color:#1a1a1a;border:none;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-xs);font-weight:600;transition:all var(--transition-fast)}.penpals-container .user-info-card .user-info-details .user-info-item .user-info-value .submit-email-button:hover{background:var(--primary-light)}.penpals-container .user-info-card .logout-button{width:100%;padding:var(--spacing-sm);background:var(--danger-soft);color:var(--danger-color);border:1px solid rgba(224,119,109,.2);border-radius:var(--radius-md);cursor:pointer;font-size:var(--font-size-sm);font-weight:500;transition:all var(--transition-fast)}.penpals-container .user-info-card .logout-button:hover{background:#e0776d40}.penpals-container .penpals-section{background:var(--glass-bg);backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);border-radius:var(--radius-lg);padding:var(--spacing-xl);border:1px solid var(--glass-border);box-shadow:var(--shadow-sm)}.penpals-container .penpals-section .section-title{font-size:var(--font-size-md);margin-bottom:var(--spacing-md);font-weight:600;color:var(--text-primary)}.penpals-container .penpals-section .penpals-list{list-style:none}.penpals-container .penpals-section .penpals-list .penpal-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm);border-radius:var(--radius-md);transition:background var(--transition-fast)}.penpals-container .penpals-section .penpals-list .penpal-item:hover{background:var(--glass-bg-hover)}.penpals-container .penpals-section .penpals-list .penpal-item .penpal-info{display:flex;align-items:center;gap:var(--spacing-md)}.penpals-container .penpals-section .penpals-list .penpal-item .penpal-info .penpal_avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid rgba(0,0,0,.06)}.penpals-container .penpals-section .penpals-list .penpal-item .penpal-info .penpal-details{display:flex;flex-direction:column;gap:2px}.penpals-container .penpals-section .penpals-list .penpal-item .penpal-info .penpal-details .penpal-penname{font-weight:600;color:var(--text-primary);font-size:var(--font-size-sm)}.penpals-container .penpals-section .penpals-list .penpal-item .penpal-info .penpal-details .penpal-meta{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-xs)}.penpals-container .penpals-section .penpals-list .penpal-item .penpal-info .penpal-details .penpal-meta .friendship-days,.penpals-container .penpals-section .penpals-list .penpal-item .penpal-info .penpal-details .penpal-meta .penpal-divider{color:var(--text-tertiary)}.penpals-container .penpals-section .penpals-list .penpal-item .penpal-info .penpal-details .penpal-meta .penpal-letters{display:flex;align-items:center;gap:4px}.penpals-container .penpals-section .penpals-list .penpal-item .penpal-info .penpal-details .penpal-meta .penpal-letters .received-count{color:var(--primary-light);font-weight:600}.penpals-container .penpals-section .penpals-list .penpal-item .penpal-info .penpal-details .penpal-meta .penpal-letters .letter-arrow{color:var(--text-tertiary);font-size:10px}.penpals-container .penpals-section .penpals-list .penpal-item .penpal-info .penpal-details .penpal-meta .penpal-letters .sent-count{color:#6b7280;font-weight:600}.penpals-container .penpals-section .penpals-list .penpal-item .penpal-info .penpal-details .penpal-last-letter{display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-xs)}.penpals-container .penpals-section .penpals-list .penpal-item .penpal-info .penpal-details .penpal-last-letter .last-letter-type{padding:1px 6px;border-radius:var(--radius-full);font-weight:500}.penpals-container .penpals-section .penpals-list .penpal-item .penpal-info .penpal-details .penpal-last-letter .last-letter-type.received{background:var(--primary-soft);color:var(--primary-light)}.penpals-container .penpals-section .penpals-list .penpal-item .penpal-info .penpal-details .penpal-last-letter .last-letter-type.sent{background:#6b72801a;color:#6b7280}.penpals-container .penpals-section .penpals-list .penpal-item .penpal-info .penpal-details .penpal-last-letter .last-letter-time{color:var(--text-tertiary)}.penpals-container .penpals-section .penpals-list .penpal-item .remove-penpal-button{width:32px;height:32px;border:none;background:none;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.4;transition:all var(--transition-fast)}.penpals-container .penpals-section .penpals-list .penpal-item .remove-penpal-button:hover{opacity:1;background:var(--danger-soft)}.penpals-container .search-section{background:var(--glass-bg);backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);border-radius:var(--radius-lg);padding:var(--spacing-xl);border:1px solid var(--glass-border);box-shadow:var(--shadow-sm)}.penpals-container .search-section .section-title{font-size:var(--font-size-md);margin-bottom:var(--spacing-md);font-weight:600;color:var(--text-primary)}.penpals-container .search-section .search-form{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.penpals-container .search-section .search-form .search-input{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:#00000008;border:1px solid var(--glass-border);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--text-primary);min-height:38px}.penpals-container .search-section .search-form .search-input::placeholder{color:var(--text-tertiary)}.penpals-container .search-section .search-form .search-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-soft)}.penpals-container .search-section .search-form .search-button{width:38px;height:38px;border:none;background:var(--primary-color);color:#1a1a1a;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.penpals-container .search-section .search-form .search-button:hover:not(:disabled){background:var(--primary-light)}.penpals-container .search-section .search-form .search-button:disabled{opacity:.4;cursor:not-allowed}.penpals-container .search-section .search-form .search-button .ic-sousuo{width:16px;height:16px}.penpals-container .search-section .search-results h4{font-size:var(--font-size-xs);margin-bottom:var(--spacing-sm);color:var(--text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:1px}.penpals-container .search-section .search-results .search-list{list-style:none}.penpals-container .search-section .search-results .search-list .search-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm);border-radius:var(--radius-md);transition:background var(--transition-fast)}.penpals-container .search-section .search-results .search-list .search-item:hover{background:var(--glass-bg-hover)}.penpals-container .search-section .search-results .search-list .search-item .search-item-info{display:flex;align-items:center;gap:var(--spacing-sm)}.penpals-container .search-section .search-results .search-list .search-item .search-item-info .search-item-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover}.penpals-container .search-section .search-results .search-list .search-item .search-item-info .search-item-penname{font-weight:500;font-size:var(--font-size-sm);color:var(--text-primary)}.penpals-container .search-section .search-results .search-list .search-item .add-penpal-button{width:32px;height:32px;border:none;background:var(--primary-soft);color:var(--primary-light);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.penpals-container .search-section .search-results .search-list .search-item .add-penpal-button:hover{background:var(--primary-color);color:#1a1a1a}.penpals-container .search-section .search-results .search-list .search-item .add-penpal-button:hover .ic-tianjia{filter:brightness(0)}.penpals-container .search-section .search-results .search-list .search-item .add-penpal-button .ic-tianjia{width:14px;height:14px}@media(max-width:480px){.penpals-container{gap:var(--spacing-sm)}.penpals-container .stats-card{padding:var(--spacing-md)}.penpals-container .stats-card .stats-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}.penpals-container .user-info-card,.penpals-container .penpals-section,.penpals-container .search-section{padding:var(--spacing-md)}}.write-letter-modal{max-width:500px;width:90%}.write-letter-container .write-letter-form .form-group{margin-bottom:var(--spacing-md)}.write-letter-container .write-letter-form .form-group .form-label{display:block;margin-bottom:var(--spacing-xs);color:var(--text-secondary);font-size:var(--font-size-xs);font-weight:500}.write-letter-container .write-letter-form .form-group .form-select,.write-letter-container .write-letter-form .form-group .form-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:#00000008;border:1px solid var(--glass-border);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--text-primary);min-height:38px;outline:none}.write-letter-container .write-letter-form .form-group .form-select:focus,.write-letter-container .write-letter-form .form-group .form-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-soft)}.write-letter-container .write-letter-form .form-group .form-select option,.write-letter-container .write-letter-form .form-group .form-input option{background:var(--bg-elevated);color:var(--text-primary)}.write-letter-container .write-letter-form .form-group .form-textarea{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:#00000008;border:1px solid var(--glass-border);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--text-primary);resize:vertical;min-height:140px;outline:none;line-height:1.7}.write-letter-container .write-letter-form .form-group .form-textarea::placeholder{color:var(--text-tertiary)}.write-letter-container .write-letter-form .form-group .form-textarea:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-soft)}.write-letter-container .write-letter-form .form-group .content-counter{text-align:right;font-size:var(--font-size-xs);color:var(--text-tertiary);margin-top:2px}.write-letter-container .write-letter-form .form-group .no-penpals{margin-top:var(--spacing-xs);padding:var(--spacing-sm);background:var(--danger-soft);color:var(--danger-color);border-radius:var(--radius-sm);font-size:var(--font-size-xs);border:1px solid rgba(224,119,109,.2)}.write-letter-container .write-letter-form .form-group .letter-count-info{margin-top:var(--spacing-xs);font-size:var(--font-size-xs);color:var(--primary-light)}.write-letter-container .write-letter-form .form-actions .submit-button{width:100%;padding:var(--spacing-sm);background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:#1a1a1a;border:none;border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:600;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 4px 16px #6bbd9940}.write-letter-container .write-letter-form .form-actions .submit-button:hover:not(:disabled){box-shadow:0 6px 24px #6bbd9959;transform:translateY(-1px)}.write-letter-container .write-letter-form .form-actions .submit-button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.calculator{max-width:500px;margin:0 auto;background:var(--glass-bg);backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);border-radius:var(--radius-lg);padding:var(--spacing-xl);border:1px solid var(--glass-border);box-shadow:var(--shadow-sm)}.calculator .header{text-align:center;margin-bottom:var(--spacing-xl)}.calculator .header h1{font-size:var(--font-size-2xl);color:var(--text-primary);margin-bottom:var(--spacing-xs);font-weight:600}.calculator .header .subtitle{color:var(--text-secondary);font-size:var(--font-size-xs)}.calculator .input-section{margin-bottom:var(--spacing-xl)}.calculator .input-section .input-row{margin-bottom:var(--spacing-md)}.calculator .input-section .input-row .input-label{display:block;margin-bottom:var(--spacing-xs);color:var(--text-secondary);font-size:var(--font-size-sm);font-weight:500}.calculator .input-section .input-row .weight-input{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:#00000008;border:1px solid var(--glass-border);border-radius:var(--radius-md);font-size:var(--font-size-lg);font-weight:600;text-align:center;color:var(--text-primary);transition:all var(--transition-fast)}.calculator .input-section .input-row .weight-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-soft)}.calculator .input-section .input-row .input-hint{margin-top:var(--spacing-xs);font-size:var(--font-size-xs);color:var(--text-tertiary)}.calculator .input-section .input-row .radio-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.calculator .input-section .input-row .radio-group .radio-label{display:flex;align-items:flex-start;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--glass-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.calculator .input-section .input-row .radio-group .radio-label:hover{border-color:var(--primary-color);background:var(--primary-soft)}.calculator .input-section .input-row .radio-group .radio-label input[type=radio]{margin-top:2px;accent-color:var(--primary-color)}.calculator .input-section .input-row .radio-group .radio-label .region-option{flex:1}.calculator .input-section .input-row .radio-group .radio-label .region-option strong{display:block;margin-bottom:2px;color:var(--text-primary);font-size:var(--font-size-sm);font-weight:600}.calculator .input-section .input-row .radio-group .radio-label .region-option .rate-detail{font-size:var(--font-size-xs);color:var(--text-tertiary)}.calculator .input-section .input-row .checkbox-label{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;font-size:var(--font-size-sm);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--glass-border);border-radius:var(--radius-md);transition:all var(--transition-fast)}.calculator .input-section .input-row .checkbox-label:hover{border-color:var(--primary-color);background:var(--primary-soft)}.calculator .input-section .input-row .checkbox-label input[type=checkbox]{accent-color:var(--primary-color)}.calculator .input-section .calculate-button{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--primary-color);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-md);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.calculator .input-section .calculate-button:hover{background:var(--primary-dark);box-shadow:0 4px 16px #6bbd994d}.calculator .result-section{background:var(--primary-soft);border:1px solid rgba(107,189,153,.15);border-radius:var(--radius-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-md)}.calculator .result-section .postage-display{text-align:center;margin-bottom:var(--spacing-lg)}.calculator .result-section .postage-display .postage-label{display:block;font-size:var(--font-size-xs);color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.calculator .result-section .postage-display .postage-amount{font-size:42px;font-weight:700;color:var(--primary-dark);line-height:1}.calculator .result-section .postage-display .postage-amount .currency{font-size:var(--font-size-md);font-weight:400;color:var(--text-tertiary);margin-left:2px}.calculator .result-section .stamp-suggestion .suggestion-title{font-weight:600;margin-bottom:var(--spacing-sm);color:var(--text-primary);font-size:var(--font-size-sm)}.calculator .result-section .stamp-suggestion .stamp-list{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm)}.calculator .result-section .stamp-suggestion .stamp-list .stamp-item{background:var(--bg-elevated);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm);display:flex;align-items:center;gap:var(--spacing-xs);font-size:var(--font-size-xs)}.calculator .result-section .stamp-suggestion .stamp-list .stamp-item .stamp-value{font-weight:600;color:var(--primary-color)}.calculator .result-section .stamp-suggestion .stamp-list .stamp-item .stamp-count{color:var(--text-secondary)}.calculator .result-section .stamp-suggestion .stamp-total{font-size:var(--font-size-xs);color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.calculator .result-section .stamp-suggestion .stamp-total .stamp-diff{color:var(--danger-color)}.calculator .result-section .stamp-suggestion .postage-note{font-size:var(--font-size-xs);color:var(--text-secondary);background:var(--bg-elevated);padding:var(--spacing-sm);border-radius:var(--radius-sm);border:1px solid var(--glass-border);line-height:1.6}.calculator .result-section .stamp-suggestion .no-stamp{color:var(--text-tertiary);font-size:var(--font-size-sm);font-style:italic}.calculator .result-section .warning{margin-top:var(--spacing-sm);padding:var(--spacing-sm);background:var(--danger-soft);color:var(--danger-color);border-radius:var(--radius-sm);font-size:var(--font-size-xs);text-align:center}.calculator .footer{text-align:center;font-size:var(--font-size-xs);color:var(--text-tertiary)}.calculator .footer .footer-note{margin-top:var(--spacing-xs)}@media(max-width:480px){.calculator{padding:var(--spacing-md)}}.superadmin-container{max-width:1100px;margin:0 auto;padding:0 var(--spacing-md)}.superadmin-container h1{font-size:var(--font-size-xl);margin-bottom:var(--spacing-md);color:var(--text-primary);font-weight:600}.superadmin-container .error-message{background:var(--danger-soft);color:var(--danger-color);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md);font-size:var(--font-size-sm);border:1px solid rgba(217,104,94,.15)}.superadmin-container .tabs{display:flex;gap:2px;margin-bottom:var(--spacing-md);background:#00000008;padding:3px;border-radius:var(--radius-md);border:1px solid var(--glass-border)}.superadmin-container .tabs .tab{flex:1;padding:var(--spacing-sm) var(--spacing-md);border:none;background:none;border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast)}.superadmin-container .tabs .tab:hover{background:var(--bg-elevated)}.superadmin-container .tabs .tab.active{background:var(--primary-color);color:#fff}.superadmin-container .tab-content{background:var(--glass-bg);backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);border-radius:var(--radius-lg);padding:var(--spacing-lg);border:1px solid var(--glass-border);min-height:400px}.superadmin-container .card-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-md)}.superadmin-container .admin-card{background:var(--bg-elevated);border-radius:var(--radius-lg);border:1px solid var(--glass-border);overflow:hidden;transition:all var(--transition-fast)}.superadmin-container .admin-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.superadmin-container .admin-card .card-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:#00000005;border-bottom:1px solid var(--glass-border)}.superadmin-container .admin-card .card-header .card-id{font-size:var(--font-size-xs);color:var(--text-tertiary);font-weight:500}.superadmin-container .admin-card .card-header .card-role,.superadmin-container .admin-card .card-header .card-status{font-size:var(--font-size-xs);padding:2px 8px;border-radius:var(--radius-full);font-weight:500}.superadmin-container .admin-card .card-header .card-role[role=superadmin]{background:#ef44441a;color:#ef4444}.superadmin-container .admin-card .card-header .card-role[role=admin]{background:#3b82f61a;color:#3b82f6}.superadmin-container .admin-card .card-header .card-status.sent{background:#22c55e1a;color:#22c55e}.superadmin-container .admin-card .card-header .card-status.received{background:var(--primary-soft);color:var(--primary-light)}.superadmin-container .admin-card .card-header .card-status.lost{background:#fb923c1a;color:#fb923c}.superadmin-container .admin-card .card-body{padding:var(--spacing-md)}.superadmin-container .admin-card .card-body .card-name{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xs)}.superadmin-container .admin-card .card-body .card-name .username{font-weight:600;color:var(--text-primary);font-size:var(--font-size-sm)}.superadmin-container .admin-card .card-body .card-name .penname{font-size:var(--font-size-xs);color:var(--text-secondary);background:#0000000a;padding:1px 6px;border-radius:var(--radius-sm)}.superadmin-container .admin-card .card-body .card-email{font-size:var(--font-size-xs);color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.superadmin-container .admin-card .card-body .card-participants{display:flex;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-sm);flex-wrap:wrap}.superadmin-container .admin-card .card-body .card-participants .sender,.superadmin-container .admin-card .card-body .card-participants .receiver,.superadmin-container .admin-card .card-body .card-participants .user,.superadmin-container .admin-card .card-body .card-participants .penpal-name{font-size:var(--font-size-xs);font-weight:500}.superadmin-container .admin-card .card-body .card-participants .sender,.superadmin-container .admin-card .card-body .card-participants .user{color:var(--text-primary)}.superadmin-container .admin-card .card-body .card-participants .receiver,.superadmin-container .admin-card .card-body .card-participants .penpal-name{color:var(--primary-light)}.superadmin-container .admin-card .card-body .card-participants .arrow{font-size:var(--font-size-xs);color:var(--text-tertiary);padding:0 2px}.superadmin-container .admin-card .card-body .card-content{font-size:var(--font-size-xs);color:var(--text-secondary);line-height:1.5;margin-bottom:var(--spacing-xs);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.superadmin-container .admin-card .card-body .card-date{font-size:var(--font-size-xs);color:var(--text-tertiary)}.superadmin-container .admin-card .card-actions{display:flex;border-top:1px solid var(--glass-border)}.superadmin-container .admin-card .card-actions .btn-edit,.superadmin-container .admin-card .card-actions .btn-delete{flex:1;padding:var(--spacing-sm);border:none;border-radius:0;cursor:pointer;font-size:var(--font-size-xs);font-weight:500;transition:all var(--transition-fast)}.superadmin-container .admin-card .card-actions .btn-edit{background:transparent;color:var(--primary-light);border-right:1px solid var(--glass-border)}.superadmin-container .admin-card .card-actions .btn-edit:hover{background:var(--primary-soft)}.superadmin-container .admin-card .card-actions .btn-delete{background:transparent;color:var(--danger-color)}.superadmin-container .admin-card .card-actions .btn-delete:hover{background:var(--danger-soft)}.superadmin-container .superadmin-error{text-align:center;padding:var(--spacing-2xl);background:var(--glass-bg);backdrop-filter:var(--blur-md);-webkit-backdrop-filter:var(--blur-md);border-radius:var(--radius-lg);border:1px solid var(--glass-border)}.superadmin-container .superadmin-error h2{font-size:var(--font-size-xl);color:var(--text-primary);margin-bottom:var(--spacing-sm);font-weight:600}.superadmin-container .superadmin-error p{color:var(--text-secondary);font-size:var(--font-size-md)}.superadmin-container .loading{display:flex;align-items:center;justify-content:center;min-height:200px;color:var(--text-secondary);font-size:var(--font-size-sm)}.edit-form .form-group{margin-bottom:var(--spacing-md)}.edit-form .form-group label{display:block;margin-bottom:var(--spacing-xs);color:var(--text-secondary);font-size:var(--font-size-sm);font-weight:500}.edit-form .form-group input,.edit-form .form-group select,.edit-form .form-group textarea{width:100%;padding:var(--spacing-sm) var(--spacing-md);background:#00000008;border:1px solid var(--glass-border);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--text-primary);transition:all var(--transition-fast)}.edit-form .form-group input:focus,.edit-form .form-group select:focus,.edit-form .form-group textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-soft)}.edit-form .form-group select{cursor:pointer}.edit-form .form-group textarea{resize:vertical;min-height:80px}.edit-form .form-actions{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-lg);padding-top:var(--spacing-md);border-top:1px solid var(--glass-border)}.edit-form .form-actions .btn-cancel,.edit-form .form-actions .btn-submit{flex:1;padding:var(--spacing-sm);border:none;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.edit-form .form-actions .btn-cancel{background:#0000000a;color:var(--text-secondary)}.edit-form .form-actions .btn-cancel:hover{background:#00000014}.edit-form .form-actions .btn-submit{background:var(--primary-color);color:#fff}.edit-form .form-actions .btn-submit:hover:not(:disabled){background:var(--primary-dark)}.edit-form .form-actions .btn-submit:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.superadmin-container{padding:0 var(--spacing-sm)}.superadmin-container .tabs .tab{padding:var(--spacing-xs) var(--spacing-sm);font-size:var(--font-size-xs)}.superadmin-container .tab-content{padding:var(--spacing-md)}.superadmin-container .card-list{grid-template-columns:1fr}}