/* ============================================================
   Aujunpeak — Form Controls Fix v1
   Stable rounded fields, neutral borders, no forced green focus.
   Loaded after the polish/motion layers so legacy page CSS cannot
   re-introduce square inner borders or green focus rings.
   ============================================================ */

:root {
  --field-bg: #121314;
  --field-bg-hover: #151619;
  --field-border: rgba(255,255,255,.095);
  --field-border-hover: rgba(255,255,255,.16);
  --field-focus: 139, 125, 210;
  --field-radius: 12px;
  --field-ring: 0 0 0 3px rgba(var(--field-focus), .105);
}

/* Standalone editable controls. Keep non-text controls untouched. */
body :is(
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  input[type="month"],
  input[type="week"],
  input:not([type]),
  select,
  textarea
) {
  border-radius: var(--field-radius) !important;
  border: 1px solid var(--field-border) !important;
  background: var(--field-bg) !important;
  color: #f0f2f8;
  outline: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  background-clip: padding-box !important;
  transition:
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease !important;
}

@media (hover:hover) and (pointer:fine) {
  body :is(
    input[type="text"], input[type="password"], input[type="email"],
    input[type="tel"], input[type="number"], input[type="search"],
    input[type="url"], input[type="date"], input[type="datetime-local"],
    input[type="time"], input[type="month"], input[type="week"], input:not([type]),
    select, textarea
  ):hover:not(:disabled):not(:focus) {
    border-color: var(--field-border-hover) !important;
    background: var(--field-bg-hover) !important;
  }
}

body :is(
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  input[type="month"],
  input[type="week"],
  input:not([type]),
  select,
  textarea
):focus {
  border-color: rgba(var(--field-focus), .52) !important;
  background: #141519 !important;
  box-shadow: var(--field-ring) !important;
  outline: none !important;
}

body :is(
  input[type="text"], input[type="password"], input[type="email"],
  input[type="tel"], input[type="number"], input[type="search"],
  input[type="url"], input:not([type]), textarea
)::placeholder {
  color: rgba(224,226,236,.32) !important;
  opacity: 1 !important;
}

/* Shell-style fields: the rounded shell owns the border; its real input is
   deliberately borderless. This fixes the square rectangle visible inside
   icon fields such as Top up -> custom amount. */
body :is(
  .topup-input-wrap,
  .auth-input-wrap,
  .tc-input-group,
  .topbar-search-wrap,
  .blog-search-wrap,
  .adm-search-wrap,
  .ao-search-wrap,
  .ct-picker-search,
  .ac-input-line,
  .blog-comment-editor
) {
  border-radius: var(--field-radius) !important;
  border: 1px solid var(--field-border) !important;
  background: var(--field-bg) !important;
  background-image: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  overflow: hidden;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
}

body :is(
  .topup-input-wrap,
  .auth-input-wrap,
  .tc-input-group,
  .topbar-search-wrap,
  .blog-search-wrap,
  .adm-search-wrap,
  .ao-search-wrap,
  .ct-picker-search,
  .ac-input-line,
  .blog-comment-editor
):focus-within {
  border-color: rgba(var(--field-focus), .52) !important;
  background: #141519 !important;
  background-image: none !important;
  box-shadow: var(--field-ring) !important;
}

/* Never draw a second rectangular border inside a field shell. */
body :is(
  .topup-input-wrap,
  .auth-input-wrap,
  .tc-input-group,
  .topbar-search-wrap,
  .blog-search-wrap,
  .adm-search-wrap,
  .ao-search-wrap,
  .ct-picker-search,
  .ac-input-line,
  .blog-comment-editor
) :is(
  input[type="text"], input[type="password"], input[type="email"],
  input[type="tel"], input[type="number"], input[type="search"],
  input[type="url"], input:not([type]), select, textarea
) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
}

body :is(
  .topup-input-wrap,
  .auth-input-wrap,
  .tc-input-group,
  .topbar-search-wrap,
  .blog-search-wrap,
  .adm-search-wrap,
  .ao-search-wrap,
  .ct-picker-search,
  .ac-input-line,
  .blog-comment-editor
) :is(input, select, textarea):focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Specific top-up repair: old inline/page rules used green focus and forced
   the inner .topup-input to a square border. The shell is now the only frame. */
#panel-bank .topup-input-wrap {
  border-radius: 14px !important;
  border: 1px solid var(--field-border) !important;
  background: #121314 !important;
  background-image: none !important;
  overflow: hidden !important;
}
#panel-bank .topup-input-wrap:focus-within {
  border-color: rgba(var(--field-focus), .52) !important;
  background: #141519 !important;
  box-shadow: var(--field-ring) !important;
}
#panel-bank .topup-input {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#panel-bank .topup-input:focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Motion layer may add its own field ring. Keep field styling owned here. */
body .fx-field-live:focus {
  border-color: rgba(var(--field-focus), .52) !important;
  box-shadow: var(--field-ring) !important;
}
body :is(
  .topup-input-wrap, .auth-input-wrap, .tc-input-group,
  .topbar-search-wrap, .blog-search-wrap, .adm-search-wrap,
  .ao-search-wrap, .ct-picker-search, .ac-input-line, .blog-comment-editor
) .fx-field-live:focus {
  border: 0 !important;
  box-shadow: none !important;
}

/* Light theme keeps the same rounded system without the dark fill. */
body.theme-light {
  --field-bg: #ffffff;
  --field-bg-hover: #f8f9fc;
  --field-border: rgba(40,44,60,.14);
  --field-border-hover: rgba(40,44,60,.24);
}
body.theme-light :is(
  input[type="text"], input[type="password"], input[type="email"],
  input[type="tel"], input[type="number"], input[type="search"],
  input[type="url"], input[type="date"], input[type="datetime-local"],
  input[type="time"], input[type="month"], input[type="week"], input:not([type]),
  select, textarea
):focus,
body.theme-light :is(
  .topup-input-wrap, .auth-input-wrap, .tc-input-group,
  .topbar-search-wrap, .blog-search-wrap
):focus-within {
  background: #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {
  body :is(input, select, textarea),
  body :is(.topup-input-wrap,.auth-input-wrap,.tc-input-group,.topbar-search-wrap,.blog-search-wrap,.adm-search-wrap,.ao-search-wrap,.ct-picker-search,.ac-input-line,.blog-comment-editor) {
    transition: none !important;
  }
}