/* Copied from warmingcloudphp/css/pages/portal.css */
:root {
  --primary-color: #1A3344;
  --primary-gradient: linear-gradient(135deg, #1A3344 0%, #3A566B 100%);
  --secondary-color: #48898B;
  --secondary-gradient: linear-gradient(135deg, #48898B 0%, #5BA0A3 100%);
  --text-color: #333;
  --background-color: #f8fafc;
  --card-background: rgba(255, 255, 255, 0.95);
  --footer-background: #e6e6e6;
  --accent-color: #3B82F6;
  --success-color: #10B981;
  --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-heavy: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --border-radius: 12px;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --card-border: rgba(0, 0, 0, 0.06);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  margin: 0; padding: 0;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  color: var(--text-color);
  line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

html, body { height: 100%; margin: 0; padding: 0; }

.page-content { flex: 1 0 auto; animation: fadeIn 0.6s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px);} to { opacity: 1; transform: translateY(0);} }

.portal-header { background: var(--primary-gradient); color: #fff; padding: 1.5rem 1rem; box-shadow: var(--shadow-medium); position: relative; overflow: hidden; }
.portal-header::after { content: ''; position: absolute; top:0; left:0; right:0; height:30%; background: linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0)); pointer-events:none; }
.portal-header h1 { font-size: 1.75rem; margin:0; font-weight:700; color:#fff; text-align:left; position:relative; z-index:1; text-shadow:0 2px 4px rgba(0,0,0,0.2); letter-spacing:-0.025em; }

.document-icon { color:#fff; width:32px; height:32px; }

.portal-main { max-width:1200px; margin:4rem auto; padding:0 1.5rem; animation: slideUp 0.8s ease-out 0.2s both; }
@keyframes slideUp { from { opacity:0; transform: translateY(30px);} to { opacity:1; transform: translateY(0);} }

.portal-title { color: var(--primary-color); margin-bottom:2rem; text-align:center; font-size:2.5rem; font-weight:700; letter-spacing:-0.02em; }

.portal-cards { display:grid; grid-template-columns: repeat(2, 1fr); gap:2rem; }
.portal-card { background: var(--card-background); backdrop-filter: blur(10px); border:1px solid var(--card-border); border-radius: var(--border-radius); box-shadow: var(--shadow-medium); transition: var(--transition-smooth); position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:240px; transform: translateY(0); }
.portal-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background: var(--secondary-gradient); transform: scaleX(0); transition: transform 0.3s ease; transform-origin:left; }
.portal-card:hover::before { transform: scaleX(1); }
.portal-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-heavy); border-color: rgba(255,255,255,0.3); }

.card-link { display:block; padding:1.5rem 1.5rem 0.5rem; text-decoration:none; color: var(--text-color); transition: var(--transition-smooth); flex-grow:1; }
.card-title { color: var(--primary-color); margin-top:0; margin-bottom:1rem; padding-bottom:0.5rem; border-bottom:2px solid transparent; background: var(--secondary-gradient); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color: transparent; font-size:1.3rem; font-weight:600; letter-spacing:-0.01em; position:relative; }
.card-title::after { content:''; position:absolute; bottom:0; left:0; width:40px; height:2px; background: var(--secondary-gradient); border-radius:2px; transition: width 0.3s ease; }
.portal-card:hover .card-title::after { width:80px; }

.card-description { font-size:0.95rem; color: var(--text-color); line-height:1.6; }
.card-description p { margin:0.5rem 0; color: var(--text-color); }

.external-source-container { display:flex; align-items:center; gap:0.5rem; padding:0 1.5rem 1.5rem; font-size:0.85rem; margin-top:auto; }
.external-source { color:#64748b; margin:0; font-weight:500; }
.source-link { color: var(--secondary-color); font-weight:600; text-decoration:none; position:relative; transition: var(--transition-smooth); }
.source-link::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background: var(--secondary-gradient); transition: width 0.3s ease; }
.source-link:hover { color:#366466; transform: translateX(2px); }
.source-link:hover::after { width:100%; }

.mvp-badge { position:absolute; top:12px; right:12px; background: var(--success-color); color:#fff; padding:0.3rem 0.8rem; border-radius:20px; font-size:0.75rem; font-weight:600; z-index:1; box-shadow: var(--shadow-light); text-transform:uppercase; letter-spacing:0.025em; }

.portal-footer { flex-shrink:0; background: linear-gradient(135deg, #e6e6e6 0%, #f0f0f0 100%); padding:1.5rem; text-align:center; font-size:0.9rem; line-height:1.5; width:100%; margin-top:auto; border-top:1px solid rgba(255,255,255,0.3); }
.portal-footer p { margin:0.3rem 0; color:#000; }

@media (max-width: 768px) { .portal-cards { grid-template-columns:1fr; gap:1.5rem; } .portal-main { margin:2rem auto; padding:0 1rem; } .portal-header h1 { font-size:1.5rem; } }
@media (max-width: 480px) { .portal-title { font-size:2rem; } .portal-header { padding:1rem; } .card-link { padding:1.2rem 1.2rem 0.5rem; } .external-source-container { padding:0 1.2rem 1.2rem; } .portal-card { box-shadow: var(--shadow-heavy); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; } }

.portal-card .card-description, .portal-card .card-description p { color: var(--text-color) !important; }

body::before { content:''; position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 8px, transparent 8px 16px); opacity:0.3; z-index:-1; }

.card-icon { display:inline-block; color: var(--secondary-color); margin-bottom:0.6rem; }
.card-icon svg { width:2.1rem; height:2.1rem; }

@media (min-width: 1400px) { .portal-cards { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:3rem; } }