/* ========================================================================== 
   Plus 1 Ads — Global Theme (Fortune-500 Internal Ops)
   Version: p1-ops-v1 (clean rebuild)
   Notes:
   - LFMVM / PHP 5.6 friendly (no framework assumptions)
   - Calm, deterministic, performance-safe
   - ONE token system; predictable surface hierarchy:
       Shell → Stage → Card → Inset
   - Minimal effects: 2 shadows, 3 radii, restrained gradients
   ========================================================================== */

/* ==========================================================================
   0) TOKENS (single source of truth)
   ========================================================================== */

:root{
  /* Typography */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Shell (app background) */
  --p1-shell-0: #0c1118;
  --p1-shell-1: #0f1620;

  /* Stage (main content) */
  --p1-stage-0: #121b26;
  --p1-stage-1: #0f1722;

  /* Surfaces */
  --p1-surface-0: #182330; /* card */
  --p1-surface-1: #141e29; /* inset */
  --p1-surface-2: #101821; /* deep inset */

  /* Lines */
  --p1-line-soft: rgba(255,255,255,.05);
  --p1-line: rgba(255,255,255,.08);
  --p1-line-strong: rgba(255,255,255,.14);

  /* Text */
  --p1-text-0: rgba(236,244,255,.94);
  --p1-text-1: rgba(210,222,238,.72);
  --p1-text-2: rgba(170,188,210,.55);

  /* Accent */
  --p1-accent: #6ea8ff;
  --p1-accent-strong: #4d8cff;

  /* Status */
  --p1-success: #56c48c;
  --p1-warn: #d9b15f;
  --p1-danger: #e26d7d;

  /* Shadows (2 levels only) */
  --p1-shadow-1: 0 8px 24px rgba(0,0,0,.35);
  --p1-shadow-2: 0 18px 48px rgba(0,0,0,.45);

  /* Radius */
  --p1-r1: 8px;
  --p1-r2: 12px;
  --p1-r3: 16px;

  /* Spacing */
  --p1-space-1: 8px;
  --p1-space-2: 12px;
  --p1-space-3: 16px;
  --p1-space-4: 20px;
  --p1-space-5: 24px;
  --p1-space-6: 32px;

  /* Focus */
  --p1-focus: 0 0 0 2px rgba(110,168,255,.35);
}

/* Legacy bridge (keeps existing templates working while we convert pages) */
:root{
  --r-1: var(--p1-r1);
  --r-2: var(--p1-r2);
  --r-3: var(--p1-r3);

  /* Legacy text token aliases found in older blocks */
  --text-0: var(--p1-text-0);
  --text-1: var(--p1-text-1);
  --text-2: var(--p1-text-2);

  /* Legacy status aliases */
  --ok: var(--p1-success);
  --good: var(--p1-success);
  --warn: var(--p1-warn);
  --bad: var(--p1-danger);

  /* Accent alias used in older blocks */
  --acc-0: var(--p1-accent);
}

/* ==========================================================================
   1) BASE / RESET
   ========================================================================== */

*{ box-sizing:border-box; }
img{ max-width:100%; height:auto; }

html, body{ height:100%; }
html{ color: var(--p1-text-0); }

::selection{
  background: rgba(110,168,255,.22);
  color: var(--p1-text-0);
}

:focus{ outline:0; }
:focus-visible{
  box-shadow: var(--p1-focus);
  border-radius: var(--p1-r2);
}

a{
  color: rgba(165,210,255,.95);
  text-decoration:none;
}
a:hover{ color: rgba(200,230,255,.95); text-decoration:none; }

/* ==========================================================================
   2) SHELL (body) + subtle atmosphere
   ========================================================================== */

body{
  margin:0;
  font-family: var(--font-ui);
  color: var(--p1-text-0);

  background:
    radial-gradient(900px 520px at 18% 10%, rgba(110,168,255,.08), transparent 62%),
    radial-gradient(900px 520px at 82% 88%, rgba(110,168,255,.05), transparent 66%),
    linear-gradient(180deg, var(--p1-shell-0) 0%, var(--p1-shell-1) 100%);

  background-attachment: fixed;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Optional ultra-subtle scan texture (kept extremely low) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.045),
    rgba(255,255,255,.045) 1px,
    transparent 2px,
    transparent 7px
  );
  mix-blend-mode: overlay;
  opacity:.02;
}

