:root{
  --bg: #0a0f1c;
  --bg-soft:#111827;
  --card:#1e293b;
  --card-hover:#334155;
  --text:#f1f5f9;
  --muted:#94a3b8;
  --primary:#3b82f6;
  --primary-600:#2563eb;
  --primary-hover:#1d4ed8;
  --accent:#06b6d4;
  --ok:#10b981;
  --warn:#f59e0b;
  --err:#ef4444;
  --success:#22c55e;
  --ring: 0 10px 30px rgba(59, 130, 246, .25);
  --glass: rgba(15, 23, 42, .8);
  --radius: 16px;
  --shadow: 0 8px 32px rgba(0,0,0,.4);
  --border: 1px solid rgba(148, 163, 184, .2);
}

/* 字體載入優化 - 系統字體降級 */
html {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

body {
  font-family: 'CustomFont', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:'CustomFont', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'Helvetica Neue', Helvetica, STHeiti, 'WenQuanYi Micro Hei', sans-serif}

textarea#message {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease;
}

textarea#message:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

textarea#message::placeholder {
  color: var(--muted);
  opacity: 0.7;
}
a{color:var(--accent);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:24px}
header{backdrop-filter:saturate(140%) blur(10px);background:linear-gradient(180deg,rgba(11,16,32,.85),rgba(11,16,32,.50));border-bottom:1px solid rgba(153,167,196,.12);padding:12px 0;margin-bottom:24px}
.nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;font-weight:800;letter-spacing:.3px;font-size:20px;color:#e6eefc}
.brand img{max-height:32px;width:auto;margin-right:8px;border-radius:4px;object-fit:contain}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:12px;padding:10px 14px;cursor:pointer;color:white;background:linear-gradient(135deg,var(--primary),var(--primary-600));box-shadow:var(--ring);transition:all .15s;font-size:14px;font-weight:500}
.btn:hover{transform:translateY(-1px);filter:saturate(115%);background:linear-gradient(135deg,var(--primary-hover),var(--primary))}
.btn.secondary{background:transparent;color:var(--text);border:var(--border)}
.btn:disabled{background:rgba(153,167,196,.3);cursor:not-allowed;transform:none}
.btn:disabled:hover{transform:none;filter:none}
.login-form{max-width:400px;margin:50px auto;padding:30px;border:1px solid rgba(153,167,196,.2);border-radius:12px;background:var(--card)}
.login-form h2{text-align:center;margin-bottom:20px}
.login-form .form-group{margin-bottom:20px}
.login-form input{width:100%;padding:12px;border-radius:8px;border:1px solid rgba(153,167,196,.25);background:var(--glass);color:var(--text);outline:none}
.tabs{display:flex;gap:8px;margin-bottom:24px;border-bottom:1px solid rgba(153,167,196,.2);padding-bottom:8px}
.tab-btn{background:transparent;color:var(--muted);border:none;padding:8px 16px;border-radius:8px;cursor:pointer;transition:all .2s}
.tab-btn.active{background:var(--primary);color:white}
.tab-btn:hover{background:rgba(59,130,246,.1);color:var(--text)}
.panel{background:linear-gradient(180deg,var(--bg-soft),rgba(15,23,42,.7));border:var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:24px;padding:28px}
.panel-header{background:var(--card);padding:20px 32px;border-bottom:1px solid rgba(153,167,196,.1)}
.panel-body{padding:32px}
.form-group{margin-bottom:16px}
.form-group label{display:block;margin-bottom:4px;font-weight:500;color:var(--text)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px;border-radius:8px;border:1px solid rgba(153,167,196,.25);background:var(--glass);color:var(--text);outline:none}
.form-group textarea{resize:vertical;min-height:100px}
.form-row{display:flex;gap:16px}
.form-row .form-group{flex:1}
.table{overflow-x:auto}
.table table{width:100%;border-collapse:collapse}
.table th,.table td{padding:12px;text-align:left;border-bottom:1px solid rgba(153,167,196,.1)}
.table th{background:var(--card);font-weight:600}
.table tr:hover{background:rgba(59,130,246,.05)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn-small{padding:6px 12px;font-size:12px}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,.85);backdrop-filter:blur(6px);z-index:1000}
.modal-content{background:linear-gradient(180deg,var(--bg-soft),rgba(15,23,42,.95));border:var(--border);border-radius:16px;max-width:800px;width:95%;max-height:90vh;overflow-y:auto}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid rgba(153,167,196,.2)}
.modal-body{padding:16px}
.close-btn{background:none;border:none;color:var(--muted);font-size:24px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s}
.close-btn:hover{background:rgba(239,68,68,.1);color:var(--err)}
.toast{position:fixed;right:16px;bottom:16px;padding:12px 14px;border-radius:12px;background:#0b1220;color:#e2e8f0;border:1px solid rgba(153,167,196,.2);box-shadow:var(--ring);display:none;z-index:1001}
.success{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.4)}
.error{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.4)}
.warning{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.4)}
.warn{background:var(--warn);color:white}
.warn:hover{background:#d97706}
.file-upload{margin:16px 0;padding:16px;border:2px dashed rgba(153,167,196,.3);border-radius:8px;text-align:center;background:rgba(59,130,246,.05)}
.file-upload.dragover{border-color:var(--primary);background:rgba(59,130,246,.1)}
.progress{display:none;margin:8px 0}
.progress-bar{height:4px;background:rgba(59,130,246,.2);border-radius:2px;overflow:hidden}
.progress-fill{height:100%;background:var(--primary);width:0%;transition:width .3s}
.sortable-list{display:flex;flex-direction:column;gap:8px}
.sortable-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--card);border-radius:8px;border:1px solid rgba(153,163,184,.1)}
.sortable-handle{cursor:grab;color:var(--muted);font-size:16px}
.sortable-handle:active{cursor:grabbing}
.sortable-item img{max-width:200px;max-height:200px;object-fit:cover;border-radius:4px}
.sortable-item .info{flex:1}
.sortable-item .actions{display:flex;gap:4px}
/* 筆記系統樣式 */
.hero{text-align:center;margin-bottom:32px}
.hero .title{font-size:32px;font-weight:700;margin-bottom:8px;color:var(--text)}
.hero .subtitle{font-size:16px;margin-bottom:24px;color:var(--muted)}
.row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.field{flex:1;min-width:200px}
.field input,.field select{width:100%;padding:12px;border-radius:12px;background:var(--glass);border:1px solid rgba(153,163,196,.25);color:var(--text);outline:none}
.field input:focus,.field select:focus{border-color:var(--primary)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:16px}
.card{background:var(--card);border-radius:16px;overflow:hidden;border:1px solid rgba(153,163,184,.2);transition:all .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .thumb{width:100%;height:150px;object-fit:cover;background:#1e293b}
.card .body{padding:16px}
.card .meta{margin-bottom:12px}
.tag{display:inline-block;padding:4px 8px;border-radius:8px;font-size:11px;margin-right:6px;margin-bottom:4px}
.list{display:flex;flex-direction:column;gap:8px}
.list .item{display:flex;flex-direction:column;gap:8px;padding:20px;background:var(--card);border-radius:8px;border:1px solid rgba(153,163,184,.1)}
.list .item strong{color:var(--text)}
.muted{color:var(--muted)}
.footer{text-align:center;margin-top:32px;padding:16px;color:var(--muted);border-top:1px solid rgba(153,163,184,.1)}

/* === 新增動畫增強樣式 === */

/* 卡片動畫增強 */
.card {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease-out forwards;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
.card:nth-child(6) { animation-delay: 0.6s; }
.card:nth-child(n+7) { animation-delay: 0.7s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 卡片懸停微動畫增強 */
.card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}

.card .thumb {
  transition: transform 0.3s ease;
}

.card:hover .thumb {
  transform: scale(1.05);
}

/* 按鈕動畫增強 */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 波紋效果 */
.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  pointer-events: none;
}

.btn:active::before {
  width: 300px;
  height: 300px;
}

/* 載入狀態 */
.btn.loading {
  pointer-events: none;
  position: relative;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.6), rgba(59, 130, 246, 0.4));
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.btn.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: buttonLoading 1s linear infinite;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

@keyframes buttonLoading {
  to { transform: translateY(-50%) rotate(360deg); }
}

/* 下載按鈕特殊載入狀態 */
.download-btn.loading {
  background: linear-gradient(135deg, rgba(212, 163, 115, 0.6), rgba(218, 165, 32, 0.4));
  border: 1px solid rgba(212, 163, 115, 0.3);
  animation: downloadPulse 2s ease-in-out infinite;
}

@keyframes downloadPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(212, 163, 115, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(212, 163, 115, 0.6), 0 0 30px rgba(212, 163, 115, 0.4);
  }
}

