/* ============================================================
   Stylish Text Generator Pro v3.2 — Complete Stylesheet
   Brand Colors: #004129 (green 70%), #ddaa28 (yellow 20%), #fefefe (white 10%)
   Mobile-first | Cross-browser | All devices | RTL ready
   ============================================================ */

/* ── Variables ── */
:root {
  --sg-primary:      #004129;
  --sg-primary-dk:   #002d1c;
  --sg-primary-lt:   #005835;
  --sg-secondary:    #ddaa28;
  --sg-secondary-dk: #c49520;
  --sg-secondary-lt: #f0c040;
  --sg-accent:       #ddaa28;
  --sg-accent-dk:    #c49520;
  --sg-bg:           #f5f9f5;
  --sg-surface:      #fefefe;
  --sg-surface2:     #f0f7f2;
  --sg-border:       #c8ddd0;
  --sg-text:         #1a2e22;
  --sg-muted:        #5a7a65;
  --sg-success:      #004129;
  --sg-r:            12px;
  --sg-r-sm:         8px;
  --sg-shadow:       0 2px 16px rgba(0,65,41,.10);
  --sg-shadow-md:    0 4px 28px rgba(0,65,41,.14);
  --sg-shadow-lg:    0 8px 48px rgba(0,65,41,.18);
  --sg-font:         'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --sg-t:            .18s ease;
  --sg-input-bg:     #fefefe;
  --sg-input-text:   #1a2e22;
  --sg-input-border: #b0ccba;
  --sg-input-focus:  #004129;
  --sg-input-ph:     #7a9e89;
}

.sg-wrap *, .sg-all *, .sg-arabic-kb-wrap * {
  box-sizing: border-box; margin: 0; padding: 0;
}

.sg-wrap, .sg-all, .sg-arabic-kb-wrap {
  font-family: var(--sg-font);
  color: var(--sg-text);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  direction: rtl;
  text-align: right;
  unicode-bidi: embed;
}

.sg-wrap {
  background: var(--sg-surface);
  border-radius: var(--sg-r);
  box-shadow: var(--sg-shadow);
  padding: 1.5rem 1.25rem;
  margin-bottom: 1.5rem;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--sg-border);
}

.sg-hd { margin-bottom: 1rem; }
.sg-title {
  font-size: 1.25rem; font-weight: 700;
  background: linear-gradient(135deg, var(--sg-primary), var(--sg-secondary));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.sg-sub { font-size: .85rem; color: var(--sg-muted); margin-top: .25rem; }

/* ── Tab bar ── */
.sg-mt-tabbar-outer { position: relative; overflow: hidden; margin-bottom: .75rem; }
.sg-mt-tabbar {
  display: flex; gap: .35rem;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--sg-primary) transparent;
  padding-bottom: 6px; padding-top: 2px;
}
.sg-mt-tabbar::-webkit-scrollbar { height: 4px; }
.sg-mt-tabbar::-webkit-scrollbar-track { background: transparent; }
.sg-mt-tabbar::-webkit-scrollbar-thumb { background: var(--sg-primary); border-radius: 4px; }

