/* Embedded Win95-like styling; ignores external styles.css */
:root{ --bg:#0a0a0a; --panel:#c8c8c8; --panel-dark:#808080; --text:#000000; }
html,body{height:100%;margin:0;background:linear-gradient(#0a0a0a,#071021);font-family:"MS Sans Serif",Arial,Helvetica,sans-serif;color:var(--text)}
.app{max-width:1100px;margin:28px auto;padding:18px;display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:stretch}

/* Title bar with strong bevels */
/* header spans both columns; remove left margin so title-box aligns with inbox column */
header{grid-column:1/-1;padding:6px 0;margin:0 0 12px 0;display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start}
.title-box{background:var(--panel);padding:10px 12px;border-top:2px solid #ffffff;border-left:2px solid #ffffff;border-bottom:2px solid var(--panel-dark);border-right:2px solid var(--panel-dark);display:flex;align-items:center;gap:12px;grid-column:1/-1;justify-self:center}
.title-box h1{margin:0;font-size:20px;font-weight:bold;letter-spacing:1px}
.title-logo{height:128px;width:auto;display:block}

/* Panels */
.panel{background:var(--panel);padding:12px;border-top:2px solid #ffffff;border-left:2px solid #ffffff;border-bottom:2px solid var(--panel-dark);border-right:2px solid var(--panel-dark);min-height:420px;display:flex;flex-direction:column;align-self:stretch}
.inbox{display:flex;flex-direction:column;height:100%}
.controls{display:flex;gap:8px;margin-bottom:10px}
input[type=search]{flex:1;padding:6px;border:1px solid var(--panel-dark);background:#ffffff}
.list{overflow:auto;padding:6px;margin-top:6px}
.msg-item{display:flex;gap:10px;padding:8px;border:1px solid transparent;align-items:flex-start;cursor:pointer}
.msg-item:hover{background:#e8e8e8}
.avatar{width:44px;height:44px;background:#ffffff;display:flex;align-items:center;justify-content:center;color:#000;font-weight:700;border:1px solid var(--panel-dark)}
.meta{flex:1;min-width:0}
.from{font-weight:700;color:#000}
.subject{color:#202020;font-size:13px;margin-top:6px}
.time{color:#202020;font-size:12px}
.dot{width:10px;height:10px;border-radius:50%}
.unread .dot{background:#ef4444}
.read .dot{background:transparent;border:1px solid #808080}

.message-view{padding:12px;display:flex;flex-direction:column;gap:12px;height:100%}
.message-view h2{margin:0;color:#000}
.message-meta{display:flex;gap:12px;align-items:center;color:#202020;font-size:12px}
.body{background:#ffffff;padding:12px;border:1px solid var(--panel-dark);color:#000;line-height:1.6;overflow:auto;flex:1}
.empty{color:#202020;text-align:center;margin-top:60px}

.container { max-width: 900px; margin: 0 auto; background: #fff; border: 1px solid #e1e4e8; padding: 28px; box-shadow: 0 6px 18px rgba(15,23,42,0.06); }
.brand { display:flex; align-items:center; gap:12px; }
.brand .logo { width:85px; height:72px; border-radius:8px; background:#0a3a6b; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:20px; }
h1 { font-size:20px; margin:0; }
.meta { color:#475569; margin-top:6px; font-size:13px; }
section { margin-top:18px; }
h2 { font-size:16px; margin:12px 0; color:#0b3a66; }
table { width:100%; border-collapse: collapse; margin-top:8px; }
th, td { text-align:left; padding:8px 10px; border:1px solid #eef0f3; font-size:14px; vertical-align:top; }
th { background:#f1f5f9; width:240px; color:#0b395f; }
.timeline { font-family: monospace; background:#f8fafc; padding:10px; border-radius:6px; border:1px solid #eef2f7; }
.actions { background:#f9fafb; border-left:4px solid #0b66c3; padding:10px; border-radius:4px; }
.signature { margin-top:20px; }
.footer { margin-top:28px; font-size:12px; color:#6b7280; border-top:1px solid #eef2f5; padding-top:12px; }
.note { font-size:13px; color:#374151; }
.red { color:#b91c1c; font-weight:600; }

/* Buttons with classic bevel */
button, .btn {
  background:var(--panel);
  border-top:2px solid #ffffff;
  border-left:2px solid #ffffff;
  border-bottom:2px solid var(--panel-dark);
  border-right:2px solid var(--panel-dark);
  padding:6px 10px;
  cursor:pointer;
  font-family:inherit;
}

.get-started-btn { display:inline-block; text-decoration:none; color:#000; background:var(--panel); padding:6px 10px; border-top:2px solid #ffffff;border-left:2px solid #ffffff;border-bottom:2px solid var(--panel-dark);border-right:2px solid var(--panel-dark); }
.get-started-btn:active{ border-top:2px solid var(--panel-dark);border-left:2px solid var(--panel-dark);border-bottom:2px solid #ffffff;border-right:2px solid #ffffff }

@media (max-width:880px){ .app{grid-template-columns:1fr;padding:12px} header{flex-direction:column;align-items:flex-start} .panel{min-height:unset} }