/* 成功/失敗動畫 */
.btn.success {
  animation: buttonSuccess 0.6s ease-out;
  background: linear-gradient(135deg, var(--ok), #22c55e);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.btn.error {
  animation: buttonError 0.6s ease-out;
  background: linear-gradient(135deg, var(--err), #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

@keyframes buttonSuccess {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes buttonError {
  0% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
  20%, 40%, 60%, 80% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* 下載按鈕成功/失敗狀態 */
.download-btn.success {
  background: linear-gradient(135deg, var(--ok), #22c55e);
  border: 1px solid rgba(34, 197, 94, 0.3);
  animation: downloadSuccess 0.8s ease-out;
}

.download-btn.error {
  background: linear-gradient(135deg, var(--err), #ef4444);
  border: 1px solid rgba(239, 68, 68, 0.3);
  animation: downloadError 0.8s ease-out;
}

@keyframes downloadSuccess {
  0% { transform: scale(1); }
  25% { transform: scale(1.05) rotate(-1deg); }
  50% { transform: scale(1.1) rotate(1deg); }
  75% { transform: scale(1.05) rotate(-1deg); }
  100% { transform: scale(1); }
}

@keyframes downloadError {
  0% { transform: translateX(0); }
  15% { transform: translateX(-5px) rotate(-2deg); }
  30% { transform: translateX(5px) rotate(2deg); }
  45% { transform: translateX(-4px) rotate(-1deg); }
  60% { transform: translateX(4px) rotate(1deg); }
  75% { transform: translateX(-2px) rotate(-0.5deg); }
  90% { transform: translateX(2px) rotate(0.5deg); }
  100% { transform: translateX(0); }
}
/* 模態框樣式 */
.dialog{background:var(--bg-soft);border-radius:16px;border:1px solid rgba(153,163,184,.2);max-width:100%;width:100%;box-shadow:var(--shadow)}
.hd{padding:16px;border-bottom:1px solid rgba(153,163,184,.1);background:var(--card)}
.hd #modalTitle{font-size:24px;font-weight:700;color:var(--text);margin:0;text-align:center;flex:1}
.ct{padding:20px}
/* 筆記詳細資訊樣式 */
.note-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.note-updates-panel,.note-details-panel{background:var(--card);border-radius:12px;padding:16px;border:1px solid rgba(153,163,184,.1)}
.note-preview-container{margin-bottom:20px;text-align:center}
.note-preview-image{max-width:100%;height:auto;border-radius:12px}
.preview-navigation{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);color:white;border:none;padding:8px;border-radius:50%;cursor:pointer;font-size:18px;z-index:10}
.preview-navigation:hover{background:rgba(0,0,0,.7)}
.preview-navigation.prev{left:10px}
.preview-navigation.next{right:10px}
.file{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(153,163,184,.1)}
.file .name{flex:1;color:var(--text)}
.file .btn{min-width:80px}
.menu-toggle{display:none;background:none;border:none;color:var(--text);font-size:20px;cursor:pointer;padding:8px}
.menu{display:flex;gap:12px}
.menu .btn{font-size:12px;padding:8px 12px}
@media (max-width: 768px){
  .container{padding:8px}
  .nav{flex-direction:column;align-items:flex-start}
  .form-row{flex-direction:column}
  .actions{justify-content:space-around}
  .btn{flex:1;margin-bottom:4px}
  .table th,.table td{padding:8px;font-size:14px}
  .table th, .table td{display:block; width:100%; text-align:left}
  .table th{font-weight:bold; border-bottom:1px solid rgba(153,167,196,.2); padding-bottom:4px; margin-bottom:4px}
  .table tr{border:1px solid rgba(153,167,196,.1); margin-bottom:8px; border-radius:8px; padding:8px}
  .sortable-item img{max-width:80%;max-height:120px}
  .modal-content{max-width:95vw}
  .form-group label{display:block}
  .btn{flex:1;margin-bottom:4px}
  .row{flex-direction:column}
  .field{min-width:auto}
  .grid{grid-template-columns:1fr}
  .note-info-grid{grid-template-columns:1fr}
  .hero .title{font-size:24px}
  .hero .subtitle{font-size:14px}
  .menu-toggle{display:block}
  .menu{display:none;flex-direction:column;position:absolute;top:100%;right:0;background:var(--bg-soft);border:1px solid rgba(153,163,184,.2);border-radius:8px;padding:8px;min-width:120px;z-index:100}
  .menu.open{display:flex}
  }
  

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-soft);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* 平板和手機版調整垂直定位 */
@media (max-width: 1024px) {
  .preloader {
    align-items: flex-start;
    padding-top: 15vh;
  }
}

@media (max-width: 768px) {
  .preloader {
    align-items: center;
    padding-top: 0;
  }
}

.loading-gif {
  width: min(1200px, 80vw);
  height: min(1200px, 80vh);
  object-fit: contain;
}

/* 載入動畫響應式設計 */
@media (max-width: 1024px) {
  .loading-gif {
    width: 900px;
    height: 900px;
  }
}

@media (max-width: 768px) {
  .loading-gif {
    width: 900px;
    height: 900px;
  }
}

@media (max-width: 480px) {
  .loading-gif {
    width: 300px;
    height: 300px;
  }
}

#noteLoadingModal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

#noteLoadingModal .loading-content {
  background: var(--bg-soft);
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  border: 1px solid rgba(148,163,184,0.2);
}
#noteLoadingModal img {
  width: min(240px, 80vw);
  height: min(240px, 80vh);
  object-fit: contain;
}

/* 筆記載入動畫響應式設計 */
@media (max-width: 1024px) {
  #noteLoadingModal img {
    width: 800px;
    height: 800px;
  }
}

@media (max-width: 768px) {
  #noteLoadingModal img {
    width: 500px;
    height: 500px;
  }
}

@media (max-width: 480px) {
  #noteLoadingModal img {
    width: 250px;
    height: 250px;
  }
}
#noteLoadingModal div {
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

