/* CSS değişkenleri — tema React tarafından :root'a uygulanıyor.
   Buradaki varsayılanlar Modern Light temasına karşılık gelir. */
:root {
  --app-bg: #f5f6f8;
  --card-bg: #ffffff;
  --ink: #0f172a;
  --ink-2: #64748b;
  --line: #cbd5e1;
  --line-2: #e2e8f0;
  --btn-bg: #ffffff;
  --btn-border: #cbd5e1;
  --btn-ink: #0f172a;
  --accent: #0f172a;
  --radius: 16px;
  --font: system-ui, sans-serif;
  --font-ui: system-ui, sans-serif;
  --shadow: 0 1px 2px rgba(15, 23, 42, .06);
  --grid-line: dashed;
  --seed-radius: 10px;
  --card-blur: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-ui);
}

body {
  background: var(--app-bg);
  min-height: 100vh;
  overflow-x: hidden;
}

button {
  font-family: inherit;
  cursor: pointer;
}

#root {
  width: 100%;
  min-height: 100vh;
  display: block;
}

/* Mobil/tablet için doğal uygulama kabuğu — iOS çerçevesi yok */
.mobile-shell {
  width: 100%;
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--ink);
  font-family: var(--font-ui);
  position: relative;
  -webkit-font-smoothing: antialiased;
}

.mobile-shell-inner {
  width: 100%;
  max-width: 720px;
  min-height: 100vh;
  margin: 0 auto;
}

.mobile-shell .app-root {
  width: 100%;
  min-height: 100vh;
  background: var(--app-bg);
}

/* App root iOS frame içinde */
.app-root {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: var(--app-bg);
  font-family: var(--font-ui);
  color: var(--ink);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

.device-shell {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Fullscreen modunda app-root tam genişlik */
.fullscreen-shell .app-root {
  background: var(--app-bg);
}