/* ============================================================
   PasTele — create-pastelink.css
   CLEAN SAAS UI / FULL DARK MODE FIX
   Page: create-pastelink.html
   ============================================================ */
:root{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-3:#eef2f7;
  --text:#0f172a;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --line:#e2e8f0;
  --line-strong:#cbd5e1;
  --primary:#635bff;
  --primary-2:#8b5cf6;
  --blue:#3b82f6;
  --cyan:#06b6d4;
  --green:#10b981;
  --orange:#f59e0b;
  --red:#ef4444;
  --pink:#ec4899;
  --shadow-sm:0 6px 20px rgba(15,23,42,.06);
  --shadow:0 18px 55px rgba(15,23,42,.09);
  --radius:16px;
  --radius-sm:12px;
  --max:1180px;
  --nav-h:72px;
  /* PasteLink page aliases */
  --page-bg:var(--bg);
  --page-surface:var(--surface);
  --page-surface-2:var(--surface-2);
  --page-surface-3:var(--surface-3);
  --page-text:var(--text);
  --page-muted:var(--muted);
  --page-muted-2:var(--muted-2);
  --page-border:var(--line);
  --page-border-strong:var(--line-strong);
  --input-bg:var(--surface);
  --input-text:var(--text);
  --input-border:var(--line-strong);
  --card-bg:var(--surface);
  color-scheme:light;
}
/* ============================================================
   DARK MODE
   ============================================================ */
html[data-theme="dark"],
html.theme-dark,
body.theme-dark{
  --bg:#080d16;
  --surface:#101722;
  --surface-2:#151e2b;
  --surface-3:#1b2635;
  --text:#f8fafc;
  --muted:#a8b5c7;
  --muted-2:#94a3b8;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --primary:#818cf8;
  --primary-2:#a78bfa;
  --blue:#60a5fa;
  --cyan:#22d3ee;
  --green:#34d399;
  --orange:#fbbf24;
  --red:#f87171;
  --pink:#f472b6;
  --shadow-sm:0 8px 28px rgba(0,0,0,.25);
  --shadow:0 22px 70px rgba(0,0,0,.42);
  --page-bg:var(--bg);
  --page-surface:var(--surface);
  --page-surface-2:var(--surface-2);
  --page-surface-3:var(--surface-3);
  --page-text:var(--text);
  --page-muted:var(--muted);
  --page-muted-2:var(--muted-2);
  --page-border:var(--line);
  --page-border-strong:var(--line-strong);
  --input-bg:#0d1521;
  --input-text:#f8fafc;
  --input-border:rgba(255,255,255,.16);
  --card-bg:#101722;
  color-scheme:dark;
}
/* ============================================================
   RESET
   ============================================================ */