/* 頁面轉場動畫 */
.panel {
  transform: translateY(20px);
  opacity: 0;
  animation: panelSlideIn 0.5s ease-out forwards;
}

@keyframes panelSlideIn {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 面板切換動畫 */
.panel.fade-out {
  animation: panelFadeOut 0.3s ease-in forwards;
}

.panel.fade-in {
  animation: panelFadeIn 0.4s ease-out forwards;
}

@keyframes panelFadeOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes panelFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 模態框動畫增強 */
.modal {
  animation: modalBackdropIn 0.3s ease-out;
}

.modal .dialog {
  animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes modalBackdropIn {
  from { backdrop-filter: blur(0px); }
  to { backdrop-filter: blur(6px); }
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal.fade-out {
  animation: modalFadeOut 0.3s ease-in forwards;
}

@keyframes modalFadeOut {
  to {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
}

/* 搜尋載入指示器 */
.search-loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 50%;
  border-top-color: var(--primary);
  animation: searchSpin 1s ease-in-out infinite;
  margin-left: 10px;
}

@keyframes searchSpin {
  to { transform: rotate(360deg); }
}

/* 下載進度條 */
.download-progress {
  width: 100%;
  height: 6px;
  background: rgba(59, 130, 246, 0.15);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid rgba(59, 130, 246, 0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.download-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
  background-size: 200% 100%;
  border-radius: 2px;
  width: 0%;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: progressShine 2s ease-in-out infinite, progressFlow 3s linear infinite;
  position: relative;
}

.download-progress-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: progressGlow 1.5s ease-in-out infinite;
}

@keyframes progressShine {
  0% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); }
  50% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.6); }
  100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); }
}

@keyframes progressFlow {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes progressGlow {
  0% { left: -100%; }
  100% { left: 100%; }
}


/* 圖片載入動畫 */
.image-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: imageLoading 1.5s infinite;
}

@keyframes imageLoading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.thumb {
  transition: all 0.3s ease;
}

.thumb.image-loading {
  position: relative;
  overflow: hidden;
}

.thumb.image-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: imageShimmer 1.5s infinite;
}

@keyframes imageShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 滾動觸發動畫 */
@keyframes fadeInOnScroll {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-scroll {
  animation: fadeInOnScroll 0.8s ease-out forwards;
}

/* === 進階動畫增強 === */

/* 複雜的頁面轉場效果 */
.panel-transition {
  position: relative;
  overflow: hidden;
}

.panel-transition::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(59, 130, 246, 0.1) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: slideShimmer 2s infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes slideShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 進階載入進度動畫 */
.loading-progress {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.loading-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.4), transparent);
  animation: loadingPulse 1.5s infinite;
}

@keyframes loadingPulse {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 複雜的微動畫效果 */
.btn-advanced {
  position: relative;
  overflow: visible;
}

.btn-advanced::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--primary), var(--accent), var(--primary));
  border-radius: 14px;
  z-index: -1;
  opacity: 0;
  animation: borderGlow 3s ease-in-out infinite;
}

@keyframes borderGlow {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* 浮動粒子效果 */
.floating-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--primary);
  border-radius: 50%;
  opacity: 0;
  animation: floatParticle 4s ease-in-out infinite;
}

.particle:nth-child(1) { animation-delay: 0s; left: 10%; }
.particle:nth-child(2) { animation-delay: 1s; left: 20%; }
.particle:nth-child(3) { animation-delay: 2s; left: 30%; }
.particle:nth-child(4) { animation-delay: 3s; left: 40%; }
.particle:nth-child(5) { animation-delay: 0.5s; left: 50%; }

