@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

  :root {
    --brand-green: #00783E;
    --brand-green-deep: #005C30;
    --brand-green-bright: #00A651;
    --brand-green-soft: #E8F5EE;
    --brand-red: #C1272D;
    --brand-red-deep: #9B1F24;
    --brand-red-soft: #FDEAEB;
    --brand-red-bright: #E74C52;
    --brand-dark: #002B16;
    --brand-ink: #1A1A1A;
  }

  #italyan-isi-app {
    --bg: #F4F7F5;
    --surface: #FFFFFF;
    --surface-2: #FAFCFB;
    --border: #E2E8E4;
    --ink: var(--brand-ink);
    --ink-2: #3A3F4B;
    --ink-soft: #6B7280;
    --income: var(--brand-green);
    --income-deep: var(--brand-green-deep);
    --income-soft: var(--brand-green-soft);
    --income-bright: var(--brand-green-bright);
    --expense: var(--brand-red);
    --expense-deep: var(--brand-red-deep);
    --expense-soft: var(--brand-red-soft);
    --expense-bright: var(--brand-red-bright);
    --sidebar-bg: var(--brand-dark);
    --sidebar-text: #A8C4B4;
    --shadow-sm: 0 1px 2px rgba(20,23,31,.06);
    --shadow-md: 0 6px 18px rgba(20,23,31,.09);
    --shadow-lg: 0 18px 40px rgba(20,23,31,.14);
    --r-lg: 20px; --r-md: 16px; --r-sm: 12px;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-variant-numeric: tabular-nums;
    background: var(--surface);
    color: var(--ink);
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    border: none;
    min-height: 100dvh;
  }
  html, body {
    margin: 0; padding: 0;
    background: var(--bg, #F5F6FA);
    min-height: 100dvh;
    width: 100%;
  }

  .ii-hidden { display: none !important; }

  /* ---------- Auth screen ---------- */
  .ii-auth-screen,
  .ii-auth-screen * { box-sizing: border-box; }
  .ii-auth-screen {
    min-height: 100dvh; display: flex; align-items: center; justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(145deg, var(--brand-dark) 0%, #004529 42%, #F4F7F5 42%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--brand-ink);
  }
  .ii-auth-card {
    width: 100%; max-width: 420px; background: #fff; border-radius: 22px;
    padding: 32px 36px 28px; box-shadow: 0 24px 48px rgba(0,43,22,.18);
    border: 1px solid #E2E8E4;
  }
  .ii-auth-brand { text-align: center; margin-bottom: 22px; }
  .ii-auth-logo {
    width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 12px;
    background: linear-gradient(135deg, var(--brand-green-bright), var(--brand-green));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 18px;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  }
  .ii-auth-brand h1 {
    margin: 0 0 6px; font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    font-size: 24px; font-weight: 800; color: var(--brand-ink);
  }
  .ii-auth-brand p.ii-auth-tagline {
    margin: 0; font-size: 14px; color: #6B7280; font-weight: 600; font-family: inherit;
  }
  .ii-auth-form .ii-field { margin-bottom: 14px; width: 100%; }
  .ii-auth-form .ii-field label {
    display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: #767C8A; font-weight: 700; margin-bottom: 6px; font-family: inherit;
  }
  .ii-auth-form .ii-field input {
    display: block; width: 100%; max-width: 100%;
    padding: 11px 14px; border-radius: 12px; border: 1.5px solid #E6E8F0;
    font-size: 14.5px; font-family: inherit;
  }
  .ii-auth-form .ii-field input:focus {
    outline: none; border-color: var(--brand-green); box-shadow: 0 0 0 3px rgba(0,120,62,.14);
  }
  .ii-auth-submit {
    display: block; width: 100%; max-width: 100%; padding: 13px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-green-bright), var(--brand-green));
    color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
    font-family: inherit;
  }
  .ii-auth-submit:hover { background: linear-gradient(135deg, var(--brand-green), var(--brand-green-deep)); }
  .ii-user-chip {
    display: inline-flex; align-items: center; gap: 6px; margin-left: 8px;
    padding: 4px 10px; border-radius: 999px; background: #EEF0F6;
    font-size: 11px; font-weight: 700; color: #3A3F4B;
  }
  #italyan-isi-app * { box-sizing: border-box; }
  #italyan-isi-app .disp { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; }
  #italyan-isi-app .ic { width: 20px; height: 20px; flex-shrink: 0; display: block; }
  #italyan-isi-app button { font-family: inherit; }
  #italyan-isi-app button:focus-visible,
  #italyan-isi-app input:focus-visible { outline: 2px solid var(--income); outline-offset: 2px; }

  /* ---------- Shell ---------- */
  #italyan-isi-app .ii-shell { display: flex; align-items: stretch; min-height: 100dvh; }

  #italyan-isi-app .ii-sidebar {
    width: clamp(216px, 16vw, 280px); flex-shrink: 0; background: var(--sidebar-bg);
    display: flex; flex-direction: column; padding: 24px 16px;
    position: relative; overflow: hidden;
  }
  #italyan-isi-app .ii-sidebar::before {
    content: ""; position: absolute; top: -50px; left: -50px; width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(0,120,62,0.35), transparent 70%);
    filter: blur(6px); pointer-events: none;
  }
  #italyan-isi-app .ii-logo {
    width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-green-bright), var(--brand-green));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 16px; box-shadow: var(--shadow-md);
    margin-bottom: 10px; position: relative; z-index: 1;
  }
  #italyan-isi-app .ii-brandname { color: #fff; font-weight: 700; font-size: 14.5px; margin-bottom: 2px; position: relative; z-index: 1; }
  #italyan-isi-app .ii-brandsub { color: var(--sidebar-text); font-size: 11px; margin-bottom: 30px; position: relative; z-index: 1; }
  #italyan-isi-app .ii-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; position: relative; z-index: 1; }
  #italyan-isi-app .ii-navbtn {
    display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px;
    background: none; border: none; border-left: 3px solid transparent; cursor: pointer;
    color: var(--sidebar-text); font-size: 14px; font-weight: 600; text-align: left;
  }
  #italyan-isi-app .ii-navbtn .ic { color: var(--sidebar-text); }
  #italyan-isi-app .ii-navbtn:hover:not(.active) { background: rgba(255,255,255,.05); }
  #italyan-isi-app .ii-navbtn.active { background: rgba(0,120,62,.22); color: #fff; border-left-color: var(--brand-red); }
  #italyan-isi-app .ii-navbtn.active .ic { color: var(--brand-green-bright); }
  #italyan-isi-app .ii-sidebar-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); position: relative; z-index: 1; }
  #italyan-isi-app .ii-date-badge { display: flex; align-items: center; gap: 10px; color: var(--sidebar-text); }
  #italyan-isi-app .ii-date-badge .dnum { font-family: 'Plus Jakarta Sans'; font-size: 21px; font-weight: 800; color: #fff; line-height: 1; }
  #italyan-isi-app .ii-date-badge .dmon { font-size: 11px; letter-spacing: .06em; }
  @media (max-width: 899px) { #italyan-isi-app .ii-sidebar { display: none; } }

  #italyan-isi-app .ii-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); min-height: 100dvh; }
  #italyan-isi-app .ii-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: clamp(18px, 2vw, 28px) clamp(20px, 3vw, 48px);
    border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap;
  }
  #italyan-isi-app .ii-title { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: clamp(20px, 1.6vw, 28px); color: var(--ink); }
  #italyan-isi-app .ii-subtitle { font-size: clamp(12px, 1vw, 14px); color: var(--ink-soft); margin-top: 2px; }
  #italyan-isi-app .ii-topbar-actions {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  }
  #italyan-isi-app .ii-logout-btn {
    padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--border);
    background: var(--surface); color: var(--ink-2); font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit; white-space: nowrap;
  }
  #italyan-isi-app .ii-logout-btn:hover { background: var(--surface-2); color: var(--expense-deep); border-color: #FECACA; }
  #italyan-isi-app .ii-today-chip {
    display: flex; align-items: center; gap: 6px; background: var(--income-soft); color: var(--income-deep);
    padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  }
  #italyan-isi-app .ii-today-chip .ic { width: 15px; height: 15px; }
  #italyan-isi-app .ii-content {
    padding: clamp(18px, 2.5vw, 40px) clamp(16px, 3vw, 56px);
    flex: 1;
    width: 100%;
    max-width: none;
  }
  @media (max-width: 520px) {
    #italyan-isi-app .ii-topbar { padding: 16px 18px; }
    #italyan-isi-app .ii-content { padding: 18px 16px 22px; }
    #italyan-isi-app .ii-title { font-size: 18px; }
    #italyan-isi-app .ii-tilegrid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
    #italyan-isi-app .ii-tile { min-height: 60px; border-radius: 13px; }
    #italyan-isi-app .ii-tile .tile-label { font-size: 10px; }
  }
  @media (max-width: 380px) { #italyan-isi-app .ii-subtitle { display: none; } }

  #italyan-isi-app .ii-bottomnav {
    display: none;
    justify-content: space-around;
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: 9px 6px;
    margin-top: 0;
  }
  #italyan-isi-app .ii-bnbtn {
    display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; border: none;
    color: var(--ink-soft); font-size: 9px; font-weight: 700; padding: 6px 6px; border-radius: 12px; flex: 1;
  }
  #italyan-isi-app .ii-bnbtn .ic { width: 20px; height: 20px; }
  #italyan-isi-app .ii-bnbtn.active { color: var(--income-deep); background: var(--income-soft); }
  @media (max-width: 899px) {
    #italyan-isi-app .ii-shell { min-height: auto; }
    #italyan-isi-app .ii-main { min-height: auto; padding-bottom: 0; }
    #italyan-isi-app .ii-bottomnav {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 200;
      padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
      box-shadow: 0 -6px 24px rgba(20, 23, 31, 0.1);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background: rgba(255, 255, 255, 0.96);
    }
    #italyan-isi-app .ii-content {
      padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }
  }

  /* ---------- Desktop fluid scaling ---------- */
  @media (min-width: 900px) {
    #italyan-isi-app .ii-tilegrid {
      grid-template-columns: repeat(auto-fill, minmax(clamp(90px, 7.5vw, 130px), 1fr));
      gap: clamp(10px, 1vw, 16px);
    }
    #italyan-isi-app .ii-tile {
      min-height: clamp(78px, 6.5vw, 104px);
      padding: clamp(10px, 1vw, 14px) 8px;
    }
    #italyan-isi-app .ii-tile .tile-label { font-size: clamp(11px, 0.9vw, 13px); }
    #italyan-isi-app .ii-stats { grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.5vw, 22px); }
    #italyan-isi-app .stat-value { font-size: clamp(22px, 2vw, 32px); }
    #italyan-isi-app .ii-breakdown { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); }
    #italyan-isi-app .ii-bcard { min-width: 0; }
    #italyan-isi-app .ii-settings-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    #italyan-isi-app .ii-formgrid .ii-field { min-width: clamp(150px, 12vw, 220px); }
    #italyan-isi-app .ii-chartcard { padding: clamp(20px, 2vw, 32px); }
  }

  @media (min-width: 1400px) {
    #italyan-isi-app .ii-navbtn { font-size: 15px; padding: 12px 14px; }
    #italyan-isi-app .seg-btn { font-size: clamp(14px, 1vw, 16px); padding: 14px; }
    #italyan-isi-app .ii-entry { padding: 12px 16px; }
    #italyan-isi-app .ii-entry-cat { font-size: 15px; }
    #italyan-isi-app .ii-entry-amt { font-size: 16px; }
  }

  #italyan-isi-app .fade-in { animation: none; }
  @keyframes iiFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) { #italyan-isi-app .fade-in { animation: none; } }

  /* ---------- Segmented type toggle ---------- */
  #italyan-isi-app .ii-segmented { display: flex; gap: 10px; margin-bottom: 18px; }
  #italyan-isi-app .seg-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface);
    cursor: pointer; font-weight: 700; font-size: 14.5px; color: var(--ink-soft); transition: all .15s;
  }
  #italyan-isi-app .seg-btn .ic { width: 18px; height: 18px; }
  #italyan-isi-app .seg-btn.gider.active { background: var(--expense-soft); border-color: var(--expense); color: var(--expense-deep); }
  #italyan-isi-app .seg-btn.gelir.active { background: var(--income-soft); border-color: var(--income); color: var(--income-deep); }

  /* ---------- Category tiles ---------- */
  #italyan-isi-app .ii-tilegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; margin-bottom: 22px; width: 100%; }
  #italyan-isi-app .ii-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    min-height: 78px; padding: 10px 6px; border-radius: 16px; border: 1.5px solid var(--border);
    background: var(--surface); cursor: pointer; transition: all .15s;
  }
  #italyan-isi-app .ii-tile .ic { color: var(--ink-soft); transition: color .15s; }
  #italyan-isi-app .ii-tile .tile-label { font-size: 11px; font-weight: 600; color: var(--ink-2); text-align: center; line-height: 1.25; }
  #italyan-isi-app .ii-tile:hover { border-color: var(--ink-soft); }
  #italyan-isi-app .ii-tile.gider.active { background: var(--expense); border-color: var(--expense-deep); box-shadow: var(--shadow-md); }
  #italyan-isi-app .ii-tile.gelir.active { background: var(--income); border-color: var(--income-deep); box-shadow: var(--shadow-md); }
  #italyan-isi-app .ii-tile.active .ic, #italyan-isi-app .ii-tile.active .tile-label { color: #fff; }

  @media (max-width: 899px) {
    #italyan-isi-app .ii-tilegrid { gap: 8px; margin-bottom: 18px; }
    #italyan-isi-app .ii-tile {
      min-height: 64px;
      padding: 7px 5px;
      gap: 5px;
      border-radius: 14px;
    }
    #italyan-isi-app .ii-tile .ic { width: 18px; height: 18px; }
    #italyan-isi-app .ii-tile .tile-label { font-size: 10.5px; line-height: 1.2; }
  }

  /* ---------- Form ---------- */
  #italyan-isi-app .ii-formgrid { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 24px; }
  #italyan-isi-app .ii-field { flex: 1; min-width: 150px; }
  #italyan-isi-app .ii-field label {
    display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-soft); font-weight: 700; margin-bottom: 6px;
  }
  #italyan-isi-app .ii-inputwrap { position: relative; display: flex; align-items: center; }
  #italyan-isi-app .ii-inputwrap .ic-prefix, #italyan-isi-app .ii-inputwrap .cur {
    position: absolute; left: 13px; color: var(--ink-soft); pointer-events: none;
  }
  #italyan-isi-app .ii-inputwrap .cur { font-weight: 700; font-size: 14px; }
  #italyan-isi-app .ii-inputwrap .ic-prefix { width: 16px; height: 16px; }
  #italyan-isi-app .ii-field input {
    width: 100%; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--border);
    background: var(--surface); font-family: 'Inter'; font-size: 14.5px; color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
  }
  #italyan-isi-app .ii-field input[type="date"] { padding-left: 37px; }
  #italyan-isi-app .ii-field input[type="number"] { padding-left: 29px; }
  #italyan-isi-app .ii-field input:focus { outline: none; border-color: var(--income); box-shadow: 0 0 0 3px rgba(0,120,62,.15); }
  #italyan-isi-app .ii-addbtn {
    display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; border: none;
    color: #fff; font-weight: 700; font-size: 14.5px; cursor: pointer; white-space: nowrap;
    box-shadow: var(--shadow-sm); transition: transform .12s, box-shadow .12s;
  }
  #italyan-isi-app .ii-addbtn .ic { width: 18px; height: 18px; }
  #italyan-isi-app .ii-addbtn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md); }
  #italyan-isi-app .ii-addbtn:disabled { opacity: .45; cursor: not-allowed; }
  #italyan-isi-app .ii-addbtn.gider { background: linear-gradient(135deg, var(--expense-bright), var(--expense-deep)); }
  #italyan-isi-app .ii-addbtn.gelir { background: linear-gradient(135deg, var(--income-bright), var(--income-deep)); }
  @media (max-width: 520px) { #italyan-isi-app .ii-addbtn { width: 100%; justify-content: center; } }

  /* ---------- Day strip + entries ---------- */
  #italyan-isi-app .ii-daystrip { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 12px; flex-wrap: wrap; gap: 8px; }
  #italyan-isi-app .ii-daystrip-title { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: 15px; }
  #italyan-isi-app .ii-daystrip-mini { display: flex; gap: 8px; }
  #italyan-isi-app .mini { display: flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
  #italyan-isi-app .mini .ic { width: 13px; height: 13px; }
  #italyan-isi-app .mini.gelir { background: var(--income-soft); color: var(--income-deep); }
  #italyan-isi-app .mini.gider { background: var(--expense-soft); color: var(--expense-deep); }

  #italyan-isi-app .ii-entrylist { display: flex; flex-direction: column; gap: 8px; }
  #italyan-isi-app .ii-entry {
    display: flex; align-items: center; justify-content: space-between; background: var(--surface);
    border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; transition: box-shadow .15s;
  }
  #italyan-isi-app .ii-entry:hover { box-shadow: var(--shadow-sm); }
  #italyan-isi-app .ii-entry-left { display: flex; align-items: center; gap: 11px; min-width: 0; }
  #italyan-isi-app .ii-entry-ic { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  #italyan-isi-app .ii-entry-ic .ic { width: 18px; height: 18px; }
  #italyan-isi-app .ii-entry-ic.gelir { background: var(--income-soft); color: var(--income-deep); }
  #italyan-isi-app .ii-entry-ic.gider { background: var(--expense-soft); color: var(--expense-deep); }
  #italyan-isi-app .ii-entry-cat { font-size: 14px; font-weight: 600; color: var(--ink); }
  #italyan-isi-app .ii-entry-date { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }
  #italyan-isi-app .ii-entry-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
  #italyan-isi-app .ii-entry-amt { font-weight: 700; font-size: 14.5px; }
  #italyan-isi-app .ii-entry-amt.gelir { color: var(--income-deep); }
  #italyan-isi-app .ii-entry-amt.gider { color: var(--expense-deep); }
  #italyan-isi-app .ii-del { width: 32px; height: 32px; border-radius: 10px; background: none; border: none; color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; }
  #italyan-isi-app .ii-del .ic { width: 16px; height: 16px; }
  #italyan-isi-app .ii-del:hover { background: var(--expense-soft); color: var(--expense-deep); }
  #italyan-isi-app .ii-del.ii-edit:hover { background: var(--income-soft); color: var(--income-deep); }
  #italyan-isi-app .ii-entry--confirm {
    background: #FFFBFB; border-color: rgba(220,38,38,.2);
  }
  #italyan-isi-app .ii-entry-confirm {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap;
  }
  #italyan-isi-app .ii-entry-confirm-text {
    font-size: 12.5px; font-weight: 700; color: var(--expense-deep); white-space: nowrap;
  }
  #italyan-isi-app .ii-entry-editbox {
    background: var(--surface); border: 1.5px solid var(--income); border-radius: 14px;
    padding: 14px; box-shadow: var(--shadow-md);
  }
  #italyan-isi-app .ii-entry-edit-type {
    display: flex; gap: 8px; margin-bottom: 12px;
  }
  #italyan-isi-app .ii-entry-edit-type .seg-btn {
    margin: 0; padding: 10px; font-size: 13px;
  }
  #italyan-isi-app .ii-entry-edit-grid {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  }
  #italyan-isi-app .ii-entry-edit-grid .ii-field {
    flex: 1; min-width: 140px; margin: 0;
  }
  #italyan-isi-app .ii-entry-edit-grid select {
    width: 100%; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--border);
    background: var(--surface); font-family: inherit; font-size: 14.5px; color: var(--ink);
  }
  #italyan-isi-app .ii-entry-edit-grid select:focus {
    outline: none; border-color: var(--income); box-shadow: 0 0 0 3px rgba(0,120,62,.15);
  }
  #italyan-isi-app .ii-entry-edit-actions {
    display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px;
  }

  #italyan-isi-app .ii-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 34px 20px; color: var(--ink-soft); border: 1.5px dashed var(--border); border-radius: 16px; text-align: center;
  }
  #italyan-isi-app .ii-empty .ic { width: 26px; height: 26px; opacity: .5; }
  #italyan-isi-app .ii-empty span { font-size: 13.5px; }

  /* ---------- Reports ---------- */
  #italyan-isi-app .ii-periods {
    display: flex; gap: 4px; margin-bottom: 22px; flex-wrap: nowrap; background: var(--surface-2);
    padding: 5px; border-radius: 14px; border: 1px solid var(--border); width: 100%;
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #italyan-isi-app .ii-periods::-webkit-scrollbar { display: none; }
  #italyan-isi-app .ii-pbtn { white-space: nowrap; flex-shrink: 0; }
  #italyan-isi-app .ii-pbtn {
    padding: 8px 14px; border-radius: 10px; border: none; background: transparent; cursor: pointer;
    font-size: 13px; font-weight: 700; color: var(--ink-soft);
  }
  #italyan-isi-app .ii-pbtn.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

  #italyan-isi-app .ii-customrange { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
  #italyan-isi-app .ii-customrange .ii-field { min-width: 160px; flex: 0 1 200px; }

  #italyan-isi-app .ii-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; margin-bottom: 22px; }
  #italyan-isi-app .ii-statcard { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; }
  #italyan-isi-app .stat-ic-badge { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
  #italyan-isi-app .stat-ic-badge .ic { width: 18px; height: 18px; }
  #italyan-isi-app .ii-statcard.gelir .stat-ic-badge { background: var(--income-soft); color: var(--income-deep); }
  #italyan-isi-app .ii-statcard.gider .stat-ic-badge { background: var(--expense-soft); color: var(--expense-deep); }
  #italyan-isi-app .ii-statcard.net .stat-ic-badge { background: #EEF0F6; color: var(--ink-2); }
  #italyan-isi-app .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 700; margin-bottom: 6px; }
  #italyan-isi-app .stat-value { font-family: 'Plus Jakarta Sans'; font-size: 24px; font-weight: 800; }
  #italyan-isi-app .ii-statcard.gelir .stat-value { color: var(--income-deep); }
  #italyan-isi-app .ii-statcard.gider .stat-value { color: var(--expense-deep); }
  #italyan-isi-app .stat-value.pos { color: var(--income-deep); }
  #italyan-isi-app .stat-value.neg { color: var(--expense-deep); }
  #italyan-isi-app .stat-delta { display: flex; align-items: center; gap: 4px; font-size: 11.5px; margin-top: 8px; font-weight: 700; }
  #italyan-isi-app .stat-delta .ic { width: 13px; height: 13px; }
  #italyan-isi-app .stat-delta.pos { color: var(--income-deep); }
  #italyan-isi-app .stat-delta.neg { color: var(--expense-deep); }

  #italyan-isi-app .ii-chartcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 20px 16px; margin-bottom: 24px; }
  #italyan-isi-app .ii-chart-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
  #italyan-isi-app .ii-chart-title { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: 15px; }
  #italyan-isi-app .ii-chart-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
  #italyan-isi-app .ii-chart-scroll { overflow-x: auto; }
  #italyan-isi-app .ii-legend { display: flex; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
  #italyan-isi-app .ii-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); font-weight: 600; }
  #italyan-isi-app .ii-legend .sw { width: 10px; height: 10px; border-radius: 3px; }

  #italyan-isi-app .ii-breakdown { display: flex; gap: 16px; flex-wrap: wrap; }
  #italyan-isi-app .ii-bcard { flex: 1; min-width: 270px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; }
  #italyan-isi-app .bcard-title { display: flex; align-items: center; gap: 8px; font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: 14.5px; margin-bottom: 15px; }
  #italyan-isi-app .bcard-title .ic { width: 17px; height: 17px; }
  #italyan-isi-app .bcard-title.gider { color: var(--expense-deep); }
  #italyan-isi-app .bcard-title.gelir { color: var(--income-deep); }
  #italyan-isi-app .brow { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
  #italyan-isi-app .brow-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 5px; gap: 8px; }
  #italyan-isi-app .brow-name { display: flex; align-items: center; gap: 7px; color: var(--ink-2); font-weight: 600; min-width: 0; }
  #italyan-isi-app .brow-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #italyan-isi-app .brow-name .ic { width: 14px; height: 14px; color: var(--ink-soft); flex-shrink: 0; }
  #italyan-isi-app .brow-amt { font-weight: 700; color: var(--ink); flex-shrink: 0; }
  #italyan-isi-app .brow-bar { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
  #italyan-isi-app .brow-fill { height: 100%; border-radius: 999px; }
  #italyan-isi-app .brow-fill.gider { background: var(--expense); }
  #italyan-isi-app .brow-fill.gelir { background: var(--income); }
  #italyan-isi-app .bcard-total { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1.5px solid var(--ink); font-weight: 800; font-size: 14px; font-family: 'Plus Jakarta Sans'; }

  #italyan-isi-app .loading { padding: 70px 20px; text-align: center; color: var(--ink-soft); }

  /* ---------- Settings / Data ---------- */
  #italyan-isi-app .ii-settings-grid { display: grid; gap: 14px; }
  #italyan-isi-app .ii-scard {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 18px 20px;
  }
  #italyan-isi-app .ii-scard h3 {
    font-family: 'Plus Jakarta Sans'; font-size: 15px; font-weight: 700; margin: 0 0 6px;
    display: flex; align-items: center; gap: 8px;
  }
  #italyan-isi-app .ii-scard p { margin: 0 0 14px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
  #italyan-isi-app .ii-account-form { display: flex; flex-direction: column; gap: 12px; }
  #italyan-isi-app .ii-account-form .ii-field { min-width: 0; margin: 0; }
  #italyan-isi-app .ii-scard-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  #italyan-isi-app .ii-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 12px;
    border: 1.5px solid var(--border); background: var(--surface); color: var(--ink-2);
    font-weight: 700; font-size: 13.5px; cursor: pointer; transition: all .15s;
  }
  #italyan-isi-app .ii-btn:hover { border-color: var(--ink-soft); box-shadow: var(--shadow-sm); }
  #italyan-isi-app .ii-btn.primary { background: var(--income-deep); border-color: var(--income-deep); color: #fff; }
  #italyan-isi-app .ii-btn.danger { background: var(--expense-soft); border-color: var(--expense); color: var(--expense-deep); }
  #italyan-isi-app .ii-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 4px; }
  #italyan-isi-app .ii-meta-item { background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }
  #italyan-isi-app .ii-meta-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 700; }
  #italyan-isi-app .ii-meta-val { font-family: 'Plus Jakarta Sans'; font-size: 18px; font-weight: 800; margin-top: 4px; }
  #italyan-isi-app .ii-field textarea {
    width: 100%; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--border);
    background: var(--surface); font-family: 'Inter'; font-size: 14px; color: var(--ink);
    resize: vertical; min-height: 72px;
  }
  #italyan-isi-app .ii-field textarea:focus { outline: none; border-color: var(--income); box-shadow: 0 0 0 3px rgba(0,120,62,.15); }
  #italyan-isi-app .ii-entry-note { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; font-style: italic; }

  /* ---------- Toast ---------- */
  #italyan-isi-toast {
    position: fixed; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); left: 50%;
    transform: translateX(-50%) translateY(20px); opacity: 0; pointer-events: none;
    background: linear-gradient(135deg, #002B16 0%, #004529 100%);
    color: #fff; padding: 12px 20px; border-radius: 14px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
    box-shadow: 0 12px 32px rgba(0, 43, 22, 0.35), 0 0 0 1px rgba(0, 166, 81, 0.25);
    z-index: 9999;
    transition: opacity .22s ease, transform .22s ease;
    max-width: calc(100vw - 32px); text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  #italyan-isi-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  #italyan-isi-toast.toast-success {
    background: linear-gradient(135deg, #005C30 0%, #00783E 100%);
    box-shadow: 0 12px 32px rgba(0, 120, 62, 0.35), 0 0 0 1px rgba(0, 166, 81, 0.45);
  }
  #italyan-isi-toast.toast-error {
    background: linear-gradient(135deg, #9B1F24 0%, #C1272D 100%);
    box-shadow: 0 12px 32px rgba(193, 39, 45, 0.35), 0 0 0 1px rgba(231, 76, 82, 0.4);
  }
  #italyan-isi-toast.toast-info {
    background: linear-gradient(135deg, #1A2744 0%, #2D3A5C 100%);
    box-shadow: 0 12px 32px rgba(26, 39, 68, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12);
  }
  @media (min-width: 900px) {
    #italyan-isi-toast { bottom: 28px; }
  }

  /* ---------- Modal ---------- */
  #italyan-isi-modal {
    position: fixed; inset: 0; background: rgba(20,23,31,.45); z-index: 9998;
    display: none; align-items: center; justify-content: center; padding: 20px;
  }
  #italyan-isi-modal.open { display: flex; }
  #italyan-isi-modal .modal-box {
    background: var(--surface); border-radius: 18px; padding: 22px 24px; max-width: 360px; width: 100%;
    box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  }
  #italyan-isi-modal h4 { font-family: 'Plus Jakarta Sans'; margin: 0 0 8px; font-size: 17px; }
  #italyan-isi-modal p { margin: 0 0 18px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
  #italyan-isi-modal .modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

  /* ---------- Category management ---------- */

  /* ---------- Modern icon picker ---------- */
  #italyan-isi-app .ii-cat-create { margin-bottom: 14px; }
  #italyan-isi-app .ii-cat-add {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 10px;
  }
  #italyan-isi-app .ii-cat-add .ii-field { flex: 1; min-width: 140px; max-width: 280px; margin: 0; }
  #italyan-isi-app .ii-field-icon { flex: 0 0 auto; width: 160px; position: relative; z-index: 5; }
  #italyan-isi-app .ii-field-icon--compact { width: 140px; min-width: 120px; }
  #italyan-isi-app .ii-cat-add .ii-addbtn { flex-shrink: 0; padding: 10px 16px; font-size: 13.5px; }

  #italyan-isi-app .ii-iconpicker { position: relative; width: 100%; }
  #italyan-isi-app .ii-iconpicker-btn {
    width: 100%; display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--border);
    background: var(--surface); cursor: pointer; color: var(--ink); font-weight: 600; font-size: 13px;
    transition: border-color .15s;
  }
  #italyan-isi-app .ii-iconpicker-btn:hover { border-color: var(--ink-soft); }
  #italyan-isi-app .ii-iconpicker-preview {
    width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ink-2);
  }
  #italyan-isi-app .ii-iconpicker-preview .ic { width: 15px; height: 15px; }
  #italyan-isi-app .ii-iconpicker-label { flex: 1; text-align: left; font-size: 12.5px; }
  #italyan-isi-app .ii-iconpicker-chevron { color: var(--ink-soft); font-size: 10px; }

  #italyan-isi-app .ii-iconpicker-menu {
    position: absolute; top: calc(100% + 4px); left: 0;
    width: 190px; min-width: 190px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow-lg); padding: 6px; z-index: 50;
    display: grid; grid-template-columns: 1fr; gap: 2px;
    max-height: 200px; overflow-y: auto;
  }
  #italyan-isi-app .ii-icon-option {
    display: flex; align-items: center; gap: 7px; padding: 7px 8px; border-radius: 8px;
    border: none; background: transparent; cursor: pointer;
    color: var(--ink-2); font-size: 12px; font-weight: 600; text-align: left;
  }
  #italyan-isi-app .ii-icon-option .ic { width: 14px; height: 14px; color: var(--ink-soft); flex-shrink: 0; }
  #italyan-isi-app .ii-icon-option:hover { background: var(--surface-2); }
  #italyan-isi-app .ii-icon-option.active {
    background: var(--income-soft); color: var(--income-deep);
  }
  #italyan-isi-app .ii-icon-option.active .ic { color: var(--income-deep); }

  /* ---------- Category row / edit box ---------- */
  #italyan-isi-app .ii-cat-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
  #italyan-isi-app .ii-cat-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  }
  #italyan-isi-app .ii-cat-row-ic {
    width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
  }
  #italyan-isi-app .ii-cat-row-ic.gider { background: var(--expense-soft); color: var(--expense-deep); }
  #italyan-isi-app .ii-cat-row-ic.gelir { background: var(--income-soft); color: var(--income-deep); }
  #italyan-isi-app .ii-cat-row-ic .ic { width: 16px; height: 16px; }
  #italyan-isi-app .ii-cat-row-name { flex: 1; font-weight: 600; font-size: 14px; min-width: 0; }
  #italyan-isi-app .ii-cat-actions { display: flex; gap: 6px; flex-shrink: 0; }

  #italyan-isi-app .ii-btn-sm {
    padding: 6px 12px !important; font-size: 12px !important; border-radius: 8px !important;
  }

  #italyan-isi-app .ii-cat-row--confirm {
    background: #FFFBFB; border-color: rgba(220,38,38,.2);
  }
  #italyan-isi-app .ii-cat-confirm {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap;
  }
  #italyan-isi-app .ii-cat-confirm-text {
    font-size: 12.5px; font-weight: 700; color: var(--expense-deep); white-space: nowrap;
  }

  #italyan-isi-app .ii-cat-editbox {
    background: var(--surface); border: 1.5px solid var(--income); border-radius: 12px;
    padding: 12px; box-shadow: var(--shadow-md);
    position: relative; z-index: 2;
  }
  #italyan-isi-app .ii-cat-edit-inline {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  #italyan-isi-app .ii-cat-edit-input {
    flex: 1; min-width: 120px; max-width: 240px;
    padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--border);
    background: var(--surface); font-family: inherit; font-size: 13.5px; color: var(--ink);
  }
  #italyan-isi-app .ii-cat-edit-input:focus {
    outline: none; border-color: var(--income); box-shadow: 0 0 0 3px rgba(0,120,62,.12);
  }
  #italyan-isi-app .ii-cat-edit-actions { display: flex; gap: 6px; margin-left: auto; }

  @media (max-width: 899px) {
    #italyan-isi-app .ii-field input,
    #italyan-isi-app .ii-field textarea,
    #italyan-isi-app .ii-cat-edit-input,
    #italyan-isi-app input,
    #italyan-isi-app textarea,
    #italyan-isi-app select {
      font-size: 16px;
    }
    .ii-auth-form .ii-field input {
      font-size: 16px;
    }
    #italyan-isi-app button {
      touch-action: manipulation;
    }
  }

  @media (max-width: 720px) {
    #italyan-isi-app .ii-cat-editbox {
      padding: 14px;
      margin: 2px 0;
    }
    #italyan-isi-app .ii-cat-edit-inline { flex-direction: column; align-items: stretch; gap: 10px; }
    #italyan-isi-app .ii-cat-edit-input { max-width: none; width: 100%; }
    #italyan-isi-app .ii-field-icon, #italyan-isi-app .ii-field-icon--compact { width: 100%; }
    #italyan-isi-app .ii-cat-add .ii-addbtn { width: 100%; justify-content: center; }
    #italyan-isi-app .ii-cat-row,
    #italyan-isi-app .ii-cat-row--confirm {
      flex-wrap: nowrap;
      gap: 8px;
      padding: 10px;
    }
    #italyan-isi-app .ii-cat-row-ic {
      width: 30px;
      height: 30px;
      border-radius: 8px;
    }
    #italyan-isi-app .ii-cat-row-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
    }
    #italyan-isi-app .ii-cat-actions,
    #italyan-isi-app .ii-cat-confirm {
      width: auto;
      margin-top: 0;
      flex-shrink: 0;
      gap: 4px;
    }
    #italyan-isi-app .ii-cat-actions .ii-btn,
    #italyan-isi-app .ii-cat-confirm .ii-btn {
      padding: 5px 8px !important;
      font-size: 11px !important;
      white-space: nowrap;
    }
    #italyan-isi-app .ii-cat-row--confirm .ii-cat-row-name {
      display: none;
    }
    #italyan-isi-app .ii-cat-confirm-text {
      font-size: 11px;
    }
    #italyan-isi-app .ii-cat-edit-actions {
      margin-left: 0;
      justify-content: stretch;
      width: 100%;
    }
    #italyan-isi-app .ii-cat-edit-actions .ii-btn {
      flex: 1;
      justify-content: center;
    }
  }