html{
  scroll-behavior:smooth;
  background:var(--page-bg);
  color:var(--page-text);
}
html[data-theme="dark"]{
  color-scheme:dark;
}
*,
*::before,
*::after{
  box-sizing:border-box;
}
body{
  margin:0;
  min-height:100vh;
  background:var(--page-bg);
  color:var(--page-text);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body:has(.navbar){
  padding:0;
}
a{
  color:inherit;
  text-decoration:none;
}
button,
input,
select,
textarea{
  font:inherit;
}
button{
  cursor:pointer;
}
img,
svg,
video{
  max-width:100%;
}
h1,
h2,
h3,
h4,
h5{
  line-height:1.2;
  letter-spacing:-.025em;
}
p{
  margin-top:0;
}
/* ============================================================
   COMMON
   ============================================================ */
.container,
.page-container,
.main-container,
.content-container{
  width:min(var(--max),calc(100% - 32px));
  margin-inline:auto;
}
.section{
  padding:40px 0;
}
main{
  min-height:calc(100vh - 1px);
}
.muted{
  color:var(--page-muted)!important;
}
.hidden{
  display:none!important;
}
.row{
  display:flex;
  align-items:center;
  gap:10px;
}
.wrap{
  flex-wrap:wrap;
}
.grid{
  display:grid;
  gap:18px;
}
.grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.grid-4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
/* ============================================================
   COMMON CARDS
   ============================================================ */
.card,
.panel,
.box,
.dashboard-card,
.stat-card,
.content-card,
.form-card,
.create-card,
.market-card,
.product-card,
.settings-card{
  background:var(--page-surface)!important;
  color:var(--page-text);
  border:1px solid var(--page-border)!important;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.card{
  padding:20px;
}
.card:hover{
  border-color:var(--page-border-strong)!important;
}
/* ============================================================
   BUTTONS
   ============================================================ */
.btn,
.button,
button{
  font-weight:750;
  -webkit-tap-highlight-color:transparent;
}
.btn,
.button{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:10px 15px;
  border:1px solid var(--page-border-strong);
  border-radius:12px;
  background:var(--page-surface);
  color:var(--page-text);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    border-color .18s ease;
}
.btn:hover,
.button:hover{
  transform:translateY(-1px);
  background:var(--page-surface-2);
}
.btn.primary,
.btn-primary,
.button-primary,
button.primary{
  background:linear-gradient(
    135deg,
    var(--primary),
    var(--primary-2)
  )!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(99,91,255,.22);
}
.btn.primary:hover,
.btn-primary:hover,
.button-primary:hover,
button.primary:hover{
  box-shadow:0 14px 30px rgba(99,91,255,.30);
}
.btn.secondary{
  background:var(--page-surface);
  color:var(--page-text);
  border-color:var(--page-border-strong);
}
/* ============================================================
   GENERIC FORM
   ============================================================ */
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea,
.input,
.select,
.textarea,
.composer{
  width:100%;
  min-height:46px;
  padding:11px 13px;
  border:1px solid var(--page-border-strong)!important;
  border-radius:12px;
  background:var(--input-bg)!important;
  color:var(--input-text)!important;
  outline:0;
  transition:
    border-color .18s,
    box-shadow .18s,
    background .18s;
}
input::placeholder,
textarea::placeholder,
.input::placeholder{
  color:var(--page-muted-2)!important;
  opacity:1;
}
textarea,
.textarea{
  min-height:120px;
  resize:vertical;
}
input:focus,
select:focus,
textarea:focus,
.input:focus,
.select:focus,
.textarea:focus,
.composer:focus{
  border-color:var(--primary)!important;
  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      var(--primary) 16%,
      transparent
    )!important;
  outline:0;
}
.field{
  display:grid;
  gap:7px;
}
.field label,
label{
  color:var(--page-text);
  font-weight:750;
}
.field small,
.hint,
.help-text{
  color:var(--page-muted);
}
/* ============================================================
   BADGES
   ============================================================ */
.badge,
.chip,
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid
    color-mix(
      in srgb,
      var(--primary) 22%,
      var(--page-border)
    );
  background:
    color-mix(
      in srgb,
      var(--primary) 9%,
      var(--page-surface)
    );
  color:var(--primary);
  border-radius:999px;
  padding:6px 10px;
  font-size:11px;
  font-weight:800;
}
.eyebrow{
  letter-spacing:.09em;
  text-transform:uppercase;
}
/* ============================================================
   NAVBAR
   ============================================================ */
.navbar{
  min-height:var(--nav-h);
  background:
    color-mix(
      in srgb,
      var(--page-surface) 90%,
      transparent
    );
  border-bottom:1px solid var(--page-border);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  position:sticky;
  top:0;
  z-index:1000;
}
.navbar .container{
  min-height:var(--nav-h);
}
/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  margin-top:40px;
  padding:32px 0 24px;
  background:var(--page-surface);
  border-top:1px solid var(--page-border);
  color:var(--page-muted);
}
/* ============================================================
   ICON COLORS
   ============================================================ */