@keyframes floatParticle {
  0% {
    opacity: 0;
    transform: translateY(100%) scale(0);
  }
  10% {
    opacity: 1;
    transform: translateY(80%) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(20%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(0%) scale(0);
  }
}

/* 進階卡片動畫 */
.card-advanced {
  position: relative;
}

.card-advanced::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--primary), var(--accent), var(--primary));
  border-radius: 18px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-advanced:hover::before {
  opacity: 0.3;
  animation: cardBorderFlow 2s linear infinite;
}

@keyframes cardBorderFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 脈衝動畫 */
.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.6);
  }
}

/* 文字打字效果 */
.typewriter {
  overflow: hidden;
  border-right: 2px solid var(--primary);
  white-space: nowrap;
  animation: typing 2s steps(20, end), blink 1s infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  from, to { border-color: transparent; }
  50% { border-color: var(--primary); }
}

/* 進階模態框動畫 */
.modal-advanced .dialog {
  animation: modalBounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes modalBounceIn {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.3);
  }
  50% {
    opacity: 1;
    transform: translateY(-25px) scale(1.05);
  }
  70% {
    transform: translateY(-10px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 背景波紋效果 */
.ripple-bg {
  position: relative;
  overflow: hidden;
}

.ripple-bg::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: bgRipple 4s ease-out infinite;
}

@keyframes bgRipple {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}


/* 全畫面下載成功動畫 */
.fullscreen-download-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fullscreen-download-overlay.active {
  opacity: 1;
}

.fullscreen-download-icon {
  width: 150px;
  height: 150px;
  background: url('/note/assets/download.png') no-repeat center center;
  background-size: contain;
  opacity: 0;
  animation: fullscreenDownloadZoom 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  filter: drop-shadow(0 0 30px rgba(16, 185, 129, 0.8));
}

@keyframes fullscreenDownloadZoom {
  0% {
    transform: scale(0.1) rotate(-10deg);
    opacity: 0;
  }
  30% {
    transform: scale(1.3) rotate(5deg);
    opacity: 1;
  }
  60% {
    transform: scale(0.95) rotate(-2deg);
    opacity: 1;
  }
  80% {
    transform: scale(1.05) rotate(1deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.fullscreen-download-overlay.fade-out .fullscreen-download-icon {
  animation: fullscreenDownloadFadeOut 0.8s ease-out forwards;
}

@keyframes fullscreenDownloadFadeOut {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.2) rotate(5deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.5) rotate(10deg);
    opacity: 0;
  }
}

.fullscreen-download-overlay.fade-out {
  opacity: 0;
}

/* === 手機端響應式調整 - 全畫面下載圖示 */
@media (max-width: 768px) {
  .fullscreen-download-icon {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 480px) {
  .fullscreen-download-icon {
    width: 100px;
    height: 100px;
  }
}

/* === 手機和平板響應式設計優化 === */

/* 基礎容器優化 */
@media (max-width: 1024px) {
  .container {
    padding: 16px;
  }
}

/* 漢堡菜單優化 */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    padding: 8px;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--primary);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .menu-toggle:hover {
    background: rgba(59, 130, 246, 0.2);
  }

  .menu {
    position: absolute;
    top: 100%;
    right: 16px;
    background: var(--bg-soft);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    padding: 8px;
    min-width: 140px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    backdrop-filter: blur(10px);
  }

  .menu .btn {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 4px;
    padding: 12px 16px;
    font-size: 14px;
  }

  .menu .btn:last-child {
    margin-bottom: 0;
  }
}

/* 搜尋表單手機優化 */
@media (max-width: 768px) {
  .search-section .row {
    flex-direction: column;
    gap: 12px;
  }

  .field {
    width: 100%;
    min-width: unset;
  }

  .field input, .field select {
    padding: 14px 16px;
    font-size: 16px; /* 防止 iOS 縮放 */
    border-radius: 10px;
  }

  .search-section .btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
  }

  /* 搜尋篩選列在手機上的特殊佈局 */
  .search-filters-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .search-filters-row .field {
    width: 100%;
  }

  /* 代碼搜尋列在手機上保持水平佈局 */
  .code-search-row {
    display: flex;
    gap: 12px;
  }

  .code-search-row .field {
    flex: 3;
  }

  .code-search-row .btn {
    flex: 1;
    white-space: nowrap;
  }
}

/* 平板專用優化 (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* 平板搜尋表單優化 */
  .search-filters-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
  }

  .search-filters-row .field {
    margin-bottom: 0;
  }

  .code-search-row {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 12px;
  }

  .modal-content {
    max-width: 90vw;
    max-height: 85vh;
  }

  /* 平板字體調整 */
  body {
    font-size: 15px;
  }

  .container {
    padding: 20px;
  }

  /* 平板卡片優化 */
  .card {
    transition: all 0.3s ease;
  }

  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  }
}

/* 卡片手機優化 */
@media (max-width: 768px) {
  .card {
    margin-bottom: 16px;
    border-radius: 12px;
  }

  .card .thumb {
    height: 140px;
    border-radius: 12px 12px 0 0;
  }

  .card .body {
    padding: 14px;
  }

  .card .actions {
    flex-direction: column;
    gap: 8px;
  }

  .card .actions .btn {
    flex: 1;
    min-width: unset;
    padding: 12px;
    font-size: 14px;
  }
}

