/* ==========================================================================
   DPRATAN USER APP - 100% EXACT LANDING PAGE DESIGN TOKENS
   Source of Truth: index.html & css/style.css
   ========================================================================== */

:root {
  --landing-bg: #fc9;                    /* #ffcc99 - Body Background */
  --landing-card: #fc9;                  /* Main Card Container */
  --landing-card-inner: #fff;            /* Inner Card Surface */
  --landing-card-soft: #fff8f0;          /* Soft Peach Surface */
  --landing-border: #ff0016;            /* Primary Red Border */
  --landing-border-inner: #ff182c;      /* Inner Card Border */
  --landing-heading-bg: #ff00a2;        /* Hot Pink Section Heading */
  --landing-heading-text: #fff8f8;      /* Heading Text */
  --landing-primary-btn: #522f92;       /* Deep Purple Primary Button */
  --landing-pink-btn: #ff00a2;          /* Pink Action Button */
  --landing-green-btn: #008906;         /* Green Chart/Success Button */
  --landing-yellow-badge: #ffff00;      /* Yellow Badge */
  --landing-text-dark: #00094d;         /* Dark Navy Text */
  --landing-text-main: #000000;         /* Pure Black Main Text */
  --landing-text-result: #880e4f;       /* Deep Maroon Result Text */
  --landing-radius: 12px;               /* .75em Card Radius */
  --landing-radius-inner: 10px;         /* Inner Card Radius */
  --landing-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4);
  --landing-font: Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body.dpratan-user-app {
  width: 100%;
  max-width: 100vw;
  margin: 0 !important;
  padding: 3px 6px 78px !important;
  overflow-x: hidden !important;
  background-color: var(--landing-bg) !important;
  color: var(--landing-text-main) !important;
  font-family: var(--landing-font) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  text-align: center !important;
  -webkit-text-size-adjust: 100%;
}

body.dpratan-user-app a {
  color: #0013a5;
  text-decoration: none;
}

body.dpratan-user-app img {
  max-width: 100%;
  height: auto;
}

/* App Shell Header - Matches .m-icon / .brand-header-box */
#dprUserShellHeader {
  position: sticky;
  top: 0;
  z-index: 900;
  width: 100%;
  padding: 4px 0 6px;
  background: var(--landing-bg);
}

.dpr-shell-brand {
  max-width: 980px;
  margin: 0 auto;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--landing-card);
  border: 3px solid var(--landing-border);
  border-radius: var(--landing-radius);
  box-shadow: var(--landing-shadow);
}

.dpr-brand-mark {
  min-width: 44px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #00094d;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  font-style: italic;
  border: 2px solid #fff;
}

.dpr-brand-copy {
  min-width: 0;
  flex: 1;
  text-align: left;
}

.dpr-brand-name {
  display: block;
  margin: 0;
  color: var(--landing-text-dark);
  font-size: 20px;
  line-height: 1.05;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.5px;
  text-shadow: 1px 1px 2px #fff;
}

.dpr-brand-sub {
  display: block;
  margin-top: 2px;
  color: #000;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  font-style: normal;
}

.dpr-home-link {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  text-decoration: none;
  background: var(--landing-pink-btn);
  color: #fff !important;
  border: 1px solid #fff;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
}