.fa-solid,
.fa-regular,
.fa-brands{
  line-height:1;
}
.fa-link,
.fa-link-slash,
.fa-arrow-up-right-from-square,
.fa-paperclip{
  color:var(--blue);
}
.fa-code,
.fa-file-code,
.fa-terminal,
.fa-laptop-code{
  color:var(--primary-2);
}
.fa-credit-card,
.fa-money-check-dollar,
.fa-wallet,
.fa-coins,
.fa-money-bill,
.fa-money-bill-transfer{
  color:var(--green);
}
.fa-chart-line,
.fa-chart-simple,
.fa-chart-pie,
.fa-gauge-high,
.fa-chart-column{
  color:var(--orange);
}
.fa-telegram,
.fa-paper-plane{
  color:#06a9e8;
}
.fa-rocket,
.fa-wand-magic-sparkles,
.fa-sparkles{
  color:var(--pink);
}
.fa-shield-halved,
.fa-lock,
.fa-key,
.fa-user-shield{
  color:#6366f1;
}
.fa-users,
.fa-user-group,
.fa-user-plus{
  color:var(--cyan);
}
.fa-box,
.fa-box-open,
.fa-bag-shopping{
  color:#f97316;
}
.fa-bolt,
.fa-circle-check,
.fa-check,
.fa-circle-play{
  color:var(--green);
}
.fa-store,
.fa-shop,
.fa-cart-shopping{
  color:#f43f5e;
}
.fa-gear,
.fa-sliders,
.fa-wrench{
  color:var(--muted);
}
.fa-bell,
.fa-bullhorn{
  color:#eab308;
}
.fa-trash,
.fa-xmark,
.fa-circle-xmark{
  color:var(--red);
}
.fa-circle-info,
.fa-info{
  color:var(--cyan);
}
.fa-question,
.fa-circle-question{
  color:#a855f7;
}
.fa-right-to-bracket{
  color:var(--blue);
}
.fa-right-from-bracket{
  color:var(--red);
}
.fa-arrow-trend-up{
  color:var(--green);
}
.fa-arrow-trend-down{
  color:var(--red);
}
.fa-star,
.fa-crown{
  color:var(--orange);
}
.fa-robot{
  color:var(--primary-2);
}
.fa-file-lines,
.fa-receipt{
  color:var(--muted);
}
.fa-floppy-disk{
  color:var(--green);
}
.fa-circle-notch{
  color:var(--primary);
}
.btn.primary .fa-solid,
.btn.primary .fa-regular,
.btn.primary .fa-brands,
.btn-primary i,
.button-primary i{
  color:#fff!important;
}
/* ============================================================
   PAGE: CREATE PASTELINK
   ============================================================ */
.create-detail-page{
  min-height:100vh;
  background:var(--page-bg);
  color:var(--page-text);
}
.create-detail-page .create-detail{
  width:min(860px,calc(100% - 32px));
  margin:auto;
  padding:30px 0 70px;
}
/* ============================================================
   HEADER
   ============================================================ */
.create-detail-head{
  margin-bottom:22px;
}
.back-create{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:17px;
  color:var(--page-muted);
  font-size:13px;
  font-weight:700;
  transition:
    color .18s ease,
    transform .18s ease;
}
.back-create:hover{
  color:var(--blue);
  transform:translateX(-2px);
}
.detail-title{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.detail-icon{
  width:52px;
  height:52px;
  flex:0 0 52px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb,var(--blue) 12%,var(--page-surface)),
      color-mix(in srgb,var(--primary-2) 10%,var(--page-surface))
    );
  border:1px solid
    color-mix(in srgb,var(--blue) 22%,var(--page-border));
  box-shadow:
    0 10px 28px
    color-mix(in srgb,var(--blue) 10%,transparent);
}
.detail-icon i{
  font-size:21px;
  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--primary-2),
      var(--pink)
    );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.detail-title .eyebrow{
  display:block;
  padding:0;
  margin:1px 0 5px;
  border:0;
  background:none;
  color:var(--blue);
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;
}
.detail-title h1{
  margin:0;
  color:var(--page-text);
  font-size:32px;
  line-height:1.12;
  letter-spacing:-.03em;
}
.detail-title p{
  margin:7px 0 0;
  color:var(--page-muted);
  font-size:13.5px;
  line-height:1.55;
}
/* ============================================================
   MAIN FORM CARD
   ============================================================ */
.create-card{
  padding:28px;
  background:var(--card-bg)!important;
  color:var(--page-text)!important;
  border:1px solid var(--page-border)!important;
  border-radius:21px;
  box-shadow:var(--shadow);
}
.create-card .field{
  margin-bottom:20px;
}
.create-card .field:last-child{
  margin-bottom:0;
}
/* ============================================================
   LABELS
   ============================================================ */
.create-card .field > label:not(.access-option){
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
  color:var(--page-text);
  font-size:13.5px;
  font-weight:800;
}
.create-card .field em{
  color:var(--red);
  font-style:normal;
}
.create-card .field label span{
  margin-left:2px;
  color:var(--page-muted-2);
  font-size:11px;
  font-weight:600;
}
.create-card .field > small{
  display:block;
  margin-top:6px;
  color:var(--page-muted);
  font-size:11.5px;
  line-height:1.5;
}
/* ============================================================
   PAGE INPUTS
   ============================================================ */
