:root {
    --bg-color: #E3E9F4;
    --container-bg: #FFFFFF;
    --text-color: #333333;
    --text-muted: #666666;
    --border-color: #A3B8CC;
    --header-grad-start: #7CA1D3;
    --header-grad-end: #4A73A6;
    --panel-header-bg: #E1EAF4;
    --panel-header-text: #1E3F66;
    --row-hover: #F2F6FB;
}
html[data-mail-theme="dark"] {
    --bg-color: #121820;
    --container-bg: #1A232E;
    --text-color: #E0E6ED;
    --text-muted: #AAB8C7;
    --border-color: #384858;
    --header-grad-start: #2C3E50;
    --header-grad-end: #1A252F;
    --panel-header-bg: #223143;
    --panel-header-text: #A9C4E5;
    --row-hover: #263548;
}
body {
    margin: 0;
    padding: 10px 0;
    background: var(--bg-color);
    color: var(--text-color);
    font: 12px "Lucida Grande", Verdana, Arial, sans-serif;
}
#wrapper {
    width: 980px;
    max-width: calc(100% - 24px);
    margin: 0 auto;
    background: var(--container-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0,0,0,.15);
}
#header {
    padding: 15px 20px;
    background: linear-gradient(to bottom, var(--header-grad-start), var(--header-grad-end));
    border-bottom: 2px solid var(--border-color);
}
#header h1 { margin: 0; color: #fff; font-size: 22px; letter-spacing: -1px; text-shadow: 1px 1px 2px rgba(0,0,0,.4); }
#header p { margin: 4px 0 0; color: #E6EEF7; font-size: 10px; }
#utility-bar {
    min-height: 20px;
    overflow: hidden;
    padding: 6px 12px;
    background: var(--panel-header-bg);
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
}
.utility-label { color: var(--panel-header-text); font-weight: bold; }
.utility-value { margin-left: 8px; }
.btn-toggle {
    float: right;
    padding: 2px 6px;
    background: var(--container-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font: 10px "Lucida Grande", Verdana, Arial, sans-serif;
    cursor: pointer;
}
#main-layout { width: 100%; border-collapse: collapse; }
.side-col {
    width: 185px;
    vertical-align: top;
    padding: 10px;
    background: var(--row-hover);
    border-right: 1px solid var(--border-color);
}
#content { vertical-align: top; padding: 15px; }
#content h2 { margin: 2px 0 10px; font-size: 20px; }
.intro { margin: 0 0 17px; color: var(--text-muted); line-height: 1.55; }
.panel { margin-bottom: 10px; background: var(--container-bg); border: 1px solid var(--border-color); }
.panel-header { padding: 5px 8px; color: var(--panel-header-text); background: var(--panel-header-bg); border-bottom: 1px solid var(--border-color); font-weight: bold; font-size: 11px; }
.panel-body { padding: 9px; line-height: 1.5; }
.nav-links a { display: block; padding: 4px 2px; }
a { color: #315D91; }
html[data-mail-theme="dark"] a { color: #9FC7F5; }
.mono { font-family: Consolas, Monaco, monospace; font-size: 11px; overflow-wrap: anywhere; }
.feature-panel { padding: 14px 12px; }
.feature-panel p { margin: 0 0 12px; }
.btn-primary {
    display: inline-block;
    padding: 7px 14px;
    color: #1E3F66;
    background: linear-gradient(to bottom, #DDE8F5, #B7CBE2);
    border: 1px solid #7C98B8;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
}
.btn-primary:hover { background: linear-gradient(to bottom, #EAF3FF, #9FBFE5); }
html[data-mail-theme="dark"] .btn-primary { color: #1E3F66; }
.settings { width: 100%; border-collapse: collapse; font-size: 11px; }
.settings th, .settings td { padding: 6px 5px; text-align: left; border-bottom: 1px solid var(--border-color); }
.settings th { width: 85px; color: var(--panel-header-text); }
.settings tr:last-child th, .settings tr:last-child td { border-bottom: 0; }
.service-note { margin: 9px 5px 2px; color: var(--text-muted); font-size: 11px; }
#footer { padding: 12px; text-align: center; font-size: 11px; color: var(--text-muted); background: var(--panel-header-bg); border-top: 1px solid var(--border-color); }
@media (max-width: 650px) {
    #utility-bar { padding-bottom: 8px; }
    .btn-toggle { float: none; display: block; margin-top: 7px; }
    #main-layout, #main-layout tbody, #main-layout tr, .side-col, #content { display: block; width: auto; }
    .side-col { border-right: 0; border-bottom: 1px solid var(--border-color); }
    .settings th, .settings td { display: block; width: auto; padding: 3px 5px; border: 0; }
    .settings tr { display: block; padding: 5px 0; border-bottom: 1px solid var(--border-color); }
}