.sg-mt-tab {
  flex-shrink: 0; scroll-snap-align: start;
  background: var(--sg-surface2);
  border: 1.5px solid var(--sg-border);
  border-radius: 20px; padding: .35rem .85rem;
  font-size: .82rem; font-weight: 600; color: var(--sg-muted);
  cursor: pointer; white-space: nowrap;
  transition: background var(--sg-t), color var(--sg-t), border-color var(--sg-t);
  line-height: 1.4;
}
.sg-mt-tab:hover { background: rgba(0,65,41,.10); color: var(--sg-primary); border-color: var(--sg-primary); }
.sg-mt-tab.sg-mt-active { background: var(--sg-primary); color: #fff; border-color: var(--sg-primary); box-shadow: 0 2px 8px rgba(0,65,41,.30); }
.sg-mt-tab:focus-visible { outline: 2px solid var(--sg-primary); outline-offset: 2px; }

.sg-mt-panes { margin-bottom: .75rem; }
.sg-mt-pane  { display: none; }
.sg-mt-pane:first-child { display: block; }

/* ── Presets ── */
.sg-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; }
.sg-preset {
  background: var(--sg-surface2); border: 1.5px solid var(--sg-border);
  border-radius: var(--sg-r-sm); padding: .3rem .7rem;
  font-size: .82rem; font-weight: 500; color: var(--sg-text);
  cursor: pointer; transition: background var(--sg-t), border-color var(--sg-t), color var(--sg-t), transform var(--sg-t);
}
.sg-preset:hover { border-color: var(--sg-primary); color: #fff; background: var(--sg-primary); }
.sg-preset:active { transform: scale(.97); }
.sg-preset:focus-visible { outline: 2px solid var(--sg-primary); outline-offset: 2px; }

/* ── Input / Textarea — LIGHT BG ── */
.sg-input-row { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: 1rem; }
.sg-textarea-row { align-items: flex-start; }

.sg-input, .sg-textarea {
  flex: 1;
  border: 2px solid var(--sg-input-border);
  border-radius: var(--sg-r);
  padding: .75rem 1.1rem;
  font-size: 1rem; font-family: var(--sg-font);
  background: var(--sg-input-bg) !important;
  color: var(--sg-input-text) !important;
  -webkit-text-fill-color: var(--sg-input-text) !important;
  outline: none; appearance: none; -webkit-appearance: none;
  min-width: 0; caret-color: var(--sg-primary);
  transition: border-color var(--sg-t), box-shadow var(--sg-t);
}
.sg-textarea { resize: vertical; min-height: 60px; overflow-y: hidden; line-height: 1.6; }

.sg-input:focus, .sg-input:active, .sg-input:not(:placeholder-shown),
.sg-textarea:focus, .sg-textarea:active, .sg-textarea:not(:placeholder-shown) {
  background: var(--sg-input-bg) !important;
  color: var(--sg-input-text) !important;
  -webkit-text-fill-color: var(--sg-input-text) !important;
  border-color: var(--sg-input-focus);
  box-shadow: 0 0 0 3px rgba(0,65,41,.18);
}
.sg-input::placeholder, .sg-textarea::placeholder { color: var(--sg-input-ph) !important; opacity: 1; }
.sg-input:-webkit-autofill, .sg-input:-webkit-autofill:focus,
.sg-input:-webkit-autofill:hover, .sg-input:-webkit-autofill:active,
.sg-textarea:-webkit-autofill, .sg-textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sg-input-text) !important;
  box-shadow: 0 0 0 40px var(--sg-input-bg) inset !important;
  caret-color: var(--sg-primary);
}

/* ── Clear button — FIXED HEIGHT (does not grow with textarea) ── */
.sg-clear {
  background: var(--sg-surface2);
  border: 1.5px solid var(--sg-border);
  border-radius: var(--sg-r-sm);
  width: 40px; min-width: 40px;
  height: 44px; min-height: 44px; max-height: 44px;
  flex-shrink: 0; align-self: flex-start;
  font-size: .95rem; cursor: pointer; color: var(--sg-muted);
  margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--sg-t), color var(--sg-t), border-color var(--sg-t);
  padding: 0; line-height: 1;
}
.sg-clear:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
.sg-clear:active { transform: scale(.96); }
.sg-clear:focus-visible { outline: 2px solid var(--sg-primary); outline-offset: 2px; }

/* ── Preview ── */
.sg-preview {
  background: linear-gradient(135deg, #edf7ee 0%, #fef9e7 100%);
  border: 1.5px solid var(--sg-border);
  border-radius: var(--sg-r);
  padding: .85rem 1.1rem; font-size: 1.1rem;
  min-height: 52px; word-break: break-all; color: var(--sg-text);
  margin-bottom: 1rem; transition: border-color var(--sg-t);
}
.sg-ph { color: var(--sg-muted); font-style: italic; }

/* ── Result grid & cards ── */
.sg-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .65rem; max-height: 600px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--sg-primary) transparent;
}
.sg-grid::-webkit-scrollbar { width: 5px; }
.sg-grid::-webkit-scrollbar-track { background: transparent; }
.sg-grid::-webkit-scrollbar-thumb { background: var(--sg-primary); border-radius: 4px; }

.sg-card {
  background: var(--sg-surface); border: 1.5px solid var(--sg-border);
  border-radius: var(--sg-r); padding: .75rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  transition: border-color var(--sg-t), box-shadow var(--sg-t);
}
.sg-card:hover { border-color: var(--sg-primary); box-shadow: 0 2px 12px rgba(0,65,41,.12); }
.sg-card-info { flex: 1; min-width: 0; }
.sg-card-lbl {
  font-size: .72rem; font-weight: 600; color: var(--sg-muted);
  display: block; margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .03em;
}
.sg-card-txt { font-size: 1rem; word-break: break-all; color: var(--sg-text); line-height: 1.5; }