.create-detail-page input:not([type="radio"]):not([type="checkbox"]),
.create-detail-page textarea,
.create-detail-page select{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--input-border)!important;
  border-radius:12px;
  background:var(--input-bg)!important;
  color:var(--input-text)!important;
  outline:none;
  font:inherit;
  font-size:13.5px;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease;
}
.create-detail-page input:not([type="radio"]):not([type="checkbox"]),
.create-detail-page select{
  height:47px;
  padding:0 13px;
}
.create-detail-page textarea{
  padding:12px 13px;
  resize:vertical;
  line-height:1.55;
}
.create-detail-page #content{
  min-height:285px;
  font:
    12.5px/1.65
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;
  tab-size:2;
}
.create-detail-page input::placeholder,
.create-detail-page textarea::placeholder{
  color:var(--page-muted-2)!important;
  opacity:1;
}
.create-detail-page input:not([type="radio"]):not([type="checkbox"]):hover,
.create-detail-page textarea:hover,
.create-detail-page select:hover{
  border-color:
    color-mix(
      in srgb,
      var(--blue) 45%,
      var(--input-border)
    )!important;
}
.create-detail-page input:not([type="radio"]):not([type="checkbox"]):focus,
.create-detail-page textarea:focus,
.create-detail-page select:focus{
  border-color:var(--blue)!important;
  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--blue) 15%,
      transparent
    )!important;
}
/* ============================================================
   ACCESS FREE / PAID
   ============================================================ */
.access-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.access-option{
  display:block;
  cursor:pointer;
}
.access-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.access-option > span{
  min-height:74px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:13px 14px;
  border:1px solid var(--input-border);
  border-radius:14px;
  background:var(--input-bg);
  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}
.access-option:hover > span{
  border-color:
    color-mix(
      in srgb,
      var(--blue) 45%,
      var(--input-border)
    );
  transform:translateY(-1px);
}
.access-option input:checked + span{
  border-color:var(--blue);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb,var(--blue) 10%,var(--input-bg)),
      color-mix(in srgb,var(--primary-2) 6%,var(--input-bg))
    );
  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--blue) 10%,
      transparent
    );
}
.access-option b{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--page-text);
  font-size:13.5px;
}
.access-option b i{
  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--primary-2),
      var(--pink)
    );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.access-option small{
  margin-top:4px;
  color:var(--page-muted);
  font-size:11px;
}
/* ============================================================
   PRICE
   ============================================================ */
.price-box{
  padding:16px;
  border:1px solid
    color-mix(
      in srgb,
      var(--blue) 18%,
      var(--page-border)
    );
  border-radius:15px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb,var(--blue) 7%,var(--page-surface)),
      color-mix(in srgb,var(--primary-2) 4%,var(--page-surface))
    );
}
.money-input{
  position:relative;
}
.money-input > span{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  color:var(--page-muted);
  font-weight:800;
  font-size:13px;
  pointer-events:none;
}
.money-input input{
  padding-left:42px!important;
  font-weight:800;
}
.create-detail-page input[type="number"]::-webkit-inner-spin-button,
.create-detail-page input[type="number"]::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.create-detail-page input[type="number"]{
  -moz-appearance:textfield;
}
/* ============================================================
   EXPIRY SWITCH
   ============================================================ */