/* 網格系統響應式改善 */
@media (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .card {
    max-width: 100%;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* 模態框手機優化 */
@media (max-width: 768px) {
  .modal {
    padding: 8px;
    align-items: flex-start;
    padding-top: 20px;
  }

  .dialog {
    margin: 0;
    max-width: 100%;
    max-height: 90vh;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  }

  .note-info-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .note-preview-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }

  .hd {
    padding: 16px;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .hd #modalTitle {
    font-size: 20px;
    text-align: center;
    width: 100%;
  }

  .ct {
    padding: 16px;
  }

  /* 模態框內按鈕優化 */
  .modal .btn {
    min-height: 48px;
    font-size: 16px;
  }

  /* 檔案列表手機優化 */
  .file {
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .file .name {
    width: 100%;
    word-break: break-all;
    font-size: 14px;
  }

  .file .btn {
    width: 100%;
    min-height: 44px;
  }
}

/* 平板模態框優化 */
@media (min-width: 769px) and (max-width: 1024px) {
  .modal .dialog {
    max-width: 85vw;
    max-height: 80vh;
  }

  .note-info-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

/* 按鈕觸控優化 */
@media (max-width: 768px) {
  .btn {
    min-height: 48px; /* iOS 建議最小觸控區域 */
    padding: 12px 16px;
    font-size: 16px;
    border-radius: 12px;
    touch-action: manipulation; /* 防止雙擊縮放 */
  }

  .btn.secondary {
    min-height: 44px;
  }

  /* 防止點擊延遲 */
  .btn, .menu-toggle, button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.1);
  }
}

/* 表單元素觸控優化 */
@media (max-width: 768px) {
  input, select, textarea, button {
    font-size: 16px; /* 防止 iOS 縮放 */
  }

  textarea {
    min-height: 120px;
  }
}

/* 面板手機優化 */
@media (max-width: 768px) {
  .panel {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 16px;
  }

  .panel h3 {
    font-size: 20px;
    margin-bottom: 16px;
  }
}

/* 列表項目手機優化 */
@media (max-width: 768px) {
  .list .item {
    padding: 16px;
  }

  .list .item strong {
    font-size: 16px;
  }
}

/* 載入動畫手機優化 */
@media (max-width: 768px) {
  .preloader {
    padding-top: 25vh;
    background: linear-gradient(135deg, var(--bg-soft), rgba(15, 23, 42, 0.95));
  }

  .loading-gif {
    width: 120px;
    height: 120px;
    filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.3));
  }

  /* 減少手機端動畫複雜度以提升性能 */
  .floating-particles {
    display: none;
  }

  .pulse-glow {
    animation-duration: 4s;
  }

  .breathe {
    animation-duration: 6s;
  }
}

/* 載入骨架屏手機優化 */
@media (max-width: 768px) {
  .loading-skeleton {
    height: 160px;
    margin: 12px 0;
    border-radius: 12px;
  }
}

/* 進度條手機優化 */
@media (max-width: 768px) {
  .download-progress {
    height: 8px;
    border-radius: 4px;
  }

  .download-progress-bar {
    height: 100%;
    border-radius: 4px;
  }
}

/* 浮動動作按鈕手機優化 */
@media (max-width: 768px) {
  .floating-particles {
    display: none; /* 在小螢幕上移除以提升性能 */
  }

  .pulse-glow {
    animation-duration: 3s; /* 減慢動畫頻率 */
  }
}

/* 字體和間距手機優化 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
    line-height: 1.6;
  }

  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 18px; }
  h4 { font-size: 16px; }

  .container {
    padding: 16px;
  }

  header {
    padding: 16px 0;
  }

  .brand {
    font-size: 18px;
  }
}

/* 平板字體優化 */
@media (min-width: 769px) and (max-width: 1024px) {
  body {
    font-size: 15px;
  }

  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
  h4 { font-size: 18px; }
}

/* 觸控友善的滾動和滑動 */
@media (max-width: 1024px) {
  * {
    -webkit-overflow-scrolling: touch;
  }

  .modal .dialog {
    -webkit-overflow-scrolling: touch;
  }

  /* 改善滑動體驗 */
  .grid, .list {
    scroll-behavior: smooth;
  }
}
/* 紙飛機留言動畫 - 整合版本 */
.plane-message-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.08);
}

.plane-message-animation.active {
  opacity: 1;
}

.plane-message-animation.fade-out {
  opacity: 0;
  transition: opacity 1s ease;
}

/* 飛機飛行動畫 - PNG圖片版本 */
.message-plane {
  position: fixed;
  width: 80px;
  height: 80px;
  z-index: 50;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
  display: none;
  object-fit: contain;
  transform-origin: center center;
}

/* 文字動畫樣式 */
.text-container {
  position: fixed;
  font-size: 16px;
  color: var(--text);
  line-height: 1.5;
  min-width: 400px;
  z-index: 10;
}

.char {
  display: inline-block;
  opacity: 1;
  transition: opacity 0.3s;
}

.char.flying {
  position: fixed;
  z-index: 100;
  color: var(--primary);
  font-weight: bold;
}

/* 拖尾特效 */
.trail {
  position: fixed;
  pointer-events: none;
  z-index: 40;
}

.trail-segment {
  position: absolute;
  width: 8px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(59, 130, 246, 0.7) 50%, rgba(102, 126, 234, 0.3) 100%);
  border-radius: 2px;
  animation: fadeTrail 1s forwards;
}

@keyframes fadeTrail {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.7);
  }
  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}

/* 飛機吸收效果 */
.message-plane.absorb {
  filter: drop-shadow(0 0 20px rgba(59, 130, 246, 1)) drop-shadow(0 0 40px rgba(59, 130, 246, 0.8));
  animation: planeAbsorb 1s ease-out;
}

@keyframes planeAbsorb {
  0% {
    filter: drop-shadow(0 0 20px rgba(59, 130, 246, 1)) drop-shadow(0 0 40px rgba(59, 130, 246, 0.8));
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(59, 130, 246, 1.2)) drop-shadow(0 0 60px rgba(59, 130, 246, 1)) drop-shadow(0 0 80px rgba(59, 130, 246, 0.6));
  }
  100% {
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.8)) drop-shadow(0 0 30px rgba(59, 130, 246, 0.4));
  }
}

/* 手機端響應式調整 */
@media (max-width: 768px) {
  .message-plane {
    width: 60px;
    height: 60px;
  }

  .text-container {
    font-size: 14px;
    min-width: 300px;
  }
}

@media (max-width: 480px) {
  .message-plane {
    width: 50px;
    height: 50px;
  }

  .text-container {
    font-size: 12px;
    min-width: 250px;
  }
}

/* 減少動畫偏好設定 */
@media (prefers-reduced-motion: reduce) {
  .message-plane,
  .char.flying,
  .trail-segment {
    animation: none !important;
  }

  .plane-message-animation {
    opacity: 1 !important;
  }
}

/* === 新增動畫系統 - 卡片懸停和交互動畫 === */

