/* Modern responsive styles - keep IDs/classes used by templates */
:root{
  --bg: #f6f8fa;
  --card: #ffffff;
  --muted: #6c757d;
  --text: #222831;
  --primary: #0d6efd; /* bootstrap-like blue */
  --accent: #28a745;
  --radius: 12px;
  --container-max: 900px;
}

html, body { height: 100%; }
body{
  margin:0;
  font-family: InterLocal, Inter, Roboto, "Helvetica Neue", Arial, system-ui, -apple-system, "Segoe UI";
  background-color: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Centered page container */
#content{
  width: 92%;
  max-width: 640px;
  margin: 28px auto;
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 10px 30px rgba(17,24,39,0.06);
  border: 1px solid rgba(17,24,39,0.04);
}

/* Card look used across pages */
.card, .uploadForm, .form-signin {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(17,24,39,0.06);
  border: 1px solid rgba(17,24,39,0.04);
}

/* Modern form styles */
.form-signin{
  width: 100%;
  padding: 28px;
  box-sizing: border-box;
}

.form-signin .form-control{
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid rgba(17,24,39,0.08);
  background: #fff;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.form-signin .form-control:focus{
  outline: none;
  box-shadow: 0 4px 12px rgba(13,110,253,0.08);
  border-color: rgba(13,110,253,0.6);
}