.expiry-toggle{
  margin-top:-3px;
}
.switch-row{
  display:flex!important;
  align-items:center;
  gap:11px;
  cursor:pointer;
  padding:11px 12px;
  border:1px solid var(--input-border);
  border-radius:13px;
  background:var(--input-bg);
}
.switch-row > input{
  position:absolute;
  opacity:0;
}
.switch-ui{
  width:38px;
  height:22px;
  flex:0 0 38px;
  position:relative;
  border-radius:99px;
  background:
    color-mix(
      in srgb,
      var(--muted-2) 25%,
      transparent
    );
}
.switch-ui::after{
  content:"";
  position:absolute;
  width:16px;
  height:16px;
  top:3px;
  left:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  transition:transform .18s ease;
}
.switch-row > input:checked ~ .switch-ui{
  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--primary-2)
    );
}
.switch-row > input:checked ~ .switch-ui::after{
  transform:translateX(16px);
}
.switch-row > span:last-child{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.switch-row b{
  color:var(--page-text);
  font-size:12.5px;
}
.switch-row small{
  color:var(--page-muted);
  font-size:10.5px;
}
/* ============================================================
   CUSTOM URL
   ============================================================ */
.url-input{
  position:relative;
}
.url-input > span{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  color:var(--primary-2);
  font-weight:800;
  pointer-events:none;
}
.url-input input{
  padding-left:32px!important;
}
/* ============================================================
   STATUS
   ============================================================ */
.inline-status{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:9px;
  padding:9px 11px;
  border-radius:10px;
  background:
    color-mix(
      in srgb,
      var(--orange) 10%,
      var(--page-surface)
    );
  color:var(--orange);
  font-size:11.5px;
}
.selected-bot{
  margin-top:7px;
  color:var(--page-muted);
  font-size:11px;
}
.selected-bot b{
  color:var(--blue);
}
/* ============================================================
   ACTIONS
   ============================================================ */
.create-actions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:27px;
  padding-top:21px;
  border-top:1px solid var(--page-border);
}
.create-actions .btn{
  min-height:45px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 17px;
  border-radius:11px;
  font:
    700 13px
    inherit;
  text-decoration:none;
  cursor:pointer;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}
.create-actions .btn:hover{
  transform:translateY(-1px);
}
.create-actions .btn.secondary{
  border:1px solid var(--page-border-strong);
  background:var(--page-surface);
  color:var(--page-text);
}
.create-actions .btn.secondary:hover{
  background:var(--page-surface-2);
}
.create-actions .btn.primary{
  border:0;
  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed,
      #db2777
    );
  color:#fff;
  box-shadow:0 9px 22px rgba(37,99,235,.20);
}
.create-actions .btn.primary:disabled{
  opacity:.58;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
/* ============================================================
   RESULT
   ============================================================ */
.create-result{
  margin-top:17px;
  padding:18px;
  border:1px solid
    color-mix(
      in srgb,
      var(--green) 25%,
      var(--page-border)
    );
  border-radius:15px;
  background:
    color-mix(
      in srgb,
      var(--green) 7%,
      var(--page-surface)
    );
  color:var(--page-text);
}
.result-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:
    linear-gradient(
      135deg,
      #22c55e,
      #14b8a6
    );
  color:#fff;
}
.create-result h2{
  margin:10px 0 5px;
  color:var(--page-text);
  font-size:17px;
}
.create-result p{
  margin:0;
  color:var(--page-muted);
  font-size:12.5px;
}
.result-url{
  display:flex;
  margin-top:13px;
}
.result-url input{
  flex:1!important;
  border-radius:10px 0 0 10px!important;
}
.result-url button{
  width:46px;
  border:0;
  border-radius:0 10px 10px 0;
  background:
    linear-gradient(
      135deg,
      #2563eb,
      #7c3aed
    );
  color:#fff;
  cursor:pointer;
}
.result-actions{
  display:flex;
  gap:8px;
  margin-top:12px;
}
/* ============================================================
   DARK MODE EXTRA SAFETY
   ============================================================ */
