/* DionWeb Client Portal - Modern Design */
:root { --dionweb-navy: #1A3A6E; --dionweb-orange: #FF6B4A; --dionweb-gray: #f5f7fa; --border-radius: 12px; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%) !important; }
#header { background: #ffffff !important; box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important; border-bottom: 3px solid #FF6B4A !important; padding: 0 40px !important; }
#logo { padding: 20px 0 !important; }
#logo img { display: none !important; }
#logo::before { content: 'DIONWEB'; font-family: 'Arial Black', Impact, sans-serif !important; font-size: 42px !important; font-weight: 900 !important; color: #1A3A6E !important; display: block !important; }
#nav ul { display: flex !important; gap: 8px !important; }
#nav li a { background: #f5f7fa !important; color: #1A3A6E !important; padding: 12px 24px !important; border-radius: 8px !important; font-weight: 600 !important; transition: all 0.3s ease !important; }
#nav li a:hover { background: #1A3A6E !important; color: #ffffff !important; transform: translateY(-2px) !important; }
#nav li a.active { background: #FF6B4A !important; color: #ffffff !important; }
#container { max-width: 1200px !important; margin: 40px auto !important; padding: 0 20px !important; }
#content { background: #ffffff !important; border-radius: 12px !important; box-shadow: 0 4px 20px rgba(26, 58, 110, 0.1) !important; padding: 50px !important; }
.welcome-section { display: grid; grid-template-columns: 1fr 1fr !important; gap: 50px !important; align-items: center !important; }
.welcome-text h1 { font-size: 36px !important; font-weight: 800 !important; color: #1A3A6E !important; margin-bottom: 20px !important; }
.welcome-text p { font-size: 16px !important; line-height: 1.7 !important; color: #555 !important; }
.action-buttons { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.action-button { display: flex !important; align-items: center !important; justify-content: center !important; background: #FF6B4A !important; color: #ffffff !important; padding: 20px 32px !important; border-radius: 12px !important; font-size: 16px !important; font-weight: 700 !important; text-decoration: none !important; transition: all 0.3s ease !important; box-shadow: 0 4px 15px rgba(255, 107, 74, 0.3) !important; }
.action-button:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 25px rgba(255, 107, 74, 0.4) !important; background: #ff5a36 !important; }
#footer { background: #ffffff !important; border-top: 1px solid rgba(26, 58, 110, 0.1) !important; padding: 30px !important; text-align: center !important; color: #888 !important; border-radius: 12px 12px 0 0 !important; }
h1, h2, h3 { color: #1A3A6E !important; font-weight: 700 !important; }
a { color: #1A3A6E !important; }
a:hover { color: #FF6B4A !important; }
.button, input[type='submit'], button { background: #FF6B4A !important; color: #ffffff !important; border: none !important; padding: 14px 28px !important; border-radius: 8px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.3s ease !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; }
.button:hover, input[type='submit']:hover, button:hover { background: #ff5a36 !important; transform: translateY(-2px) !important; }
input[type='reset'], input[type='button'], button[type='button'], .cancel { background: #FF6B4A !important; color: #ffffff !important; border: none !important; padding: 14px 28px !important; border-radius: 8px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.3s ease !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; }
input[type='reset']:hover, input[type='button']:hover, button[type='button']:hover, .cancel:hover { background: #ff5a36 !important; transform: translateY(-2px) !important; }
input[type='text'], input[type='email'], textarea { border: 2px solid #e0e0e0 !important; border-radius: 8px !important; padding: 12px 16px !important; }
input:focus { border-color: #FF6B4A !important; box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.1) !important; outline: none !important; }
thead th { background: #1A3A6E !important; color: #ffffff !important; padding: 16px !important; font-weight: 600 !important; text-transform: uppercase !important; font-size: 12px !important; }
tbody tr:hover { background: #f5f7fa !important; }
.info-bar { background: #f5f7fa !important; padding: 12px 20px !important; border-radius: 8px !important; margin-bottom: 20px !important; color: #1A3A6E !important; }
@media (max-width: 768px) { .welcome-section { grid-template-columns: 1fr !important; } #nav ul { flex-direction: column !important; } #content { padding: 30px 20px !important; } }