:root{--primary-bg-gradient: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);--secondary-bg: #ffffff;--text-primary: #1f2937;--text-secondary: #6b7280;--border-color: #dbeafe;--accent-color: #2563eb;--accent-hover-color: #1d4ed8;--category-active-bg: #dbeafe;--category-active-text: #1e40af;--card-shadow: 0 4px 12px rgba(37, 99, 235, .08);--button-hover-bg: #eff6ff;--copied-tooltip-bg: rgba(37, 99, 235, .8);--copied-tooltip-color: #ffffff;--light-blue-accent: #60a5fa;--modal-overlay-bg: rgba(17, 24, 39, .6);--modal-content-bg: #ffffff;--modal-header-bg: #f9fafb;--modal-footer-bg: #f9fafb;--favorite-red: #f87171;--loading-spinner-color: var(--accent-color);--header-bg-translucent: rgba(255, 255, 255, .8);--footer-bg-translucent: rgba(255, 255, 255, .7);--card-hover-shadow: 0 8px 20px rgba(37, 99, 235, .15);--button-active-bg: #e0e7ff;--input-focus-shadow: 0 0 0 3px rgba(96, 165, 249, .3);--card-border-hover: 1px solid var(--accent-color);--heart-fill: var(--favorite-red);--counseling-message-user-bg: #dbeafe;--counseling-message-assistant-bg: #ffffff;--counseling-input-bg: #ffffff;--counseling-send-button-hover: var(--accent-hover-color);--counseling-loading-text: var(--text-secondary)}body{margin:0;font-family:-apple-system,Inter,PingFang SC,system-ui,sans-serif;background:var(--primary-bg-gradient);color:var(--text-primary);line-height:1.6;font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container{display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--primary-bg-gradient);display:flex;justify-content:center;align-items:center;z-index:9999;flex-direction:column;gap:15px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.loading-spinner{width:40px;height:40px;stroke:var(--loading-spinner-color);animation:spin 1.5s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-content p{margin:5px 0;color:var(--text-secondary);font-size:16px;text-align:center}.loading-content p:first-of-type{font-weight:500;color:var(--accent-color)}.app-header{background-color:var(--header-bg-translucent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:20px 24px;border-bottom:1px solid var(--border-color);border-radius:0 0 20px 20px;margin:0 16px;position:sticky;top:0;z-index:1000;box-shadow:0 2px 8px #6366f10d;transition:box-shadow .3s ease}.app-header:hover{box-shadow:0 4px 16px #6366f11a}.header-content{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.logo{display:flex;align-items:center;color:var(--accent-color);font-weight:600;cursor:pointer}.logo h1{font-size:22px;margin:0 0 0 10px;font-weight:600;color:var(--accent-color)}.header-right-icons{display:flex;align-items:center;gap:15px}.header-button{background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;transition:background-color .2s ease,color .2s ease,transform .2s ease;font-size:14px;font-weight:500;color:var(--text-secondary)}.header-button:hover{background-color:var(--button-hover-bg);color:var(--accent-color);transform:translateY(-2px)}.header-button svg{stroke:var(--light-blue-accent)}.header-button:hover svg{stroke:var(--accent-color)}.favorite-toggle-button span{font-weight:600}.cloud-status{font-size:13px;color:var(--text-secondary);background-color:var(--category-active-bg);padding:6px 12px;border-radius:8px;display:flex;align-items:center;gap:5px;font-weight:500;box-shadow:0 1px 3px #2563eb0d}.categories-nav{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px;padding-bottom:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.categories-nav::-webkit-scrollbar{display:none}.category-button{display:flex;align-items:center;gap:6px;padding:10px 18px;background-color:var(--secondary-bg);border:1px solid var(--border-color);border-radius:10px;cursor:pointer;font-size:14px;font-weight:500;transition:background-color .3s ease,color .3s ease,border-color .3s ease,transform .2s ease,box-shadow .2s ease;white-space:nowrap;color:var(--text-secondary);box-shadow:0 1px 2px #00000005}.category-button:hover{background-color:var(--button-hover-bg);color:var(--accent-color);border-color:var(--accent-color);transform:translateY(-2px);box-shadow:0 3px 6px #2563eb14}.category-button.active{background-color:var(--category-active-bg);color:var(--category-active-text);border-color:var(--accent-color);font-weight:600;transform:translateY(-2px);box-shadow:0 4px 8px #2563eb1a}.category-button svg{stroke:var(--light-blue-accent)}.category-button.active svg{stroke:var(--category-active-text)}.search-container{position:relative;width:100%;max-width:500px;margin:0 auto;display:flex;align-items:center}.search-input{flex-grow:1;padding:12px 45px 12px 16px;border:1px solid var(--border-color);border-radius:12px;font-size:15px;background-color:var(--secondary-bg);color:var(--text-primary);box-shadow:inset 0 2px 4px #0000000a;transition:border-color .3s ease,box-shadow .3s ease}.search-input:focus{outline:none;border-color:var(--accent-color);box-shadow:var(--input-focus-shadow)}.search-icon{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--light-blue-accent);pointer-events:none}.main-content{flex:1;padding:30px 16px;max-width:1200px;margin:0 auto;width:100%}.content-wrapper{display:grid;grid-template-columns:2fr 1fr;gap:30px}.phrases-section{display:flex;flex-direction:column}.phrases-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:20px}.phrase-card{background-color:var(--secondary-bg);border-radius:16px;padding:24px;box-shadow:var(--card-shadow);transition:transform .3s ease,box-shadow .3s ease,border .3s ease;display:flex;flex-direction:column;border:1px solid var(--border-color);position:relative}.phrase-card:hover{transform:translateY(-6px);box-shadow:var(--card-hover-shadow);border:var(--card-border-hover)}.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.card-title{margin:0 10px 0 0;font-size:19px;font-weight:600;color:var(--accent-color);flex-grow:1;line-height:1.3}.card-description{font-size:14px;color:var(--text-secondary);margin-bottom:18px;flex-grow:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-details{font-size:13px;color:var(--text-secondary);margin-bottom:18px;border-top:1px solid var(--border-color);padding-top:18px}.detail-item{margin-bottom:10px}.detail-item strong{color:var(--text-primary);font-weight:500;margin-right:5px}.card-footer{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--border-color)}.view-detail-button,.copy-button,.save-button,.modal-copy-button,.modal-favorite-button{background:none;border:none;cursor:pointer;color:var(--light-blue-accent);display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;transition:background-color .2s ease,color .2s ease,transform .2s ease;font-size:14px;font-weight:500}.view-detail-button:hover,.copy-button:hover,.save-button:hover,.modal-copy-button:hover,.modal-favorite-button:hover{background-color:var(--button-hover-bg);color:var(--accent-hover-color);transform:translateY(-2px)}.view-detail-button:active,.copy-button:active,.save-button:active,.modal-copy-button:active,.modal-favorite-button:active{background-color:var(--button-active-bg);transform:translateY(0)}.copy-button{position:relative}.copied-tooltip{position:absolute;bottom:120%;left:50%;transform:translate(-50%);background-color:var(--copied-tooltip-bg);color:var(--copied-tooltip-color);padding:5px 10px;border-radius:6px;font-size:11px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:10}.copy-button:hover .copied-tooltip,.copy-button:active .copied-tooltip{opacity:1;visibility:visible}.favorite-button{background:none;border:none;cursor:pointer;padding:6px;border-radius:8px;transition:transform .2s ease;display:flex;align-items:center;color:var(--text-secondary)}.favorite-button:hover{transform:scale(1.1);color:var(--favorite-red)}.favorite-button[fill]{color:var(--favorite-red)}.empty-state{grid-column:1 / -1;text-align:center;padding:40px 20px;color:var(--text-secondary);font-size:16px;background-color:#fff9;border-radius:16px;box-shadow:var(--card-shadow);margin:20px 0;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.empty-state p{margin-bottom:10px}.empty-state p:first-of-type{font-weight:500;color:var(--accent-color)}.counseling-section{background-color:var(--secondary-bg);border-radius:16px;box-shadow:var(--card-shadow);border:1px solid var(--border-color);display:flex;flex-direction:column;height:fit-content;max-height:700px;overflow:hidden}.counseling-header{display:flex;align-items:center;gap:10px;padding:16px 20px;background-color:var(--modal-header-bg);border-bottom:1px solid var(--border-color);border-radius:16px 16px 0 0}.counseling-header h2{margin:0;font-size:20px;font-weight:600;color:var(--accent-color)}.counseling-messages{flex-grow:1;padding:20px;overflow-y:auto;background-color:var(--primary-bg-gradient);scrollbar-width:thin;scrollbar-color:var(--light-blue-accent) transparent}.counseling-messages::-webkit-scrollbar{width:8px}.counseling-messages::-webkit-scrollbar-track{background:transparent}.counseling-messages::-webkit-scrollbar-thumb{background-color:var(--light-blue-accent);border-radius:4px;border:2px solid transparent;background-clip:content-box}.message{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px;max-width:90%}.message.user{margin-left:auto;flex-direction:row-reverse}.message-avatar{width:36px;height:36px;border-radius:50%;display:flex;justify-content:center;align-items:center;font-weight:700;font-size:12px;flex-shrink:0}.user-avatar{background-color:var(--accent-color);color:#fff}.assistant-avatar{background-color:var(--light-blue-accent);color:var(--text-primary)}.message p{margin:0;padding:10px 15px;border-radius:12px;line-height:1.5;word-wrap:break-word;overflow-wrap:break-word}.message.user p{background-color:var(--counseling-message-user-bg);color:var(--text-primary);border-bottom-right-radius:4px}.message.assistant p{background-color:var(--counseling-message-assistant-bg);color:var(--text-primary);border-bottom-left-radius:4px;box-shadow:var(--card-shadow)}.loading-message{font-style:italic;color:var(--counseling-loading-text)}.counseling-input-area{display:flex;padding:16px 20px;background-color:var(--modal-footer-bg);border-top:1px solid var(--border-color);border-radius:0 0 16px}.counseling-input-area input{flex-grow:1;padding:10px 15px;border:1px solid var(--border-color);border-radius:10px;font-size:14px;margin-right:12px;background-color:var(--counseling-input-bg);transition:border-color .3s ease,box-shadow .3s ease}.counseling-input-area input:focus{outline:none;border-color:var(--accent-color);box-shadow:var(--input-focus-shadow)}.counseling-input-area button{background-color:var(--accent-color);color:#fff;border:none;padding:10px 15px;border-radius:10px;cursor:pointer;transition:background-color .2s ease,transform .2s ease;display:flex;align-items:center;justify-content:center}.counseling-input-area button:hover:not(:disabled){background-color:var(--counseling-send-button-hover);transform:translateY(-2px)}.counseling-input-area button:active:not(:disabled){transform:translateY(0)}.counseling-input-area button:disabled{background-color:var(--border-color);cursor:not-allowed}.shortcut-hint{text-align:center;font-size:12px;color:var(--text-secondary);padding:5px 0 10px}.app-footer{background:var(--footer-bg-translucent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:20px 24px;text-align:center;font-size:13px;color:var(--text-secondary);border-top:1px solid var(--border-color);border-radius:20px 20px 0 0;margin:30px 16px 0}.app-footer p{margin:4px 0}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--modal-overlay-bg);display:flex;justify-content:center;align-items:center;z-index:1001;padding:20px;box-sizing:border-box}.modal-content{background:var(--modal-content-bg);border-radius:20px;padding:24px;width:100%;max-width:600px;box-shadow:0 10px 30px #00000026;animation:fadeIn .3s ease forwards;overflow:hidden}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);background:var(--modal-header-bg);border-radius:16px 16px 0 0;padding:16px 24px;margin:-24px -24px 20px}.modal-title{margin:0;font-size:22px;font-weight:600;color:var(--accent-color)}.modal-close-button{background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:5px;transition:color .2s ease}.modal-close-button:hover{color:var(--text-primary)}.modal-body{margin-bottom:24px}.modal-description{font-size:15px;color:var(--text-secondary);margin-bottom:20px;line-height:1.7}.modal-detail-item{margin-bottom:14px;font-size:14px;color:var(--text-secondary)}.modal-detail-item strong{color:var(--text-primary);font-weight:500;margin-right:8px;display:inline-block;min-width:100px}.modal-footer{display:flex;justify-content:flex-end;gap:16px;border-top:1px solid var(--border-color);margin:0 -24px -24px;padding:16px 24px 24px;background:var(--modal-footer-bg);border-radius:0 0 16px}.modal-copy-button,.modal-favorite-button{padding:10px 18px;font-size:15px;border-radius:10px;border:1px solid}.modal-copy-button{color:var(--accent-color);border-color:var(--accent-color)}.modal-copy-button:hover{background-color:var(--accent-color);color:#fff;transform:none}.modal-favorite-button{color:var(--favorite-red);border-color:var(--favorite-red)}.modal-favorite-button:hover{background-color:var(--favorite-red);color:#fff;transform:none}.modal-favorite-button svg{margin-right:8px}.modal-copy-button svg{margin-right:8px}@media (max-width: 992px){.app-header{margin:0 12px}.main-content{padding:24px 12px}.app-footer{margin:24px 12px 0}.modal-content{max-width:90%}.content-wrapper{grid-template-columns:1fr}.counseling-section{margin-top:30px}}@media (max-width: 768px){.app-header{padding:16px;margin:0 8px;border-radius:0 0 16px 16px}.header-content{flex-direction:column;align-items:flex-start;margin-bottom:12px}.logo h1{font-size:20px}.header-right-icons{margin-top:8px;align-self:flex-end}.categories-nav{margin-bottom:16px;padding-bottom:8px;gap:8px}.category-button{padding:8px 12px;font-size:13px}.search-container{max-width:100%}.search-input{padding:10px 40px 10px 12px;border-radius:10px}.main-content{padding:16px 8px}.phrases-grid{grid-template-columns:1fr;gap:16px}.phrase-card{padding:16px;border-radius:12px}.card-title{font-size:17px}.card-description{font-size:13px;-webkit-line-clamp:2}.card-details{font-size:12px}.card-footer{justify-content:center;gap:10px}.view-detai{}}