html[data-theme="dark"] .create-detail-page,
html.theme-dark .create-detail-page,
body.theme-dark .create-detail-page{
  background:#080d16;
  color:#f8fafc;
}
html[data-theme="dark"] .create-card,
html.theme-dark .create-card,
body.theme-dark .create-card{
  background:#101722!important;
  color:#f8fafc!important;
  border-color:rgba(255,255,255,.10)!important;
}
html[data-theme="dark"] .create-detail-page input:not([type="radio"]):not([type="checkbox"]),
html[data-theme="dark"] .create-detail-page textarea,
html[data-theme="dark"] .create-detail-page select,
html.theme-dark .create-detail-page input:not([type="radio"]):not([type="checkbox"]),
html.theme-dark .create-detail-page textarea,
html.theme-dark .create-detail-page select{
  background:#0d1521!important;
  color:#f8fafc!important;
  border-color:rgba(255,255,255,.16)!important;
}
html[data-theme="dark"] .create-detail-page input::placeholder,
html[data-theme="dark"] .create-detail-page textarea::placeholder,
html.theme-dark .create-detail-page input::placeholder,
html.theme-dark .create-detail-page textarea::placeholder{
  color:#94a3b8!important;
  opacity:1;
}
html[data-theme="dark"] .access-option > span,
html.theme-dark .access-option > span{
  background:#0d1521;
  border-color:rgba(255,255,255,.14);
}
html[data-theme="dark"] .access-option input:checked + span,
html.theme-dark .access-option input:checked + span{
  background:
    linear-gradient(
      135deg,
      rgba(96,165,250,.10),
      rgba(167,139,250,.07)
    );
  border-color:#60a5fa;
}
html[data-theme="dark"] .switch-row,
html.theme-dark .switch-row{
  background:#0d1521;
  border-color:rgba(255,255,255,.14);
}
html[data-theme="dark"] .price-box,
html.theme-dark .price-box{
  background:
    linear-gradient(
      135deg,
      rgba(96,165,250,.07),
      rgba(167,139,250,.04)
    );
  border-color:rgba(96,165,250,.18);
}
html[data-theme="dark"] .create-result,
html.theme-dark .create-result{
  background:rgba(52,211,153,.07);
  border-color:rgba(52,211,153,.22);
}
html[data-theme="dark"] .create-actions,
html.theme-dark .create-actions{
  border-top-color:rgba(255,255,255,.10);
}
html[data-theme="dark"] .create-actions .btn.secondary,
html.theme-dark .create-actions .btn.secondary{
  background:#101722;
  color:#f8fafc;
  border-color:rgba(255,255,255,.16);
}
html[data-theme="dark"] .create-actions .btn.secondary:hover,
html.theme-dark .create-actions .btn.secondary:hover{
  background:#151e2b;
}
html[data-theme="dark"] .inline-status,
html.theme-dark .inline-status{
  background:rgba(251,191,36,.09);
  color:#fbbf24;
}
html[data-theme="dark"] .selected-bot,
html.theme-dark .selected-bot{
  color:#94a3b8;
}
html[data-theme="dark"] .selected-bot b,
html.theme-dark .selected-bot b{
  color:#60a5fa;
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1000px){
  .grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:700px){
  .create-detail-page .create-detail{
    width:calc(100% - 22px);
    padding:22px 0 48px;
  }
  .create-card{
    padding:20px;
    border-radius:18px;
  }
  .detail-icon{
    width:46px;
    height:46px;
    flex-basis:46px;
  }
  .detail-title h1{
    font-size:27px;
  }
  .detail-title p{
    font-size:12.5px;
  }
}
@media(max-width:520px){
  .container,
  .page-container,
  .main-container,
  .content-container{
    width:calc(100% - 20px);
  }
  .create-detail-page .create-detail{
    width:calc(100% - 16px);
    padding-top:17px;
  }
  .create-card{
    padding:16px 13px;
  }
  .detail-title{
    gap:10px;
  }
  .detail-icon{
    width:42px;
    height:42px;
    flex-basis:42px;
    border-radius:12px;
  }
  .detail-icon i{
    font-size:17px;
  }
  .detail-title h1{
    font-size:23px;
  }
  .detail-title p{
    font-size:11.5px;
  }
  .field{
    margin-bottom:17px;
  }
  .create-detail-page input:not([type="radio"]):not([type="checkbox"]),
  .create-detail-page select{
    height:45px;
    font-size:13px;
  }
  .create-detail-page textarea{
    font-size:12.5px;
  }
  .create-detail-page #content{
    min-height:225px;
    font-size:11.5px;
  }
  .access-grid{
    gap:7px;
  }
  .access-option > span{
    min-height:65px;
    padding:11px;
  }
  .access-option b{
    font-size:12.5px;
  }
  .access-option small{
    font-size:10.5px;
  }
  .create-actions{
    flex-direction:column-reverse;
    align-items:stretch;
  }
  .create-actions .btn{
    width:100%;
    min-height:46px;
  }
  .result-actions{
    flex-direction:column;
  }
  .result-actions .btn{
    width:100%;
  }
}
@media(max-width:360px){
  .access-grid{
    grid-template-columns:1fr;
  }
  .detail-title h1{
    font-size:21px;
  }
  .create-card{
    padding:14px 11px;
  }
}
/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}
@media(hover:none){
  .btn:hover,
  .button:hover{
    transform:none;
  }
  .access-option:hover > span{
    transform:none;
  }
}