/* Primary buttons */
.btn-primary{
  display: inline-block;
  width: 100%;
  background: linear-gradient(90deg,var(--primary), #0056d6);
  color:#fff;
  border: none;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(13,110,253,0.12);
  transition: transform .08s ease, box-shadow .12s ease;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(13,110,253,0.14); }
.btn-lg{ padding: 12px 16px; font-size: 16px; }
.btn-success{ background: linear-gradient(90deg,var(--accent), #1e7e34); color:#fff; border-radius:10px; padding:12px; border:none; }
.btn-warning{ background:#ffc107; color:#222; border-radius:10px; padding:12px; border:none; }

.generation-preview{ position:relative; margin:0 0 1rem; min-height:180px; background:#eef2f7; border-radius:12px; overflow:hidden; }
.generation-preview img, .generation-preview video{ display:block; width:100%; max-height:420px; object-fit:contain; }
.generation-loader{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(17,24,39,.35); }
.generation-loader span{ width:48px; height:48px; border:5px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
.generation-error{ color:#b42318; }

/* PawLOL pet creator */
.pet-form{ position:relative; overflow:hidden; padding:0 30px 30px; border:0; border-radius:24px; background:#fff; box-shadow:0 18px 50px rgba(57,43,89,.12); }
.pet-form::before{ content:""; position:absolute; inset:0 0 auto; height:7px; background:linear-gradient(90deg,#ff9f68,#ff6f91,#8067e8); }
.pet-form-heading{ display:flex; align-items:center; gap:16px; margin:0 -30px 28px; padding:30px; background:linear-gradient(135deg,#fff5ec 0%,#fff 62%); }
.pet-form-badge{ display:grid; place-items:center; flex:0 0 62px; height:62px; border-radius:20px; background:#ff9f68; font-size:32px; transform:rotate(-8deg); box-shadow:0 9px 18px rgba(255,159,104,.28); }
.pet-form-kicker{ margin:0 0 2px; color:#e8754b; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.pet-form-heading h2{ margin:0; color:#30253e; font-size:clamp(1.45rem,3vw,2rem); font-weight:800; letter-spacing:-.03em; }
.pet-form-heading p:last-child{ margin:4px 0 0; color:#83798f; font-size:.94rem; }
.pet-form-sparkle{ align-self:flex-start; margin-left:auto; color:#8067e8; font-size:26px; transform:rotate(12deg); }
.pet-field-label{ display:block; margin-bottom:8px; color:#44394f; font-size:.86rem; font-weight:750; }
.pet-field-label small{ color:#9b91a4; font-weight:500; }
.pet-upload-zone{ display:flex; align-items:center; gap:14px; min-height:92px; margin-bottom:22px; padding:16px 18px; border:2px dashed #ffc29e; border-radius:17px; background:#fffaf6; color:#44394f; cursor:pointer; transition:border-color .2s,background .2s,transform .2s; }
.pet-upload-zone:hover,.pet-upload-zone:focus-within{ border-color:#ff8a63; background:#fff3e9; transform:translateY(-1px); }
.pet-upload-zone input{ position:absolute; width:1px; height:1px; opacity:0; }
.pet-upload-icon{ display:grid; place-items:center; flex:0 0 46px; height:46px; border-radius:14px; background:#ffe3d1; font-size:23px; }
.pet-upload-copy{ display:flex; flex:1; flex-direction:column; gap:3px; }
.pet-upload-copy strong{ font-size:.94rem; }
.pet-upload-copy small{ color:#9b91a4; font-size:.78rem; }
.pet-upload-arrow{ color:#f07b54; font-size:24px; }
.pet-field-group{ margin-bottom:2px; }
.pet-form .form-control{ min-height:45px; border:1px solid #e8e0ed; border-radius:12px; background:#fcfbfd; color:#44394f; transition:border-color .2s,box-shadow .2s,background .2s; }
.pet-form textarea.form-control{ min-height:92px; padding:12px 14px; resize:vertical; }
.pet-form .form-control:focus{ border-color:#9b87ec; background:#fff; box-shadow:0 0 0 4px rgba(128,103,232,.12); }
.pet-options-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pet-form .btn-primary{ margin-top:4px; border-radius:14px; background:linear-gradient(100deg,#8067e8,#ff6f91); box-shadow:0 10px 22px rgba(128,103,232,.23); }
.pet-form .btn-primary:hover{ box-shadow:0 13px 27px rgba(128,103,232,.3); }
.pet-form #status{ border-radius:10px; }
@media (max-width:575px){ .pet-form{ padding:0 18px 22px; border-radius:20px; } .pet-form-heading{ margin:0 -18px 22px; padding:26px 18px; } .pet-form-badge{ flex-basis:50px; height:50px; font-size:25px; } .pet-form-sparkle{ display:none; } .pet-options-grid{ grid-template-columns:1fr; gap:0; } }

/* Account card */
.account-card{ position:relative; overflow:hidden; padding:22px; border:0; border-radius:22px; background:linear-gradient(145deg,#fff9f4,#fff); box-shadow:0 14px 36px rgba(57,43,89,.1); }
.account-card::before{ content:""; position:absolute; top:0; right:0; width:110px; height:110px; border-radius:0 0 0 100%; background:rgba(255,159,104,.12); }
.account-card-heading{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.account-card-icon{ display:grid; place-items:center; width:43px; height:43px; border-radius:14px; background:#ffe3d1; font-size:21px; transform:rotate(-7deg); }
.account-card-kicker{ display:block; color:#e8754b; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.account-card h2{ margin:1px 0 0; color:#30253e; font-size:1.25rem; font-weight:800; }
.account-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.account-action{ display:flex; align-items:center; gap:9px; min-height:55px; margin:0; padding:9px 12px; border:0; border-radius:14px; background:linear-gradient(100deg,#8067e8,#9a78e8); box-shadow:0 8px 17px rgba(128,103,232,.18); font-size:.88rem; font-weight:700; text-align:left; }
.account-action:nth-child(2){ background:linear-gradient(100deg,#ff806f,#ff9b68); box-shadow:0 8px 17px rgba(255,128,111,.18); }
.account-action:hover{ transform:translateY(-2px); }
.account-action-icon{ display:grid; place-items:center; flex:0 0 31px; height:31px; border-radius:10px; background:rgba(255,255,255,.2); font-size:14px; }
.account-action-arrow{ margin-left:auto; opacity:.75; font-size:11px; }
.account-balance{ display:flex; align-items:center; gap:12px; width:max-content; max-width:100%; margin:18px auto 3px; padding:10px 17px 10px 10px; border:1px solid #f0dfd5; border-radius:15px; background:#fff; box-shadow:0 5px 14px rgba(57,43,89,.06); text-align:left; }
.account-balance-icon{ display:grid; place-items:center; width:35px; height:35px; border-radius:11px; background:#fff0d9; color:#ef9950; }
.account-balance small,.account-balance strong{ display:block; }
.account-balance small{ color:#9b91a4; font-size:.7rem; }
.account-balance strong{ color:#44394f; font-size:1.18rem; line-height:1.15; }
.account-balance em{ color:#9b91a4; font-size:.72rem; font-style:normal; font-weight:500; }
.account-settings{ display:flex; align-items:center; justify-content:space-between; margin-top:16px!important; padding:11px 14px; border:1px solid #e8e0ed; border-radius:12px; background:#fff; color:#6f647b; font-size:.86rem; }
.account-settings:hover{ border-color:#c8bced; background:#faf8ff; color:#584bd6; }
@media (max-width:575px){ .account-card{ padding:18px; } .account-actions{ grid-template-columns:1fr; } }

/* Subtitle & headings */
#top_title{ font-weight:700; font-size:22px; margin-bottom:6px; }
#sub_title{ color:var(--primary); font-weight:500; }

/* Utilities */
.longDescription{ max-width: 760px; margin: 0 auto; text-align: justify; color:var(--muted); }
.seoBreadcrumb{ margin: 0 0 18px; font-size: 0.95rem; text-align:left; color:var(--muted); }
.seoBreadcrumb a{ color:var(--primary); font-weight:600; }
.seoInternalLinking{ margin-top:28px; padding:20px; border:1px solid rgba(13,110,253,0.12); border-radius:16px; background:linear-gradient(180deg,#f8fbff,#ffffff); text-align:left; }
.seoInternalLinking h2{ margin-top:12px; color:#1f3f68; }
.seoInternalLinks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px 16px; padding-left:18px; }
.seoInternalLinks li{ margin-bottom:6px; }
.seoInternalLinks a{ color:var(--primary); font-weight:600; text-decoration:none; }
.seoInternalLinks a:hover{ text-decoration:underline; }

/* Chat / messages (adapted to new theme) */
.media-chat .media-body p{ padding: 10px 12px; background:#f1f5f9; color: #3b3f47; border-radius: 10px; }
.media-chat.media-chat-reverse .media-body p{ background: linear-gradient(90deg,var(--primary),#2fa6ff); color: #fff; }

/* Publisher */
.publisher{ display:flex; gap:8px; align-items:center; padding:12px; border-top:1px solid rgba(17,24,39,0.04); background:linear-gradient(180deg,#fff,#fbfdff); border-radius: 0 0 var(--radius) var(--radius); }
.publisher-input{ padding:10px 12px; border-radius:8px; border:1px solid rgba(17,24,39,0.06); flex:1; }
.publisher-btn{ background:transparent; border:none; color:var(--muted); cursor:pointer; }

/* Loading state */
#loading{ display:none; text-align:center; padding:36px; }

/* Full page loader */
#global-loader-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,20,36,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}
#global-loader{
  width:96px;
  height:96px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 30px rgba(0,0,0,0.2);
}
#global-loader .spinner{
  width:56px;
  height:56px;
  border-radius:50%;
  border:6px solid rgba(255,255,255,0.12);
  border-top-color:var(--primary);
  animation:spin 1s linear infinite;
}
@keyframes spin{ to { transform:rotate(360deg); } }

/* small visible text under spinner */
#global-loader .loader-text{ margin-top:10px; color: #fff; font-size:14px; text-align:center; }

/* Fade-in when content is revealed */
.content-fade {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .36s ease, transform .36s ease;
}
.content-fade.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Button micro-interaction for clicks */
.btn:active{ transform: translateY(0) scale(.995); transition: transform .06s ease; }

/* subtle hover for interactive icons */
.publisher-btn:hover, .publisher-btn:focus{ color: var(--primary); transform: translateY(-2px); }

/* ensure language links are consistent */
.languages-inline a{ padding:6px 8px; border-radius:8px; background:transparent; color:var(--muted); text-decoration:none; }
.languages-inline a:hover{ background: rgba(13,110,253,0.04); color: var(--primary); }

/* Responsive adjustments */
@media (max-width: 767px){
  #content{ padding: 18px 12px; }
  .form-signin{ padding: 18px; }
  #top_title{ font-size:18px; }
}

@media (min-width: 768px){
  #content{ margin: 40px auto; }
  .form-signin{ max-width:560px; margin: 0 auto; }
}

/* Keep legacy selectors compatible */
.uploadForm{ padding: 18px; }
.card-bordered{ border: 1px solid rgba(17,24,39,0.04); }
.card-title{ font-weight:600; font-size:18px; color:var(--text); padding: 12px 16px; }

/* Accessibility improvements */
input:focus, textarea:focus, button:focus{ box-shadow: 0 6px 18px rgba(13,110,253,0.08); }

/* Small screens: make language links wrap nicely */
.languages-inline{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }

/* keep legacy styles that other pages may depend on but supersede visual treatment */
.text-info { color: var(--primary) !important; }

/* Prefer a locally installed Inter font if present */
@font-face {
  font-family: 'InterLocal';
  src: url('../vendor/fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'InterLocal';
  src: url('../vendor/fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.workspace-legal{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px;padding-top:17px;border-top:1px solid #dde7f2;justify-content:center;}
.workspace-legal a{color:#526b89;text-decoration:none;font-size:.87rem;}
.workspace-legal a:hover{text-decoration:underline;}