/* Main Container Layout */
body.dpratan-user-app main,
body.dpratan-user-app .container,
body.dpratan-user-app .wrapper,
body.dpratan-user-app .page,
body.dpratan-user-app .page-wrap,
body.dpratan-user-app .content,
body.dpratan-user-app .app-container,
body.dpratan-user-app .user-container,
body.dpratan-user-app .dashboard-container {
  width: calc(100% - 8px) !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Surface Cards - Matches .market-row / .text2 / .liv-rslt */
body.dpratan-user-app :is(
  .card, .panel, .box, .widget, .section-card, .form-card, .auth-card,
  .market-card, .prediction-card, .history-card, .profile-card,
  .leaderboard-card, .stat-card, .notice-card, .result-card, .content-card
) {
  background: var(--landing-card-inner) !important;
  border: 2px solid var(--landing-border-inner) !important;
  border-style: outset !important;
  border-radius: var(--landing-radius-inner) !important;
  box-shadow: var(--landing-shadow) !important;
  color: var(--landing-text-main) !important;
  padding: 10px !important;
  margin-bottom: 6px !important;
}

/* Section Headings - Matches .sm-ttle / .f-pti h3 */
body.dpratan-user-app :is(h1, h2, h3).section-title,
body.dpratan-user-app .section-title,
body.dpratan-user-app .card-title,
body.dpratan-user-app .panel-title,
body.dpratan-user-app .page-title,
body.dpratan-user-app .heading {
  margin: 3px 0 6px !important;
  padding: 6px 10px !important;
  border-radius: var(--landing-radius) !important;
  background: var(--landing-heading-bg) !important;
  color: var(--landing-heading-text) !important;
  border: 2px solid #fff !important;
  text-align: center !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  font-style: italic !important;
  text-shadow: 1px 1px 2px #000 !important;
  letter-spacing: 1px !important;
}

body.dpratan-user-app h1,
body.dpratan-user-app h2,
body.dpratan-user-app h3,
body.dpratan-user-app h4 {
  overflow-wrap: anywhere;
}

/* Form Controls - Responsive & Fit */
body.dpratan-user-app form {
  width: 100%;
  max-width: 100%;
}

body.dpratan-user-app label {
  display: block;
  margin: 6px 0 3px;
  color: var(--landing-text-dark) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-align: left;
  font-style: normal;
}

body.dpratan-user-app input:not([type="checkbox"]):not([type="radio"]),
body.dpratan-user-app select,
body.dpratan-user-app textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 42px !important;
  padding: 8px 10px !important;
  border: 2px solid var(--landing-border-inner) !important;
  border-radius: 8px !important;
  outline: none !important;
  background: #fff8f0 !important;
  color: #000 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

/* Buttons - Matches .clk1-rld / .gm-clk */
body.dpratan-user-app button,
body.dpratan-user-app .btn,
body.dpratan-user-app a.btn,
body.dpratan-user-app input[type="submit"] {
  min-height: 40px !important;
  padding: 8px 14px !important;
  border: 1px solid #e6e6e6 !important;
  border-radius: 8px !important;
  background: var(--landing-primary-btn) !important;
  color: #fff !important;
  text-decoration: none !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  font-style: normal !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.dpratan-user-app button:hover,
body.dpratan-user-app .btn:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4) !important;
}

body.dpratan-user-app .btn-danger,
body.dpratan-user-app .danger,
body.dpratan-user-app [data-action="logout"] {
  background: #ff0016 !important;
}

body.dpratan-user-app .btn-success,
body.dpratan-user-app .success {
  background: var(--landing-green-btn) !important;
}

body.dpratan-user-app .btn-secondary,
body.dpratan-user-app .secondary {
  background: var(--landing-pink-btn) !important;
}

/* Tables - Matches table.my-table */
.dpr-table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 2px solid var(--landing-border-inner);
  border-radius: 10px;
  background: #fff;
  margin: 6px 0;
}

body.dpratan-user-app table {
  width: 100% !important;
  min-width: 550px;
  border-collapse: collapse !important;
  background: #fff !important;
  color: #000 !important;
}

body.dpratan-user-app th {
  padding: 8px 6px !important;
  background: var(--landing-heading-bg) !important;
  color: #fff !important;
  border: 1px solid var(--landing-border) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

body.dpratan-user-app td {
  padding: 8px 6px !important;
  border: 1px solid var(--landing-border) !important;
  color: #000 !important;
  font-size: 13px !important;
  vertical-align: middle !important;
  font-weight: 700 !important;
}

/* Bottom Navigation Bar - Matches Landing Page Theme */
#dprUserBottomNav {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 950;
  width: min(100%, 520px);
  padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
  background: rgba(255, 204, 153, 0.95);
  border-top: 2px solid var(--landing-border);
}

.dpr-bottom-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--landing-card);
  border: 2px solid var(--landing-border);
  border-radius: 10px;
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.2);
}

.dpr-nav-link {
  min-width: 0;
  min-height: 44px;
  padding: 4px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 6px;
  color: #000 !important;
  text-decoration: none !important;
  font-size: 9.5px;
  line-height: 1.05;
  font-weight: 800;
  font-style: normal;
  text-align: center;
}

.dpr-nav-link .ico {
  font-size: 16px;
  line-height: 1;
}

.dpr-nav-link.active {
  background: var(--landing-pink-btn);
  color: #fff !important;
}

.dpr-freeplay-note {
  width: calc(100% - 8px);
  max-width: 980px;
  margin: 4px auto 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #fff8e1;
  border: 2px solid #f0c36d;
  color: #222;
  font-size: 11px;
  font-weight: 800;
  font-style: normal;
  text-align: center;
}

/* Mobile Breakpoints (320px - 768px) */
@media (max-width: 768px) {
  body.dpratan-user-app {
    padding-bottom: 74px !important;
  }
  
  body.dpratan-user-app main,
  body.dpratan-user-app .container,
  body.dpratan-user-app .wrapper,
  body.dpratan-user-app .page,
  body.dpratan-user-app .page-wrap,
  body.dpratan-user-app .content,
  body.dpratan-user-app .app-container,
  body.dpratan-user-app .user-container,
  body.dpratan-user-app .dashboard-container {
    width: calc(100% - 6px) !important;
    max-width: 390px !important;
    margin: 0 auto !important;
  }
}