:root {
  --color-background-primary: #162d50; /* navy-light */
  --color-background-secondary: #0d1f3c; /* navy */
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.8);
  --color-text-tertiary: rgba(255, 255, 255, 0.6);
  --color-border-primary: var(--gold);
  --color-border-secondary: rgba(255, 255, 255, 0.1);
  --color-border-tertiary: rgba(255, 255, 255, 0.06);
  --border-radius-lg: 14px;
  --border-radius-md: 10px;
  --font-sans: 'Noto Sans TC', sans-serif;
  --transition: 0.35s cubic-bezier(.4,0,.2,1);
}

body { background: #0d1f3c; color: white; }

h2.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-sans)}
.wrap{max-width: 800px; margin: 0 auto; padding: 100px 20px 30px;}
.title-bar{
  background: linear-gradient(45deg, #1a3a6b, #0d1f3c);
  border: 1px solid rgba(196, 150, 58, 0.3);
  border-radius: var(--border-radius-lg);
  padding: 30px 25px;
  margin-bottom:35px;
  text-align:center;
  color: white;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}
.title-bar h1{font-size:28px;font-weight:700;color:var(--gold-light);margin-bottom:10px; letter-spacing: 1px;}
.title-bar p{font-size:16px;color:rgba(255,255,255,0.7);line-height:1.6}
.tabs{display:flex;gap:15px;margin-bottom:35px;flex-wrap:wrap;justify-content:center}
.tab{
  flex:1;
  min-width:160px;
  padding:14px 20px;
  border-radius:var(--border-radius-md);
  border:1.5px solid var(--color-border-secondary);
  background:var(--color-background-primary);
  cursor:pointer;
  font-size:16px;
  font-weight:600;
  color:rgba(255, 255, 255, 0.7);
  text-align:center;
  transition:var(--transition);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.tab:hover{border-color:var(--gold);color:white;transform:translateY(-2px);box-shadow: 0 8px 20px rgba(0,0,0,0.3);}
.tab.active-teal{border-color:#20c997;background:rgba(32, 201, 151, 0.15);color:#20c997;box-shadow: 0 4px 15px rgba(32, 201, 151, 0.2)}
.tab.active-purple{border-color:#a78bfa;background:rgba(167, 139, 250, 0.15);color:#a78bfa;box-shadow: 0 4px 15px rgba(167, 139, 250, 0.2)}
.tab.active-coral{border-color:#fb923c;background:rgba(251, 146, 60, 0.15);color:#fb923c;box-shadow: 0 4px 15px rgba(251, 146, 60, 0.2)}
.section{display:none;animation: fadeIn 0.5s forwards}
.section.visible{display:block}

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

.flow{display:flex;flex-direction:column;align-items:center;gap:12px}
.step-row{
  display:flex;
  align-items:stretch;
  width:100%;
  border-radius:var(--border-radius-md);
  overflow:hidden;
  border:1px solid var(--color-border-secondary);
  background:#1a3a6b;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.step-num{
  width:60px;
  min-width:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  font-size:13px;
  font-weight:600;
  padding:12px 5px;
  gap:2px;
  color: white;
  background: rgba(255,255,255,0.05);
}
.step-num span{font-size:22px;font-weight:700; color: var(--gold-light);}
.step-body{flex:1;padding:15px 20px;border-left:1px solid var(--color-border-secondary)}
.step-title{font-size:18px;font-weight:700;color:var(--gold-light);margin-bottom:6px}
.step-desc{font-size:14px;color:rgba(255,255,255,0.85);line-height:1.7}
.step-resp{
  display:inline-block;
  font-size:12px;
  margin-top:8px;
  padding:4px 12px;
  border-radius:20px;
  border:1px solid rgba(196, 150, 58, 0.2);
  color:var(--gold-light);
  background:rgba(196, 150, 58, 0.1);
  font-weight:500;
}

.arrow-down{
  width:24px;height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255, 255, 255, 0.3);
  font-size:20px;
  margin: 2px 0;
}

.teal .step-num{background:rgba(32, 201, 151, 0.1);color:#20c997}
.teal .step-row{border-color:rgba(32, 201, 151, 0.3)}
.purple .step-num{background:rgba(167, 139, 250, 0.1);color:#a78bfa}
.purple .step-row{border-color:rgba(167, 139, 250, 0.3)}
.coral .step-num{background:rgba(251, 146, 60, 0.1);color:#fb923c}
.coral .step-row{border-color:rgba(251, 146, 60, 0.3)}

.alert-row{
  display:flex;
  gap:15px;
  margin:15px 0;
  padding:18px 25px;
  border-radius:var(--border-radius-md);
  border:1.5px dashed var(--gold);
  background:rgba(196, 150, 58, 0.1);
  align-items:flex-start;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.alert-icon{font-size:24px;margin-top:2px;color:var(--gold-light)}
.alert-text{font-size:16px;color:white;line-height:1.7;font-weight:500}

.notes-grid{display:flex;flex-direction:column;gap:15px;margin-top:40px}
.note-card{
  display:flex;
  gap:20px;
  padding:20px 25px;
  border-radius:var(--border-radius-md);
  background:#162d50;
  border:1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.note-label{font-size:16px;font-weight:700;color:var(--gold-light);min-width:80px}
.note-body{font-size:15px;color:rgba(255, 255, 255, 0.8);line-height:1.8}

.principle{
  text-align:center;
  font-size:18px;
  color:var(--gold-light);
  margin-top:40px;
  padding:20px 30px;
  border-radius:var(--border-radius-lg);
  background:rgba(196, 150, 58, 0.15);
  border:1px solid var(--gold);
  font-weight:700;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
}