.sg-copy {
  background: var(--sg-primary); color: #fff; border: none;
  border-radius: var(--sg-r-sm); padding: .35rem .75rem;
  font-size: .8rem; font-weight: 600; cursor: pointer;
  flex-shrink: 0; transition: background var(--sg-t), transform var(--sg-t); white-space: nowrap;
}
.sg-copy:hover    { background: var(--sg-primary-dk); }
.sg-copy:active   { transform: scale(.96); }
.sg-copy.sg-copied { background: var(--sg-secondary); color: var(--sg-primary); }

/* ── All-tools tabs ── */
.sg-all {
  background: var(--sg-surface); border-radius: var(--sg-r);
  box-shadow: var(--sg-shadow-md); overflow: hidden;
  border: 1px solid var(--sg-border); margin-bottom: 1.5rem;
}
.sg-tabs-outer {
  overflow-x: auto; border-bottom: 2px solid var(--sg-border);
  scrollbar-width: thin; scrollbar-color: var(--sg-primary) transparent;
}
.sg-tabs-outer::-webkit-scrollbar { height: 4px; }
.sg-tabs-outer::-webkit-scrollbar-thumb { background: var(--sg-primary); border-radius: 4px; }
.sg-tabs { display: flex; gap: 0; min-width: max-content; }
.sg-tb {
  background: transparent; border: none; border-bottom: 3px solid transparent;
  padding: .65rem 1rem; font-size: .82rem; font-weight: 600;
  cursor: pointer; color: var(--sg-muted); white-space: nowrap;
  transition: color var(--sg-t), border-color var(--sg-t), background var(--sg-t);
}
.sg-tb:hover  { color: var(--sg-primary); background: rgba(0,65,41,.06); }
.sg-tb.active { color: var(--sg-primary); border-bottom-color: var(--sg-primary); background: rgba(0,65,41,.04); }
.sg-tb:focus-visible { outline: 2px solid var(--sg-primary); outline-offset: -2px; }
.sg-panels { padding: 1.25rem; }
.sg-panel { display: none; }
.sg-panel.active { display: block; }