/* 3D卡片翻轉效果 */
.card-3d {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.card-3d .card {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-style: preserve-3d;
}

.card-3d:hover .card {
  transform: rotateY(5deg) rotateX(5deg) translateZ(20px);
}

/* 卡片陰影動畫增強 */
.card-shadow-animated {
  position: relative;
  transition: all 0.3s ease;
}

.card-shadow-animated::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(6, 182, 212, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.card-shadow-animated:hover::before {
  opacity: 1;
}

.card-shadow-animated:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.15), 0 0 20px rgba(59, 130, 246, 0.1);
  transform: translateY(-8px) scale(1.02);
}

/* 磁吸式懸停效果 */
.card-magnetic {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-magnetic:hover {
  transform: scale(1.05) translateZ(10px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

/* === 表單和輸入框動畫 === */

/* 浮動標籤動畫 */
.form-group {
  position: relative;
  margin-bottom: 20px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 16px 12px 4px 12px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: var(--glass);
  color: var(--text);
  outline: none;
  transition: all 0.3s ease;
  font-size: 14px;
}

.form-group label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  transition: all 0.3s ease;
  pointer-events: none;
  background: transparent;
  padding: 0 4px;
  font-size: 14px;
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group select:focus + label,
.form-group textarea:focus + label {
  top: 8px;
  font-size: 12px;
  color: var(--primary);
  font-weight: 500;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background: rgba(15, 23, 42, 0.9);
}

/* 輸入驗證動畫 */
.form-group.success input {
  border-color: var(--ok);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
  animation: inputSuccess 0.5s ease-out;
}

.form-group.error input {
  border-color: var(--err);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
  animation: inputError 0.5s ease-out;
}

@keyframes inputSuccess {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes inputError {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

/* 輸入框提示動畫 */
.input-hint {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 12px;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.form-group input:focus ~ .input-hint,
.form-group textarea:focus ~ .input-hint {
  opacity: 1;
  color: var(--primary);
  transform: translateY(-50%) scale(1.05);
}

/* === 頁面導航和切換動畫 === */

/* 頁籤切換動畫 */
.tab-container {
  position: relative;
  overflow: hidden;
}

.tab-content {
  opacity: 0;
  transform: translateX(20px);
  animation: tabSlideIn 0.4s ease-out forwards;
}

.tab-content.active {
  opacity: 1;
  transform: translateX(0);
}

@keyframes tabSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 面板滑入滑出動畫增強 */
.panel-slide-left {
  transform: translateX(-100%);
  opacity: 0;
  animation: slideInLeft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.panel-slide-right {
  transform: translateX(100%);
  opacity: 0;
  animation: slideInRight 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes slideInLeft {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* === 載入和進度動畫 === */

/* 骨架屏動畫 */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
  border-radius: 4px;
}

.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

.skeleton-title {
  height: 24px;
  margin-bottom: 12px;
  width: 70%;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton-card {
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 12px;
}

@keyframes skeletonLoading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 進度指示器動畫 */
.progress-indicator {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.progress-indicator::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6), transparent);
  animation: progressPulse 2s ease-in-out infinite;
}

@keyframes progressPulse {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* 狀態指示器 */
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.status-indicator.loading {
  background: rgba(59, 130, 246, 0.1);
  color: var(--primary);
  animation: statusLoading 1.5s ease-in-out infinite;
}

.status-indicator.success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--ok);
  animation: statusSuccess 0.5s ease-out;
}

.status-indicator.error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--err);
  animation: statusError 0.5s ease-out;
}

@keyframes statusLoading {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
  }
}

@keyframes statusSuccess {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes statusError {
  0% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* === 通知和回饋動畫 === */

/* Toast訊息動畫增強 */
.toast {
  transform: translateY(100px);
  opacity: 0;
  animation: toastSlideUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.toast.fade-out {
  animation: toastSlideDown 0.3s ease-in forwards;
}

@keyframes toastSlideUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes toastSlideDown {
  to {
    transform: translateY(100px);
    opacity: 0;
  }
}

/* 成功/失敗回饋動畫 */
.feedback-success {
  animation: feedbackBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.feedback-error {
  animation: feedbackShake 0.5s ease-in-out;
}

@keyframes feedbackBounce {
  0% { transform: scale(0.3); }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes feedbackShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* === 微動畫和視覺回饋效果 === */

/* 呼吸動畫 */
.breathe {
  animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* 脈衝動畫 */
.pulse-subtle {
  animation: pulseSubtle 2s ease-in-out infinite;
}

@keyframes pulseSubtle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(0.98);
  }
}

/* 閃爍動畫 */
.glow {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
  }
  to {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4), 0 0 30px rgba(59, 130, 246, 0.2);
  }
}

/* 旋轉動畫 */
.rotate-slow {
  animation: rotateSlow 10s linear infinite;
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 彈跳動畫 */
.bounce-in {
  animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

/* 滑入動畫 */
.slide-in-bottom {
  animation: slideInBottom 0.5s ease-out;
}

@keyframes slideInBottom {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* === 響應式和無障礙優化 === */

@media (max-width: 768px) {
  .card-3d:hover .card {
    transform: none; /* 手機端移除3D效果避免性能問題 */
  }

  .card-shadow-animated:hover {
    transform: translateY(-4px) scale(1.01);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-shadow-animated,
  .form-group input,
  .form-group select,
  .form-group textarea,
  .toast,
  .breathe,
  .pulse-subtle,
  .glow,
  .rotate-slow,
  .bounce-in,
  .slide-in-bottom {
    animation: none !important;
    transition: none !important;
  }

  .card-3d:hover .card,
  .card-shadow-animated:hover,
  .card-magnetic:hover {
    transform: none !important;
  }
}

/* === 內嵌感謝狀樣式 === */

.inline-certificate-section {
  margin-top: 40px;
  padding: 30px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(6, 182, 212, 0.05));
  border-radius: 20px;
  border: 2px solid rgba(59, 130, 246, 0.2);
  position: relative;
  overflow: hidden;
  animation: certificateSectionFadeIn 1s ease-out;
}

@keyframes certificateSectionFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.inline-certificate-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg,
    transparent 25%,
    rgba(59, 130, 246, 0.03) 25%,
    rgba(59, 130, 246, 0.03) 50%,
    transparent 50%,
    transparent 75%,
    rgba(6, 182, 212, 0.02) 75%);
  background-size: 20px 20px;
  opacity: 0.5;
  animation: subtlePattern 8s linear infinite;
}

@keyframes subtlePattern {
  0% { background-position: 0 0; }
  100% { background-position: 20px 20px; }
}

.inline-certificate {
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  border: 8px solid #d4af37;
  border-radius: 20px;
  padding: 50px 60px;
  max-width: 100%;
  box-shadow:
    0 25px 80px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.2);
  position: relative;
  z-index: 1;
  perspective: 1000px;
  animation: inlineCertificateSlideUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  color: #ffffff;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, #1a1a2e, #16213e);
}

@keyframes inlineCertificateSlideUp {
  from {
    opacity: 0;
    transform: translateY(50px) rotateX(15deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

.inline-certificate::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 2px solid #d4af37;
  border-radius: 8px;
  pointer-events: none;
  opacity: 0.3;
}

/* 感謝狀內容樣式 */
.inline-certificate .certificate-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.inline-certificate .certificate-title {
  font-size: 42px;
  font-weight: bold;
  color: #d4af37;
  margin: 0 0 10px 0;
  text-shadow:
    0 0 20px rgba(212, 175, 55, 0.8),
    0 0 40px rgba(212, 175, 55, 0.4),
    2px 2px 4px rgba(0, 0, 0, 0.5);
  animation: inlineTitleGlow 3s ease-in-out infinite alternate;
  letter-spacing: 2px;
  text-transform: uppercase;
}

@keyframes inlineTitleGlow {
  from {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }
  to {
    text-shadow: 2px 2px 8px rgba(212, 175, 55, 0.5);
  }
}

.inline-certificate .certificate-subtitle {
  font-size: 18px;
  color: #b8c5d6;
  margin: 0;
  font-weight: 300;
  opacity: 0.9;
  letter-spacing: 1px;
}

.inline-certificate .certificate-body {
  text-align: center;
  margin: 30px 0;
}

.inline-certificate .certificate-text {
  font-size: 20px;
  line-height: 1.8;
  color: #e2e8f0;
  margin: 20px 0;
  font-weight: 300;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.inline-certificate .highlight {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: bold;
  font-size: 22px;
  position: relative;
  display: inline-block;
  text-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.inline-certificate .highlight::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 1px;
  animation: highlightUnderline 2s ease-in-out infinite;
}

@keyframes highlightUnderline {
  0%, 100% {
    opacity: 0.7;
    transform: scaleX(1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.05);
  }
}

.inline-certificate .certificate-footer {
  text-align: center;
  margin-top: 35px;
  position: relative;
}

.inline-certificate .certificate-text:last-child {
  font-style: italic;
  color: #a0aec0;
  font-size: 16px;
  margin-bottom: 15px;
  opacity: 0.8;
}

.inline-certificate .signature {
  font-size: 28px;
  font-weight: bold;
  background: linear-gradient(135deg, #d4af37, #ffd700, #d4af37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  animation: inlineSignaturePulse 4s ease-in-out infinite;
  text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
  letter-spacing: 1px;
}

@keyframes inlineSignaturePulse {
  0%, 100% {
    transform: scale(1);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
  }
  50% {
    transform: scale(1.02);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
  }
}

/* 表情符號裝飾動畫 */
.inline-certificate .emoji-decoration {
  font-size: 32px;
  display: inline-block;
  margin: 0 10px;
  animation: inlineEmojiFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(59, 130, 246, 0.4)) drop-shadow(0 0 24px rgba(212, 175, 55, 0.2));
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

@keyframes inlineEmojiFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-5px) rotate(2deg);
  }
  50% {
    transform: translateY(-8px) rotate(0deg);
  }
  75% {
    transform: translateY(-5px) rotate(-2deg);
  }
}

/* 微妙的背景粒子效果 */
.inline-certificate-section::after {
  content: '';
  position: absolute;
  top: 20px;
  right: 20px;
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  opacity: 0.6;
  animation: backgroundParticle1 6s ease-in-out infinite;
}

.inline-certificate-section::before {
  animation: subtlePattern 8s linear infinite, backgroundParticle2 4s ease-in-out infinite 1s;
}

@keyframes backgroundParticle1 {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(0) translateX(0) scale(1);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-10px) translateX(5px) scale(1.2);
  }
}

@keyframes backgroundParticle2 {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
}

/* 手機端響應式調整 */
@media (max-width: 768px) {
  .inline-certificate-section {
    margin-top: 30px;
    padding: 20px;
  }

  .inline-certificate {
    padding: 30px 25px;
  }

  .inline-certificate .certificate-title {
    font-size: 28px;
  }

  .inline-certificate .certificate-text {
    font-size: 16px;
  }

  .inline-certificate .highlight {
    font-size: 18px;
  }

  .inline-certificate .signature {
    font-size: 20px;
  }

  .inline-certificate .emoji-decoration {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .inline-certificate-section {
    margin-top: 25px;
    padding: 15px;
  }

  .inline-certificate {
    padding: 25px 20px;
    border-width: 2px;
  }

  .inline-certificate .certificate-title {
    font-size: 24px;
  }

  .inline-certificate .certificate-subtitle {
    font-size: 14px;
  }

  .inline-certificate .certificate-text {
    font-size: 14px;
    line-height: 1.6;
  }

  .inline-certificate .highlight {
    font-size: 16px;
  }

  .inline-certificate .signature {
    font-size: 18px;
  }

  .inline-certificate .emoji-decoration {
    font-size: 20px;
  }
}

/* === 手機陀螺儀互動功能已移除 === */

/* 陀螺儀指示器已移除 */

/* === 彩帶飄落特效 === */
.confetti {
  position: fixed;
  width: 8px;
  height: 12px;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  animation: confetti-fall linear forwards;
}

.confetti:nth-child(odd) {
  background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
  border-radius: 2px 2px 50% 50%;
}

.confetti:nth-child(2n) {
  background: linear-gradient(45deg, #4ecdc4, #7dd3c9);
  border-radius: 50% 50% 2px 2px;
}

.confetti:nth-child(3n) {
  background: linear-gradient(45deg, #45b7d1, #6fc5d8);
  border-radius: 50% 2px 2px 50%;
}

.confetti:nth-child(4n) {
  background: linear-gradient(45deg, #f9ca24, #f5d76e);
  border-radius: 2px 50% 50% 2px;
}

.confetti:nth-child(5n) {
  background: linear-gradient(45deg, #6c5ce7, #a29bfe);
  border-radius: 50%;
}

@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(-100vh) rotate(0deg) scale(1);
  }
  10% {
    opacity: 1;
    transform: translateY(-80vh) rotate(36deg) scale(0.9);
  }
  20% {
    opacity: 1;
    transform: translateY(-60vh) rotate(72deg) scale(0.8);
  }
  30% {
    opacity: 1;
    transform: translateY(-40vh) rotate(108deg) scale(0.7);
  }
  40% {
    opacity: 1;
    transform: translateY(-20vh) rotate(144deg) scale(0.6);
  }
  50% {
    opacity: 1;
    transform: translateY(0vh) rotate(180deg) scale(0.5);
  }
  60% {
    opacity: 0.9;
    transform: translateY(20vh) rotate(216deg) scale(0.4);
  }
  70% {
    opacity: 0.8;
    transform: translateY(40vh) rotate(252deg) scale(0.3);
  }
  80% {
    opacity: 0.7;
    transform: translateY(60vh) rotate(288deg) scale(0.2);
  }
  90% {
    opacity: 0.5;
    transform: translateY(80vh) rotate(324deg) scale(0.1);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(360deg) scale(0);
  }
}

/* === 里程碑區域金光效果 - 適度版本 === */
.milestone-glow {
  position: relative;
  overflow: hidden;
}

.milestone-glow::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(212, 175, 55, 0.15) 45deg,
    rgba(212, 175, 55, 0.25) 90deg,
    rgba(212, 175, 55, 0.15) 135deg,
    transparent 180deg,
    rgba(59, 130, 246, 0.15) 225deg,
    rgba(59, 130, 246, 0.25) 270deg,
    rgba(59, 130, 246, 0.15) 315deg,
    transparent 360deg
  );
  animation: milestoneShimmer 3s linear infinite;
  z-index: -1;
  opacity: 0.5;
  filter: blur(0.5px);
}

@keyframes milestoneShimmer {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.milestone-glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    45deg,
    transparent 25%,
    rgba(212, 175, 55, 0.08) 25%,
    rgba(212, 175, 55, 0.12) 50%,
    rgba(212, 175, 55, 0.08) 75%,
    transparent 75%
  );
  background-size: 30px 30px;
  animation: milestonePattern 3s ease-in-out infinite;
  z-index: -1;
  opacity: 0.3;
}

@keyframes milestonePattern {
  0% { background-position: 0 0; }
  100% { background-position: 60px 60px; }
}

/* 里程碑項目金光動畫 - 適度版本 */
.milestone-item-glow {
  position: relative;
  transition: all 0.3s ease;
}

.milestone-item-glow:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 8px 20px rgba(212, 175, 55, 0.15),
    0 0 15px rgba(59, 130, 246, 0.1);
}

.milestone-item-glow::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg,
    rgba(212, 175, 55, 0.3),
    rgba(59, 130, 246, 0.2),
    rgba(212, 175, 55, 0.3)
  );
  border-radius: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.milestone-item-glow:hover::before {
  opacity: 0.7;
}

/* 減少動畫偏好設定 */
@media (prefers-reduced-motion: reduce) {
  .inline-certificate-section,
  .inline-certificate,
  .inline-certificate .certificate-title,
  .inline-certificate .signature,
  .inline-certificate .emoji-decoration,
  .inline-certificate .highlight::after,
  .gyro-indicator,
  .confetti,
  .milestone-glow,
  .milestone-glow::before,
  .milestone-glow::after,
  .milestone-item-glow::before {
    animation: none !important;
  }

  .inline-certificate.gyro-active {
    transform: none !important;
  }
}

/* === 書本飛出動畫樣式 === */

.book {
  position: fixed;
  font-size: 2rem;
  pointer-events: none;
  z-index: 1000;
  user-select: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  transition: none;
  /* 添加適當的文字渲染以確保表情符號清晰 */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

@keyframes flyOut {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 1;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  }
  50% {
    transform: translate(calc(var(--tx) * 0.5), calc(var(--ty) * 0.5)) rotate(calc(var(--rotation) * 0.5)) scale(0.8);
    opacity: 0.8;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.2));
  }
  100% {
    transform: translate(var(--tx), var(--ty)) rotate(var(--rotation)) scale(0.3);
    opacity: 0;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
  }
}

