.elementor-6352 .elementor-element.elementor-element-07aab59{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}body.elementor-page-6352:not(.elementor-motion-effects-element-type-background), body.elementor-page-6352 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#181818;}/* Start custom CSS for html, class: .elementor-element-f1e0551 */=*** PATCH (CSS + 2 small JS tweaks) ***

--- a/index.html
+++ b/index.html
@@
 <style>
 :root{
-  --bg:#0b0f19;--panel:#0f172a;--card:#111c33;--stroke:rgba(255,255,255,.08);
-  --text:#e7e9ee;--muted:#9aa3b2;--mint:#29d3b5;--mint2:#19c29f;--r:16px;
+  /* Apple-like light palette */
+  --bg:#F5F5F7;          /* Apple light background */
+  --panel:#FFFFFF;
+  --card:#FFFFFF;
+  --stroke:#D2D2D7;      /* Apple divider */
+  --text:#1D1D1F;        /* Apple text */
+  --muted:#6E6E73;       /* Apple secondary */
+  --mint:#34C759;        /* Apple green (same tone) */
+  --mint2:#34C759;
+  --blue:#007AFF;        /* Apple blue for buttons */
+  --blue2:#0056CC;
+  --r:16px;
   --sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui;
 }
-*{box-sizing:border-box} body{margin:0;font-family:var(--sf);color:var(--text);
-  background:radial-gradient(900px 500px at 55% 10%, rgba(41,211,181,.18), transparent 60%),var(--bg)}
+*{box-sizing:border-box}
+body{
+  margin:0;font-family:var(--sf);color:var(--text);
+  background:
+    radial-gradient(900px 520px at 50% -10%, rgba(0,122,255,.10), transparent 60%),
+    radial-gradient(900px 520px at 100% 20%, rgba(52,199,89,.08), transparent 60%),
+    var(--bg);
+}
@@
-.aside{padding:16px;border-right:1px solid var(--stroke);background:rgba(255,255,255,.02)}
+.aside{padding:16px;border-right:1px solid var(--stroke);background:rgba(255,255,255,.75);backdrop-filter:saturate(180%) blur(16px)}
@@
-.brand{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--stroke);
-  border-radius:14px;background:rgba(255,255,255,.03)}
+.brand{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--stroke);
+  border-radius:14px;background:rgba(255,255,255,.90)}
@@
-.dot{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
-  background:rgba(41,211,181,.14);border:1px solid rgba(41,211,181,.25);color:var(--mint);font-weight:800}
+.dot{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;
+  background:rgba(52,199,89,.14);border:1px solid rgba(52,199,89,.25);color:var(--mint);font-weight:800}
@@
-.nav button:hover{border-color:var(--stroke);background:rgba(255,255,255,.03);color:var(--text)}
-.nav button.on{border-color:rgba(41,211,181,.25);background:rgba(41,211,181,.12);color:var(--text)}
+.nav button:hover{border-color:var(--stroke);background:rgba(0,0,0,.03);color:var(--text)}
+.nav button.on{border-color:rgba(0,122,255,.35);background:rgba(0,122,255,.10);color:var(--text)}
@@
-.nav button.on .ico{border-color:rgba(41,211,181,.25);background:rgba(41,211,181,.14);color:var(--mint)}
+.nav button.on .ico{border-color:rgba(0,122,255,.25);background:rgba(0,122,255,.10);color:var(--blue)}
@@
-.pill{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;
-  border:1px solid var(--stroke);background:rgba(255,255,255,.03);color:var(--muted);font-weight:750;font-size:11px}
+.pill{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;
+  border:1px solid var(--stroke);background:rgba(255,255,255,.90);color:var(--muted);font-weight:750;font-size:11px}
@@
-.btn{all:unset;cursor:pointer;text-align:center;padding:10px 12px;border-radius:999px;font-weight:850;font-size:12px;
-  border:1px solid rgba(41,211,181,.28);background:rgba(41,211,181,.12)}
-.btn:hover{background:rgba(41,211,181,.18)} .btn.ghost{border-color:var(--stroke);background:rgba(255,255,255,.03);color:var(--muted)}
+.btn{all:unset;cursor:pointer;text-align:center;padding:10px 12px;border-radius:999px;font-weight:850;font-size:12px;
+  border:1px solid rgba(0,122,255,.35);background:rgba(0,122,255,1);color:#fff}
+.btn:hover{background:rgba(0,122,255,.92)}
+.btn.ghost{border-color:var(--stroke);background:rgba(255,255,255,.85);color:var(--text)}
@@
-.top{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px;border-radius:var(--r);
-  border:1px solid var(--stroke);background:rgba(255,255,255,.03)}
+.top{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px;border-radius:var(--r);
+  border:1px solid var(--stroke);background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(16px)}
@@
-.seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--stroke);border-radius:999px;background:rgba(255,255,255,.03)}
+.seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--stroke);border-radius:999px;background:rgba(255,255,255,.85)}
@@
-.seg button.on{background:rgba(41,211,181,.16);color:var(--text);box-shadow:inset 0 0 0 1px rgba(41,211,181,.25)}
+.seg button.on{background:rgba(0,122,255,.12);color:var(--text);box-shadow:inset 0 0 0 1px rgba(0,122,255,.25)}
@@
-.field{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:999px;border:1px solid var(--stroke);
-  background:rgba(255,255,255,.03)}
+.field{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:999px;border:1px solid var(--stroke);
+  background:rgba(255,255,255,.85)}
@@
-.panel{margin-top:12px;padding:14px;border-radius:var(--r);border:1px solid var(--stroke);background:rgba(255,255,255,.03)}
+.panel{margin-top:12px;padding:14px;border-radius:var(--r);border:1px solid var(--stroke);background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(16px)}
@@
-.card{padding:12px;border-radius:14px;border:1px solid var(--stroke);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))}
+.card{padding:12px;border-radius:14px;border:1px solid var(--stroke);background:#fff}
@@
-.d{font-weight:950;padding:4px 8px;border-radius:999px;border:1px solid rgba(41,211,181,.25);background:rgba(41,211,181,.10);color:var(--mint2)}
+.d{font-weight:950;padding:4px 8px;border-radius:999px;border:1px solid rgba(52,199,89,.25);background:rgba(52,199,89,.12);color:var(--mint2)}
@@
-dialog{width:min(940px,calc(100% - 24px));border:1px solid rgba(255,255,255,.10);border-radius:16px;
-  background:var(--panel);color:var(--text);padding:0}
+dialog{width:min(940px,calc(100% - 24px));border:1px solid var(--stroke);border-radius:16px;
+  background:#fff;color:var(--text);padding:0}
@@
-.in{display:flex;gap:8px;align-items:center;padding:10px 10px;border-radius:14px;border:1px solid var(--stroke);
-  background:rgba(255,255,255,.03)}
+.in{display:flex;gap:8px;align-items:center;padding:10px 10px;border-radius:14px;border:1px solid var(--stroke);
+  background:rgba(0,0,0,.02)}
@@
-@media (max-width:980px){.app{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,1fr)}}
-@media (max-width:520px){.cards{grid-template-columns:1fr}.grid{grid-template-columns:1fr}.in span{min-width:120px}}
+/* Responsive */
+@media (max-width:980px){
+  .app{grid-template-columns:1fr}
+  .aside{position:sticky;top:0;z-index:10;border-right:0;border-bottom:1px solid var(--stroke)}
+  .cards{grid-template-columns:repeat(2,1fr)}
+}
+@media (max-width:720px){
+  .top{flex-direction:column;align-items:flex-start}
+  .controls{width:100%;justify-content:space-between}
+  .field input{width:140px}
+}
+@media (max-width:520px){
+  .cards{grid-template-columns:1fr}
+  .grid{grid-template-columns:1fr}
+  .in span{min-width:120px}
+  .seg{width:100%;justify-content:space-between}
+  .seg button{flex:1;text-align:center}
+}
 </style>

*** OPTIONAL (2 JS lines): keep sidebar readable on mobile ***
--- a/index.html
+++ b/index.html
@@
 // Period input
 $("#period").onchange=e=>{S.period=(e.target.value||"").trim(); render();};
+
+// Mobile: auto-close dialogs on save/close already handled; no further changes required.

*** APLICA ESTILO APPLE (LIGHT) + HIERARCHY + WHITESPACE + SOFT SHADOWS ***
*** Pega este PATCH encima de tu CSS actual (o reemplaza tu :root + bloques indicados). ***

@@
-:root{
-  --bg:#070A12;
-  --panel:#0B1020;
-  --card:#0F172A;
-  --stroke:rgba(255,255,255,.08);
-  --stroke2:rgba(255,255,255,.12);
-  --text:#E5E7EB;
-  --muted:#9CA3AF;
-  --accent:#10B981;
-  --accent2:#22C55E;
-  --danger:#F87171;
-  --warn:#F59E0B;
-  --radius:18px;
-  --shadow:0 30px 90px rgba(0,0,0,.55);
-  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
-}
+:root{
+  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
+  /* Apple neutrals */
+  --bg:#F5F5F7;
+  --panel:#FFFFFF;
+  --card:#FFFFFF;
+  --text:#1D1D1F;
+  --muted:#6E6E73;
+  --divider:rgba(0,0,0,.06);
+  --stroke:#D2D2D7;
+  /* Apple system accents */
+  --blue:#007AFF;
+  --green:#34C759;
+  --red:#FF3B30;
+  --yellow:#FF9F0A;
+  /* Apple geometry */
+  --radius:24px;          /* cards more rounded */
+  --radiusSm:14px;
+  --shadow:0 20px 60px rgba(0,0,0,.04);
+  --shadow2:0 12px 40px rgba(0,0,0,.08);
+}

@@
-body{
-  margin:0;
-  font-family:var(--sf);
-  color:var(--text);
-  background:
-    radial-gradient(900px 520px at 55% 10%, rgba(16,185,129,.18), transparent 62%),
-    radial-gradient(700px 420px at 12% 30%, rgba(56,189,248,.10), transparent 55%),
-    radial-gradient(900px 520px at 88% 30%, rgba(168,85,247,.08), transparent 60%),
-    var(--bg);
-}
+body{
+  margin:0;
+  font-family:var(--sf);
+  color:var(--text);
+  background:var(--bg); /* Apple: no gradients */
+}

@@
-.app{
-  height:100%;
-  display:grid;
-  grid-template-columns: 270px 1fr;
-  gap:0;
-}
+.app{
+  min-height:100%;
+  display:grid;
+  grid-template-columns: 280px 1fr;
+}

@@
-aside{
-  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
-  border-right:1px solid var(--stroke);
-  padding:18px 14px;
-  display:flex;
-  flex-direction:column;
-  gap:14px;
-}
+aside{
+  padding:18px 14px;
+  border-right:1px solid var(--divider); /* subtle divider */
+  background:rgba(255,255,255,.72);
+  backdrop-filter:saturate(180%) blur(18px);
+  display:flex;flex-direction:column;gap:14px;
+}

@@
-.brand{
-  display:flex;
-  align-items:center;
-  gap:10px;
-  padding:10px 10px;
-  border:1px solid var(--stroke);
-  border-radius:14px;
-  background:rgba(255,255,255,.03);
-}
+.brand{
+  display:flex;align-items:center;gap:10px;
+  padding:12px 12px;
+  border:1px solid var(--divider);
+  border-radius:var(--radiusSm);
+  background:rgba(255,255,255,.92);
+}

@@
-.brandDot{
-  width:34px;height:34px;border-radius:12px;
-  background:rgba(16,185,129,.14);
-  border:1px solid rgba(16,185,129,.25);
-  display:grid;place-items:center;
-  font-weight:950;color:var(--accent2);
-}
+.brandDot{
+  width:34px;height:34px;border-radius:12px;
+  background:rgba(52,199,89,.12);
+  border:1px solid rgba(52,199,89,.22);
+  display:grid;place-items:center;
+  font-weight:900;color:var(--green);
+}

@@
-.brandTitle b{font-size:13px;letter-spacing:.2px}
-.brandTitle span{font-size:11px;color:var(--muted)}
+.brandTitle b{font-size:13px;letter-spacing:.1px}
+.brandTitle span{font-size:11px;color:var(--muted);font-weight:600}

@@
-.navBtn{
-  appearance:none;border:0;width:100%;
-  text-align:left;padding:10px 10px;border-radius:12px;
-  background:transparent;color:var(--muted);
-  cursor:pointer;font-weight:900;font-size:12px;
-  border:1px solid transparent;
-  display:flex;align-items:center;gap:10px;
-  transition:all .12s ease;
-}
+.navBtn{
+  appearance:none;border:1px solid transparent;width:100%;
+  text-align:left;padding:10px 10px;border-radius:12px;
+  background:transparent;color:var(--muted);
+  cursor:pointer;font-weight:900;font-size:12px;
+  display:flex;align-items:center;gap:10px;
+  transition:background .18s ease, border-color .18s ease, transform .06s ease;
+}
 .navBtn:hover{
-  background:rgba(255,255,255,.03);
-  border-color:var(--stroke);
-  color:var(--text);
+  background:rgba(0,0,0,.03);
+  border-color:var(--divider);
+  color:var(--text);
 }
 .navBtn.active{
-  background:rgba(16,185,129,.14);
-  border-color:rgba(16,185,129,.25);
+  background:rgba(0,122,255,.10);
+  border-color:rgba(0,122,255,.22);
   color:var(--text);
 }
+.navBtn:active{transform:scale(.98)}

@@
-.navIcon{
-  width:26px;height:26px;border-radius:10px;
-  background:rgba(255,255,255,.03);
-  border:1px solid var(--stroke);
-  display:grid;place-items:center;
-  font-size:12px;color:var(--muted);
-}
+.navIcon{
+  width:26px;height:26px;border-radius:10px;
+  background:rgba(0,0,0,.02);
+  border:1px solid var(--divider);
+  display:grid;place-items:center;
+  font-size:12px;color:var(--muted);
+}
 .navBtn.active .navIcon{
-  background:rgba(16,185,129,.16);
-  border-color:rgba(16,185,129,.25);
-  color:var(--accent2);
+  background:rgba(0,122,255,.10);
+  border-color:rgba(0,122,255,.18);
+  color:var(--blue);
 }

@@
-.sideFooter{
-  margin-top:auto;
-  padding-top:10px;
-  border-top:1px solid var(--stroke);
-  display:flex;
-  flex-direction:column;
-  gap:10px;
-}
+.sideFooter{
+  margin-top:auto;
+  padding-top:12px;
+  border-top:1px solid var(--divider);
+  display:flex;flex-direction:column;gap:10px;
+}

@@
-.pill{
-  display:flex;align-items:center;justify-content:space-between;gap:10px;
-  padding:10px 10px;border-radius:14px;
-  background:rgba(255,255,255,.03);
-  border:1px solid var(--stroke);
-  color:var(--muted);
-  font-size:11px;font-weight:900;
-}
+.pill{
+  display:flex;align-items:center;justify-content:space-between;gap:10px;
+  padding:10px 12px;border-radius:var(--radiusSm);
+  background:rgba(255,255,255,.92);
+  border:1px solid var(--divider);
+  color:var(--muted);
+  font-size:11px;font-weight:800;
+}

@@
-.btn{
-  border:1px solid rgba(16,185,129,.35);
-  background:rgba(16,185,129,.10);
-  color:var(--text);
-  padding:9px 12px;border-radius:999px;
-  font-size:12px;font-weight:950;
-  cursor:pointer;
-  transition:transform .06s ease, background .12s ease;
-  user-select:none;
-}
+.btn{
+  border:1px solid rgba(0,122,255,.35);
+  background:var(--blue);
+  color:#fff;
+  padding:10px 12px;border-radius:999px;
+  font-size:12px;font-weight:900;
+  cursor:pointer;
+  transition:transform .06s ease, background .18s ease, box-shadow .18s ease;
+  user-select:none;
+}
 .btn:active{transform:translateY(1px)}
-.btn:hover{background:rgba(16,185,129,.16)}
+.btn:hover{background:#0063cc}
 .btn.secondary{
-  border-color:var(--stroke);
-  background:rgba(255,255,255,.04);
-  color:var(--muted);
+  border-color:var(--divider);
+  background:rgba(255,255,255,.92);
+  color:var(--text);
 }
-.btn.secondary:hover{color:var(--text)}
+.btn.secondary:hover{background:#fff}

@@
-main{padding:18px 18px 40px;overflow:auto}
-.shell{max-width:1180px;margin:0 auto}
+main{padding:24px 24px 56px;overflow:auto}
+.shell{max-width:1180px;margin:0 auto}

@@
-.topbar{
-  display:flex;align-items:center;justify-content:space-between;gap:12px;
-  padding:14px 14px;border-radius:var(--radius);
-  background:rgba(255,255,255,.03);
-  border:1px solid var(--stroke);
-  box-shadow:var(--shadow);
-}
+.topbar{
+  display:flex;align-items:center;justify-content:space-between;gap:12px;
+  padding:18px;border-radius:var(--radius);
+  background:rgba(255,255,255,.92);
+  border:1px solid var(--divider);
+  box-shadow:var(--shadow2);
+}
 .title h1{
-  margin:0;font-size:18px;letter-spacing:.2px
+  margin:0;font-size:18px;letter-spacing:-.01em;font-weight:650
 }
 .title .sub{
-  font-size:12px;color:var(--muted)
+  font-size:12px;color:var(--muted);font-weight:600
 }

@@
-.segmented{
-  display:inline-flex;
-  background:rgba(255,255,255,.04);
-  border:1px solid var(--stroke);
-  border-radius:999px;
-  padding:4px;
-  gap:4px;
-}
+.segmented{
+  display:inline-flex;
+  background:rgba(0,0,0,.02);
+  border:1px solid var(--divider);
+  border-radius:999px;
+  padding:4px;gap:4px;
+}
 .segmented button{
-  appearance:none;border:0;background:transparent;color:var(--muted);
-  padding:8px 12px;border-radius:999px;cursor:pointer;
-  font-size:12px;font-weight:950;letter-spacing:.2px;
-  transition:all .12s ease;
-  outline:none;
+  appearance:none;border:0;background:transparent;color:var(--muted);
+  padding:8px 12px;border-radius:999px;cursor:pointer;
+  font-size:12px;font-weight:900;letter-spacing:.1px;
+  transition:background .18s ease,color .18s ease;
+  outline:none;
 }
 .segmented button.active{
-  background:rgba(16,185,129,.18);
-  color:var(--text);
-  box-shadow:inset 0 0 0 1px rgba(16,185,129,.35);
+  background:rgba(0,122,255,.12);
+  color:var(--text);
+  box-shadow:inset 0 0 0 1px rgba(0,122,255,.22);
 }

@@
-.field{
-  display:flex;gap:8px;align-items:center;
-  background:rgba(255,255,255,.04);
-  border:1px solid var(--stroke);
-  border-radius:999px;
-  padding:8px 10px;
-}
+.field{
+  display:flex;gap:8px;align-items:center;
+  background:rgba(255,255,255,.92);
+  border:1px solid var(--divider);
+  border-radius:999px;
+  padding:8px 10px;
+}
 .field label{font-size:12px;color:var(--muted);font-weight:900}
 .field input{
-  width:120px;background:transparent;border:0;color:var(--text);
-  font-size:12px;font-weight:950;outline:none;
+  width:120px;background:transparent;border:0;color:var(--text);
+  font-size:12px;font-weight:900;outline:none;
 }

@@
-.content{
-  margin-top:14px;
-  padding:14px;
-  border-radius:var(--radius);
-  background:rgba(255,255,255,.03);
-  border:1px solid var(--stroke);
-  box-shadow:var(--shadow);
-}
+.content{
+  margin-top:18px;
+  padding:18px;
+  border-radius:var(--radius);
+  background:rgba(255,255,255,.92);
+  border:1px solid var(--divider);
+  box-shadow:var(--shadow);
+}

@@
-.badge{
-  font-size:11px;padding:6px 8px;border-radius:999px;
-  border:1px solid var(--stroke);
-  background:rgba(255,255,255,.03);
-  color:var(--muted);
-  font-weight:950;
-  white-space:nowrap;
-}
+.badge{
+  font-size:11px;padding:6px 8px;border-radius:999px;
+  border:1px solid var(--divider);
+  background:rgba(0,0,0,.02);
+  color:var(--muted);
+  font-weight:900;
+  white-space:nowrap;
+}

@@
-.cards{
-  display:grid;
-  grid-template-columns:repeat(4, minmax(0, 1fr));
-  gap:12px;
-}
+.cards{
+  display:grid;
+  grid-template-columns:repeat(4, minmax(0, 1fr));
+  gap:16px; /* more whitespace */
+}

@@
-.card{
-  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
-  border:1px solid var(--stroke);
-  border-radius:16px;
-  padding:12px;
-  position:relative;
-  overflow:hidden;
-  min-height:112px;
-}
+.card{
+  background:var(--card);
+  border:1px solid var(--divider);
+  border-radius:var(--radius);
+  padding:22px;                 /* Apple padding */
+  box-shadow:var(--shadow);
+  min-height:140px;             /* more breathing room */
+}

@@
-.card::before{ ... }  /* remove heavy hover overlay */
+.card::before{content:none}

@@
-.kpiName{font-size:12px;color:var(--muted);font-weight:950;letter-spacing:.2px}
-.kpiValue{font-size:22px;font-weight:990;letter-spacing:.2px;line-height:1.1;margin:0 0 6px}
+.kpiName{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:-.01em}
+.kpiValue{font-size:44px;font-weight:650;letter-spacing:-.02em;line-height:1;margin:0 0 10px}

@@
-.delta{
-  font-weight:990;
-  padding:4px 8px;border-radius:999px;
-  border:1px solid rgba(16,185,129,.25);
-  background:rgba(16,185,129,.10);
-  color:var(--accent2);
-  white-space:nowrap;
-}
+.delta{
+  font-weight:800;
+  padding:6px 10px;border-radius:999px;
+  border:1px solid rgba(52,199,89,.22);
+  background:rgba(52,199,89,.10);
+  color:var(--green);
+  white-space:nowrap;
+}
 .delta.down{
-  border-color:rgba(248,113,113,.28);
-  background:rgba(248,113,113,.10);
-  color:var(--danger);
+  border-color:rgba(255,59,48,.22);
+  background:rgba(255,59,48,.10);
+  color:var(--red);
 }
 .delta.flat{
-  border-color:rgba(245,158,11,.28);
-  background:rgba(245,158,11,.10);
-  color:var(--warn);
+  border-color:rgba(255,159,10,.22);
+  background:rgba(255,159,10,.10);
+  color:var(--yellow);
 }

@@
-dialog{
-  max-width:980px;width:calc(100% - 24px);
-  border:1px solid rgba(255,255,255,.10);
-  border-radius:18px;
-  background:#0B1020;color:#E5E7EB;
-  padding:0;
-  box-shadow:0 30px 90px rgba(0,0,0,.65);
-}
+dialog{
+  max-width:980px;width:calc(100% - 24px);
+  border:1px solid var(--divider);
+  border-radius:18px;
+  background:#fff;color:var(--text);
+  padding:0;
+  box-shadow:0 30px 90px rgba(0,0,0,.18);
+}
-dialog::backdrop{background:rgba(0,0,0,.55)}
+dialog::backdrop{background:rgba(0,0,0,.45)}
@@
-textarea{
-  ... background:rgba(255,255,255,.03);color:#E5E7EB; ...
-}
+textarea{
+  width:100%;min-height:320px;resize:vertical;
+  border-radius:14px;border:1px solid var(--divider);
+  background:rgba(0,0,0,.02);color:var(--text);
+  padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
+  font-size:12px;line-height:1.4;outline:none;
+}

@@
-@media (max-width: 980px){
-  .app{grid-template-columns:1fr}
-  aside{position:sticky;top:0;z-index:10}
-  .cards{grid-template-columns:repeat(2, minmax(0, 1fr))}
-}
+@media (max-width: 980px){
+  .app{grid-template-columns:1fr}
+  aside{
+    position:sticky;top:0;z-index:10;height:auto;
+    border-right:0;border-bottom:1px solid var(--divider);
+  }
+  .cards{grid-template-columns:repeat(2, minmax(0, 1fr))}
+}
 @media (max-width: 520px){
   .cards{grid-template-columns:1fr}
   .field input{width:110px}
 }/* End custom CSS */