/* ==========================================================================
   3) APP LAYOUT (LFMVM wrapper, sidebar, main)
   ========================================================================== */

.lfm_outerdiv{
  min-height:100vh;
  display:flex;
}

/* Sidebar */
.lfm_slidebar{
  width:255px;
  min-height:100vh;
  padding: 16px 14px;

  background:
    radial-gradient(700px 500px at 30% 0%, rgba(110,168,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    linear-gradient(180deg, #060a10, #0c1622 45%, #0d1a2a 100%);

  border-right: 1px solid var(--p1-line-soft);
  box-shadow: inset -1px 0 0 rgba(110,168,255,.06);
}

.lfm_slidebar.toggled{ width:86px; }
.lfm_slidebar.toggled .lfm_slidebar_mainmenu span{ display:none; }
.lfm_slidebar.toggled .lfm_menu_logo img{ max-width:62px; }

.lfm_menu_logo{
  display:flex;
  justify-content:center;
  margin: 8px 0 16px;
}
.lfm_menu_logo img{
  max-width:165px;
  height:auto;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}

.lfm_slidebar_mainmenu{
  list-style:none;
  padding:0;
  margin:0;
}
.lfm_slidebar_mainmenu li{ margin:10px 0; }

.lfm_slidebar_mainmenu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;

  color: var(--p1-text-1);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);

  transition: transform .10s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.lfm_slidebar_mainmenu a:hover{
  transform: translateY(-1px);
  border-color: rgba(110,168,255,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.50);
  background:
    radial-gradient(420px 160px at 22% 0%, rgba(110,168,255,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}
.lfm_slidebar_mainmenu a.active,
.lfm_slidebar_mainmenu a[aria-current="page"]{
  border-color: rgba(110,168,255,.38);
  box-shadow: 0 0 0 1px rgba(110,168,255,.18), 0 12px 30px rgba(0,0,0,.55);
  background:
    radial-gradient(420px 160px at 22% 0%, rgba(110,168,255,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color: var(--p1-text-0);
}

/* Main stage */
.main{
  flex:1;
  min-width:0;

  background:
    radial-gradient(1100px 520px at 50% 0%, rgba(255,255,255,.04), transparent 62%),
    linear-gradient(180deg, var(--p1-stage-0) 0%, var(--p1-stage-1) 100%);
}

/* Constrain content width (calm, consistent) */
.main .container,
.main .container-fluid{
  padding: 26px 26px 40px;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
}

/* Optional: subtle stage vignette (kept very light) */
.main .container::before,
.main .container-fluid::before{
  content:"";
  position:absolute;
  inset: 10px 10px 22px;
  border-radius: 18px;
  pointer-events:none;
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  opacity:.40;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.main .container > *,
.main .container-fluid > *{ position:relative; z-index:1; }

/* ==========================================================================
   4) TOPBAR (if present)
   ========================================================================== */

.lfm_topbar{
  height:64px;
  padding: 0 18px;

  background:
    radial-gradient(900px 200px at 50% 0%, rgba(110,168,255,.10), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));

  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}

.lfm_slidebar_toggleswitch{
  width:44px;
  height:44px;
  border-radius: var(--p1-r2);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color: var(--p1-text-0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.lfm_slidebar_toggleswitch:hover{
  border-color: rgba(110,168,255,.28);
  box-shadow: 0 10px 26px rgba(0,0,0,.50);
}
.lfm_slidebar_toggleswitch i{ color:#fff; opacity:.9; }

/* ==========================================================================
   5) SURFACE HIERARCHY (Card → Inset)
   ========================================================================== */

/* Card layer */
.card,
.panel,
.well,
fieldset,
.infobar,
.contentbox,
.module,
.section,
.widget,
.box{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.02) 100%),
    var(--p1-surface-0);
  border: 1px solid var(--p1-line);
  border-radius: var(--p1-r3);
  box-shadow: var(--p1-shadow-2);
}

/* Head/cap */
.card-header,
.panel-heading,
.panel-titlebar,
.box-header,
.lfm_panel_header{
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  border-bottom: 1px solid var(--p1-line-soft);
  border-top-left-radius: var(--p1-r3);
  border-top-right-radius: var(--p1-r3);
  color: var(--p1-text-0);
}

/* Body padding */
.card-body,
.panel-body,
.box-body,
.lfm_panel_body{
  padding: 18px 20px;
}

/* Inset layer */
.inset,
.subpanel,
.inner,
.innerbox,
.tablewrap,
.datatable,
.panel .panel,
.panel .well,
.well .panel,
.well .well,
.card .card,
.p1-inset{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.00) 100%),
    var(--p1-surface-1);
  border: 1px solid var(--p1-line-soft);
  border-radius: var(--p1-r2);
  box-shadow: var(--p1-shadow-1);
}

/* Avoid decorative glow pseudo-elements from legacy iterations */
.card::before, .card::after,
.panel::before, .panel::after,
.p1-card::before, .p1-card::after,
.p1-panel::before, .p1-panel::after{
  content:none !important;
  display:none !important;
}

/* ==========================================================================
   6) TYPOGRAPHY SYSTEM
   ========================================================================== */

h1, h2, h3, h4, h5{
  letter-spacing:.2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.30);
  color: var(--p1-text-0);
  margin: 10px 0;
}

h1{
  font-size: 40px;
  line-height: 1.10;
  margin: 6px 0 10px;
}
h2{ font-size: 26px; }
h3{ font-size: 18px; }
h5{ letter-spacing:.2px; }

p, li, td, th, label{
  color: var(--p1-text-1);
}

.small, small, .text-muted, .muted, .hint, .subtext, .subtle{
  color: var(--p1-text-2) !important;
}

.lfm_title{
  font-size: 38px;
  line-height: 1.08;
  color: rgba(240,247,255,.96);
}
.lfm_descr{ color: rgba(240,247,255,.70); }

/* ==========================================================================
   7) DIVIDERS / HR
   ========================================================================== */

hr,
.divider,
.line,
.panel hr{
  border:0;
  height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.10), rgba(255,255,255,0));
}

/* ==========================================================================
   8) BUTTONS (calm, consistent)
   ========================================================================== */

.btn,
.button,
a.btn,
a.button,
button,
input[type="submit"]{
  border-radius: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  color: var(--p1-text-0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 22px rgba(0,0,0,.32);
  transition: transform .10s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}

.btn:hover,
a.btn:hover,
button:hover,
input[type="submit"]:hover{
  transform: translateY(-1px);
  border-color: rgba(110,168,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px rgba(0,0,0,.38);
  filter: brightness(1.03);
}

.btn:active,
button:active,
input[type="submit"]:active{
  transform: translateY(1px);
}

.btn-sm{ padding: 6px 12px; border-radius: 13px; }
.btn-lg{ padding: 10px 16px; border-radius: 16px; }

/* Primary */
.btn-primary,
.btn.btn-primary,
.cta,
.primary{
  border-color: rgba(110,168,255,.32);
  background:
    radial-gradient(240px 70px at 30% 0%, rgba(110,168,255,.26), transparent 65%),
    linear-gradient(180deg, rgba(110,168,255,.40), rgba(77,140,255,.18));
  color: rgba(245,250,255,.96);
}

/* Success (kept subtle; not neon green) */
.btn-success,
.btn.btn-success{
  border-color: rgba(86,196,140,.28);
  background:
    radial-gradient(240px 70px at 30% 0%, rgba(86,196,140,.18), transparent 65%),
    linear-gradient(180deg, rgba(86,196,140,.24), rgba(0,0,0,.05));
}

/* Secondary / default */
.btn-default,
.btn-secondary{
  border-color: rgba(255,255,255,.14);
}

/* ==========================================================================
   9) FORMS
   ========================================================================== */

input, select, textarea{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: var(--p1-text-0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

input::placeholder,
textarea::placeholder{
  color: rgba(190,205,230,.45);
}

input:focus,
select:focus,
textarea:focus{
  border-color: rgba(110,168,255,.42);
  box-shadow: 0 0 0 3px rgba(110,168,255,.14);
}

label{
  font-weight: 600;
  letter-spacing: .3px;
}

/* ==========================================================================
   10) TABLES (module-like)
   ========================================================================== */

.table,
table{
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--p1-line-soft);
  border-radius: var(--p1-r2);
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,.40);
}

.table thead th,
table th{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  color: var(--p1-text-0);
  font-size: 12px;
  letter-spacing: .7px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--p1-line);
}

.table td, .table th,
table td, table th{
  padding: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.table tbody tr:hover,
table tr:hover td{
  background: rgba(110,168,255,.06);
}

/* ==========================================================================
   11) NAV TABS
   ========================================================================== */

.nav-tabs{
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.nav-tabs .nav-link{
  background: rgba(255,255,255,.04);
  color: var(--p1-text-1);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  margin-right: 10px;
  padding: 8px 14px;
}
.nav-tabs .nav-link:hover{
  border-color: rgba(110,168,255,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.nav-tabs .nav-link.active{
  color: var(--p1-text-0);
  border-color: rgba(110,168,255,.38);
  background:
    radial-gradient(220px 70px at 30% 0%, rgba(110,168,255,.18), transparent 65%),
    linear-gradient(180deg, rgba(110,168,255,.22), rgba(77,140,255,.10));
}

/* ==========================================================================
   12) BADGES / LABELS
   ========================================================================== */

.badge, .label{
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--p1-text-0);
}

.badge-success, .label-success{
  background: linear-gradient(180deg, rgba(86,196,140,.22), rgba(0,0,0,.05));
  border-color: rgba(86,196,140,.34);
}
.badge-warning, .label-warning{
  background: linear-gradient(180deg, rgba(217,177,95,.22), rgba(0,0,0,.05));
  border-color: rgba(217,177,95,.34);
}
.badge-danger, .label-danger{
  background: linear-gradient(180deg, rgba(226,109,125,.22), rgba(0,0,0,.05));
  border-color: rgba(226,109,125,.34);
}

/* ==========================================================================
   13) PAGE HERO (existing Plus 1 Ads pattern)
   ========================================================================== */

.p1-pagehero,
.p1-pagehero.card{
  padding:0;
}

.p1-pagehero .card-body{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.p1-pagehero .p1-title{
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: .2px;
  margin: 0 0 6px;
  color: var(--p1-text-0);
}

.p1-pagehero .p1-subtitle{
  margin:0;
  color: var(--p1-text-1);
  max-width: 68ch;
}

.p1-actions{
  flex:0 0 auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Hero: slightly more premium cap + depth */
.p1-pagehero.card{
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.10);
}
.p1-pagehero .card-body{
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(110,168,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border-radius: var(--p1-r3);
}


/* ==========================================================================
   14) RESPONSIVE
   ========================================================================== */

@media (max-width: 720px){
  .main .container,
  .main .container-fluid{
    padding: 18px 16px 28px;
  }

  .lfm_slidebar{
    width: 230px;
  }

  .p1-pagehero .p1-title{
    font-size: 34px;
  }

  .p1-actions{
    justify-content:flex-start;
  }
}
/* =========================================================
   Sidebar: true collapse (disappear)
   ========================================================= */

/* When toggled, hide the sidebar completely */
.lfm_slidebar.toggled{
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Hide everything inside so nothing “peeks” out */
.lfm_slidebar.toggled *{
  display: none !important;
}

/* Let main content take the full width */
.lfm_outerdiv{
  display: flex;
}
.lfm_slidebar.toggled + .main{
  width: 100%;
}

/* Optional: reduce left padding so content snaps nicely */
.lfm_slidebar.toggled + .main .container,
.lfm_slidebar.toggled + .main .container-fluid{
  max-width: 1180px;
  margin: 0 auto;
}
/* =========================================================
   Mobile layout fix (sidebar becomes off-canvas)
   ========================================================= */
@media (max-width: 900px){

  /* Stack app and remove forced desktop paddings */
  .lfm_outerdiv{
    display:block;
  }

  /* Sidebar becomes an overlay drawer */
  .lfm_slidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 9999;

    width: 280px;
    max-width: 85vw;

    transform: translateX(-110%);
    transition: transform .18s ease;
  }

  /* When toggled, slide it in */
  .lfm_slidebar.toggled{
    transform: translateX(0);
    width: 280px !important;
    padding: 16px 14px !important;
  }

  /* Main becomes full width */
  .main{
    width: 100%;
  }

  /* Reduce mobile padding */
  .main .container,
  .main .container-fluid{
    padding: 16px 14px 22px;
    max-width: 100%;
  }

  /* Page titles scale down */
  h1, .lfm_title{ font-size: 30px; }
}
/* =========================================================
   FINAL: Sidebar behavior
   Desktop: toggled = hidden
   Mobile: toggled = off-canvas drawer (visible)
   ========================================================= */

/* ---------------------------
   Desktop (hide sidebar)
--------------------------- */
@media (min-width: 901px){
  .lfm_slidebar.toggled{
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
}

/* ---------------------------
   Mobile (drawer sidebar)
--------------------------- */
@media (max-width: 900px){

  .lfm_outerdiv{ display:block; }

  /* Sidebar becomes overlay drawer */
  .lfm_slidebar{
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 9999;

    width: 280px !important;
    max-width: 85vw;

    transform: translateX(-110%);
    transition: transform .18s ease;

    /* Ensure it renders */
    overflow-y: auto !important;
  }

  /* When toggled, slide in */
  .lfm_slidebar.toggled{
    transform: translateX(0) !important;
    padding: 16px 14px !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
  }

  /* IMPORTANT: undo any “hide everything” rules from desktop */
  .lfm_slidebar.toggled *{
    display: revert !important;
  }

  /* If your browser doesn’t support revert well, these ensure visibility */
  .lfm_slidebar.toggled .lfm_menu_logo{ display:flex !important; }
  .lfm_slidebar.toggled .lfm_slidebar_mainmenu{ display:block !important; }
  .lfm_slidebar.toggled .lfm_slidebar_mainmenu li{ display:block !important; }
  .lfm_slidebar.toggled .lfm_slidebar_mainmenu a{
    display:flex !important;
    font-size: 14px !important;   /* prevents “font-size:0” from icon-only modes */
  }

  /* Main content full width */
  .main{ width:100%; }
  .main .container,
  .main .container-fluid{
    padding: 16px 14px 22px;
    max-width: 100%;
  }

  /* Titles scale down */
  h1, .lfm_title{ font-size: 30px; }
}
/* =========================================================
   Plus 1 Ads — Form Field System (Premium Dark)
   ========================================================= */

input[type="text"],
input[type="url"],
input[type="email"],
input[type="password"],
textarea,
select {

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.02)
  );

  background-color: rgba(15, 25, 40, 0.85);

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;

  color: #e6edf5;
  font-size: 14px;

  padding: 12px 14px;

  transition: border .15s ease, box-shadow .15s ease, background .15s ease;

  width: 100%;
}

/* Placeholder tone */
input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,0.35);
}

/* Focus state */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border: 1px solid rgba(70,120,200,0.55);

  box-shadow:
    0 0 0 2px rgba(70,120,200,0.15),
    0 8px 20px rgba(0,0,0,0.35);

  background-color: rgba(18, 30, 48, 0.95);
}

/* Textarea sizing */
textarea {
  min-height: 160px;
  resize: vertical;
}
textarea {
  background: rgba(18, 28, 45, 0.95);
  border: 1px solid rgba(255,255,255,0.08);
  color: #e6edf5;
  border-radius: 12px;
  padding: 14px 16px;
  min-height: 180px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 8px 30px rgba(0,0,0,0.4);
}
/* =========================================================
   Force dark form controls (wins vs Bootstrap / late CSS)
   ========================================================= */

.main textarea,
.main input[type="text"],
.main input[type="url"],
.main input[type="email"],
.main input[type="password"],
.main select,
.main .form-control,
textarea.form-control,
input.form-control,
select.form-control{
  background: rgba(18, 28, 45, 0.95) !important;
  color: var(--p1-text-0) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  caret-color: var(--p1-text-0);
}

.main textarea::placeholder,
.main input::placeholder{
  color: rgba(190,205,230,.45) !important;
}

.main textarea:focus,
.main input:focus,
.main select:focus,
.main .form-control:focus{
  outline: none !important;
  border-color: rgba(110,168,255,.45) !important;
  box-shadow: 0 0 0 3px rgba(110,168,255,.14) !important;
}

/* Kill the white autofill background on some browsers */
.main input:-webkit-autofill,
.main textarea:-webkit-autofill,
.main select:-webkit-autofill{
  -webkit-text-fill-color: var(--p1-text-0) !important;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0 1000px rgba(18, 28, 45, 0.95) inset !important;
}