/* ═════════════════════════════════════════════════════════════════
   SEJR/OS 95 — retro desktop chrome
   ═════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'W95'; src: local('Tahoma'); }

:root{
  --face:#c0c0c0; --face-dk:#808080; --face-lt:#ffffff; --shadow:#000000;
  --title-a:#000080; --title-b:#1084d0; --title-inactive-a:#808080; --title-inactive-b:#b5b5b5;
  --desk:#008080; --sel:#000080; --seltext:#ffffff;
  --term-bg:#001a00; --term-fg:#33ff33;
  --pos:#008000; --neg:#c00000; --warn:#b06000;
}

*{ box-sizing:border-box; margin:0; padding:0; user-select:none; }
html,body{ width:100%; height:100%; overflow:hidden; }
body{
  font-family:'Tahoma','MS Sans Serif',Geneva,sans-serif; font-size:12px;
  background:var(--desk); cursor:default; color:#000;
}
input,select,textarea{ user-select:text; font-family:inherit; font-size:12px; }
.hidden{ display:none !important; }
h1,h2,h3{ font-weight:bold; }

/* classic bevels */
.raised, .btn, .window, .tray-box, #taskbar, #startmenu{
  background:var(--face);
  border-top:2px solid var(--face-lt); border-left:2px solid var(--face-lt);
  border-bottom:2px solid var(--shadow); border-right:2px solid var(--shadow);
  box-shadow:inset -1px -1px 0 var(--face-dk), inset 1px 1px 0 #dfdfdf;
}
.sunken{
  background:#fff;
  border-top:2px solid var(--face-dk); border-left:2px solid var(--face-dk);
  border-bottom:2px solid var(--face-lt); border-right:2px solid var(--face-lt);
  box-shadow:inset 1px 1px 0 var(--shadow);
}
.btn{
  font-size:12px; padding:3px 12px; cursor:pointer; white-space:nowrap;
  font-family:inherit; color:#000;
}
.btn:active:not(:disabled){
  border-top:2px solid var(--shadow); border-left:2px solid var(--shadow);
  border-bottom:2px solid var(--face-lt); border-right:2px solid var(--face-lt);
  box-shadow:none; padding:4px 11px 2px 13px;
}
.btn:disabled{ color:var(--face-dk); text-shadow:1px 1px 0 #fff; cursor:default; }
.btn.primary{ font-weight:bold; }
.btn.tiny{ padding:1px 7px; font-size:11px; }
/* rate/value steppers — big enough to actually hit with a mouse */
.btn.step2{ font-size:16px; font-weight:bold; line-height:1; padding:5px 13px; min-width:34px; }
.btn.step2:active:not(:disabled){ padding:6px 12px 4px 14px; }
.btn.danger{ color:#800000; }

/* ══════════ Boot ══════════ */
#boot{
  position:fixed; inset:0; background:#000; color:#aaa; z-index:1000;
  font-family:'Courier New',monospace; font-size:14px; padding:28px;
}
#boot-text{ white-space:pre-wrap; font-family:inherit; }
#boot-text .ok{ color:#3f3; }

/* ══════════ Login ══════════ */
#login{
  position:fixed; inset:0; z-index:900; background:var(--desk);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.login-box{ width:480px; background:var(--face);
  border-top:2px solid var(--face-lt); border-left:2px solid var(--face-lt);
  border-bottom:2px solid var(--shadow); border-right:2px solid var(--shadow); }
.login-title{
  background:linear-gradient(90deg,var(--title-a),var(--title-b)); color:#fff;
  font-weight:bold; padding:4px 8px; display:flex; align-items:center; gap:8px; font-size:13px;
}
.login-title .ver{ margin-left:auto; font-weight:normal; font-size:11px; opacity:.85; }
.login-body{ padding:16px 20px 14px; }
.login-body p{ margin-bottom:12px; line-height:1.5; }
.login-form{ width:100%; border-spacing:0 6px; }
.login-form td:first-child{ width:90px; }
.login-form input,.login-form select{ width:100%; padding:3px 5px; background:#fff;
  border-top:2px solid var(--face-dk); border-left:2px solid var(--face-dk);
  border-bottom:2px solid var(--face-lt); border-right:2px solid var(--face-lt); }
.login-buttons{ display:flex; gap:8px; margin-top:14px; }
.login-hint{ margin-top:12px; font-size:11px; color:#333; border-top:1px solid var(--face-dk); padding-top:8px; }
.login-footer{ margin-top:18px; color:#dff; font-size:11px; }

.logo-flag{ display:inline-block; width:18px; height:14px; background:
  linear-gradient(180deg,#c8102e 40%,#fff 40%,#fff 60%,#c8102e 60%); border:1px solid #fff3; }
.logo-flag.small{ width:14px; height:11px; }

/* ══════════ Desktop ══════════ */
#desktop{ position:fixed; inset:0; overflow:hidden; }
#icons{ position:absolute; top:8px; left:8px; bottom:40px; display:flex; flex-direction:column;
  flex-wrap:wrap; align-content:flex-start; gap:4px; width:auto; }
.icon{ width:88px; padding:6px 2px; text-align:center; cursor:pointer; border:1px dotted transparent; }
.icon .glyph{ font-size:30px; line-height:1.1; text-shadow:2px 2px 0 rgba(0,0,0,.35); filter:saturate(.85); }
.icon .label{ color:#fff; font-size:11px; margin-top:3px; text-shadow:1px 1px 1px #000;
  padding:1px 2px; line-height:1.25; }
.icon:hover .label{ background:rgba(0,0,128,.35); }
.icon.sel .label{ background:var(--sel); }
.icon .badge{ position:relative; }
.icon .badge::after{ content:attr(data-badge); position:absolute; top:-4px; right:14px;
  background:#c00000; color:#fff; font-size:10px; font-weight:bold; padding:0 4px; border:1px solid #fff; }

/* ══════════ Program-group folder windows (Win95 program groups) ══════════ */
.folder-grid{ display:flex; flex-wrap:wrap; align-content:flex-start; gap:2px; padding:8px 6px 2px; }
.folder-grid .icon{ width:86px; }
.folder-grid .icon .glyph{ text-shadow:1px 1px 0 rgba(0,0,0,.2); }
.folder-grid .icon .label{ color:#000; text-shadow:none; }
.folder-grid .icon:hover .label{ background:var(--sel); color:#fff; }

/* start-menu group headers */
.sm-head{ padding:6px 8px 2px; font-size:10px; font-weight:bold; letter-spacing:.07em;
  text-transform:uppercase; color:#666; border-top:1px solid var(--face-dk); margin-top:3px; }
.sm-head:first-child{ border-top:none; margin-top:0; }

/* ══════════ Windows ══════════ */
.window{ position:absolute; display:flex; flex-direction:column; min-width:340px; min-height:160px; }
.window.focused .titlebar{ background:linear-gradient(90deg,var(--title-a),var(--title-b)); }
.titlebar{
  background:linear-gradient(90deg,var(--title-inactive-a),var(--title-inactive-b));
  color:#fff; font-weight:bold; font-size:12px; padding:3px 4px 3px 7px;
  display:flex; align-items:center; gap:6px; cursor:default; flex:0 0 auto;
}
.titlebar .t-icon{ font-size:13px; }
.titlebar .t-text{ flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.tb-btn{ width:18px; height:16px; font-size:10px; line-height:1; display:inline-flex;
  align-items:center; justify-content:center; font-weight:bold; color:#000;
  background:var(--face);
  border-top:1px solid var(--face-lt); border-left:1px solid var(--face-lt);
  border-bottom:1px solid var(--shadow); border-right:1px solid var(--shadow); cursor:pointer; }
.tb-btn:active{ border-top:1px solid var(--shadow); border-left:1px solid var(--shadow);
  border-bottom:1px solid var(--face-lt); border-right:1px solid var(--face-lt); }
.menubar{ display:flex; gap:2px; padding:2px 4px; border-bottom:1px solid var(--face-dk);
  box-shadow:0 1px 0 var(--face-lt); font-size:12px; flex:0 0 auto; }
.menubar span{ padding:1px 7px; cursor:pointer; }
.menubar span:hover{ background:var(--sel); color:#fff; }
.winbody{ flex:1; overflow:auto; padding:8px; position:relative; }
.winbody.noscroll{ overflow:hidden; }
.statusbar{ flex:0 0 auto; display:flex; gap:4px; padding:2px 4px; font-size:11px; }
.statusbar .cell{ background:var(--face); padding:2px 8px; flex:1;
  border-top:1px solid var(--face-dk); border-left:1px solid var(--face-dk);
  border-bottom:1px solid var(--face-lt); border-right:1px solid var(--face-lt); }

/* ══════════ Taskbar ══════════ */
#taskbar{ position:fixed; left:0; right:0; bottom:0; height:34px; display:flex;
  align-items:center; gap:4px; padding:3px 4px; z-index:500; }
.start-btn{ font-weight:bold; display:flex; align-items:center; gap:5px; height:26px; }
.tb-sep{ width:2px; align-self:stretch; margin:2px 1px;
  border-left:1px solid var(--face-dk); border-right:1px solid var(--face-lt); }
#tb-windows{ display:flex; gap:3px; overflow:hidden; flex:0 1 auto; }
.tb-task{ min-width:110px; max-width:170px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; text-align:left; height:26px; }
.tb-task.active{ font-weight:bold;
  border-top:2px solid var(--shadow); border-left:2px solid var(--shadow);
  border-bottom:2px solid var(--face-lt); border-right:2px solid var(--face-lt);
  background:repeating-conic-gradient(#fff 0% 25%, #dfdfdf 0% 50%) 0 0/4px 4px; box-shadow:none; }
.tb-spacer{ flex:1; }
#tb-ticker{ font-size:11px; color:#000; max-width:430px; overflow:hidden; white-space:nowrap;
  text-overflow:ellipsis; padding:0 6px; font-family:'Courier New',monospace; font-weight:bold; }
.tray-box{ display:flex; align-items:center; gap:5px; padding:2px 8px; height:26px; font-size:12px;
  border-top:1px solid var(--face-dk) !important; border-left:1px solid var(--face-dk) !important;
  border-bottom:1px solid var(--face-lt) !important; border-right:1px solid var(--face-lt) !important;
  box-shadow:none !important; }
#tb-mail{ cursor:pointer; }
#tb-mail.unread{ animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ background:#ffd24d; } }
.spd{ width:24px; height:20px; font-size:10px; cursor:pointer; background:var(--face);
  border-top:1px solid var(--face-lt); border-left:1px solid var(--face-lt);
  border-bottom:1px solid var(--shadow); border-right:1px solid var(--shadow); }
.spd.step{ width:32px; }
.spd.active{ background:#9db8d9;
  border-top:1px solid var(--shadow); border-left:1px solid var(--shadow);
  border-bottom:1px solid var(--face-lt); border-right:1px solid var(--face-lt); }
#tb-date{ font-weight:bold; min-width:92px; text-align:center; font-family:'Courier New',monospace; font-size:12px; }

/* ══════════ Start menu ══════════ */
#startmenu{ position:fixed; left:2px; bottom:36px; width:250px; z-index:600; display:flex; }
.sm-side{ width:26px; background:linear-gradient(0deg,var(--title-a),var(--title-b)); color:#fff;
  font-weight:bold; font-size:15px; writing-mode:vertical-rl; transform:rotate(180deg);
  padding:8px 3px; letter-spacing:1px; }
.sm-side span{ color:#ffd24d; }
.sm-items{ flex:1; padding:3px; }
.sm-item{ display:flex; align-items:center; gap:9px; padding:5px 8px; cursor:pointer; font-size:12px; }
.sm-item:hover{ background:var(--sel); color:#fff; }
.sm-item .glyph{ font-size:17px; width:22px; text-align:center; }
.sm-divider{ height:2px; margin:3px 4px; border-top:1px solid var(--face-dk); border-bottom:1px solid var(--face-lt); }

/* ══════════ Shared widgets ══════════ */
table.grid{ width:100%; border-collapse:collapse; background:#fff; font-size:12px; }
table.grid th{ background:var(--face); text-align:left; padding:3px 7px; font-size:11px;
  border:1px solid; border-color:var(--face-lt) var(--shadow) var(--shadow) var(--face-lt); position:sticky; top:0; }
table.grid td{ padding:3px 7px; border-bottom:1px solid #ddd; }
table.grid tr.total td{ font-weight:bold; border-top:2px solid #000; background:#f2f2f2; }
table.grid td.r, table.grid th.r{ text-align:right; font-family:'Courier New',monospace; font-weight:bold; }
.pos{ color:var(--pos); } .neg{ color:var(--neg); } .warn{ color:var(--warn); }

.fieldset{ border:1px solid var(--face-dk); box-shadow:1px 1px 0 var(--face-lt) inset, -1px -1px 0 var(--face-lt);
  border-radius:0; padding:10px 12px 12px; margin-bottom:10px; position:relative; }
.fieldset > .legend{ position:absolute; top:-8px; left:8px; background:var(--face); padding:0 5px; font-size:11px; font-weight:bold; }
.row{ display:flex; align-items:center; gap:8px; margin:6px 0; flex-wrap:wrap; }
.row label{ min-width:130px; font-size:12px; }
.row .val{ font-family:'Courier New',monospace; font-weight:bold; min-width:66px; text-align:right; }
input[type=range]{ flex:1; min-width:120px; accent-color:var(--title-a); height:18px; }
input[type=number], input[type=text].box{ width:90px; padding:2px 5px; background:#fff;
  border-top:2px solid var(--face-dk); border-left:2px solid var(--face-dk);
  border-bottom:2px solid var(--face-lt); border-right:2px solid var(--face-lt); }

.kpi-strip{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.kpi-box{ background:#fff; padding:5px 10px; min-width:105px;
  border-top:2px solid var(--face-dk); border-left:2px solid var(--face-dk);
  border-bottom:2px solid var(--face-lt); border-right:2px solid var(--face-lt); }
.kpi-box .k{ font-size:10px; color:#444; text-transform:uppercase; letter-spacing:.4px; }
.kpi-box .v{ font-family:'Courier New',monospace; font-weight:bold; font-size:15px; }
.kpi-box .s{ font-size:10px; font-family:'Courier New',monospace; }

.meter{ height:14px; background:#fff; position:relative;
  border-top:2px solid var(--face-dk); border-left:2px solid var(--face-dk);
  border-bottom:2px solid var(--face-lt); border-right:2px solid var(--face-lt); }
.meter .fill{ position:absolute; inset:0; width:0%;
  background:repeating-linear-gradient(90deg,var(--title-a) 0 7px,var(--title-b) 7px 9px); }
.meter .fill.ok{ background:repeating-linear-gradient(90deg,#087f08 0 7px,#0aa50a 7px 9px); }
.meter .fill.bad{ background:repeating-linear-gradient(90deg,#a00 0 7px,#d33 7px 9px); }
.meter .fill.warn{ background:repeating-linear-gradient(90deg,#b06000 0 7px,#d98a2b 7px 9px); }

/* terminal look for CoreBank */
.term{ background:var(--term-bg); color:var(--term-fg); font-family:'Courier New',monospace;
  font-size:12px; padding:10px 12px; line-height:1.42; white-space:pre; overflow:auto; height:100%;
  text-shadow:0 0 4px rgba(51,255,51,.45); }
.term .dim{ color:#1d8f1d; } .term .hi{ color:#b6ffb6; } .term .red{ color:#ff5555; } .term .yel{ color:#ffff66; }

/* mail */
.mail-list{ height:150px; overflow:auto; }
.mail-row{ display:flex; gap:8px; padding:3px 6px; cursor:pointer; background:#fff; border-bottom:1px solid #e2e2e2; }
.mail-row.unread{ font-weight:bold; }
.mail-row.sel{ background:var(--sel); color:#fff; }
.mail-row .from{ width:150px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mail-row .subj{ flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mail-row .dt{ width:70px; text-align:right; font-size:11px; }
.mail-body{ background:#fff; padding:10px 12px; min-height:120px; line-height:1.5; user-select:text; }
.mail-body .hdr{ border-bottom:1px solid #ccc; margin-bottom:8px; padding-bottom:6px; font-size:11px; color:#333; }
.mail-actions{ display:flex; gap:8px; margin-top:10px; }

.chart-canvas{ background:#fff; display:block; width:100%;
  border-top:2px solid var(--face-dk); border-left:2px solid var(--face-dk);
  border-bottom:2px solid var(--face-lt); border-right:2px solid var(--face-lt); }

.small{ font-size:11px; color:#333; }
.tag{ display:inline-block; font-size:10px; font-weight:bold; padding:0 5px; border:1px solid #888; background:#eee; }
.tag.g{ background:#d7f0d7; border-color:#3a7; color:#053; }
.tag.r{ background:#f6d6d6; border-color:#b55; color:#600; }
.tag.y{ background:#fdf3cf; border-color:#ca8; color:#640; }
.tag.b{ background:#d9e4f6; border-color:#57a; color:#026; }

/* ══════════ Account gate / SEO landing ══════════ */
#account-gate{ position:fixed; inset:0; z-index:8000; overflow:auto;
  background:linear-gradient(135deg,#04140a 0%,#071a3a 60%,#0a0f1f 100%);
  color:#eef2f0; font-family:'Segoe UI',Tahoma,sans-serif; }
.gate-wrap{ max-width:1080px; margin:0 auto; min-height:100%; display:flex; gap:40px;
  align-items:center; padding:40px 28px; flex-wrap:wrap; }
.gate-hero{ flex:1 1 440px; }
.gate-logo{ font-size:26px; font-weight:800; letter-spacing:.5px; display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.gate-hero h1{ font-size:44px; line-height:1.05; margin:0 0 16px; font-weight:800; }
.gate-lead{ font-size:16px; line-height:1.6; color:#c7d2cd; max-width:560px; }
.gate-features{ list-style:none; padding:0; margin:22px 0; }
.gate-features li{ font-size:15px; padding:6px 0; color:#dbe6e1; }
.gate-note{ font-size:13px; color:#8fa39a; margin-top:8px; }
.gate-panel{ flex:0 0 320px; }
.gate-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:24px; backdrop-filter:blur(6px); }
.gate-card-title{ font-size:18px; font-weight:700; margin-bottom:16px; }
#acct-form label{ display:block; font-size:13px; color:#b8c4bf; margin-bottom:12px; }
#acct-form input{ width:100%; margin-top:5px; padding:10px 12px; border-radius:8px;
  border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.25); color:#fff; font-size:15px; }
#acct-form .btn.primary{ width:100%; margin-top:6px; padding:11px; border-radius:8px; border:none;
  background:linear-gradient(90deg,#0f8f4f,#0aa53f); color:#fff; font-size:15px; font-weight:700; cursor:pointer; }
#acct-form .btn.primary:disabled{ opacity:.6; cursor:default; }
.gate-err{ color:#ff8a8a; font-size:13px; min-height:18px; margin-bottom:8px; }

/* signed-in bar */
#acct-bar{ position:fixed; top:0; right:0; z-index:7000; display:flex; align-items:center; gap:8px;
  padding:4px 8px; background:rgba(0,0,0,.55); border-bottom-left-radius:8px; font-family:Tahoma,sans-serif; }
#acct-bar .ab-email{ color:#cfe; font-size:11px; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#acct-bar .ab-btn{ font-size:11px; padding:3px 9px; border-radius:5px; border:1px solid #3a6; background:#093; color:#fff; cursor:pointer; }
.acct-modal-bg{ position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; }
.acct-modal{ background:#12161a; color:#e8efe9; width:440px; max-width:94vw; max-height:88vh; overflow:auto;
  border:1px solid #2c3a33; border-radius:12px; padding:22px; font-family:Tahoma,sans-serif; }
.acct-modal h3{ margin:0 0 14px; } .acct-modal h4{ margin:18px 0 6px; }
.acct-modal input{ width:100%; padding:9px 11px; margin-bottom:8px; border-radius:7px; border:1px solid #38473f; background:#0b0f12; color:#fff; }
.acct-modal button[type=submit]{ padding:9px 14px; border-radius:7px; border:none; background:#0aa53f; color:#fff; font-weight:700; cursor:pointer; }
.acct-modal .inv-list{ max-height:180px; overflow:auto; background:#0b0f12; border:1px solid #263029; border-radius:7px; padding:8px; }
.acct-modal .inv-list .dim{ color:#7d8f86; }
.acct-modal .small{ font-size:12px; line-height:1.5; }
@media (max-width:720px){ .gate-hero h1{ font-size:32px; } .gate-wrap{ padding:24px 16px; } }

/* CRT scanlines */
#crt{ position:fixed; inset:0; pointer-events:none; z-index:6000;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0px, rgba(0,0,0,.13) 1px, transparent 1px, transparent 3px); }
#crt::after{ content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 58%, rgba(0,0,12,.30) 100%); }

/* org chart */
.org-tree{ background:#fff; padding:10px 6px 12px; text-align:center; }
.org-row{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin-top:6px; }
.org-bar{ width:2px; height:10px; background:#888; margin:2px auto 0; }
.org-node{ background:var(--face); padding:4px 8px 5px; min-width:96px; max-width:130px;
  border-top:2px solid var(--face-lt); border-left:2px solid var(--face-lt);
  border-bottom:2px solid var(--shadow); border-right:2px solid var(--shadow); }
.org-node.off{ opacity:.45; background:#e8e8e8; }
.org-node .g{ font-size:16px; }
.org-node .n{ font-size:11px; font-weight:bold; line-height:1.2; }
.org-node .s{ font-size:10px; color:#333; font-family:'Courier New',monospace; margin-top:2px; }

.help-doc{ user-select:text; line-height:1.55; background:#fff; padding:14px 18px; }
.help-doc h2{ font-size:14px; margin:14px 0 6px; border-bottom:1px solid #bbb; }
.help-doc h2:first-child{ margin-top:0; }
.help-doc p, .help-doc li{ font-size:12px; margin-bottom:5px; }
.help-doc ul{ margin-left:20px; }
.help-doc code{ background:#eee; padding:0 3px; font-size:11px; }

/* ══════════ BSOD ══════════ */
#bsod{ position:fixed; inset:0; background:#0000aa; color:#fff; z-index:2000;
  font-family:'Courier New',monospace; display:flex; align-items:center; justify-content:center; }
.bsod-inner{ max-width:640px; padding:20px; }
.bsod-title{ background:#aaa; color:#0000aa; display:inline-block; padding:0 10px; font-weight:bold; margin-bottom:18px; }
#bsod-text{ white-space:pre-wrap; line-height:1.6; font-size:14px; font-family:inherit; }
.bsod-prompt{ margin-top:22px; animation:blink 1.2s steps(2) infinite; }

/* victory */
.victory-overlay{ position:fixed; inset:0; z-index:1500; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; }
.victory-box{ width:520px; text-align:center; padding-bottom:16px; }
.victory-box .titlebar{ background:linear-gradient(90deg,#7a5c00,#c8a20a); }
.victory-box .content{ padding:18px 22px; line-height:1.6; }
.victory-box .big{ font-size:20px; font-weight:bold; margin:8px 0; }

::-webkit-scrollbar{ width:16px; height:16px; }
::-webkit-scrollbar-track{ background:repeating-conic-gradient(#fff 0% 25%, #dfdfdf 0% 50%) 0 0/4px 4px; }
::-webkit-scrollbar-thumb{ background:var(--face);
  border-top:2px solid var(--face-lt); border-left:2px solid var(--face-lt);
  border-bottom:2px solid var(--shadow); border-right:2px solid var(--shadow); }
::-webkit-scrollbar-button{ background:var(--face); height:16px; width:16px;
  border-top:2px solid var(--face-lt); border-left:2px solid var(--face-lt);
  border-bottom:2px solid var(--shadow); border-right:2px solid var(--shadow); }