/* 響應式設計調整 */
@media (max-width: 768px) {
  .book {
    font-size: 1.5rem;
  }

  @keyframes flyOut {
    0% {
      transform: translate(0, 0) rotate(0deg) scale(0.8);
      opacity: 1;
      filter: drop-shadow(0 3px 6px rgba(0,0,0,0.3));
    }
    50% {
      transform: translate(calc(var(--tx) * 0.4), calc(var(--ty) * 0.4)) rotate(calc(var(--rotation) * 0.4)) scale(0.6);
      opacity: 0.7;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
    }
    100% {
      transform: translate(var(--tx), var(--ty)) rotate(var(--rotation)) scale(0.2);
      opacity: 0;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
    }
  }
}

@media (max-width: 480px) {
  .book {
    font-size: 1.2rem;
  }

  @keyframes flyOut {
    0% {
      transform: translate(0, 0) rotate(0deg) scale(0.6);
      opacity: 1;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }
    50% {
      transform: translate(calc(var(--tx) * 0.3), calc(var(--ty) * 0.3)) rotate(calc(var(--rotation) * 0.3)) scale(0.4);
      opacity: 0.6;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }
    100% {
      transform: translate(var(--tx), var(--ty)) rotate(var(--rotation)) scale(0.1);
      opacity: 0;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
    }
  }
}

/* 無障礙支援 - 減少動畫偏好 */
@media (prefers-reduced-motion: reduce) {
  .book {
    animation: none !important;
  }

  @keyframes flyOut {
    0% {
      transform: translate(0, 0) rotate(0deg) scale(1);
      opacity: 1;
    }
    100% {
      transform: translate(var(--tx), var(--ty)) rotate(var(--rotation)) scale(0.3);
      opacity: 0;
    }
  }
}