@charset "UTF-8";*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #FFFFFF;--color-primary-dark: #F5F7FA;--color-secondary: #5b5d6e;--color-secondary-light: #303F9F;--color-accent: #1148AE;--color-accent-light: rgb(82, 106, 149);--color-accent-dark: #305394;--color-text-primary: #051937;--color-text-secondary: #152031;--color-text-light: #78909C;--color-text-white: #FFFFFF;--color-bg-default: #FFFFFF;--color-bg-paper: #F5F7FA;--color-bg-grey: #E8ECF1;--color-success: #4CAF50;--color-error: #F44336;--color-warning: #FFA726;--color-info: #2196F3;--color-border-light: #E0E0E0;--color-border-main: #BDBDBD;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .05);--shadow-md: 0 4px 8px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .12);--shadow-hover: 0 6px 12px rgba(0, 0, 0, .15);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-xxl: 48px;--transition-fast: .15s ease-in-out;--transition-normal: .3s ease-in-out;--transition-slow: .5s ease-in-out}[data-theme=dark]{--color-primary: #1a1a1a;--color-primary-dark: #0d0d0d;--color-secondary: #E8E8E8;--color-secondary-light: #B8B8B8;--color-accent: #FF9800;--color-accent-light: #FFB84D;--color-accent-dark: #E68900;--color-text-primary: #E8E8E8;--color-text-secondary: #B8B8B8;--color-text-light: #888888;--color-text-white: #FFFFFF;--color-bg-default: #121212;--color-bg-paper: #1e1e1e;--color-bg-grey: #2a2a2a;--color-success: #66BB6A;--color-error: #EF5350;--color-warning: #FFA726;--color-info: #42A5F5;--color-border-light: #3a3a3a;--color-border-main: #4a4a4a;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 4px 8px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .5);--shadow-hover: 0 6px 12px rgba(0, 0, 0, .6)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.6;color:var(--color-text-primary);background-color:var(--color-bg-default);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-grey)}::-webkit-scrollbar-thumb{background:var(--color-border-main);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb:hover{background:var(--color-secondary-light)}a{color:var(--color-secondary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-accent)}button{font-family:inherit;cursor:pointer;border:none;outline:none;transition:all var(--transition-normal)}button:disabled{cursor:not-allowed;opacity:.6}input,textarea{font-family:inherit;outline:none;border:1px solid var(--color-border-light);border-radius:var(--radius-md);padding:10px 12px;font-size:14px;transition:all var(--transition-fast);background-color:var(--color-bg-paper)}input:focus,textarea:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px #ff98001a}input::placeholder,textarea::placeholder{color:var(--color-text-light)}img{max-width:100%;height:auto;display:block}ul,ol{list-style:none}h1,h2,h3,h4,h5,h6{color:var(--color-secondary);font-weight:600;line-height:1.3;margin-bottom:var(--spacing-md)}h1{font-size:32px}h2{font-size:24px}h3{font-size:20px}h4{font-size:18px}p{margin-bottom:var(--spacing-md);line-height:1.8}.container{max-width:1280px;margin:0 auto;padding:0 var(--spacing-md)}.card{background:var(--color-bg-paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--spacing-lg);transition:all var(--transition-normal)}.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.btn{padding:10px 24px;border-radius:var(--radius-md);font-size:14px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);transition:all var(--transition-normal)}.btn-primary{background:var(--color-accent);color:var(--color-text-white)}.btn-primary:hover{background:var(--color-accent-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--color-secondary);color:var(--color-text-white)}.btn-secondary:hover{background:var(--color-secondary-light);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-outline{background:transparent;border:2px solid var(--color-accent);color:var(--color-accent)}.btn-outline:hover{background:var(--color-accent);color:var(--color-text-white)}@media(max-width:768px){.container{padding:0 var(--spacing-sm)}h1{font-size:24px}h2{font-size:20px}h3{font-size:18px}}.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-ellipsis-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.text-ellipsis-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading{animation:spin 1s linear infinite}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease-in-out}.app{min-height:100vh;display:flex;flex-direction:column;background:var(--color-bg-default)}.main-content{flex:1;width:100%}@media(max-width:768px){.main-content{padding-bottom:60px}}.header{background:var(--color-bg-paper);box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--color-border-light);transition:all var(--transition-normal)}.header-scrolled{transform:translateY(-100%)}.header-content{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);height:60px}.header-nav{display:flex;align-items:center;gap:var(--spacing-lg);flex:1;margin-left:var(--spacing-xxl)}.header-actions{display:flex;align-items:center;gap:var(--spacing-md)}.logo{display:flex;align-items:center;gap:var(--spacing-sm);text-decoration:none;font-size:20px;font-weight:700;color:var(--color-secondary);transition:all var(--transition-fast)}.logo:hover{color:var(--color-accent)}.logo-icon{font-size:28px}.logo-text{font-size:20px}.nav-link{color:var(--color-text-secondary);text-decoration:none;font-size:20px;font-weight:700;padding:8px 16px;border-radius:var(--radius-md);transition:all var(--transition-fast)}.nav-link:hover{color:var(--color-accent);background:#ff98001a}.btn-theme-toggle{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-grey);color:var(--color-text-secondary);border:none;border-radius:50%;cursor:pointer;font-size:18px;transition:all var(--transition-fast)}.btn-theme-toggle:hover{background:var(--color-accent);color:var(--color-text-white);transform:scale(1.1)}.btn-login-header{padding:8px 24px;background:var(--color-accent);color:var(--color-text-white);border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-normal)}.btn-login-header:hover{background:var(--color-accent-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.user-menu{display:flex;align-items:center;gap:var(--spacing-sm);padding:6px 12px;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast)}.user-menu:hover{background:var(--color-bg-grey)}.user-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--color-border-light)}.user-name{color:var(--color-secondary);font-size:14px;font-weight:500}.footer{background:var(--color-bg-paper);border-top:1px solid var(--color-border-light);padding:var(--spacing-xxl) 0 var(--spacing-lg);margin-top:var(--spacing-xxl)}.footer-content{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-xxl);margin-bottom:var(--spacing-xl)}.footer-section{display:flex;flex-direction:column}.footer-title{color:var(--color-secondary);font-size:16px;font-weight:600;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--color-accent);display:inline-block;align-self:flex-start}.footer-description{color:var(--color-text-secondary);font-size:14px;line-height:1.6;margin-bottom:var(--spacing-md)}.footer-social{display:flex;gap:var(--spacing-md)}.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-sm)}.footer-links li a{color:var(--color-text-secondary);font-size:14px;text-decoration:none;transition:color var(--transition-fast);display:inline-block;position:relative}.footer-links li a:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--color-accent);transition:width var(--transition-fast)}.footer-links li a:hover{color:var(--color-accent)}.footer-links li a:hover:after{width:100%}.footer-contact{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-sm)}.footer-contact li{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--color-text-secondary);font-size:14px}.footer-contact a{color:var(--color-text-secondary);text-decoration:none;transition:color var(--transition-fast)}.footer-contact a:hover{color:var(--color-accent)}.footer-bottom{padding-top:var(--spacing-lg);border-top:1px solid var(--color-border-light);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md)}.footer-copyright,.footer-icp{color:var(--color-text-light);font-size:14px;margin:0}.footer-icp a{color:var(--color-text-light);text-decoration:none;transition:color var(--transition-fast)}.footer-icp a:hover{color:var(--color-accent)}.social-link{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--color-bg-grey);color:var(--color-text-secondary);border-radius:var(--radius-md);font-size:20px;transition:all var(--transition-fast)}.social-link:hover{background:var(--color-accent);color:var(--color-text-white);transform:translateY(-2px)}.contact-icon{color:var(--color-accent);font-size:16px;flex-shrink:0}.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--color-bg-paper);box-shadow:0 -2px 8px #0000001a;display:none;justify-content:space-around;align-items:center;height:60px;z-index:999;border-top:1px solid var(--color-border-light)}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;height:100%;color:var(--color-text-secondary);text-decoration:none;font-size:12px;transition:all var(--transition-fast);position:relative}.bottom-nav-item:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:0;height:3px;background:var(--color-accent);transition:width var(--transition-fast)}.bottom-nav-item.active{color:var(--color-accent)}.bottom-nav-item.active:before{width:40px}.bottom-nav-item.active .nav-icon{transform:scale(1.1)}.bottom-nav-item:active{background:var(--color-bg-grey)}.nav-icon{font-size:20px;transition:transform var(--transition-fast)}@media(max-width:1024px){.footer-content{grid-template-columns:repeat(2,1fr)}.footer-section:last-child{grid-column:1/-1}}@media(max-width:768px){.header-content{padding:var(--spacing-sm) var(--spacing-md)}.header-nav{margin-left:var(--spacing-md);gap:var(--spacing-sm)}.logo-text{font-size:16px}.logo-icon{font-size:24px}.nav-link{font-size:14px;padding:6px 12px}.user-name{display:none}.user-menu{padding:4px}.user-avatar{width:32px;height:32px}.footer{padding:var(--spacing-xl) 0 var(--spacing-md)}.footer-content{grid-template-columns:1fr;gap:var(--spacing-lg)}.footer-section:last-child{grid-column:auto}.footer-bottom{flex-direction:column;text-align:center;gap:var(--spacing-sm)}.bottom-nav{display:flex}.bottom-nav-item{font-size:11px}.nav-icon{font-size:18px}body{padding-bottom:60px}}@media(max-width:480px){.logo-text,.header-nav{display:none}.btn-login-header{padding:6px 16px;font-size:14px}.footer{margin-top:var(--spacing-lg)}.footer-title{font-size:15px}.footer-description,.footer-links li a,.footer-contact li{font-size:14px}.social-link{width:36px;height:36px;font-size:18px}.bottom-nav{height:56px}}.article-card{background:var(-color-primary-dark);border-radius:var(--radius-md);padding:var(--spacing-md);box-shadow:var(--shadow-sm);cursor:pointer;transition:all var(--transition-normal);border:1px solid transparent}.article-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--color-accent)}.article-card:hover .author-avatar{border-color:var(--color-accent)}.article-card:hover .tech-badge{background:var(--color-accent);color:var(--color-text-white);border-color:var(--color-accent)}.article-card:hover .article-title{color:var(--color-accent)}.article-card:hover .article-tag{font-size:14px;background:#ff98001a;color:var(--color-accent)}.article-card:hover .stat-item{color:var(--color-accent)}.article-card-header{display:flex;gap:var(--spacing-md);align-items:flex-start;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--color-border-light)}.article-card-body{margin-bottom:var(--spacing-md)}.article-card-footer{padding-top:var(--spacing-sm);border-top:1px solid var(--color-border-light)}.author-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--color-border-light);flex-shrink:0;transition:all var(--transition-fast)}.author-avatar.clickable{cursor:pointer}.author-avatar.clickable:hover{border-color:var(--color-accent);transform:scale(1.05);box-shadow:0 0 0 4px #ff98001a}.author-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-xs)}.author-meta{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}.author-name{color:var(--color-secondary);font-size:14px;font-weight:600;transition:color var(--transition-fast)}.author-name.clickable{cursor:pointer}.author-name.clickable:hover{color:var(--color-accent);text-decoration:underline}.publish-date{color:var(--color-text-light);font-size:12px}.publish-date:before{content:"•";margin:0 var(--spacing-xs);color:var(--color-text-light)}.user-tech-stack{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.tech-badge{padding:3px 10px;background:#ff98001a;color:var(--color-accent);border-radius:var(--radius-sm);font-size:11px;font-weight:500;border:1px solid rgba(255,152,0,.2);transition:all var(--transition-fast)}.article-title{color:var(--color-secondary);font-size:17px;font-weight:600;margin:0 0 var(--spacing-sm) 0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--transition-fast)}.article-summary{color:var(--color-text-secondary);font-size:14px;line-height:1.6;margin:0 0 var(--spacing-sm) 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.article-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);margin-top:var(--spacing-sm)}.article-tag{padding:3px 10px;background:var(--color-bg-grey);color:var(--color-text-secondary);border-radius:var(--radius-sm);font-size:12px;font-weight:500;transition:all var(--transition-fast)}.article-stats{display:flex;gap:var(--spacing-md);align-items:center}.stat-item{display:flex;align-items:center;gap:4px;color:var(--color-text-light);font-size:14px;transition:color var(--transition-fast)}.stat-icon{font-size:14px}.slider-captcha{width:100%;max-width:300px;margin:0 auto}.captcha-canvas-container{position:relative;width:300px;height:150px;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-md);margin-bottom:var(--spacing-md);background:var(--color-bg-grey)}.captcha-canvas{display:block;width:100%;height:100%}.captcha-puzzle{position:absolute;top:0;transition:left .1s ease-out}.captcha-refresh{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;background:#ffffffe6;border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.captcha-refresh:hover{background:#fff;transform:rotate(180deg);box-shadow:var(--shadow-md)}.captcha-slider{position:relative;width:100%;height:42px;border-radius:var(--radius-md);background:var(--color-bg-grey);box-shadow:inset 0 0 0 1px var(--color-border-light)}.captcha-slider.verified .slider-fill{background:linear-gradient(90deg,#4caf504d,#4caf5066)}.captcha-slider.verified .slider-button{background:var(--color-success);color:#fff;cursor:default}.captcha-slider.verified .slider-text{color:var(--color-success);font-weight:600}.captcha-slider.failed .slider-fill{background:linear-gradient(90deg,#f443364d,#f4433666)}.captcha-slider.failed .slider-button{background:var(--color-error);color:#fff;cursor:default;animation:shake .3s ease-in-out}.captcha-slider.failed .slider-text{color:var(--color-error);font-weight:600}.slider-track{position:absolute;inset:0;border-radius:var(--radius-md);overflow:hidden}.slider-fill{height:100%;background:linear-gradient(90deg,#4caf501a,#4caf5033);transition:width .1s ease-out;border-radius:var(--radius-md)}.slider-button{position:absolute;top:3px;left:0;width:50px;height:36px;border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-md);cursor:grab;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--color-text-secondary);transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;z-index:10}.slider-button:active{cursor:grabbing;box-shadow:var(--shadow-lg)}.slider-button:hover{box-shadow:var(--shadow-hover)}.slider-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;color:var(--color-text-light);pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap;z-index:1}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.terms-modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .2s ease-in-out;padding:var(--spacing-lg)}.terms-modal-content{background:var(--color-bg-paper);border-radius:var(--radius-lg);width:100%;max-width:1000px;height:600px;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow-xl);animation:slideUp .3s ease-out}.terms-modal-header{padding:var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);border-bottom:2px solid var(--color-border-light);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.terms-modal-header h2{color:var(--color-secondary);font-size:24px;margin:0;font-weight:600}.terms-modal-body{flex:1;overflow-y:auto;padding:var(--spacing-xl);color:var(--color-text-primary)}.terms-modal-actions{padding:var(--spacing-lg) var(--spacing-xl);border-top:2px solid var(--color-border-light);display:flex;justify-content:center;flex-shrink:0}.terms-close-btn{width:36px;height:36px;border-radius:50%;border:none;background:var(--color-bg-default);color:var(--color-text-secondary);font-size:28px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);line-height:1;padding:0}.terms-close-btn:hover{background:var(--color-error);color:#fff;transform:rotate(90deg)}.terms-section{margin-bottom:var(--spacing-xl)}.terms-section:last-of-type{margin-bottom:0}.terms-section h3{color:var(--color-secondary);font-size:18px;font-weight:600;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--color-accent)}.terms-text p{color:var(--color-text-primary);font-size:14px;line-height:1.8;margin-bottom:var(--spacing-md);text-align:justify}.terms-text p:last-child{margin-bottom:0}.terms-footer{margin-top:var(--spacing-xl);padding-top:var(--spacing-lg);border-top:1px solid var(--color-border-light)}.terms-update{color:var(--color-text-light);font-size:14px;text-align:right;margin:0;font-style:italic}.btn-agree{padding:12px 40px;background:var(--color-accent);color:var(--color-text-white);border:none;border-radius:var(--radius-md);font-size:15px;font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.btn-agree:hover{background:var(--color-accent-dark);transform:translateY(-2px);box-shadow:var(--shadow-hover)}.btn-agree:active{transform:translateY(0)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .2s ease-in-out}.modal-content{background:var(--color-bg-paper);border-radius:var(--radius-lg);padding:var(--spacing-xxl);max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:slideUp .3s ease-out}.modal-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(--color-border-light)}.modal-header h2{margin:0;color:var(--color-secondary);font-size:20px}.modal-close{background:none;border:none;font-size:24px;color:var(--color-text-light);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all var(--transition-fast)}.modal-close:hover{background:var(--color-bg-grey);color:var(--color-error)}.modal-body{line-height:1.8;color:var(--color-text-secondary);font-size:14px}.modal-body h3{color:var(--color-secondary);font-size:16px;margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}.modal-body p{margin-bottom:var(--spacing-md)}.modal-body ul{padding-left:var(--spacing-xl);margin-bottom:var(--spacing-md)}.modal-body ul li{list-style:disc;margin-bottom:var(--spacing-xs)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media(max-width:768px){.article-card{padding:var(--spacing-md)}.article-card-header{gap:var(--spacing-sm)}.author-avatar{width:42px;height:42px}.author-name{font-size:14px}.publish-date{font-size:11px}.tech-badge{font-size:10px;padding:2px 8px}.article-title{font-size:16px}.article-summary{font-size:14px}.article-tag{padding:2px 8px;font-size:11px}.article-stats{gap:var(--spacing-sm)}.stat-item{font-size:12px}.stat-icon{font-size:14px}.modal-content{padding:var(--spacing-lg);max-width:90vw}}@media(max-width:480px){.article-card{padding:var(--spacing-md)}.author-avatar{width:40px;height:40px}.article-title{font-size:15px}.article-summary{font-size:12px;-webkit-line-clamp:2}.captcha-canvas-container{width:100%;max-width:300px}.slider-button{width:45px;height:32px;font-size:16px}.slider-text{font-size:12px}.modal-content{padding:var(--spacing-md)}}.article-detail-container{min-height:calc(100vh - 120px);padding:var(--spacing-xl) 0;padding-bottom:var(--spacing-xxl);max-width:100%;display:flex}.article-detail-container .sidebar-hidden .article-main{max-width:none}.btn-back{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:10px 20px;margin-bottom:var(--spacing-xl);background:var(--color-bg-paper);color:var(--color-text-secondary);border:1px solid var(--color-border-light);border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.btn-back:hover{background:var(--color-accent);color:var(--color-text-white);border-color:var(--color-accent);transform:translate(-2px)}.btn-back svg{font-size:14px}.article-detail-content{display:grid;grid-template-columns:1fr 300px;gap:var(--spacing-xl);transition:grid-template-columns var(--transition-normal)}.article-detail-content.sidebar-hidden{grid-template-columns:1fr}.article-main{min-width:1000px;flex-grow:1;background:var(--color-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.article-header{margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-xl);border-bottom:1px solid var(--color-border-light)}.article-title{color:var(--color-secondary);font-size:26px;line-height:1.4;margin-bottom:var(--spacing-lg)}.article-meta{margin-bottom:var(--spacing-lg)}.author-section{display:flex;align-items:center;gap:var(--spacing-md)}.author-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--color-border-light)}.author-info{display:flex;flex-direction:column;flex:1}.author-name{color:var(--color-secondary);font-size:16px;font-weight:600}.publish-info{color:var(--color-text-light);font-size:14px}.btn-follow{padding:8px 20px;background:var(--color-accent);color:var(--color-text-white);border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.btn-follow:hover{background:var(--color-accent-dark);transform:translateY(-1px)}.btn-follow.following{background:var(--color-bg-grey);color:var(--color-text-secondary)}.article-tags{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.tag{padding:2px 14px;background:var(---color-secondary);border:1px solid var(--color-accent-light);color:var(-color-secondary);border-radius:var(--radius-md);font-size:14px;font-weight:500}.article-content{color:var(--color-text-primary);font-size:16px;line-height:1.8;margin-bottom:var(--spacing-xl)}.article-content h1,.article-content h2,.article-content h3,.article-content h4,.article-content h5,.article-content h6{color:var(--color-secondary);margin-top:var(--spacing-xl);margin-bottom:var(--spacing-md);font-weight:600;line-height:1.4}.article-content h1{font-size:32px;border-bottom:2px solid var(--color-border-light);padding-bottom:var(--spacing-sm)}.article-content h2{font-size:28px;border-bottom:1px solid var(--color-border-light);padding-bottom:var(--spacing-sm)}.article-content h3{font-size:24px}.article-content h4{font-size:20px}.article-content h5{font-size:18px}.article-content h6{font-size:16px}.article-content p{margin-bottom:var(--spacing-md);text-align:justify}.article-content ul,.article-content ol{margin:var(--spacing-md) 0;padding-left:var(--spacing-xl)}.article-content ul li,.article-content ol li{margin-bottom:var(--spacing-sm);line-height:1.8}.article-content code{background:var(--color-bg-grey);padding:2px 6px;border-radius:var(--radius-sm);font-family:Courier New,monospace;font-size:14px;color:#d63384}.article-content pre{background:var(--color-bg-grey);padding:var(--spacing-md);border-radius:var(--radius-md);overflow-x:auto;margin:var(--spacing-md) 0;border-left:4px solid var(--color-accent)}.article-content pre code{background:transparent;padding:0;color:var(--color-text-primary);font-size:14px}.article-content blockquote{margin:var(--spacing-md) 0;padding:var(--spacing-md) var(--spacing-lg);border-left:4px solid var(--color-accent);background:#ff98000d;border-radius:var(--radius-md);color:var(--color-text-secondary);font-style:italic}.article-content blockquote p:last-child{margin-bottom:0}.article-content table{width:100%;border-collapse:collapse;margin:var(--spacing-md) 0;overflow:hidden;border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.article-content table thead{background:var(--color-accent);color:#fff}.article-content table thead th{padding:var(--spacing-md);text-align:left;font-weight:600}.article-content table tbody tr{border-bottom:1px solid var(--color-border-light)}.article-content table tbody tr:last-child{border-bottom:none}.article-content table tbody tr:nth-child(2n){background:var(--color-bg-grey)}.article-content table tbody td{padding:var(--spacing-md)}.article-content a{color:var(--color-accent);text-decoration:none;transition:color var(--transition-fast)}.article-content a:hover{color:var(--color-accent-dark);text-decoration:underline}.article-content img{max-width:100%;height:auto;border-radius:var(--radius-md);margin:var(--spacing-md) 0;box-shadow:var(--shadow-sm)}.article-content hr{border:none;border-top:2px solid var(--color-border-light);margin:var(--spacing-xl) 0}.article-content strong{font-weight:600;color:var(--color-secondary)}.article-content em{font-style:italic;color:var(--color-text-secondary)}.article-content-iframe{width:100%;min-height:600px;border:none;border-radius:var(--radius-md);margin-bottom:var(--spacing-xl);background:#fff;box-shadow:var(--shadow-sm)}.article-actions{display:flex;gap:var(--spacing-md);padding:var(--spacing-lg) 0;border-top:1px solid var(--color-border-light);border-bottom:1px solid var(--color-border-light);margin-bottom:var(--spacing-xl)}.action-btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:10px 20px;background:var(--color-bg-grey);color:var(--color-text-secondary);border:1px solid transparent;border-radius:var(--radius-md);font-size:14px;cursor:pointer;transition:all var(--transition-fast)}.action-btn:hover{background:var(--color-bg-paper);border-color:var(--color-accent);color:var(--color-accent)}.action-btn.active{background:#ff98001a;color:var(--color-accent);border-color:var(--color-accent)}.action-btn svg{font-size:18px}.comments-section{margin-top:var(--spacing-xl)}.comments-title{color:var(--color-secondary);font-size:20px;margin-bottom:var(--spacing-lg)}.comment-form{margin-bottom:var(--spacing-xl)}.comment-input{width:100%;padding:var(--spacing-md);border:2px solid var(--color-border-light);border-radius:var(--radius-md);font-size:14px;resize:vertical;margin-bottom:var(--spacing-md);font-family:inherit}.comment-input:focus{border-color:var(--color-accent);outline:none}.comment-input:disabled{background:var(--color-bg-grey);cursor:not-allowed}.btn-submit-comment{padding:10px 24px;background:var(--color-accent);color:var(--color-text-white);border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-normal)}.btn-submit-comment:hover:not(:disabled){background:var(--color-accent-dark);transform:translateY(-1px)}.btn-submit-comment:disabled{opacity:.5;cursor:not-allowed}.article-top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-lg)}.author-actions-icons{display:flex;gap:var(--spacing-sm)}.author-actions-icons .icon-btn{width:40px;height:40px;border:none;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;transition:all var(--transition-normal);color:var(--color-text-white)}.author-actions-icons .icon-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.author-actions-icons .icon-btn.icon-edit{background:var(--color-primary)}.author-actions-icons .icon-btn.icon-edit:hover{background:var(--color-primary-dark)}.author-actions-icons .icon-btn.icon-delete{background:#ff4d4f}.author-actions-icons .icon-btn.icon-delete:hover{background:#cf1322}.author-actions-icons .icon-btn.icon-hide{background:#faad14}.author-actions-icons .icon-btn.icon-hide:hover{background:#d48806}.comments-list{display:flex;flex-direction:column;gap:var(--spacing-lg)}.comment-item{display:flex;gap:var(--spacing-md);padding:var(--spacing-lg);background:var(--color-bg-grey);border-radius:var(--radius-md)}.comment-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}.comment-content{flex:1}.comment-header{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-sm);position:relative}.btn-delete-comment,.btn-delete-reply{margin-left:auto;background:transparent;border:none;color:var(--color-text-light);cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);font-size:12px;transition:all var(--transition-fast);display:flex;align-items:center;gap:4px}.btn-delete-comment:hover,.btn-delete-reply:hover{background:#ff4d4f1a;color:#ff4d4f}.btn-delete-comment svg,.btn-delete-reply svg{font-size:12px}.comment-user{color:var(--color-secondary);font-weight:600;font-size:14px}.comment-time{color:var(--color-text-light);font-size:12px}.comment-text{color:var(--color-text-primary);font-size:14px;line-height:1.6;margin:0;margin-bottom:var(--spacing-sm)}.btn-reply{background:transparent;border:none;color:var(--color-accent);cursor:pointer;padding:4px 12px;border-radius:var(--radius-sm);font-size:14px;font-weight:500;transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:6px}.btn-reply:hover{background:var(--color-bg-grey);color:var(--color-accent-dark)}.btn-reply svg{font-size:12px}.reply-input-box{margin-top:var(--spacing-md);padding:var(--spacing-md);background:var(--color-bg-paper);border-radius:var(--radius-md);border:1px solid var(--color-border-light)}.reply-input-box textarea{width:100%;margin-bottom:var(--spacing-sm)}.reply-actions{display:flex;gap:var(--spacing-sm);justify-content:flex-end}.btn-cancel-reply,.btn-submit-reply{padding:6px 16px;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-fast);border:none}.btn-cancel-reply{background:var(--color-bg-grey);color:var(--color-text-secondary)}.btn-cancel-reply:hover{background:var(--color-border-light)}.btn-submit-reply{background:var(--color-accent);color:var(--color-text-white)}.btn-submit-reply:hover{background:var(--color-accent-dark)}.btn-submit-reply:disabled{opacity:.5;cursor:not-allowed}.comment-replies{margin-top:var(--spacing-md);padding-left:var(--spacing-md);border-left:2px solid var(--color-border-light)}.reply-item{display:flex;gap:var(--spacing-sm);padding:var(--spacing-sm) 0}.reply-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}.reply-content{flex:1}.reply-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:4px;position:relative}.reply-user{color:var(--color-secondary);font-weight:600;font-size:14px;margin-right:var(--spacing-sm)}.reply-text{color:var(--color-text-primary);font-size:14px;line-height:1.6;margin:var(--spacing-xs) 0}.reply-time{color:var(--color-text-light);font-size:11px}.loading-comments{text-align:center;padding:var(--spacing-xl);color:var(--color-text-secondary);font-size:14px}.no-comments{text-align:center;padding:var(--spacing-xxl);color:var(--color-text-light);font-size:14px}.loading-related,.no-related{text-align:center;padding:var(--spacing-lg);color:var(--color-text-light);font-size:14px}.article-sidebar{position:sticky;top:80px;align-self:flex-start;background:var(--color-bg-paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}.related-articles{display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-lg)}.related-item{padding:var(--spacing-sm);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.related-item:hover{background:var(--color-bg-grey)}.related-item h4{color:var(--color-secondary);font-size:14px;margin:0 0 var(--spacing-xs) 0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.related-meta{display:flex;gap:var(--spacing-md);font-size:12px;color:var(--color-text-light)}.loading-container{min-height:50vh;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--color-text-secondary)}.btn-show-sidebar{position:fixed;right:var(--spacing-xl);top:50%;transform:translateY(-50%);padding:var(--spacing-md) var(--spacing-md);background:var(--color-accent);color:var(--color-text-white);border:none;border-radius:var(--radius-lg) 0 0 var(--radius-lg);font-size:14px;font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);box-shadow:var(--shadow-lg);transition:all var(--transition-normal);z-index:100;writing-mode:vertical-rl;text-orientation:mixed;min-height:120px;justify-content:center}.btn-show-sidebar:hover{background:var(--color-accent-dark);transform:translateY(-50%) translate(2px);box-shadow:var(--shadow-hover)}.profile-container{min-height:calc(100vh - 120px);padding:var(--spacing-xl) 0;padding-bottom:var(--spacing-xxl)}.profile-content{max-width:1280px;margin:0 auto;padding:0 var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-xl)}.profile-card{background:var(--color-bg-paper);border-radius:var(--radius-lg);padding:var(--spacing-xxl);box-shadow:var(--shadow-sm)}.profile-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(--color-border-light)}.profile-header h2{color:var(--color-secondary);font-size:24px;margin:0}.btn-logout{display:flex;align-items:center;gap:var(--spacing-sm);padding:10px 20px;background:var(--color-bg-grey);color:var(--color-text-secondary);border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.btn-logout:hover{background:var(--color-error);color:var(--color-text-white)}.profile-info{display:flex;gap:var(--spacing-xxl)}.avatar-section{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.avatar-wrapper{position:relative;cursor:pointer}.avatar-wrapper:hover .avatar-overlay{opacity:1}.profile-avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid var(--color-border-light);transition:all var(--transition-normal)}.avatar-overlay{position:absolute;inset:0;background:#0009;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-xs);color:#fff;opacity:0;transition:opacity var(--transition-normal)}.avatar-overlay span{font-size:12px;font-weight:500}.camera-icon{font-size:24px}.info-section{flex:1;display:flex;flex-direction:column;gap:var(--spacing-lg)}.info-item{display:flex;flex-direction:column;gap:var(--spacing-xs)}.info-item label{color:var(--color-text-light);font-size:14px;font-weight:500}.info-item span{color:var(--color-secondary);font-size:16px}.form-group{display:flex;flex-direction:column;gap:var(--spacing-sm)}.form-group label{color:var(--color-text-secondary);font-size:.9rem;font-weight:500}.form-group input,.form-group textarea,.form-group select{padding:var(--spacing-md);border:2px solid var(--color-border-light);border-radius:var(--radius-md);background:var(--color-bg-default);color:var(--color-text-primary);font-size:1rem;transition:all var(--transition-normal)}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px #ff98001a}.form-group input:disabled,.form-group textarea:disabled,.form-group select:disabled{background:var(--color-bg-paper);cursor:not-allowed;opacity:.6}.form-group textarea{min-height:100px;resize:vertical;font-family:inherit}.skills-section{display:flex;flex-direction:column;gap:var(--spacing-sm)}.skills-dropdown{position:relative}.skills-dropdown .dropdown-toggle{width:100%;padding:var(--spacing-md);background:var(--color-bg-default);border:2px solid var(--color-border-light);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all var(--transition-normal)}.skills-dropdown .dropdown-toggle:hover{border-color:var(--color-accent)}.skills-dropdown .dropdown-toggle:disabled{background:var(--color-bg-paper);cursor:not-allowed;opacity:.6}.skills-dropdown .dropdown-menu{position:absolute;top:100%;left:0;right:0;margin-top:var(--spacing-sm);background:var(--color-bg-paper);border:2px solid var(--color-border-light);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);max-height:300px;overflow-y:auto;z-index:1000}.skill-category{border-bottom:1px solid var(--color-border-light)}.skill-category:last-child{border-bottom:none}.category-name{padding:var(--spacing-md);background:var(--color-bg-default);color:var(--color-text-secondary);font-weight:600;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.category-skills{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);padding:var(--spacing-md)}.skill-option{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-default);border:2px solid var(--color-border-light);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:.9rem;cursor:pointer;transition:all var(--transition-normal)}.skill-option:hover{border-color:var(--color-accent);background:var(--color-accent);color:#fff}.skill-option.selected{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.selected-skills,.skills-display{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.skill-tag,.skill-badge{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:linear-gradient(135deg,var(--color-accent) 0%,#ff6b35 100%);color:#fff;border-radius:var(--radius-full);font-size:.85rem;font-weight:500}.skill-tag button,.skill-badge button{background:none;border:none;color:#fff;cursor:pointer;padding:0;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background var(--transition-fast)}.skill-tag button:hover,.skill-badge button:hover{background:#fff3}.skill-badge{background:linear-gradient(135deg,#667eea,#764ba2)}.project-links-section{display:flex;flex-direction:column;gap:var(--spacing-sm)}.project-link-input{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.project-link-input input{flex:1;padding:var(--spacing-md);border:2px solid var(--color-border-light);border-radius:var(--radius-md);background:var(--color-bg-default);color:var(--color-text-primary);font-size:1rem;transition:all var(--transition-normal)}.project-link-input input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px #ff98001a}.project-link-input input:disabled{background:var(--color-bg-paper);cursor:not-allowed;opacity:.6}.btn-remove-link{padding:var(--spacing-md);background:#dc3545;color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);min-width:80px}.btn-remove-link:hover{background:#c82333;transform:translateY(-2px);box-shadow:0 4px 8px #dc35454d}.btn-add-link{padding:var(--spacing-sm) var(--spacing-lg);background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);font-size:.9rem;font-weight:500}.btn-add-link:hover{background:#764ba2;transform:translateY(-1px);box-shadow:0 2px 8px #667eea4d}.btn-add-link:disabled{opacity:.5;cursor:not-allowed;transform:none}.project-links-display{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.project-link{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--color-bg-default);border-radius:var(--radius-md);border:2px solid var(--color-border-light);transition:all var(--transition-normal)}.project-link:hover{border-color:var(--color-accent);box-shadow:var(--shadow-sm)}.project-link svg{color:var(--color-accent);flex-shrink:0}.project-link a{flex:1;color:var(--color-text-primary);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-link a:hover{color:var(--color-accent);text-decoration:underline}.preferences-group{display:flex;flex-direction:column;gap:var(--spacing-md);padding:var(--spacing-lg);background:var(--color-bg-default);border-radius:var(--radius-md);border:2px solid var(--color-border-light)}.preference-item{display:flex;align-items:center;gap:var(--spacing-md)}.preference-item input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:var(--color-accent)}.preference-item input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.preference-item label{color:var(--color-text-primary);font-size:1rem;cursor:pointer;margin:0}.preference-item label:has(+input:disabled){cursor:not-allowed;opacity:.5}.btn-edit-profile{display:inline-block;width:auto;padding:0;background:none;color:var(--color-accent);border:none;border-bottom:2px solid var(--color-accent);font-size:1.05rem;font-weight:500;cursor:pointer;transition:all var(--transition-normal);margin-top:var(--spacing-lg);text-align:center}.btn-edit-profile:hover{color:#ff6b35;border-bottom-color:#ff6b35;transform:none;box-shadow:none}.btn-edit-profile:active{transform:none}.edit-actions{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.btn-save{padding:var(--spacing-sm) var(--spacing-lg);background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border:none;border-radius:var(--radius-md);font-size:.9rem;font-weight:500;cursor:pointer;transition:all var(--transition-normal)}.btn-save:hover{background:#20c997;transform:translateY(-1px);box-shadow:0 2px 8px #28a7454d}.btn-save:active{transform:translateY(0)}.btn-cancel{padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-bg-default);color:var(--color-text-primary);border:1px solid var(--color-border-light);border-radius:var(--radius-md);font-size:.9rem;font-weight:500;cursor:pointer;transition:all var(--transition-normal)}.btn-cancel:hover{background:var(--color-bg-paper);border-color:var(--color-accent);transform:translateY(-1px)}.btn-cancel:active{transform:translateY(0)}.articles-card{background:var(--color-bg-paper);border-radius:var(--radius-lg);padding:var(--spacing-xxl);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-normal)}.articles-card:hover{box-shadow:var(--shadow-md)}.articles-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(--color-border-light)}.articles-header h3{color:var(--color-text-primary);font-size:1.5rem;font-weight:600;margin:0}.articles-header .articles-actions{display:flex;gap:var(--spacing-md);align-items:center}.articles-header .articles-actions .search-input{padding:8px 16px;border:1px solid var(--color-border-light);border-radius:var(--radius-md);font-size:14px;width:200px;transition:all var(--transition-fast)}.articles-header .articles-actions .search-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px #ff98001a}.btn-new-article{padding:10px 20px;background:var(--color-accent);color:var(--color-text-white);border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.btn-new-article:hover{background:var(--color-accent-dark);transform:translateY(-1px);box-shadow:var(--shadow-sm)}.loading-articles{text-align:center;padding:var(--spacing-xxl);color:var(--color-text-secondary);font-size:14px}.articles-table{width:100%;border:1px solid var(--color-border-light);border-radius:var(--radius-md);overflow:hidden}.articles-table .table-header{display:grid;grid-template-columns:2fr 1fr 1.5fr 1fr 1fr 120px;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);background:var(--color-bg-grey);font-weight:600;font-size:14px;color:var(--color-text-secondary);border-bottom:1px solid var(--color-border-light)}.articles-table .table-body .table-row{display:grid;grid-template-columns:2fr 1fr 1.5fr 1fr 1fr 120px;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-lg);border-bottom:1px solid var(--color-border-light);transition:all var(--transition-fast);align-items:center}.articles-table .table-body .table-row:last-child{border-bottom:none}.articles-table .table-body .table-row:hover{background:#ff98000d}.articles-table .col-title .article-title-link{color:var(--color-text-primary);font-weight:500;font-size:14px;cursor:pointer;transition:color var(--transition-fast);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}.articles-table .col-title .article-title-link:hover{color:var(--color-accent)}.articles-table .col-title .article-summary{color:var(--color-text-light);font-size:16px;margin-top:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}.articles-table .col-category .category-badge{display:inline-block;padding:4px 10px;background:#ff98001a;color:var(--color-accent);border-radius:var(--radius-sm);font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.articles-table .col-tags .tags-text{color:var(--color-text-secondary);font-size:12px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.articles-table .col-tags .no-tags{color:var(--color-text-light);font-size:12px}.articles-table .col-stats .stats-group{display:flex;flex-direction:column;gap:2px}.articles-table .col-stats .stats-group .stat-item{display:flex;align-items:center;gap:4px;color:var(--color-text-secondary);font-size:12px}.articles-table .col-stats .stats-group .stat-item .stat-icon{font-size:11px}.articles-table .col-date{color:var(--color-text-secondary);font-size:12px}.articles-table .col-actions{display:flex;gap:var(--spacing-xs);justify-content:center}.articles-table .col-actions .icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;border-radius:var(--radius-md);cursor:pointer;font-size:16px;transition:all var(--transition-fast);color:var(--color-text-white)}.articles-table .col-actions .icon-btn.icon-edit{background:var(--color-primary)}.articles-table .col-actions .icon-btn.icon-edit:hover{background:var(--color-primary-dark);transform:translateY(-2px);box-shadow:0 2px 8px #667eea4d}.articles-table .col-actions .icon-btn.icon-hide{background:#faad14}.articles-table .col-actions .icon-btn.icon-hide:hover{background:#d48806;transform:translateY(-2px);box-shadow:0 2px 8px #faad144d}.articles-table .col-actions .icon-btn.icon-delete{background:#ff4d4f}.articles-table .col-actions .icon-btn.icon-delete:hover{background:#cf1322;transform:translateY(-2px);box-shadow:0 2px 8px #ff4d4f4d}.articles-list{display:flex;flex-direction:column;gap:var(--spacing-lg)}.article-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-lg);background:var(--color-bg-default);border-radius:var(--radius-md);border:2px solid var(--color-border-light);transition:all var(--transition-normal)}.article-item:hover{border-color:var(--color-accent);box-shadow:var(--shadow-sm);transform:translateY(-2px)}.article-info{flex:1}.article-info h3{color:var(--color-text-primary);font-size:1.1rem;font-weight:600;margin:0 0 var(--spacing-sm) 0}.article-info h3 a{color:inherit;text-decoration:none;transition:color var(--transition-normal)}.article-info h3 a:hover{color:var(--color-accent)}.article-meta{display:flex;gap:var(--spacing-lg);color:var(--color-text-secondary);font-size:.9rem}.article-meta span{display:flex;align-items:center;gap:var(--spacing-xs)}.article-actions{display:flex;gap:var(--spacing-sm)}.btn-action{padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:var(--radius-md);font-size:.9rem;cursor:pointer;transition:all var(--transition-normal);display:flex;align-items:center;gap:var(--spacing-xs)}.btn-edit{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-edit:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.btn-delete{background:#dc3545;color:#fff}.btn-delete:hover{background:#c82333;transform:translateY(-2px);box-shadow:0 4px 8px #dc35454d}.empty-state{text-align:center;padding:var(--spacing-xxl);color:var(--color-text-secondary)}.empty-state p{font-size:1.1rem;margin-bottom:var(--spacing-lg)}.btn-start-writing{padding:0;background:none;color:var(--color-accent);border:none;border-bottom:2px solid var(--color-accent);font-size:1.05rem;font-weight:500;cursor:pointer;transition:all var(--transition-normal);text-decoration:none;display:inline-block}.btn-start-writing:hover{color:#ff6b35;border-bottom-color:#ff6b35;transform:none;box-shadow:none}@media(max-width:768px){.profile-info{flex-direction:column;gap:var(--spacing-lg)}.avatar-section{align-items:center}.article-item{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.article-actions{width:100%;justify-content:flex-end}.edit-actions{flex-direction:column}}@media(max-width:480px){.profile-card,.articles-card{padding:var(--spacing-lg)}.profile-header,.articles-header{flex-direction:column;gap:var(--spacing-md);align-items:flex-start}.btn-logout{width:100%}.article-meta{flex-direction:column;gap:var(--spacing-xs)}.category-skills{justify-content:center}}.user-profile-container{min-height:calc(100vh - 120px);padding:var(--spacing-xl) 0;padding-bottom:var(--spacing-xxl);background:var(--color-bg-default)}.btn-back{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-bg-paper);color:var(--color-text-secondary);border:1px solid var(--color-border-light);border-radius:var(--radius-md);font-size:14px;cursor:pointer;transition:all var(--transition-fast);margin-bottom:var(--spacing-lg)}.btn-back:hover{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.profile-header{background:var(--color-bg-paper);border-radius:var(--radius-lg);padding:var(--spacing-xxl);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-xl)}.profile-main{display:flex;gap:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.profile-main>div:first-child{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);flex-shrink:0}.profile-avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;border:4px solid var(--color-accent);flex-shrink:0}.profile-info{flex:1;display:flex;flex-direction:column;gap:var(--spacing-sm)}.profile-name{color:var(--color-secondary);font-size:28px;font-weight:700;margin:0;line-height:1.2}.profile-username{color:var(--color-text-light);font-size:15px;margin:0}.profile-bio{color:var(--color-text-secondary);font-size:14px;line-height:1.6;margin:var(--spacing-sm) 0;max-width:100%}.profile-tech-stack{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:center;max-width:150px}.tech-badge{padding:2px 14px;background:var(--color-primary);color:var(--color-secondary-light);border-radius:var(--radius-md);font-size:14px;font-weight:500;white-space:nowrap}.profile-meta{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--color-text-light);font-size:14px;margin-top:var(--spacing-md)}.meta-icon{color:var(--color-accent);font-size:14px}.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg);padding-top:var(--spacing-xl);border-top:2px solid var(--color-border-light)}.stat-box{text-align:center;padding:var(--spacing-lg);background:var(--color-bg-default);border-radius:var(--radius-md);transition:all var(--transition-fast)}.stat-box:hover{background:#ff98001a;transform:translateY(-2px);box-shadow:var(--shadow-sm)}.stat-value{color:var(--color-accent);font-size:28px;font-weight:700;margin-bottom:var(--spacing-sm);line-height:1}.stat-label{color:var(--color-text-secondary);font-size:14px;font-weight:500;line-height:1}.profile-content{background:var(--color-bg-paper);border-radius:var(--radius-lg);padding:var(--spacing-xxl);box-shadow:var(--shadow-sm)}.section-title{color:var(--color-secondary);font-size:22px;font-weight:600;margin:0 0 var(--spacing-xl) 0;padding-bottom:var(--spacing-md);border-bottom:2px solid var(--color-accent);display:inline-block}.articles-grid{display:flex;flex-direction:column;gap:var(--spacing-md)}.no-articles{text-align:center;padding:var(--spacing-xxl);color:var(--color-text-light)}.loading,.error{text-align:center;padding:var(--spacing-xxl);color:var(--color-text-secondary);font-size:16px}.error{color:var(--color-error)}@media(max-width:768px){.profile-main{flex-direction:column;align-items:center;text-align:center}.profile-avatar{margin-bottom:var(--spacing-md)}.profile-info{align-items:center}.profile-tech-stack{justify-content:center}.profile-stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.profile-header,.profile-content{padding:var(--spacing-lg)}.profile-name{font-size:24px}.profile-stats{grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.stat-box{padding:var(--spacing-md)}.stat-value{font-size:22px}}.register-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);position:relative;overflow:hidden;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%)}.register-card{background:var(--color-bg-paper);border-radius:var(--radius-xl);padding:var(--spacing-xl) var(--spacing-xxl);box-shadow:var(--shadow-lg);width:100%;max-width:550px;max-height:90vh;position:relative;z-index:1;animation:fadeIn .5s ease-in-out;overflow-y:auto}.register-header{text-align:center;margin-bottom:var(--spacing-lg)}.register-header h1{color:var(--color-secondary);font-size:26px;margin-bottom:var(--spacing-xs)}.register-header p{color:var(--color-text-secondary);font-size:14px;margin:0}.register-form{display:flex;flex-direction:column;gap:var(--spacing-sm)}.btn-register{padding:12px 24px;background:var(--color-accent);color:var(--color-text-white);border:none;border-radius:var(--radius-md);font-size:15px;font-weight:600;cursor:pointer;transition:all var(--transition-normal);margin-top:var(--spacing-sm)}.btn-register:hover:not(:disabled){background:var(--color-accent-dark);transform:translateY(-2px);box-shadow:var(--shadow-hover)}.btn-register:disabled{opacity:.6;cursor:not-allowed}.login-link{font-size:14px;color:var(--color-text-secondary);margin:0}.login-link a{color:var(--color-accent);font-weight:600;margin-left:var(--spacing-xs);text-decoration:none;transition:color var(--transition-fast)}.login-link a:hover{color:var(--color-accent-dark);text-decoration:underline}.notfound-container{min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center;background:var(--color-bg-default);padding:var(--spacing-xl);position:relative;overflow:hidden}.notfound-content{text-align:center;position:relative;z-index:10;max-width:600px;width:100%}.notfound-message{font-size:36px;font-weight:700;color:var(--color-secondary);margin:0 0 var(--spacing-xl) 0;line-height:1.4;animation:fadeInDown .8s ease-out}.notfound-code{font-size:180px;font-weight:900;color:var(--color-accent);line-height:1;margin:0;position:relative;display:inline-block;animation:fadeInUp .8s ease-out;text-shadow:0 1px 0 rgba(0,0,0,.1),0 5px 10px rgba(0,0,0,.25),0 20px 20px rgba(0,0,0,.15)}.notfound-actions{display:flex;gap:var(--spacing-md);justify-content:center;align-items:center;flex-wrap:wrap;animation:fadeIn 1s ease-out .3s backwards;font-size:16px}.link-home,.link-back{color:var(--color-accent);font-weight:600;cursor:pointer;text-decoration:none;position:relative;transition:all var(--transition-fast);padding:4px 8px}.link-home:after,.link-back:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:0;height:2px;background:var(--color-accent);transition:width var(--transition-fast)}.link-home:hover,.link-back:hover{color:var(--color-accent-dark)}.link-home:hover:after,.link-back:hover:after{width:100%}.link-separator{color:var(--color-text-light);font-weight:300;-webkit-user-select:none;user-select:none}.floating-elements{position:absolute;inset:0;pointer-events:none;overflow:hidden}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1024px){.article-detail-content{grid-template-columns:1fr}.article-sidebar{position:static;margin-top:var(--spacing-xl)}.btn-show-sidebar{right:var(--spacing-md);top:auto;bottom:100px;transform:none;writing-mode:horizontal-tb;flex-direction:row;border-radius:var(--radius-lg);min-height:auto;padding:var(--spacing-md) var(--spacing-lg)}.btn-show-sidebar:hover{transform:translateY(-2px)}.profile-stats,.profile-tech-stack{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.article-main{padding:var(--spacing-lg)}.article-title{font-size:24px}.article-content{font-size:15px}.article-actions{flex-wrap:wrap}.action-btn{flex:1;min-width:calc(50% - var(--spacing-sm));justify-content:center}.profile-card{padding:var(--spacing-lg)}.profile-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.profile-info{flex-direction:column;gap:var(--spacing-lg)}.profile-main{flex-direction:column;align-items:center;text-align:center}.profile-avatar{width:100px;height:100px}.profile-name{font-size:24px}.profile-stats{grid-template-columns:repeat(2,1fr)}.register-container{padding:var(--spacing-md)}.register-card{padding:var(--spacing-lg)}.notfound-message{font-size:28px}.notfound-code{font-size:120px}}@media(max-width:480px){.article-main{padding:var(--spacing-md)}.article-title{font-size:20px}.article-content{font-size:14px}.profile-avatar{width:80px;height:80px}.profile-name{font-size:20px}.stat-value{font-size:18px}.stat-label{font-size:10px}.notfound-code{font-size:100px}}.home-container{min-height:calc(100vh - 120px);padding-bottom:var(--spacing-xxl)}.tech-nav-wrapper{background:var(--color-bg-paper);box-shadow:none;border-bottom:1px solid var(--color-border-light);position:sticky;top:60px;z-index:100;margin-bottom:var(--spacing-md);transition:all var(--transition-normal)}.tech-nav-wrapper.tech-nav-sticky{top:0;border-bottom:1px solid var(--color-border-light)}.tech-nav{display:flex;gap:var(--spacing-sm);padding:var(--spacing-md) 0 var(--spacing-sm) 0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-bottom:1px solid var(--color-border-light)}.tech-nav::-webkit-scrollbar{display:none}.tech-nav-item{padding:8px 18px;background:transparent;color:var(--color-text-secondary);border:none;border-radius:var(--radius-lg);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all var(--transition-fast);flex-shrink:0;display:flex;align-items:center;gap:var(--spacing-xs)}.tech-nav-item:hover{background:var(--color-bg-grey);color:var(--color-secondary)}.tech-nav-item.active{background:var(--color-accent);color:var(--color-text-white)}.tech-nav-item.active .category-count{color:#fffc}.tech-nav-item.loading{opacity:.6;cursor:not-allowed;animation:pulse 1.5s ease-in-out infinite}.category-count{font-size:12px;color:var(--color-text-light);font-weight:400;margin-left:2px}@keyframes pulse{0%,to{opacity:.6}50%{opacity:.3}}.search-container{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) 0 var(--spacing-md) 0;flex-wrap:wrap}.search-container .btn-publish{padding:8px;background:var(--color-accent);color:var(--color-text-white);border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:var(--spacing-xs);transition:all var(--transition-normal);white-space:nowrap}.search-container .btn-publish:hover{background:var(--color-accent-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.search-container .btn-publish .publish-icon{font-size:18px;font-weight:700}.search-input-group{flex:1;min-width:250px;position:relative;display:flex;align-items:center}.search-icon{position:absolute;left:var(--spacing-md);color:var(--color-text-light);font-size:14px;pointer-events:none}.search-input{width:100%;padding:10px 40px;border:1px solid var(--color-border-light);border-radius:var(--radius-md);font-size:14px;background:var(--color-bg-default);color:var(--color-text-primary);transition:all var(--transition-fast)}.search-input:focus{border-color:var(--color-accent);background:var(--color-bg-paper);box-shadow:0 0 0 2px #ff98001a}.search-input::placeholder{color:var(--color-text-light);font-size:14px}.btn-clear-search{position:absolute;right:var(--spacing-sm);width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:var(--color-bg-grey);color:var(--color-text-secondary);border:none;border-radius:50%;font-size:18px;cursor:pointer;transition:all var(--transition-fast)}.btn-clear-search:hover{background:var(--color-error);color:var(--color-text-white)}.btn-search{padding:10px 24px;background:var(--color-accent);color:var(--color-text-white);border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-normal);white-space:nowrap}.btn-search:hover:not(:disabled){background:var(--color-accent-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-search:disabled{opacity:.5;cursor:not-allowed}.home-content{display:grid;grid-template-columns:1fr 320px;gap:var(--spacing-lg);margin-top:0}.articles-section{min-width:0}.articles-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.loading-more{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-xxl);color:var(--color-text-secondary);font-size:14px}.loading-spinner{width:20px;height:20px;border:3px solid var(--color-border-light);border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.no-more-data{text-align:center;padding:var(--spacing-xl);color:var(--color-text-light);font-size:14px;border-top:1px solid var(--color-border-light);margin-top:var(--spacing-md)}.no-articles{text-align:center;padding:var(--spacing-xxl);color:var(--color-text-secondary)}.no-articles p{font-size:16px;margin:0}.sidebar{display:flex;flex-direction:column;gap:var(--spacing-lg);position:sticky;top:180px;align-self:flex-start;max-height:calc(100vh - 200px);overflow-y:auto;scrollbar-width:thin}.sidebar-card{background:var(--color-bg-paper);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm)}.sidebar-title{color:var(--color-secondary);font-size:16px;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:2px solid var(--color-accent);display:inline-block}.sidebar-loading{text-align:center;padding:var(--spacing-lg);color:var(--color-text-light);font-size:14px}.recommended-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.recommended-item{padding:var(--spacing-sm);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.recommended-item:hover{background:var(--color-bg-grey)}.recommended-item h4{color:var(--color-secondary);font-size:14px;margin:0 0 var(--spacing-xs) 0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.recommended-summary{color:var(--color-text-secondary);font-size:12px;line-height:1.5;margin:var(--spacing-xs) 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.recommended-meta{display:flex;gap:var(--spacing-md);font-size:12px;color:var(--color-text-light)}.projects-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.project-item{padding:var(--spacing-sm);border-radius:var(--radius-md);border:1px solid var(--color-border-light);transition:all var(--transition-fast);cursor:pointer}.project-item:hover{border-color:var(--color-accent);box-shadow:var(--shadow-sm);background:var(--color-bg-grey)}.project-item h4{color:var(--color-secondary);font-size:14px;margin:0 0 var(--spacing-xs) 0}.project-item p{color:var(--color-text-secondary);font-size:12px;margin:0 0 var(--spacing-sm) 0;line-height:1.4}.project-meta{display:flex;align-items:center;gap:var(--spacing-sm)}.stars{font-size:12px;color:var(--color-text-light)}.tags-cloud{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.tag-item{padding:8px 10px;background:var(--color-primary-dark);color:var(--color-secondary);border:1px solid var(--color-border-light);border-radius:var(--radius-md);font-size:12px;cursor:pointer;transition:all var(--transition-fast)}.tag-item:hover{background:var(--color-accent);color:var(--color-text-white);transform:translateY(-1px)}.tag-item.active{background:var(--color-accent);color:var(--color-text-white);border-color:var(--color-accent-dark)}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-lg);position:relative;overflow:hidden;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%)}.login-background{position:absolute;inset:0;z-index:0;overflow:hidden}.bg-circle{position:absolute;border-radius:50%;background:var(--color-accent);opacity:.1;animation:float 20s infinite ease-in-out}.bg-circle.circle-1{width:300px;height:300px;top:-100px;left:-100px;animation-delay:0s}.bg-circle.circle-2{width:400px;height:400px;bottom:-150px;right:-150px;animation-delay:5s}.bg-circle.circle-3{width:200px;height:200px;top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:10s}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}}.login-card{background:var(--color-bg-paper);border-radius:var(--radius-xl);padding:var(--spacing-xl) var(--spacing-xxl);box-shadow:var(--shadow-lg);width:100%;max-width:520px;max-height:680px;position:relative;z-index:1;animation:fadeIn .5s ease-in-out;overflow:visible}.login-header{text-align:center;margin-bottom:var(--spacing-md)}.login-header h1{color:var(--color-secondary);font-size:24px;margin-bottom:var(--spacing-xs)}.login-header p{color:var(--color-text-secondary);font-size:14px;margin:0}.login-form{display:flex;flex-direction:column;gap:var(--spacing-sm)}.form-row{display:flex;align-items:center;gap:var(--spacing-md)}.form-row label{color:var(--color-secondary);font-size:14px;font-weight:500;min-width:70px;flex-shrink:0}.form-row input{flex:1;padding:10px 14px;border:2px solid var(--color-border-light);border-radius:var(--radius-md);font-size:14px;transition:all var(--transition-fast);background:var(--color-bg-paper)}.form-row input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px #ff98001a;outline:none}.error-message{background:#f443361a;color:var(--color-error);padding:var(--spacing-md);border-radius:var(--radius-md);font-size:14px;text-align:center;border:1px solid rgba(244,67,54,.2);animation:shake .3s ease-in-out}.form-group{margin:var(--spacing-xs) 0}.form-group input,.form-group textarea,.form-group select{background:transparent}.captcha-hover-area{position:relative;margin:var(--spacing-xs) 0;width:100%;padding-left:85px}.captcha-placeholder{padding:12px 14px;border:2px solid var(--color-border-light);border-radius:var(--radius-md);font-size:14px;text-align:center;cursor:pointer;transition:all var(--transition-fast);background:var(--color-bg-paper);color:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.captcha-placeholder:hover{border-color:var(--color-accent);background:#ff98000d}.captcha-hover-area:has(.captcha-dropdown) .captcha-placeholder{border-color:var(--color-accent)}.captcha-dropdown{position:absolute;top:calc(100% - 2px);left:85px;right:0;z-index:100;padding:var(--spacing-md);background:var(--color-bg-paper);border:2px solid var(--color-accent);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);animation:slideDown .2s ease-out}.captcha-dropdown .slider-captcha{margin:0;max-width:100%}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.slider-group{margin-top:var(--spacing-sm)}.checkbox-group{margin:var(--spacing-xs) 0}.checkbox-label{display:flex;align-items:flex-start;gap:var(--spacing-sm);cursor:pointer;font-size:12px;color:var(--color-text-secondary);line-height:1.5}.checkbox-label input[type=checkbox]{margin-top:3px;cursor:pointer;width:16px;height:16px;accent-color:var(--color-accent)}.checkbox-label a{color:var(--color-accent);text-decoration:underline;margin:0 2px}.checkbox-label a:hover{color:var(--color-accent-dark)}.btn-login{padding:12px 24px;background:var(--color-accent);color:var(--color-text-white);border:none;border-radius:var(--radius-md);font-size:15px;font-weight:600;cursor:pointer;transition:all var(--transition-normal);margin-top:var(--spacing-sm)}.btn-login:hover:not(:disabled){background:var(--color-accent-dark);transform:translateY(-2px);box-shadow:var(--shadow-hover)}.btn-login:active:not(:disabled){transform:translateY(0)}.btn-login:disabled{opacity:.6;cursor:not-allowed}.register-link{font-size:14px;color:var(--color-text-secondary);margin:var(--spacing-sm) 0 0 0;text-align:center}.register-link a{color:var(--color-accent);font-weight:600;margin-left:var(--spacing-xs);text-decoration:none;transition:color var(--transition-fast)}.register-link a:hover{color:var(--color-accent-dark);text-decoration:underline}.editor-container{min-height:calc(100vh - 120px);padding:var(--spacing-xl) 0;padding-bottom:var(--spacing-xxl);background:var(--color-bg-default);position:relative}.editor-layout{display:grid;grid-template-columns:1fr 350px;gap:var(--spacing-xl);max-width:1400px;margin:0 auto;padding:0 var(--spacing-md);transition:grid-template-columns var(--transition-normal)}.editor-layout.sidebar-hidden{grid-template-columns:1fr}.editor-main{min-width:0}.editor-wrapper{width:100%}.editor-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:var(--spacing-lg);border-bottom:2px solid var(--color-border-light)}.editor-header h1{color:var(--color-secondary);font-size:28px;margin:0}.editor-footer{padding:12px;width:100%;text-align:right}.editor-actions{gap:var(--spacing-md)}.btn-draft,.btn-publish{padding:10px 24px;border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-normal)}.btn-draft:disabled,.btn-publish:disabled{opacity:.6;cursor:not-allowed}.btn-draft{background:var(--color-bg-grey);color:var(--color-text-secondary);margin-right:10px}.btn-draft:hover:not(:disabled){background:var(--color-border-light)}.btn-publish{background:var(--color-accent);color:var(--color-text-white)}.btn-publish:hover:not(:disabled){background:var(--color-accent-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.editor-tips{margin-bottom:10px;padding:5px}.editor-content{background:var(--color-primary);border-radius:var(--radius-lg);padding:var(--spacing-xxl);box-shadow:var(--shadow-sm)}.editor-content label{display:block;color:var(--color-secondary);font-size:15px;font-weight:600;margin-bottom:var(--spacing-md)}.title-input{width:100%;padding:var(--spacing-md);border:2px solid var(--color-border-light);border-radius:var(--radius-md);font-size:24px;font-weight:600;color:var(--color-secondary);background:transparent;transition:all var(--transition-fast)}.title-input:focus{border-color:var(--color-accent);outline:none}.title-input::placeholder{color:var(--color-text-light);font-weight:400}.summary-input{width:100%;padding:var(--spacing-md);padding-bottom:var(--spacing-xl);border:2px solid var(--color-border-light);border-radius:var(--radius-md);font-size:14px;font-family:inherit;color:var(--color-text-primary);background:transparent;line-height:1.6;resize:vertical;transition:all var(--transition-fast)}.summary-input:focus{border-color:var(--color-accent);outline:none}.summary-input::placeholder{color:var(--color-text-light)}.summary-group{position:relative}.summary-char-count{position:absolute;right:var(--spacing-md);bottom:var(--spacing-sm);color:var(--color-text-light);font-size:12px;pointer-events:none}.char-count{position:absolute;right:var(--spacing-md);top:50%;transform:translateY(-50%);color:var(--color-text-light);font-size:12px;pointer-events:none}.tech-stack-select{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.tech-stack-btn{padding:10px 20px;background:var(--color-bg-grey);color:var(--color-text-secondary);border:2px solid transparent;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.tech-stack-btn:hover{background:var(--color-bg-paper);border-color:var(--color-accent);color:var(--color-accent)}.tech-stack-btn.active{background:#ff98001a;border-color:var(--color-accent);color:var(--color-accent)}.tags-input-container{display:flex;flex-direction:column;gap:var(--spacing-md)}.tags-list{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.tag-remove{background:transparent;border:none;color:var(--color-text-white);font-size:18px;cursor:pointer;padding:0;margin-left:4px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;display:inline;transition:background var(--transition-fast)}.tag-remove:hover{background:#fff3}.tag-input-form{flex:1}.tag-input{width:100%;padding:10px 12px;border:2px solid var(--color-border-light);border-radius:var(--radius-md);font-size:14px;background:transparent;color:var(--color-text-primary);transition:all var(--transition-fast)}.tag-input:focus{border-color:var(--color-accent);outline:none}.editor-header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md)}.editor-tabs{display:flex;gap:var(--spacing-xs);background:var(--color-bg-grey);padding:4px;border-radius:var(--radius-md)}.tab-btn{padding:6px 16px;background:transparent;color:var(--color-text-secondary);border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.tab-btn.active{background:var(--color-bg-paper);color:var(--color-accent);box-shadow:var(--shadow-sm)}.editor-toolbar{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-md);background:var(--color-bg-grey);border:2px solid var(--color-border-light);border-radius:var(--radius-md) var(--radius-md) 0 0;flex-wrap:wrap}.toolbar-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--color-text-secondary);border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-fast);font-size:16px}.toolbar-btn:hover{background:var(--color-bg-paper);color:var(--color-accent);border-color:var(--color-accent)}.toolbar-btn:active{transform:scale(.95)}.toolbar-divider{width:1px;height:24px;background:var(--color-border-light);margin:0 var(--spacing-xs)}.content-editor{width:100%;padding:var(--spacing-lg);border:2px solid var(--color-border-light);border-top:none;border-radius:0 0 var(--radius-md) var(--radius-md);font-size:15px;line-height:1.8;font-family:Consolas,Monaco,Courier New,monospace;background:transparent;color:var(--color-text-primary);resize:vertical;min-height:400px;transition:all var(--transition-fast)}.content-editor:focus{outline:none;border-color:var(--color-accent)}.content-preview{padding:var(--spacing-lg);border:2px solid var(--color-border-light);border-radius:var(--radius-md);min-height:400px;background:var(--color-bg-paper);line-height:1.8;font-size:15px}.content-preview h1{font-size:28px;margin:var(--spacing-lg) 0;color:var(--color-secondary)}.content-preview h2{font-size:24px;margin:var(--spacing-lg) 0 var(--spacing-md);color:var(--color-secondary)}.content-preview h3{font-size:20px;margin:var(--spacing-md) 0;color:var(--color-secondary)}.content-preview p{margin-bottom:var(--spacing-md)}.content-preview strong{font-weight:700;color:var(--color-secondary)}.content-preview em{font-style:italic}.content-preview ul,.content-preview ol{padding-left:var(--spacing-xl);margin-bottom:var(--spacing-md)}.content-preview li{list-style:disc;margin-bottom:var(--spacing-xs)}.content-preview ol li{list-style:decimal}.content-preview pre{background:var(--color-bg-grey);padding:var(--spacing-md);border-radius:var(--radius-md);overflow-x:auto;margin-bottom:var(--spacing-md)}.content-preview code{font-family:Consolas,Monaco,Courier New,monospace;font-size:14px;line-height:1.6}.content-preview img{max-width:100%;height:auto;border-radius:var(--radius-md);margin:var(--spacing-md) 0}.content-preview a{color:var(--color-accent);text-decoration:underline}.content-preview a:hover{color:var(--color-accent-dark)}.editor-sidebar{position:sticky;top:80px;height:fit-content;max-height:calc(100vh - 100px);overflow-y:auto;background:var(--color-bg-paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.sidebar-header{padding:var(--spacing-lg);border-bottom:2px solid var(--color-border-light);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--color-bg-paper);z-index:1;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.sidebar-header h3{margin:0;font-size:16px;color:var(--color-secondary)}.btn-close-sidebar{background:none;border:none;font-size:24px;color:var(--color-text-light);cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all var(--transition-fast)}.btn-close-sidebar:hover{background:var(--color-bg-grey);color:var(--color-error)}.sidebar-content{padding:var(--spacing-lg)}.example-section{margin-bottom:var(--spacing-lg)}.example-section h4{color:var(--color-accent);font-size:14px;margin:0 0 var(--spacing-sm) 0}.example-section pre{background:var(--color-bg-grey);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);overflow-x:auto;margin:0}.example-section code{font-family:Courier New,Courier,monospace;font-size:12px;color:var(--color-secondary);line-height:1.6}.btn-use-template{width:100%;padding:var(--spacing-md);background:var(--color-accent);color:var(--color-text-white);border:none;border-radius:var(--radius-md);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition-normal);margin-top:var(--spacing-md)}.btn-use-template:hover{background:var(--color-accent-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-show-example{position:fixed;right:var(--spacing-xl);top:50%;transform:translateY(-50%);padding:var(--spacing-md) var(--spacing-md);background:var(--color-accent);color:var(--color-text-white);border:none;border-radius:var(--radius-lg) 0 0 var(--radius-lg);font-size:14px;font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);box-shadow:var(--shadow-lg);transition:all var(--transition-normal);z-index:100;writing-mode:vertical-rl;text-orientation:mixed;min-height:120px;justify-content:center}.btn-show-example:hover{background:var(--color-accent-dark);transform:translateY(-50%) translate(2px);box-shadow:var(--shadow-hover)}@media(max-width:1200px){.editor-layout,.editor-layout.sidebar-hidden{grid-template-columns:1fr}.editor-sidebar{position:relative;top:0;max-height:none;margin-top:var(--spacing-xl)}.btn-show-example{position:fixed;right:var(--spacing-md);top:auto;bottom:100px;transform:none;writing-mode:horizontal-tb;flex-direction:row;border-radius:var(--radius-lg);min-height:auto;padding:var(--spacing-md) var(--spacing-lg)}.btn-show-example:hover{transform:translateY(-2px)}}@media(max-width:1024px){.home-content{grid-template-columns:1fr}.sidebar{position:static;max-height:none;grid-row:1}.sidebar-card{max-width:100%}.search-container{flex-direction:column;align-items:stretch}.search-container .btn-publish{width:100%;justify-content:center}.search-input-group{min-width:100%}}@media(max-width:768px){.tech-nav-wrapper{top:0;margin-bottom:var(--spacing-sm)}.tech-nav{padding:var(--spacing-sm) 0;gap:var(--spacing-xs)}.tech-nav-item{padding:6px 14px;font-size:14px}.search-container{flex-direction:column;align-items:stretch;padding:var(--spacing-sm) 0}.sidebar{display:grid;grid-template-columns:1fr;gap:var(--spacing-md)}.login-container{padding:var(--spacing-md)}.login-card{padding:var(--spacing-xl);max-width:100%}.login-header h1{font-size:22px}.form-row{flex-direction:column;align-items:flex-start;gap:var(--spacing-xs)}.form-row label{min-width:auto}.form-row input{width:100%}.bg-circle{display:none}.editor-wrapper{padding:0 var(--spacing-sm)}.editor-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.editor-header h1{font-size:24px}.editor-actions{width:100%}.editor-actions .btn-draft,.editor-actions .btn-publish{flex:1}.editor-content{padding:var(--spacing-lg)}.title-input{font-size:20px}.tech-stack-select{gap:var(--spacing-xs)}.tech-stack-btn{font-size:14px;padding:8px 16px}.content-editor,.content-preview{min-height:300px;padding:var(--spacing-md);font-size:14px}}@media(max-width:480px){.home-container{padding-bottom:var(--spacing-lg)}.tech-nav-item{padding:5px 12px;font-size:12px}.search-input{font-size:14px;padding:8px 12px 8px 36px}.sidebar-card{background:#fff!important;padding:var(--spacing-md)}.login-card{padding:var(--spacing-lg)}.login-header h1{font-size:22px}.login-header p{font-size:14px}.editor-content{padding:var(--spacing-md)}.editor-header h1{font-size:20px}.title-input{font-size:18px}.tech-stack-btn{font-size:12px;padding:6px 12px}.editor-toolbar{padding:var(--spacing-sm)}.toolbar-btn{width:32px;height:32px;font-size:14px}.content-editor,.content-preview{min-height:250px;padding:var(--spacing-sm);font-size:14px}}.article-detail-container .author-actions-icons .icon-btn.icon-edit{background:#6d819f}