/* ── Symbols picker ── */
.sg-scats { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.sg-scat {
  background: var(--sg-surface2); border: 1.5px solid var(--sg-border);
  border-radius: 20px; padding: .3rem .75rem;
  font-size: .8rem; font-weight: 600; cursor: pointer; color: var(--sg-muted);
  transition: background var(--sg-t), color var(--sg-t), border-color var(--sg-t);
}
.sg-scat.active, .sg-scat:hover { background: var(--sg-primary); color: #fff; border-color: var(--sg-primary); }
.sg-scat:focus-visible { outline: 2px solid var(--sg-primary); outline-offset: 2px; }
.sg-spanel { display: none; flex-wrap: wrap; gap: .3rem; margin-bottom: .75rem; }
.sg-spanel.active { display: flex; }
.sg-sym {
  background: var(--sg-surface2); border: 1.5px solid var(--sg-border);
  border-radius: var(--sg-r-sm); padding: .3rem .5rem;
  font-size: 1.1rem; cursor: pointer; min-width: 36px; text-align: center;
  transition: background var(--sg-t), transform var(--sg-t), border-color var(--sg-t); color: var(--sg-text);
}
.sg-sym:hover  { background: var(--sg-primary); color: #fff; border-color: var(--sg-primary); transform: scale(1.08); }
.sg-sym:active { transform: scale(.95); }

/* ── Names grid ── */
.sg-ngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.sg-ncard {
  background: var(--sg-surface2); border: 1.5px solid var(--sg-border);
  border-radius: var(--sg-r-sm); padding: .5rem .6rem;
  font-size: .85rem; font-weight: 500; text-align: center;
  cursor: pointer; color: var(--sg-text);
  transition: background var(--sg-t), border-color var(--sg-t), color var(--sg-t), transform var(--sg-t);
}
.sg-ncard:hover { background: var(--sg-primary); color: #fff; border-color: var(--sg-primary); }
.sg-ncard:active { transform: scale(.97); }

/* ── Arabic keyboard ── */
.sg-arabic-kb-wrap {
  background: var(--sg-surface); border-radius: var(--sg-r);
  box-shadow: var(--sg-shadow-md); padding: 1.25rem 1rem 1rem;
  max-width: 100%; direction: rtl; margin-bottom: 1.5rem;
  border: 1px solid var(--sg-border);
}
.sg-akb-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; direction: ltr; }
.sg-akb-btn {
  background: var(--sg-primary); color: #fff; border: none;
  border-radius: var(--sg-r-sm); padding: .4rem .85rem;
  font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: background var(--sg-t), transform var(--sg-t);
}
.sg-akb-btn:hover  { background: var(--sg-primary-dk); }
.sg-akb-btn:active { transform: scale(.97); }
.sg-akb-btn:focus-visible { outline: 2px solid var(--sg-secondary); outline-offset: 2px; }
.sg-akb-btn.sg-akb-clear  { background: #c0392b; }
.sg-akb-btn.sg-akb-clear:hover { background: #a93226; }
.sg-akb-btn.sg-akb-survey { background: var(--sg-secondary); color: var(--sg-primary); }
.sg-akb-btn.sg-akb-survey:hover { background: var(--sg-secondary-dk); }
.sg-akb-btn.sg-akb-copy { background: var(--sg-secondary); color: var(--sg-primary); font-weight: 700; }
.sg-akb-btn.sg-akb-copy:hover { background: var(--sg-secondary-dk); }

.sg-akb-input-row { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .85rem; }
.sg-akb-input {
  flex: 1; width: 100%;
  border: 2px solid var(--sg-input-border); border-radius: var(--sg-r);
  padding: .65rem 1rem; font-size: 1rem;
  font-family: 'Arial', 'Amiri', 'Noto Naskh Arabic', var(--sg-font);
  direction: rtl; text-align: right;
  background: var(--sg-input-bg) !important;
  color: var(--sg-input-text) !important;
  -webkit-text-fill-color: var(--sg-input-text) !important;
  outline: none; resize: vertical; min-height: 56px;
  caret-color: var(--sg-primary);
  transition: border-color var(--sg-t), box-shadow var(--sg-t);
}
.sg-akb-input:focus, .sg-akb-input:active, .sg-akb-input:not(:placeholder-shown) {
  border-color: var(--sg-input-focus);
  box-shadow: 0 0 0 3px rgba(0,65,41,.18);
  background: var(--sg-input-bg) !important;
  color: var(--sg-input-text) !important;
  -webkit-text-fill-color: var(--sg-input-text) !important;
}
.sg-akb-input::placeholder { color: var(--sg-input-ph) !important; opacity: 1; }
.sg-akb-input:-webkit-autofill, .sg-akb-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sg-input-text) !important;
  box-shadow: 0 0 0 40px var(--sg-input-bg) inset !important;
}

.sg-akb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: .3rem; direction: rtl; }
.sg-akb-key {
  background: var(--sg-surface2); border: 1.5px solid var(--sg-border);
  border-radius: var(--sg-r-sm); padding: .35rem .25rem; font-size: .85rem;
  text-align: center; cursor: pointer;
  transition: background var(--sg-t), border-color var(--sg-t), transform var(--sg-t), color var(--sg-t);
  color: var(--sg-text); min-height: 40px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1.2; word-break: break-all;
  font-family: 'Arial', 'Amiri', 'Noto Naskh Arabic', sans-serif;
  overflow: hidden; white-space: nowrap;
}
.sg-akb-key:hover { background: var(--sg-primary); color: #fff; border-color: var(--sg-primary); transform: scale(1.06); }
.sg-akb-key:active { transform: scale(.95); }
.sg-akb-key:focus-visible { outline: 2px solid var(--sg-primary); outline-offset: 2px; }
.sg-akb-key--bs, .sg-akb-key--space {
  background: #fff8e1; color: var(--sg-primary); border-color: var(--sg-secondary); font-weight: 700; font-size: .75rem;
}
.sg-akb-key--bs:hover, .sg-akb-key--space:hover {
  background: var(--sg-secondary); border-color: var(--sg-secondary-dk); color: var(--sg-primary); transform: scale(1.04);
}
.sg-akb-footer { margin-top: .75rem; font-size: .78rem; color: var(--sg-muted); text-align: center; direction: ltr; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .sg-wrap   { padding: 1rem .85rem; }
  .sg-panels { padding: .85rem .65rem; }
  .sg-title  { font-size: 1.05rem; }
  .sg-mt-tab { padding: .3rem .65rem; font-size: .78rem; }
  .sg-grid   { grid-template-columns: 1fr; max-height: 400px; }
  .sg-ngrid  { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .sg-input, .sg-textarea { padding: .6rem .85rem; font-size: .95rem; }
  .sg-akb-grid  { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: .25rem; }
  .sg-akb-key   { min-height: 36px; font-size: .78rem; }
  .sg-akb-actions { gap: .35rem; }
  .sg-akb-btn  { padding: .35rem .65rem; font-size: .78rem; }
}
@media (max-width: 380px) {
  .sg-akb-grid { grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
  .sg-akb-key  { min-height: 32px; font-size: .72rem; padding: .25rem .15rem; }
}

/* ── Animations ── */
.sg-card { animation: sg-fade-in .2s ease both; }
@keyframes sg-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }