/*
 * Original TurkCAD ribbon cascade.
 * Mechanically extracted from HTML Dosyalar/webcad40.html.
 * Keep source order intact when refreshing this file.
 */

/* Source <style> block 1 */
.app {
      display: grid;
      width: 100vw;
      height: 100vh;
      grid-template-rows: 48px 76px 32px 1fr 40px;
      background-color: var(--bg-base);
    }
.topbar {
      display: grid;
      grid-template-columns: 200px minmax(0, 1fr);
      align-items: center;
      padding: 0 16px;
      background-color: var(--bg-panel);
      border-bottom: 1px solid var(--border);
      z-index: 20;
    }
.brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 600;
      font-size: 16px;
      color: var(--text-bright);
      letter-spacing: 0.5px;
    }
.brand-mark {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, #9f1d35 0%, #9f1d35 62%, #ffffff 62%, #ffffff 100%);
      color: #ffffff;
      border: 2px solid rgba(255,255,255,0.85);
      border-radius: var(--radius-sm);
      font-weight: 800;
      font-size: 14px;
      letter-spacing: -0.4px;
      text-shadow: 0 1px 2px rgba(0,0,0,0.55);
      box-shadow: 0 0 0 1px rgba(159,29,53,0.35), 0 6px 12px rgba(0,0,0,0.22);
    }
.brand small {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: normal;
      display: block;
      margin-top: 2px;
    }
.menu-tabs {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: wrap;
      min-width: 0;
    }
.menu-tabs button,
.menu-tabs label,
.top-actions button {
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-main);
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      font-size: 13px;
      transition: background 0.15s, color 0.15s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
.menu-tabs button:hover,
.menu-tabs label:hover,
.top-actions button:hover {
      background-color: var(--bg-surface);
      color: var(--text-bright);
    }
.top-actions {
      display: none;
      gap: 8px;
    }
.top-actions .primary {
      background-color: var(--accent);
      color: var(--text-bright);
      border: 1px solid var(--border-focus);
      font-weight: 500;
    }
.top-actions .primary:hover {
      background-color: var(--accent-hover);
    }
.ribbon {
      display: flex;
      align-items: stretch;
      justify-content: center;
      padding: 6px 10px;
      gap: 8px;
      background-color: var(--bg-panel);
      border-bottom: 1px solid var(--border);
      overflow: hidden;
      min-width: 0;
    }
.ribbon-group {
      display: flex;
      gap: 3px;
      padding: 4px 6px 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      background-color: var(--bg-base);
      position: relative;
      min-width: 0;
      flex: 0 1 auto;
    }
.ribbon-group::after {
      content: attr(data-title);
      position: absolute;
      bottom: 4px;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 10px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      pointer-events: none;
    }
.tool-btn {
      width: 46px;
      height: 44px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
      color: var(--text-main);
      cursor: pointer;
      transition: all 0.1s;
      padding: 3px;
      flex: 0 0 auto;
    }
.tool-btn .ico {
      font-family: var(--font-mono);
      font-size: 17px;
      line-height: 1;
      color: var(--text-bright);
    }
.tool-btn .label {
      font-size: 9.5px;
      color: var(--text-main);
      white-space: nowrap;
      max-width: 42px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
.tool-btn:hover {
      background-color: var(--bg-surface-hover);
      border-color: var(--border-light);
    }
.tool-btn.active {
      background-color: var(--accent-active-bg);
      border-color: var(--border-focus);
      color: var(--text-bright);
    }
.tool-btn.active .ico,
.tool-btn.active .label {
      color: var(--text-bright);
    }
.menu-tabs button,
.menu-tabs label,
.top-actions button,
.tool-btn {
      transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
    }
.tool-btn:hover { transform: translateY(-1px); }
.tool-btn:active { transform: translateY(0); }
.tool-btn .ico {
      color: #ffffff;
      filter: none;
      text-shadow: 0 1px 1px rgba(0,0,0,0.35);
    }
.ribbon-group {
      min-width: max-content;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
    }
@media (max-width: 980px) {
.topbar { grid-template-columns: 170px 1fr; grid-auto-rows: auto; row-gap: 6px; padding: 6px 10px; }
.top-actions { grid-column: 1 / -1; justify-content: flex-end; }
.app { grid-template-rows: auto 112px 32px 1fr 44px; }
}
.top-actions:empty { display: none; }
@media (max-width: 1280px) {
.ribbon { gap: 5px; padding-left: 6px; padding-right: 6px; }
.ribbon-group { gap: 2px; padding-left: 4px; padding-right: 4px; }
.tool-btn { width: 41px; height: 43px; }
.tool-btn .ico { font-size: 15px; }
.tool-btn .label { font-size: 8.8px; max-width: 38px; }
}
@media (max-width: 1180px) {
.ribbon {
        justify-content: flex-start;
        flex-wrap: wrap;
        align-content: flex-start;
        overflow-y: auto;
      }
.app { grid-template-rows: auto 132px 32px 1fr 44px; }
}
.app { grid-template-rows: 48px 108px 32px 1fr 40px; }
.ribbon {
      display: grid;
      grid-template-columns: minmax(220px, 1.25fr) minmax(92px, .56fr) minmax(340px, 2fr) minmax(112px, .7fr) minmax(112px, .7fr);
      align-items: stretch;
      gap: 8px;
      padding: 7px 10px;
      overflow: hidden;
    }
.ribbon-group {
      min-width: 0 !important;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      justify-content: center;
      gap: 3px;
      padding: 4px 6px 16px;
      overflow: hidden;
    }
.tool-btn {
      flex: 1 1 42px;
      min-width: 38px;
      max-width: 56px;
      width: auto;
      height: 34px;
      gap: 2px;
      padding: 2px 3px;
    }
.tool-btn .ico { font-size: 15px; }
.tool-btn .label { font-size: 9.2px; max-width: 100%; }
.ribbon-group::after { font-size: 9px; bottom: 3px; }
@media (max-width: 1180px) {
.app { grid-template-rows: auto 118px 32px 1fr 44px; }
.ribbon { grid-template-columns: minmax(185px, 1.2fr) minmax(86px, .55fr) minmax(280px, 1.85fr) minmax(96px, .65fr) minmax(96px, .65fr); }
.tool-btn { flex-basis: 38px; min-width: 35px; height: 33px; }
.tool-btn .label { font-size: 8.7px; }
}
@media (max-width: 780px) {
.app { grid-template-rows: auto 150px 32px 1fr 44px; }
.ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-y: auto; }
}
.app { grid-template-rows: 48px 124px 32px 1fr 40px; }
.ribbon {
      display: grid !important;
      grid-template-columns: minmax(300px, 1.35fr) minmax(185px, .78fr) minmax(540px, 2.45fr) minmax(175px, .72fr) !important;
      gap: 10px !important;
      padding: 8px 12px !important;
      overflow: hidden !important;
      align-items: stretch !important;
    }
.ribbon-group {
      min-width: 0 !important;
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      align-content: center !important;
      gap: 5px !important;
      padding: 24px 8px 8px !important;
      border-radius: 10px !important;
      background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(0,0,0,0.035)), var(--bg-base) !important;
      position: relative !important;
      overflow: hidden !important;
    }
.ribbon-group::after {
      content: attr(data-title) !important;
      position: absolute !important;
      top: 6px !important;
      bottom: auto !important;
      left: 10px !important;
      width: auto !important;
      text-align: left !important;
      font-size: 10px !important;
      font-weight: 800 !important;
      letter-spacing: .55px !important;
      color: var(--accent) !important;
      text-transform: uppercase !important;
      pointer-events: none !important;
    }
.tool-btn {
      flex: 1 1 56px !important;
      min-width: 48px !important;
      max-width: 72px !important;
      height: 42px !important;
      gap: 3px !important;
      padding: 4px 5px !important;
      border-radius: 8px !important;
    }
.tool-btn .ico { font-size: 17px !important; }
.tool-btn .label { font-size: 10.2px !important; max-width: 100% !important; }
body.ui-light .tool-btn .ico,
body.ui-light .tool-btn .label,
body.ui-light .menu-tabs button,
body.ui-light .menu-tabs label {
      color: #111827 !important;
      text-shadow: none !important;
      filter: none !important;
    }
body.ui-light .tool-btn.active {
      background: rgba(159, 29, 53, 0.13) !important;
      border-color: rgba(159, 29, 53, 0.55) !important;
    }
body.ui-light .tool-btn.active .ico,
body.ui-light .tool-btn.active .label { color: #111827 !important; }
body.ui-light .ribbon-group { background: linear-gradient(180deg, #ffffff, #f4f6f8) !important; }
body.ui-light .brand-mark,
body.ui-light .top-actions .primary { color: #ffffff !important; }
@media (max-width: 1280px) {
.app { grid-template-rows: auto 132px 32px 1fr 44px; }
.ribbon { grid-template-columns: minmax(255px, 1.2fr) minmax(155px, .72fr) minmax(450px, 2.35fr) minmax(150px, .7fr) !important; gap: 7px !important; padding: 7px 8px !important; }
.tool-btn { flex-basis: 48px !important; min-width: 42px !important; height: 40px !important; }
.tool-btn .label { font-size: 9.4px !important; }
}
@media (max-width: 980px) {
.app { grid-template-rows: auto 176px 32px 1fr 44px; }
.ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow-y: auto !important; }
}
.app { grid-template-rows: 48px 136px 32px 1fr 40px !important; }
.ribbon {
      display: grid !important;
      grid-template-columns: minmax(465px, 1.45fr) minmax(185px, .58fr) minmax(710px, 2.12fr) minmax(205px, .65fr) !important;
      gap: 10px !important;
      padding: 9px 12px !important;
      align-items: stretch !important;
      overflow: hidden !important;
      background: linear-gradient(180deg, var(--bg-panel), var(--bg-base)) !important;
    }
.ribbon-group {
      display: grid !important;
      grid-auto-rows: 42px !important;
      align-content: start !important;
      justify-content: stretch !important;
      gap: 6px !important;
      padding: 26px 9px 9px !important;
      border-radius: 14px !important;
      border: 1px solid color-mix(in srgb, var(--border), var(--accent) 18%) !important;
      background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(0,0,0,0.045)), var(--bg-surface) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.045) !important;
      min-width: 0 !important;
      overflow: hidden !important;
    }
.ribbon-group:nth-child(1) { grid-template-columns: repeat(5, minmax(54px, 1fr)) !important; }
.ribbon-group:nth-child(2) { grid-template-columns: repeat(3, minmax(54px, 1fr)) !important; }
.ribbon-group:nth-child(3) { grid-template-columns: repeat(7, minmax(54px, 1fr)) !important; }
.ribbon-group:nth-child(4) { grid-template-columns: repeat(4, minmax(54px, 1fr)) !important; }
.ribbon-group::after {
      top: 7px !important;
      left: 12px !important;
      bottom: auto !important;
      width: auto !important;
      font-size: 10.5px !important;
      font-weight: 900 !important;
      letter-spacing: .7px !important;
      text-align: left !important;
      color: var(--accent) !important;
    }
.tool-btn {
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 42px !important;
      border-radius: 10px !important;
      padding: 4px 5px !important;
      gap: 3px !important;
      background: color-mix(in srgb, var(--bg-base), transparent 18%) !important;
      border-color: transparent !important;
      box-shadow: none !important;
    }
.tool-btn .ico { font-size: 17px !important; color: var(--text-bright) !important; }
.tool-btn .label { font-size: 10px !important; max-width: 100% !important; color: var(--text-main) !important; }
.tool-btn:hover { transform: translateY(-1px); background: var(--bg-surface-hover) !important; border-color: var(--border-light) !important; }
.tool-btn.active { background: var(--accent-active-bg) !important; border-color: var(--accent) !important; }
body.ui-light .ribbon { background: linear-gradient(180deg, #f7f8fb, #eceff3) !important; }
body.ui-light .ribbon-group { background: linear-gradient(180deg, #ffffff, #f5f6f8) !important; }
body.ui-light .tool-btn { background: #ffffff !important; }
body.ui-light .tool-btn .ico,
body.ui-light .tool-btn .label { color: #111827 !important; }
body.ui-light .tool-btn:hover { background: #e8ebf0 !important; }
@media (max-width: 1360px) {
.app { grid-template-rows: 48px 150px 32px 1fr 40px !important; }
.ribbon { grid-template-columns: minmax(375px, 1.35fr) minmax(160px, .55fr) minmax(570px, 2.05fr) minmax(175px, .62fr) !important; gap: 7px !important; padding: 8px !important; }
.ribbon-group { gap: 4px !important; padding-left: 7px !important; padding-right: 7px !important; }
.tool-btn { height: 40px !important; }
.tool-btn .ico { font-size: 15px !important; }
.tool-btn .label { font-size: 9px !important; }
}
@media (max-width: 1050px) {
.app { grid-template-rows: 48px 224px 32px 1fr 44px !important; }
.ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow-y: auto !important; }
}
.app { grid-template-rows: 48px 88px 32px 1fr 40px !important; }
.ribbon {
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: stretch !important;
      justify-content: center !important;
      gap: 8px !important;
      height: 88px !important;
      padding: 8px 10px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      scrollbar-width: thin;
      background: linear-gradient(180deg, var(--bg-panel), var(--bg-base)) !important;
    }
.ribbon-group {
      display: flex !important;
      flex: 0 0 auto !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      gap: 4px !important;
      height: 70px !important;
      padding: 20px 8px 7px !important;
      overflow: visible !important;
      border-radius: 14px !important;
    }
.ribbon-group::after {
      top: 5px !important;
      left: 10px !important;
      bottom: auto !important;
      width: auto !important;
      font-size: 10px !important;
      line-height: 1 !important;
    }
.ribbon-group:nth-child(1),
.ribbon-group:nth-child(2),
.ribbon-group:nth-child(3),
.ribbon-group:nth-child(4) {
      grid-template-columns: none !important;
    }
.tool-btn {
      flex: 0 0 48px !important;
      width: 48px !important;
      min-width: 48px !important;
      height: 42px !important;
      padding: 4px 3px !important;
      gap: 3px !important;
      border-radius: 10px !important;
    }
.tool-btn .ico { font-size: 17px !important; }
.tool-btn .label {
      display: block !important;
      font-size: 9.5px !important;
      line-height: 1 !important;
      max-width: 44px !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }
@media (min-width: 1680px) {
.tool-btn { flex-basis: 52px !important; width: 52px !important; min-width: 52px !important; }
.tool-btn .label { max-width: 48px !important; font-size: 10px !important; }
.ribbon-group { gap: 5px !important; }
}
@media (max-width: 1360px) {
.app { grid-template-rows: 48px 82px 32px 1fr 40px !important; }
.ribbon { height: 82px !important; justify-content: flex-start !important; gap: 6px !important; }
.ribbon-group { height: 64px !important; padding: 18px 6px 6px !important; }
.tool-btn { flex-basis: 43px !important; width: 43px !important; min-width: 43px !important; height: 39px !important; }
.tool-btn .ico { font-size: 16px !important; }
.tool-btn .label { font-size: 8.8px !important; max-width: 40px !important; }
}
@media (max-width: 1050px) {
.app { grid-template-rows: 48px 82px 32px 1fr 44px !important; }
.ribbon { grid-template-columns: none !important; overflow-x: auto !important; overflow-y: hidden !important; }
}
.ribbon {
      height: 120px !important;
      display: grid !important;
      grid-template-columns: minmax(360px, 1.18fr) minmax(170px, .52fr) minmax(520px, 1.72fr) minmax(150px, .45fr) !important;
      gap: 8px !important;
      padding: 8px 10px !important;
      overflow: hidden !important;
      align-items: stretch !important;
      justify-content: stretch !important;
      background: linear-gradient(180deg, color-mix(in srgb, var(--bg-panel), #ffffff 3%), var(--bg-base)) !important;
    }
.ribbon-group {
      height: 104px !important;
      display: grid !important;
      grid-auto-flow: row !important;
      align-content: stretch !important;
      justify-content: stretch !important;
      gap: 5px !important;
      padding: 23px 8px 8px !important;
      border-radius: 16px !important;
      overflow: hidden !important;
      background: linear-gradient(180deg, rgba(255,255,255,.052), rgba(0,0,0,.045)), var(--bg-surface) !important;
      border: 1px solid color-mix(in srgb, var(--border), var(--accent) 14%) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 rgba(0,0,0,.16) !important;
      min-width: 0 !important;
      flex: none !important;
    }
.ribbon-group:nth-child(1) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.ribbon-group:nth-child(2) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.ribbon-group:nth-child(3) { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
.ribbon-group:nth-child(4) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.ribbon-group::after {
      top: 7px !important;
      left: 12px !important;
      bottom: auto !important;
      width: auto !important;
      color: var(--accent) !important;
      font-size: 10.5px !important;
      font-weight: 900 !important;
      line-height: 1 !important;
      letter-spacing: .65px !important;
      text-align: left !important;
    }
.tool-btn {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 35px !important;
      min-height: 35px !important;
      flex: none !important;
      display: grid !important;
      grid-template-columns: 19px minmax(0, 1fr) !important;
      grid-template-rows: 1fr !important;
      align-items: center !important;
      justify-content: start !important;
      gap: 5px !important;
      padding: 4px 6px !important;
      border-radius: 10px !important;
      background: color-mix(in srgb, var(--bg-base), transparent 22%) !important;
      border: 1px solid transparent !important;
    }
.tool-btn .ico {
      font-size: 15px !important;
      line-height: 1 !important;
      width: 19px !important;
      text-align: center !important;
      color: var(--text-bright) !important;
    }
.tool-btn .label {
      display: block !important;
      max-width: none !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      font-size: 10.2px !important;
      line-height: 1 !important;
      text-align: left !important;
      color: var(--text-main) !important;
    }
.tool-btn:hover { transform: none !important; background: var(--bg-surface-hover) !important; border-color: var(--border-light) !important; }
.tool-btn.active { background: var(--accent-active-bg) !important; border-color: var(--accent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 25%) !important; }
body.ui-light .ribbon { background: linear-gradient(180deg, #f7f8fb, #e9edf2) !important; }
body.ui-light .ribbon-group { background: linear-gradient(180deg, #ffffff, #f5f7f9) !important; border-color: #cfd5dd !important; }
body.ui-light .tool-btn { background: #ffffff !important; }
body.ui-light .tool-btn .ico,
body.ui-light .tool-btn .label { color: #101827 !important; }
body.ui-light .tool-btn:hover { background: #e8edf3 !important; }
@media (max-width: 1260px) {
.app { grid-template-rows: 48px 148px 32px 1fr 40px !important; }
.ribbon { height: 148px !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: 1fr 1fr !important; overflow: hidden !important; }
.ribbon-group { height: 64px !important; padding-top: 20px !important; }
.ribbon-group:nth-child(1) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.ribbon-group:nth-child(2) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.ribbon-group:nth-child(3) { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
.ribbon-group:nth-child(4) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.tool-btn { height: 31px !important; min-height: 31px !important; padding: 3px 5px !important; }
.tool-btn .label { font-size: 9.4px !important; }
.tool-btn .ico { font-size: 14px !important; }
}
.app { grid-template-rows: 48px 58px 32px 1fr 40px !important; }
.ribbon {
      height: 58px !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 7px !important;
      padding: 7px 10px !important;
      overflow: hidden !important;
      scrollbar-width: none !important;
      background: linear-gradient(180deg, color-mix(in srgb, var(--bg-panel), #ffffff 4%), var(--bg-base)) !important;
      border-bottom: 1px solid var(--border) !important;
    }
.ribbon::-webkit-scrollbar { display: none !important; }
.ribbon-group {
      height: 44px !important;
      min-width: 0 !important;
      flex: 0 1 auto !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 4px !important;
      padding: 5px 7px !important;
      overflow: visible !important;
      border-radius: 14px !important;
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.04)), var(--bg-surface) !important;
      border: 1px solid color-mix(in srgb, var(--border), var(--accent) 14%) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(0,0,0,.12) !important;
    }
.ribbon-group::after { display: none !important; }
.tool-btn {
      flex: 0 0 34px !important;
      width: 34px !important;
      min-width: 34px !important;
      max-width: 34px !important;
      height: 34px !important;
      min-height: 34px !important;
      display: grid !important;
      grid-template-columns: 1fr !important;
      place-items: center !important;
      padding: 0 !important;
      gap: 0 !important;
      border-radius: 10px !important;
      background: color-mix(in srgb, var(--bg-base), transparent 20%) !important;
      border: 1px solid transparent !important;
    }
.tool-btn .ico {
      width: auto !important;
      font-size: 19px !important;
      line-height: 1 !important;
      text-align: center !important;
      color: var(--text-bright) !important;
    }
.tool-btn .label { display: none !important; }
.tool-btn:hover {
      transform: translateY(-1px) !important;
      background: var(--bg-surface-hover) !important;
      border-color: var(--border-light) !important;
    }
.tool-btn.active {
      background: var(--accent-active-bg) !important;
      border-color: var(--accent) !important;
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 28%) !important;
    }
body.ui-light .ribbon { background: linear-gradient(180deg, #f7f8fb, #e6ebf0) !important; }
body.ui-light .ribbon-group { background: linear-gradient(180deg, #ffffff, #f4f6f8) !important; border-color: #cfd5dd !important; }
body.ui-light .tool-btn { background: #ffffff !important; }
body.ui-light .tool-btn .ico { color: #111827 !important; }
body.ui-light .tool-btn:hover { background: #e8edf3 !important; }
@media (max-width: 1280px) {
.ribbon { gap: 5px !important; padding-left: 6px !important; padding-right: 6px !important; }
.ribbon-group { gap: 3px !important; padding-left: 5px !important; padding-right: 5px !important; }
.tool-btn { flex-basis: 31px !important; width: 31px !important; min-width: 31px !important; max-width: 31px !important; height: 32px !important; min-height: 32px !important; }
.tool-btn .ico { font-size: 17px !important; }
}
@media (max-width: 1020px) {
.app { grid-template-rows: 48px 52px 32px 1fr 44px !important; }
.ribbon { height: 52px !important; gap: 3px !important; padding: 5px !important; }
.ribbon-group { height: 40px !important; gap: 2px !important; padding: 4px !important; border-radius: 11px !important; }
.tool-btn { flex-basis: 27px !important; width: 27px !important; min-width: 27px !important; max-width: 27px !important; height: 30px !important; min-height: 30px !important; border-radius: 8px !important; }
.tool-btn .ico { font-size: 16px !important; }
}
.topbar {
      grid-template-columns: 210px minmax(0, 1fr) auto !important;
      padding: 0 14px !important;
    }
.menu-tabs { gap: 8px !important; }
.ribbon {
      height: 70px !important;
      width: 100% !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 10px !important;
      padding: 8px 10px !important;
      overflow: hidden !important;
      scrollbar-width: none !important;
      background: linear-gradient(180deg, color-mix(in srgb, var(--bg-panel), #ffffff 6%), var(--bg-base)) !important;
      border-bottom: 1px solid var(--border) !important;
    }
.ribbon-group {
      height: 54px !important;
      min-width: 0 !important;
      flex: 0 1 auto !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 5px !important;
      padding: 6px 9px !important;
      overflow: visible !important;
      border-radius: 16px !important;
      background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(0,0,0,.05)), var(--bg-surface) !important;
      border: 1px solid color-mix(in srgb, var(--border), var(--accent) 18%) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(0,0,0,.16) !important;
    }
.ribbon-group::after { display: none !important; }
.ribbon-group + .ribbon-group { position: relative; }
.ribbon-group + .ribbon-group::before {
      content: '';
      position: absolute;
      left: -6px;
      top: 9px;
      bottom: 9px;
      width: 1px;
      background: color-mix(in srgb, var(--border-light), transparent 35%);
    }
.tool-btn {
      flex: 0 0 clamp(34px, 2.55vw, 42px) !important;
      width: clamp(34px, 2.55vw, 42px) !important;
      min-width: clamp(34px, 2.55vw, 42px) !important;
      max-width: clamp(34px, 2.55vw, 42px) !important;
      height: clamp(36px, 2.75vw, 44px) !important;
      min-height: clamp(36px, 2.75vw, 44px) !important;
      border-radius: 12px !important;
      display: grid !important;
      place-items: center !important;
      padding: 0 !important;
      background: color-mix(in srgb, var(--bg-base), transparent 24%) !important;
      border: 1px solid transparent !important;
    }
.tool-btn .ico { font-size: clamp(18px, 1.35vw, 22px) !important; color: var(--text-bright) !important; }
.tool-btn .label { display: none !important; }
.tool-btn:hover { transform: translateY(-1px) !important; background: var(--bg-surface-hover) !important; border-color: var(--border-light) !important; }
.tool-btn.active { background: var(--accent-active-bg) !important; border-color: var(--accent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent), transparent 28%) !important; }
body.ui-light .ribbon { background: linear-gradient(180deg, #f8fafc, #e6ebf0) !important; }
body.ui-light .ribbon-group { background: linear-gradient(180deg, #ffffff, #f2f5f8) !important; border-color: #cfd5dd !important; }
body.ui-light .ribbon-group + .ribbon-group::before { background: #c7ced8; }
body.ui-light .tool-btn { background: #ffffff !important; }
body.ui-light .tool-btn .ico { color: #111827 !important; }
.topbar {
      grid-template-columns: 210px minmax(0, 1fr) auto !important;
    }
.menu-tabs {
      justify-content: center !important;
      gap: 6px !important;
    }
.menu-tabs button,
.menu-tabs label {
      min-width: 68px;
      height: 32px;
      padding: 0 11px !important;
      border-radius: 9px !important;
      font-weight: 600;
    }
.ribbon {
      height: 76px !important;
      padding: 7px 12px 8px !important;
      gap: 9px !important;
    }
.ribbon-group {
      height: 60px !important;
      padding: 5px 10px 18px !important;
      gap: 5px !important;
      align-items: flex-start !important;
      position: relative !important;
    }
.ribbon-group::after {
      display: block !important;
      content: attr(data-title) !important;
      position: absolute !important;
      left: 8px !important;
      right: 8px !important;
      bottom: 3px !important;
      height: 13px !important;
      line-height: 13px !important;
      text-align: center !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      letter-spacing: .28px !important;
      color: var(--text-muted) !important;
      text-transform: uppercase !important;
      pointer-events: none !important;
      opacity: .98 !important;
    }
.tool-btn {
      flex: 0 0 clamp(34px, 2.45vw, 40px) !important;
      width: clamp(34px, 2.45vw, 40px) !important;
      min-width: clamp(34px, 2.45vw, 40px) !important;
      max-width: clamp(34px, 2.45vw, 40px) !important;
      height: 36px !important;
      min-height: 36px !important;
      border-radius: 11px !important;
    }
.tool-btn .ico { font-size: clamp(18px, 1.28vw, 21px) !important; }
body.ui-light .ribbon-group::after { color: #5b6472 !important; }
@media (max-width: 1300px) {
.ribbon { gap: 6px !important; padding: 7px 7px !important; }
.ribbon-group { gap: 3px !important; padding: 5px 6px !important; border-radius: 14px !important; }
.tool-btn { flex-basis: 32px !important; width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 35px !important; min-height: 35px !important; }
.tool-btn .ico { font-size: 18px !important; }
}
@media (max-width: 1100px) {
.app { grid-template-rows: 48px 62px 32px 1fr 44px !important; }
.ribbon { height: 62px !important; gap: 4px !important; padding: 6px !important; }
.ribbon-group { height: 48px !important; gap: 2px !important; padding: 5px !important; }
.tool-btn { flex-basis: 29px !important; width: 29px !important; min-width: 29px !important; max-width: 29px !important; height: 32px !important; min-height: 32px !important; border-radius: 9px !important; }
.tool-btn .ico { font-size: 16px !important; }
.brand small { display: none !important; }
.topbar { grid-template-columns: 160px minmax(0, 1fr) auto !important; }
}
.ribbon-spacer,
.tool-btn.micro { display: none !important; }
.app { grid-template-rows: 48px 82px 32px 1fr 40px !important; }
.topbar { grid-template-columns: 210px minmax(0, 1fr) 1px !important; }
.menu-tabs {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 7px !important;
      min-width: 0 !important;
    }
.menu-tabs button,
.menu-tabs label {
      min-width: 72px !important;
      height: 32px !important;
      padding: 0 12px !important;
      border-radius: 9px !important;
      font-weight: 600 !important;
      line-height: 32px !important;
    }
.top-actions { width: 1px !important; min-width: 1px !important; overflow: hidden !important; }
.ribbon {
      height: 82px !important;
      width: 100% !important;
      display: grid !important;
      grid-template-columns: minmax(318px, 1.58fr) minmax(116px, .48fr) minmax(438px, 2.28fr) minmax(206px, .88fr) !important;
      align-items: stretch !important;
      gap: 10px !important;
      padding: 8px 12px !important;
      overflow: hidden !important;
      scrollbar-width: none !important;
      background: linear-gradient(180deg, color-mix(in srgb, var(--bg-panel), #ffffff 7%), var(--bg-base)) !important;
      border-bottom: 1px solid var(--border) !important;
    }
.ribbon::-webkit-scrollbar { display: none !important; }
.ribbon-group {
      height: 66px !important;
      min-width: 0 !important;
      width: 100% !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: flex-start !important;
      justify-content: center !important;
      gap: 5px !important;
      padding: 7px 10px 20px !important;
      position: relative !important;
      overflow: hidden !important;
      border-radius: 16px !important;
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.035)), var(--bg-surface) !important;
      border: 1px solid color-mix(in srgb, var(--border), var(--accent) 14%) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(0,0,0,.14) !important;
    }
.ribbon-group::after {
      display: block !important;
      content: attr(data-title) !important;
      position: absolute !important;
      left: 10px !important;
      right: 10px !important;
      bottom: 4px !important;
      height: 13px !important;
      line-height: 13px !important;
      text-align: center !important;
      font-size: 10px !important;
      font-weight: 800 !important;
      letter-spacing: .34px !important;
      color: var(--text-muted) !important;
      text-transform: uppercase !important;
      pointer-events: none !important;
      opacity: .95 !important;
    }
.ribbon-group + .ribbon-group::before { display: none !important; }
.tool-btn {
      flex: 1 1 0 !important;
      width: auto !important;
      min-width: 30px !important;
      max-width: 42px !important;
      height: 38px !important;
      min-height: 38px !important;
      border-radius: 12px !important;
      display: grid !important;
      place-items: center !important;
      padding: 0 !important;
      background: color-mix(in srgb, var(--bg-base), transparent 24%) !important;
      border: 1px solid transparent !important;
    }
.tool-btn .label { display: none !important; }
.tool-btn .ico { font-size: clamp(18px, 1.25vw, 22px) !important; color: var(--text-bright) !important; }
.tool-btn:hover { transform: translateY(-1px) !important; background: var(--bg-surface-hover) !important; border-color: var(--border-light) !important; }
.tool-btn.active { background: var(--accent-active-bg) !important; border-color: var(--accent) !important; }
body.ui-light .ribbon { background: linear-gradient(180deg, #f8fafc, #e7ecf2) !important; }
body.ui-light .ribbon-group { background: linear-gradient(180deg, #ffffff, #f3f6f9) !important; border-color: #cfd5dd !important; }
body.ui-light .ribbon-group::after { color: #5f6b7a !important; }
body.ui-light .tool-btn { background: #ffffff !important; }
body.ui-light .tool-btn .ico { color: #111827 !important; }
body.ui-light .tool-btn:hover { background: #e8edf3 !important; }
@media (max-width: 1320px) {
.ribbon { grid-template-columns: minmax(286px, 1.45fr) minmax(104px, .45fr) minmax(390px, 2.2fr) minmax(184px, .82fr) !important; gap: 7px !important; padding-left: 8px !important; padding-right: 8px !important; }
.ribbon-group { gap: 3px !important; padding-left: 7px !important; padding-right: 7px !important; }
.tool-btn { min-width: 27px !important; height: 36px !important; }
.tool-btn .ico { font-size: 18px !important; }
.menu-tabs button,
.menu-tabs label { min-width: 62px !important; padding: 0 9px !important; }
}
@media (max-width: 1080px) {
.app { grid-template-rows: 48px 78px 32px 1fr 44px !important; }
.ribbon { grid-template-columns: minmax(244px, 1.4fr) minmax(88px, .43fr) minmax(332px, 2.05fr) minmax(158px, .8fr) !important; gap: 5px !important; padding: 7px 6px !important; }
.ribbon-group { height: 62px !important; gap: 2px !important; padding: 7px 5px 18px !important; border-radius: 13px !important; }
.tool-btn { min-width: 23px !important; height: 34px !important; border-radius: 9px !important; }
.tool-btn .ico { font-size: 16px !important; }
.brand small { display: none !important; }
.topbar { grid-template-columns: 155px minmax(0, 1fr) 1px !important; }
}
bordo retain prompt --- */
    .topbar {
      grid-template-columns: auto minmax(0, 1fr) 0 !important;
      justify-content: start !important;
      column-gap: 18px !important;
      padding: 0 14px 0 16px !important;
    }
.brand {
      min-width: max-content !important;
      flex: 0 0 auto !important;
    }
.menu-tabs {
      justify-content: flex-start !important;
      justify-self: start !important;
      width: auto !important;
      gap: 6px !important;
      margin-left: 4px !important;
    }
.menu-tabs button,
.menu-tabs label {
      min-width: auto !important;
      height: 32px !important;
      padding: 0 11px !important;
      line-height: 32px !important;
      border-radius: 9px !important;
    }
.top-actions {
      width: 0 !important;
      min-width: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: hidden !important;
    }
.app { grid-template-rows: 48px 88px 32px 1fr 40px !important; }
.ribbon {
      height: 88px !important;
      padding: 9px 12px !important;
      gap: 10px !important;
      align-items: stretch !important;
      grid-template-columns: minmax(330px, 1.62fr) minmax(124px, .50fr) minmax(456px, 2.34fr) minmax(210px, .90fr) !important;
    }
.ribbon-group {
      height: 70px !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: flex-start !important;
      justify-content: center !important;
      gap: 5px !important;
      padding: 7px 9px 25px !important;
      position: relative !important;
      overflow: hidden !important;
      border-radius: 15px !important;
    }
.ribbon-group::after {
      display: block !important;
      content: attr(data-title) !important;
      position: absolute !important;
      left: 8px !important;
      right: 8px !important;
      bottom: 0 !important;
      height: 20px !important;
      line-height: 19px !important;
      padding-top: 1px !important;
      text-align: center !important;
      border-top: 1px solid color-mix(in srgb, var(--border), transparent 35%) !important;
      background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.08)) !important;
      border-radius: 0 0 12px 12px !important;
      font-size: 10px !important;
      font-weight: 800 !important;
      letter-spacing: .45px !important;
      color: color-mix(in srgb, var(--text-muted), var(--text-bright) 22%) !important;
      text-transform: uppercase !important;
      pointer-events: none !important;
      z-index: 0 !important;
    }
.tool-btn {
      position: relative !important;
      z-index: 1 !important;
      height: 38px !important;
      min-height: 38px !important;
      max-width: 43px !important;
      border-radius: 11px !important;
    }
.tool-btn .ico { font-size: clamp(18px, 1.25vw, 22px) !important; }
body.ui-light .ribbon-group::after {
      color: #53606f !important;
      border-top-color: #d4dae2 !important;
      background: linear-gradient(180deg, rgba(255,255,255,.95), #eef2f6) !important;
    }
@media (max-width: 1320px) {
.topbar { grid-template-columns: auto minmax(0,1fr) 0 !important; column-gap: 12px !important; }
.brand small { display: none !important; }
.menu-tabs { gap: 4px !important; }
.menu-tabs button,
.menu-tabs label { padding: 0 8px !important; }
.ribbon { height: 84px !important; grid-template-columns: minmax(286px, 1.5fr) minmax(108px,.48fr) minmax(398px,2.2fr) minmax(180px,.82fr) !important; gap: 7px !important; padding: 8px !important; }
.ribbon-group { height: 66px !important; gap: 3px !important; padding: 6px 6px 23px !important; }
.tool-btn { min-width: 27px !important; height: 36px !important; }
.tool-btn .ico { font-size: 18px !important; }
}
@media (max-width: 1080px) {
.app { grid-template-rows: 48px 82px 32px 1fr 44px !important; }
.topbar { grid-template-columns: auto minmax(0,1fr) 0 !important; }
.brand { gap: 8px !important; }
.brand-mark { width: 26px !important; height: 26px !important; }
.menu-tabs button,
.menu-tabs label { padding: 0 7px !important; font-size: 12px !important; }
.ribbon { height: 82px !important; grid-template-columns: minmax(252px,1.42fr) minmax(91px,.43fr) minmax(350px,2.05fr) minmax(160px,.76fr) !important; gap: 5px !important; padding: 7px 6px !important; }
.ribbon-group { height: 64px !important; gap: 2px !important; padding: 6px 5px 22px !important; border-radius: 13px !important; }
.ribbon-group::after { height: 18px !important; line-height: 17px !important; font-size: 9px !important; }
.tool-btn { min-width: 23px !important; height: 34px !important; border-radius: 9px !important; }
.tool-btn .ico { font-size: 16px !important; }
}

/* Source <style> block 2 */
:root {
  --font-jetbrains: "JetBrains Mono", "Consolas", "Cascadia Code", monospace;
  --ribbon-h: 86px;
  --strip-accent: #9f1d35;
  --strip-accent-glow: rgba(159,29,53,0.18);
  --strip-btn-bg: #242426;
  --strip-btn-hover: #2e2e32;
  --strip-btn-active-bg: rgba(159,29,53,0.20);
  --strip-btn-active-border: rgba(159,29,53,0.70);
  --strip-sep: rgba(255,255,255,0.07);
  --strip-label-idle: #606068;
  --strip-label-hover: #9f1d35;
  --strip-icon-idle: #8a8a96;
  --strip-icon-active: #ffffff;
  --strip-group-tag: #7a7a88;
}
.topbar {
      background: linear-gradient(180deg, #262628 0%, #1f1f21 100%) !important;
      border-bottom: 1px solid #111113 !important;
      padding: 0 16px !important;
    }
.brand {
      gap: 8px !important;
    }
.brand-mark {
      display: none !important;
    }
.brand > div {
      font-size: 0 !important;
      line-height: 1.1 !important;
    }
.brand > div::before {
      content: "Turk" !important;
      font-size: 17px !important;
      font-weight: 700 !important;
      color: #ffffff !important;
      letter-spacing: -0.2px !important;
      font-family: var(--font-jetbrains) !important;
    }
.brand > div::after {
      content: "CAD" !important;
      font-size: 17px !important;
      font-weight: 700 !important;
      color: #c92a45 !important;
      letter-spacing: -0.2px !important;
      font-family: var(--font-jetbrains) !important;
    }
.brand small {
      display: block !important;
      font-size: 8px !important;
      font-weight: 400 !important;
      letter-spacing: 2px !important;
      text-transform: uppercase !important;
      color: #555 !important;
      margin-top: 2px !important;
      font-family: var(--font-jetbrains) !important;
    }
.menu-tabs button,
.menu-tabs label {
      display: inline-flex !important;
      align-items: center !important;
      gap: 5px !important;
      padding: 6px 10px !important;
      border-radius: 4px !important;
      font-family: var(--font-ui) !important;
      font-size: 12px !important;
      font-weight: 400 !important;
      color: #aaa !important;
      transition: all 0.15s !important;
      border: none !important;
      background: transparent !important;
      line-height: 1 !important;
    }
.menu-tabs button:hover,
.menu-tabs label:hover {
      background: rgba(255,255,255,0.05) !important;
      color: #eee !important;
    }
.menu-tabs button::before,
.menu-tabs label::before {
      content: "" !important;
      display: inline-block !important;
      width: 15px !important;
      height: 15px !important;
      flex-shrink: 0 !important;
      background-size: contain !important;
      background-repeat: no-repeat !important;
      background-position: center !important;
      vertical-align: middle !important;
    }
#newBtn::before { background-image: url("../assets/icons/menu/new.svg") !important; }
#saveBtn::before { background-image: url("../assets/icons/menu/save.svg") !important; }
#settingsBtn::before { background-image: url("../assets/icons/menu/settings.svg") !important; }
#panelTopBtn::before { background-image: url("../assets/icons/menu/panels.svg") !important; }
#helpBtn::before { background-image: url("../assets/icons/menu/help.svg") !important; }
[data-i18n="openFile"]::before { background-image: url("../assets/icons/menu/open.svg") !important; }
.app { grid-template-rows: 48px var(--ribbon-h) 32px 1fr 40px !important; }
.ribbon {
      all: unset !important;
      display: flex !important;
      flex-direction: row !important;
      align-items: stretch !important;
      height: var(--ribbon-h) !important;
      background: linear-gradient(180deg,
        #232325 0%,
        #1e1e20 55%,
        #1b1b1d 100%) !important;
      border-bottom: 1px solid #111113 !important;
      box-shadow:
        0 1px 0 rgba(255,255,255,0.03) inset,
        0 4px 18px rgba(0,0,0,0.5) !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      position: relative !important;
      z-index: 10 !important;
      padding: 0 8px !important;
      gap: 0 !important;
    }
.ribbon::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.04) 2px,
        rgba(0,0,0,0.04) 3px
      ) !important;
      pointer-events: none !important;
      z-index: 0 !important;
    }
.ribbon-mode-rail {
      display: none !important;
    }
.rmode-btn { display: none !important; }
.ribbon-panels {
      display: flex !important;
      flex: 1 !important;
      min-width: 0 !important;
      align-items: stretch !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      position: relative !important;
      z-index: 1 !important;
    }
.ribbon-panel {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      padding: 0 10px !important;
      position: relative !important;
      flex-shrink: 0 !important;
      overflow: visible !important;
    }
.ribbon-panel + .ribbon-panel::before {
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      top: 14px !important;
      bottom: 14px !important;
      width: 1px !important;
      background: var(--strip-sep) !important;
    }
bigger and visible */
    .ribbon-panel .rp-tag {
      position: absolute !important;
      top: 4px !important;
      left: 10px !important;
      font-family: var(--font-jetbrains) !important;
      font-size: 9.5px !important;
      font-weight: 600 !important;
      letter-spacing: 0.08em !important;
      text-transform: uppercase !important;
      color: #c92a45 !important;
      pointer-events: none !important;
      white-space: nowrap !important;
      opacity: 1 !important;
    }
.ribbon-panel .rp-tools {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 2px !important;
      flex-wrap: nowrap !important;
      padding-top: 18px !important;
    }
.ribbon-panel[data-panel-hidden="true"] {
      display: flex !important;
    }
.tool-btn {
      all: unset !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 3px !important;
      width: 46px !important;
      height: 56px !important;
      border-radius: 4px !important;
      cursor: pointer !important;
      position: relative !important;
      transition:
        background 0.12s,
        box-shadow 0.12s,
        transform 0.09s !important;
      flex-shrink: 0 !important;
      background: transparent !important;
      border: 1px solid transparent !important;
      box-sizing: border-box !important;
      overflow: visible !important;
    }
.tool-btn::after {
      content: "" !important;
      position: absolute !important;
      bottom: -1px !important;
      left: 20% !important;
      right: 20% !important;
      height: 2px !important;
      border-radius: 1px !important;
      background: transparent !important;
      transition: background 0.15s !important;
    }
.tool-btn:hover {
      background: var(--strip-btn-hover) !important;
      border-color: rgba(255,255,255,0.06) !important;
      transform: translateY(-1px) !important;
    }
.tool-btn:hover .tool-label {
      color: var(--strip-label-hover) !important;
    }
.tool-btn:active {
      transform: translateY(0px) !important;
      background: rgba(255,255,255,0.03) !important;
    }
.tool-btn.active {
      background: var(--strip-btn-active-bg) !important;
      border-color: var(--strip-btn-active-border) !important;
      box-shadow:
        0 0 0 1px rgba(159,29,53,0.12) inset,
        0 2px 12px rgba(159,29,53,0.18) !important;
    }
.tool-btn.active::after {
      background: var(--strip-accent) !important;
      box-shadow: 0 0 6px var(--strip-accent) !important;
    }
.tool-btn:disabled {
      opacity: 0.28 !important;
      cursor: not-allowed !important;
      pointer-events: none !important;
    }
.tool-btn .ico {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 20px !important;
      height: 20px !important;
      flex-shrink: 0 !important;
      font-family: var(--font-jetbrains) !important;
      font-size: 0 !important; /* hide old unicode chars */
    }
.tool-btn .ico svg {
      width: 18px !important;
      height: 18px !important;
      fill: none !important;
      stroke: var(--strip-icon-idle) !important;
      stroke-width: 1.4 !important;
      stroke-linecap: round !important;
      stroke-linejoin: round !important;
      transition: stroke 0.12s !important;
      overflow: visible !important;
    }
.tool-btn:hover .ico svg { stroke: #d0d0dc !important; }
.tool-btn.active .ico svg { stroke: var(--strip-icon-active) !important; }
.tool-btn:disabled .ico svg { stroke: #444448 !important; }
.tool-btn .label {
      font-family: var(--font-ui) !important;
      font-size: 9px !important;
      font-weight: 400 !important;
      letter-spacing: 0 !important;
      color: #888 !important;
      white-space: nowrap !important;
      transition: color 0.12s !important;
      line-height: 1 !important;
      max-width: 52px !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      display: block !important;
    }
.tool-btn:hover .label { color: var(--strip-label-hover) !important; }
.tool-btn.active .label { color: #ccc !important; }
.ribbon-group {
      all: unset !important;
      display: none !important;
    }
.ribbon-group::after { display: none !important; }
@media (max-width: 1400px) {
.ribbon-panel { padding: 0 7px !important; }
.tool-btn { width: 40px !important; height: 50px !important; }
}
@media (max-width: 1200px) {
.ribbon-panel { padding: 0 5px !important; }
.tool-btn { width: 37px !important; height: 48px !important; }
.tool-btn .ico svg { width: 16px !important; height: 16px !important; }
.tool-btn .label { font-size: 6.6px !important; }
}
@media (max-width: 960px) {
.ribbon-panel { padding: 0 4px !important; }
.tool-btn { width: 33px !important; height: 46px !important; }
.tool-btn .ico svg { width: 14px !important; height: 14px !important; }
.tool-btn .label { font-size: 6.5px !important; }
.ribbon-panel .rp-tag { font-size: 7px !important; }
.ribbon-panel .rp-tools { padding-top: 12px !important; }
}

/* Source <style> block 3 */
light theme and help modal enhancements
       ========================================================= */
    .brand {
      gap: 10px !important;
      min-width: 270px !important;
      align-items: center !important;
    }
.brand .brand-mark {
      display: grid !important;
      width: 38px !important;
      height: 38px !important;
      min-width: 38px !important;
      padding: 0 !important;
      place-items: center !important;
      border: 0 !important;
      border-radius: 12px !important;
      background: transparent !important;
      box-shadow: 0 8px 22px rgba(0,0,0,.28), 0 0 0 1px rgba(201,42,69,.30) !important;
      overflow: hidden !important;
    }
.brand .brand-mark svg { width: 100% !important; height: 100% !important; display: block !important; }
.brand .brand-mark::before,
.brand .brand-mark::after,
.brand .brand-copy::before,
.brand .brand-copy::after {
      content: none !important;
      display: none !important;
    }
.brand .brand-copy {
      font-size: initial !important;
      line-height: 1 !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 2px !important;
      min-width: 0 !important;
    }
.brand-title {
      display: flex !important;
      align-items: baseline !important;
      gap: 0 !important;
      white-space: nowrap !important;
      font-family: var(--font-jetbrains, var(--font-ui)) !important;
      letter-spacing: -0.35px !important;
    }
.brand-turk {
      color: #ffffff !important;
      font-size: 18px !important;
      font-weight: 700 !important;
    }
.brand-cad {
      color: #c92a45 !important;
      font-size: 18px !important;
      font-weight: 700 !important;
    }
.brand-version {
      margin-left: 10px !important;
      color: #8f949d !important;
      font-family: var(--font-jetbrains, var(--font-ui)) !important;
      font-size: 10.5px !important;
      font-weight: 300 !important;
      letter-spacing: .03em !important;
      opacity: .86 !important;
    }
.brand small {
      display: block !important;
      margin-top: 1px !important;
      font-size: 8px !important;
      font-weight: 500 !important;
      letter-spacing: 2.5px !important;
      color: #8a8d96 !important;
      font-family: var(--font-jetbrains, var(--font-ui)) !important;
    }
.ribbon-panel {
      padding: 0 12px 20px !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: max-content !important;
    }
.ribbon-panel .rp-tools {
      padding-top: 13px !important;
      align-items: center !important;
    }
.ribbon-panel .rp-tag {
      top: auto !important;
      left: 10px !important;
      right: 10px !important;
      bottom: 5px !important;
      height: 16px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      color: #c92a45 !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      letter-spacing: .12em !important;
      line-height: 1 !important;
      padding-top: 5px !important;
      border-top: 1px solid rgba(255,255,255,.07) !important;
      opacity: .98 !important;
    }
.ribbon-panel + .ribbon-panel::before { top: 16px !important; bottom: 18px !important; }
body.ui-light .topbar {
      background: linear-gradient(180deg, #ffffff 0%, #f2f5f8 100%) !important;
      border-bottom: 1px solid #d7dee7 !important;
      box-shadow: 0 1px 0 rgba(255,255,255,.92) inset, 0 8px 20px rgba(30,41,59,.08) !important;
    }
body.ui-light .brand .brand-mark {
      box-shadow: 0 8px 18px rgba(127,22,41,.16), 0 0 0 1px rgba(159,29,53,.18) !important;
    }
body.ui-light .brand-turk {
      color: #ffffff !important;
      text-shadow: 0 1px 2px rgba(17,24,39,.55), 0 0 1px #111827 !important;
    }
body.ui-light .brand-cad { color: #9f1d35 !important; }
body.ui-light .brand-version { color: #7b8492 !important; }
body.ui-light .brand small { color: #667085 !important; }
body.ui-light .menu-tabs button,
body.ui-light .menu-tabs label {
      color: #273142 !important;
      background: transparent !important;
      border: 1px solid transparent !important;
    }
body.ui-light .menu-tabs button:hover,
body.ui-light .menu-tabs label:hover {
      color: #111827 !important;
      background: #e8edf3 !important;
      border-color: #d5dce5 !important;
    }
body.ui-light .menu-tabs button::before,
body.ui-light .menu-tabs label::before {
      filter: brightness(0) saturate(100%) invert(17%) sepia(15%) saturate(1045%) hue-rotate(179deg) brightness(92%) contrast(88%) !important;
      opacity: .9 !important;
    }
body.ui-light .ribbon {
      background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 55%, #e7edf4 100%) !important;
      border-bottom: 1px solid #d5dce5 !important;
      box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 18px rgba(30,41,59,.08) !important;
    }
body.ui-light .ribbon::before { opacity: .18 !important; }
body.ui-light .ribbon-panel + .ribbon-panel::before { background: #d6dde7 !important; }
body.ui-light .ribbon-panel .rp-tag {
      color: #9f1d35 !important;
      border-top-color: #dfe5ed !important;
    }
body.ui-light .tool-btn { background: transparent !important; }
body.ui-light .tool-btn:hover {
      background: #e7ecf3 !important;
      border-color: #cfd8e3 !important;
    }
body.ui-light .tool-btn.active {
      background: rgba(159,29,53,.10) !important;
      border-color: rgba(159,29,53,.38) !important;
      box-shadow: 0 0 0 1px rgba(159,29,53,.10) inset, 0 2px 10px rgba(159,29,53,.10) !important;
    }
body.ui-light .tool-btn .label { color: #5f6b7a !important; }
body.ui-light .tool-btn:hover .label { color: #9f1d35 !important; }
body.ui-light .tool-btn .ico svg { stroke: #3f4b5a !important; }
body.ui-light .tool-btn:hover .ico svg,
body.ui-light .tool-btn.active .ico svg { stroke: #111827 !important; }
@media (max-width: 780px) {
.brand { min-width: 215px !important; }
.brand-version { display: none !important; }
.ribbon-panel .rp-tag { font-size: 8px !important; letter-spacing: .08em !important; }
}

/* Source <style> block 4 */
:root {
  --ribbon-h: 86px !important;
}
.topbar {
      grid-template-columns: max-content minmax(0, 1fr) 0 !important;
      column-gap: 10px !important;
      padding-left: 16px !important;
      padding-right: 12px !important;
    }
.menu-tabs {
      justify-content: flex-start !important;
      justify-self: start !important;
      margin-left: 2px !important;
      gap: 5px !important;
      width: auto !important;
    }
.menu-tabs button,
.menu-tabs label {
      padding-left: 9px !important;
      padding-right: 9px !important;
      min-width: auto !important;
    }
.ribbon {
      height: var(--ribbon-h) !important;
      padding-top: 0 !important;
      margin-top: 0 !important;
    }
.ribbon-panel {
      padding-top: 0 !important;
      padding-bottom: 18px !important;
    }
.ribbon-panel .rp-tools {
      padding-top: 7px !important;
    }
.ribbon-panel .rp-tag {
      bottom: 4px !important;
      height: 15px !important;
      padding-top: 4px !important;
    }
@media (max-width: 1080px) {
:root {
  --ribbon-h: 80px !important;
}
.topbar { column-gap: 7px !important; padding-left: 10px !important; }
.menu-tabs { gap: 3px !important; }
.menu-tabs button,
.menu-tabs label { padding-left: 7px !important; padding-right: 7px !important; }
}

/* Source <style> block 5 */
:root {
  --tc-topbar-h: 46px;
  --tc-ribbon-h-responsive: clamp(68px, 6.3vw, 82px);
  --tc-ribbon-gap: clamp(3px, .45vw, 8px);
  --tc-tool-size: clamp(31px, 2.42vw, 46px);
  --tc-tool-icon-size: clamp(19px, 1.45vw, 24px);
}
.app {
      grid-template-rows: var(--tc-topbar-h) var(--tc-ribbon-h-responsive) 32px 1fr 40px !important;
    }
.topbar {
      min-height: var(--tc-topbar-h) !important;
      height: var(--tc-topbar-h) !important;
      grid-template-columns: auto auto minmax(0, 1fr) !important;
      column-gap: 14px !important;
      align-items: center !important;
      justify-content: start !important;
      padding: 0 14px !important;
      overflow: hidden !important;
    }
.brand {
      min-width: 0 !important;
      flex: 0 0 auto !important;
      gap: 8px !important;
    }
.brand .brand-mark {
      width: 34px !important;
      height: 34px !important;
      flex: 0 0 34px !important;
    }
.brand-title { align-items: baseline !important; }
.brand-turk,
.brand-cad { font-size: 18px !important; }
.brand-version { font-size: 10px !important; margin-left: 8px !important; opacity: .72 !important; }
.brand small { font-size: 7.5px !important; letter-spacing: 2.1px !important; }
.menu-tabs {
      justify-content: flex-start !important;
      justify-self: start !important;
      align-items: center !important;
      width: auto !important;
      margin-left: 0 !important;
      gap: 5px !important;
      padding: 3px !important;
      border: 1px solid rgba(255,255,255,.055) !important;
      border-radius: 12px !important;
      background: rgba(255,255,255,.028) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
      min-width: 0 !important;
    }
.menu-tabs button,
.menu-tabs label {
      height: 30px !important;
      min-width: auto !important;
      padding: 0 10px !important;
      border-radius: 9px !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      letter-spacing: .01em !important;
      color: color-mix(in srgb, var(--text-main), var(--text-bright) 12%) !important;
      border: 1px solid transparent !important;
      background: transparent !important;
      white-space: nowrap !important;
    }
.menu-tabs button:hover,
.menu-tabs label:hover {
      background: rgba(255,255,255,.075) !important;
      border-color: rgba(255,255,255,.06) !important;
      color: var(--text-bright) !important;
    }
body.ui-light .menu-tabs {
      background: rgba(255,255,255,.76) !important;
      border-color: #d9e1ea !important;
      box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(30,41,59,.06) !important;
    }
body.ui-light .menu-tabs button,
body.ui-light .menu-tabs label {
      color: #293445 !important;
      background: transparent !important;
    }
body.ui-light .menu-tabs button:hover,
body.ui-light .menu-tabs label:hover {
      background: #edf2f7 !important;
      border-color: #d7dee8 !important;
      color: #111827 !important;
    }
#ribbonV2.ribbon {
      all: unset !important;
      display: flex !important;
      align-items: stretch !important;
      box-sizing: border-box !important;
      width: 100% !important;
      height: var(--tc-ribbon-h-responsive) !important;
      min-height: var(--tc-ribbon-h-responsive) !important;
      padding: 4px 9px 6px !important;
      gap: 0 !important;
      overflow: hidden !important;
      scrollbar-width: none !important;
      background: linear-gradient(180deg, color-mix(in srgb, var(--bg-panel), #ffffff 5%), var(--bg-base)) !important;
      border-top: 0 !important;
      border-bottom: 1px solid var(--border) !important;
      box-shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 4px 14px rgba(0,0,0,.24) !important;
      position: relative !important;
      z-index: 10 !important;
    }
#ribbonV2::-webkit-scrollbar,
#ribbonPanels::-webkit-scrollbar { display: none !important; }
#ribbonPanels.ribbon-panels {
      display: flex !important;
      flex: 1 1 auto !important;
      align-items: stretch !important;
      justify-content: space-between !important;
      gap: var(--tc-ribbon-gap) !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      overflow: hidden !important;
      padding: 0 !important;
      position: relative !important;
      z-index: 1 !important;
    }
#ribbonV2 .ribbon-panel {
      all: unset !important;
      box-sizing: border-box !important;
      min-width: 0 !important;
      flex: 1 1 0 !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: stretch !important;
      height: calc(var(--tc-ribbon-h-responsive) - 10px) !important;
      padding: 5px clamp(3px, .45vw, 8px) 18px !important;
      overflow: hidden !important;
      border-radius: 14px !important;
      background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.04)), var(--bg-surface) !important;
      border: 1px solid color-mix(in srgb, var(--border), var(--accent) 12%) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important;
      position: relative !important;
    }
#ribbonV2 .ribbon-panel[data-panel="select"] { flex-grow: .38 !important; }
#ribbonV2 .ribbon-panel[data-panel="cizim-araclari"] { flex-grow: .92 !important; }
#ribbonV2 .ribbon-panel[data-panel="sekiller"] { flex-grow: 1.42 !important; }
#ribbonV2 .ribbon-panel[data-panel="olcu"] { flex-grow: .92 !important; }
#ribbonV2 .ribbon-panel[data-panel="donusum"] { flex-grow: 1.55 !important; }
#ribbonV2 .ribbon-panel[data-panel="duzenleme"] { flex-grow: 1.78 !important; }
#ribbonV2 .ribbon-panel[data-panel="gecmis"] { flex-grow: .70 !important; }
#ribbonV2 .ribbon-panel[data-panel="gorunum-araclari"] { flex-grow: 1.05 !important; }
#ribbonV2 .ribbon-panel + .ribbon-panel::before {
      display: none !important;
    }
#ribbonV2 .rp-tools {
      display: flex !important;
      flex: 1 1 auto !important;
      align-items: center !important;
      justify-content: center !important;
      gap: clamp(1px, .24vw, 4px) !important;
      min-width: 0 !important;
      max-width: 100% !important;
      overflow: hidden !important;
      padding: 0 !important;
    }
#ribbonV2 .tool-btn {
      all: unset !important;
      box-sizing: border-box !important;
      flex: 1 1 var(--tc-tool-size) !important;
      width: auto !important;
      min-width: 27px !important;
      max-width: 48px !important;
      height: clamp(38px, 3.6vw, 54px) !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 3px !important;
      padding: 0 2px !important;
      border-radius: 11px !important;
      background: color-mix(in srgb, var(--bg-base), transparent 28%) !important;
      border: 1px solid transparent !important;
      cursor: pointer !important;
      overflow: hidden !important;
      transition: background .13s ease, border-color .13s ease, transform .12s ease, box-shadow .13s ease !important;
    }
#ribbonV2 .tool-btn:hover {
      transform: translateY(-1px) !important;
      background: var(--bg-surface-hover) !important;
      border-color: color-mix(in srgb, var(--border-light), var(--accent) 10%) !important;
    }
#ribbonV2 .tool-btn.active {
      background: var(--accent-active-bg) !important;
      border-color: var(--accent) !important;
      box-shadow: inset 0 0 0 1px rgba(159,29,53,.16), 0 4px 14px rgba(159,29,53,.10) !important;
    }
#ribbonV2 .tool-btn:disabled {
      opacity: .34 !important;
      cursor: not-allowed !important;
      pointer-events: none !important;
    }
#ribbonV2 .tool-btn .ico {
      display: grid !important;
      place-items: center !important;
      width: var(--tc-tool-icon-size) !important;
      height: var(--tc-tool-icon-size) !important;
      flex: 0 0 var(--tc-tool-icon-size) !important;
      font-size: 0 !important;
    }
#ribbonV2 .tool-btn .ico svg {
      width: var(--tc-tool-icon-size) !important;
      height: var(--tc-tool-icon-size) !important;
      stroke: color-mix(in srgb, var(--text-bright), var(--accent) 8%) !important;
      stroke-width: 1.55 !important;
      fill: none !important;
      overflow: visible !important;
    }
#ribbonV2 .tool-btn:hover .ico svg,
#ribbonV2 .tool-btn.active .ico svg {
      stroke: #ffffff !important;
    }
#ribbonV2 .tool-btn .label {
      display: block !important;
      max-width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      font-size: clamp(6.8px, .62vw, 9px) !important;
      line-height: 1 !important;
      color: color-mix(in srgb, var(--text-main), var(--text-muted) 10%) !important;
      font-family: var(--font-ui) !important;
      text-align: center !important;
    }
#ribbonV2 .rp-tag {
      position: absolute !important;
      left: 6px !important;
      right: 6px !important;
      bottom: 3px !important;
      height: 13px !important;
      line-height: 13px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      border-top: 1px solid rgba(255,255,255,.06) !important;
      color: color-mix(in srgb, var(--accent), var(--text-bright) 8%) !important;
      font-family: var(--font-jetbrains, var(--font-ui)) !important;
      font-size: clamp(7.5px, .66vw, 10px) !important;
      font-weight: 650 !important;
      letter-spacing: clamp(.04em, .4vw, .12em) !important;
      text-transform: uppercase !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      pointer-events: none !important;
      opacity: .96 !important;
    }
body.ui-light #ribbonV2.ribbon {
      background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%) !important;
      border-bottom-color: #d5dce5 !important;
      box-shadow: 0 1px 0 #fff inset, 0 7px 16px rgba(30,41,59,.07) !important;
    }
body.ui-light #ribbonV2 .ribbon-panel {
      background: linear-gradient(180deg, #ffffff, #f4f7fa) !important;
      border-color: #cfd7e2 !important;
      box-shadow: inset 0 1px 0 #fff !important;
    }
body.ui-light #ribbonV2 .tool-btn {
      background: #ffffff !important;
      color: #111827 !important;
    }
body.ui-light #ribbonV2 .tool-btn:hover {
      background: #eaf0f6 !important;
      border-color: #ccd6e1 !important;
    }
body.ui-light #ribbonV2 .tool-btn.active {
      background: rgba(159,29,53,.11) !important;
      border-color: rgba(159,29,53,.50) !important;
    }
body.ui-light #ribbonV2 .tool-btn .ico svg {
      stroke: #182334 !important;
    }
body.ui-light #ribbonV2 .tool-btn:hover .ico svg,
body.ui-light #ribbonV2 .tool-btn.active .ico svg {
      stroke: #9f1d35 !important;
    }
body.ui-light #ribbonV2 .tool-btn .label {
      color: #354154 !important;
    }
body.ui-light #ribbonV2 .rp-tag {
      color: #9f1d35 !important;
      border-top-color: #dfe6ef !important;
    }
@media (max-width: 1500px) {
:root {
  --tc-topbar-h: 44px;
  --tc-ribbon-h-responsive: 64px;
  --tc-tool-icon-size: clamp(20px, 1.75vw, 23px);
}
#ribbonV2.ribbon { padding: 4px 6px 5px !important; }
#ribbonPanels.ribbon-panels { gap: 4px !important; }
#ribbonV2 .ribbon-panel { height: 55px !important; padding: 5px 4px 16px !important; border-radius: 12px !important; }
#ribbonV2 .rp-tools { gap: 1px !important; }
#ribbonV2 .tool-btn { min-width: 25px !important; height: 35px !important; border-radius: 9px !important; }
#ribbonV2 .tool-btn .label { display: none !important; }
#ribbonV2 .rp-tag { height: 11px !important; line-height: 11px !important; bottom: 3px !important; font-size: 7px !important; letter-spacing: .055em !important; }
.menu-tabs button,
.menu-tabs label { padding-left: 8px !important; padding-right: 8px !important; }
}
@media (max-width: 1180px) {
:root {
  --tc-ribbon-h-responsive: 60px;
  --tc-tool-icon-size: 19px;
}
.topbar { column-gap: 9px !important; padding-left: 10px !important; padding-right: 8px !important; }
.brand .brand-mark { width: 30px !important; height: 30px !important; flex-basis: 30px !important; }
.brand-turk,
.brand-cad { font-size: 16px !important; }
.brand-version,
.brand small { display: none !important; }
.menu-tabs { gap: 2px !important; padding: 2px !important; }
.menu-tabs button,
.menu-tabs label { height: 28px !important; padding: 0 7px !important; font-size: 11.5px !important; }
.menu-tabs button::before,
.menu-tabs label::before { width: 13px !important; height: 13px !important; }
#ribbonV2 .ribbon-panel { padding-left: 3px !important; padding-right: 3px !important; }
#ribbonV2 .tool-btn { min-width: 22px !important; height: 34px !important; }
#ribbonV2 .rp-tag { font-size: 6.2px !important; }
}
@media (max-width: 920px) {
.app { grid-template-rows: auto 58px 32px 1fr 44px !important; }
.topbar {
        height: auto !important;
        min-height: 44px !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        grid-auto-rows: auto !important;
        row-gap: 4px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
      }
.menu-tabs {
        grid-column: 1 / -1 !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
      }
.menu-tabs::-webkit-scrollbar { display: none !important; }
#ribbonV2 .ribbon-panel { border-radius: 10px !important; }
#ribbonPanels.ribbon-panels { gap: 3px !important; }
}

/* Source <style> block 6 */
:root {
  --tc-topbar-h: 46px;
  --tc-ribbon-h-responsive: clamp(74px, 5.6vw, 88px);
  --tc-tool-icon-size: clamp(20px, 1.28vw, 25px);
}
.app { grid-template-rows: var(--tc-topbar-h) var(--tc-ribbon-h-responsive) 32px 1fr 40px !important; }
.topbar {
      min-height: var(--tc-topbar-h) !important;
      height: var(--tc-topbar-h) !important;
      grid-template-columns: auto minmax(0, 1fr) 0 !important;
      column-gap: 18px !important;
      padding: 0 16px !important;
      background: linear-gradient(180deg, color-mix(in srgb, var(--bg-panel), #fff 4%), var(--bg-panel)) !important;
      border-bottom: 1px solid color-mix(in srgb, var(--border), #000 16%) !important;
      box-shadow: 0 1px 0 rgba(255,255,255,.035) inset !important;
      overflow: hidden !important;
    }
.brand { flex: 0 0 auto !important; min-width: max-content !important; }
.menu-tabs {
      justify-content: flex-start !important;
      justify-self: start !important;
      margin-left: 2px !important;
      width: auto !important;
      max-width: 100% !important;
      gap: 4px !important;
      padding: 3px !important;
      border-radius: 10px !important;
      background: linear-gradient(180deg, rgba(255,255,255,.042), rgba(0,0,0,.045)) !important;
      border: 1px solid rgba(255,255,255,.06) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
      overflow: hidden !important;
    }
.menu-tabs button,
.menu-tabs label {
      height: 29px !important;
      min-width: auto !important;
      padding: 0 10px !important;
      border-radius: 8px !important;
      font-size: 12px !important;
      font-weight: 560 !important;
      letter-spacing: .01em !important;
      color: color-mix(in srgb, var(--text-main), var(--text-bright) 18%) !important;
      border: 1px solid transparent !important;
      background: transparent !important;
      white-space: nowrap !important;
    }
.menu-tabs button:hover,
.menu-tabs label:hover {
      background: color-mix(in srgb, var(--bg-surface-hover), transparent 8%) !important;
      border-color: color-mix(in srgb, var(--border-light), transparent 30%) !important;
      color: var(--text-bright) !important;
    }
body.ui-light .topbar {
      background: linear-gradient(180deg, #ffffff, #f4f6f8) !important;
      border-bottom-color: #d9e1ea !important;
      box-shadow: 0 1px 0 #fff inset, 0 2px 10px rgba(30,41,59,.04) !important;
    }
body.ui-light .menu-tabs {
      background: linear-gradient(180deg, #ffffff, #f3f6f9) !important;
      border-color: #d8e0ea !important;
      box-shadow: inset 0 1px 0 #fff, 0 5px 14px rgba(30,41,59,.05) !important;
    }
body.ui-light .menu-tabs button,
body.ui-light .menu-tabs label { color: #263241 !important; }
body.ui-light .menu-tabs button:hover,
body.ui-light .menu-tabs label:hover { background: #e9eef5 !important; border-color: #d2dbe7 !important; color: #111827 !important; }
no horizontal overflow. */
    #ribbonV2.ribbon {
      all: unset !important;
      display: flex !important;
      align-items: stretch !important;
      box-sizing: border-box !important;
      width: 100% !important;
      height: var(--tc-ribbon-h-responsive) !important;
      min-height: var(--tc-ribbon-h-responsive) !important;
      padding: 5px 10px 6px !important;
      overflow: hidden !important;
      background: linear-gradient(180deg, color-mix(in srgb, var(--bg-panel), #ffffff 5%) 0%, var(--bg-base) 100%) !important;
      border-bottom: 1px solid var(--border) !important;
      box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 4px 18px rgba(0,0,0,.22) !important;
      position: relative !important;
      z-index: 10 !important;
    }
#ribbonV2::before {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      pointer-events: none !important;
      background: linear-gradient(90deg, transparent, rgba(159,29,53,.05), transparent) !important;
      opacity: .7 !important;
    }
#ribbonPanels.ribbon-panels {
      display: flex !important;
      flex: 1 1 auto !important;
      align-items: stretch !important;
      justify-content: center !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      overflow: hidden !important;
      gap: 0 !important;
      padding: 0 !important;
      position: relative !important;
      z-index: 1 !important;
    }
#ribbonV2 .ribbon-panel {
      all: unset !important;
      box-sizing: border-box !important;
      min-width: 0 !important;
      flex: 1 1 0 !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: stretch !important;
      height: calc(var(--tc-ribbon-h-responsive) - 11px) !important;
      padding: 7px clamp(3px, .38vw, 9px) 18px !important;
      overflow: hidden !important;
      position: relative !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
    }
#ribbonV2 .ribbon-panel + .ribbon-panel::before {
      content: "" !important;
      position: absolute !important;
      left: 0 !important;
      top: 10px !important;
      bottom: 20px !important;
      width: 1px !important;
      display: block !important;
      background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--border-light), transparent 25%), transparent) !important;
    }
#ribbonV2 .ribbon-panel[data-panel="select"] { flex-grow: .42 !important; }
#ribbonV2 .ribbon-panel[data-panel="cizim-araclari"] { flex-grow: .95 !important; }
#ribbonV2 .ribbon-panel[data-panel="sekiller"] { flex-grow: 1.38 !important; }
#ribbonV2 .ribbon-panel[data-panel="olcu"] { flex-grow: .88 !important; }
#ribbonV2 .ribbon-panel[data-panel="donusum"] { flex-grow: 1.48 !important; }
#ribbonV2 .ribbon-panel[data-panel="duzenleme"] { flex-grow: 1.72 !important; }
#ribbonV2 .ribbon-panel[data-panel="gecmis"] { flex-grow: .62 !important; }
#ribbonV2 .ribbon-panel[data-panel="gorunum-araclari"] { flex-grow: .95 !important; }
#ribbonV2 .rp-tools {
      display: flex !important;
      flex: 1 1 auto !important;
      align-items: center !important;
      justify-content: center !important;
      min-width: 0 !important;
      max-width: 100% !important;
      overflow: hidden !important;
      gap: clamp(1px, .22vw, 4px) !important;
      padding: 0 !important;
    }
#ribbonV2 .tool-btn {
      all: unset !important;
      box-sizing: border-box !important;
      flex: 1 1 0 !important;
      min-width: 26px !important;
      max-width: 54px !important;
      height: clamp(42px, 3.45vw, 56px) !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 3px !important;
      padding: 0 2px !important;
      border-radius: 9px !important;
      cursor: pointer !important;
      overflow: hidden !important;
      background: transparent !important;
      border: 1px solid transparent !important;
      transition: background .13s ease, border-color .13s ease, transform .1s ease, box-shadow .13s ease !important;
    }
#ribbonV2 .tool-btn:hover {
      transform: translateY(-1px) !important;
      background: color-mix(in srgb, var(--bg-surface-hover), transparent 10%) !important;
      border-color: color-mix(in srgb, var(--border-light), transparent 30%) !important;
      box-shadow: 0 5px 12px rgba(0,0,0,.12) !important;
    }
#ribbonV2 .tool-btn.active {
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent-active-bg), transparent 10%), color-mix(in srgb, var(--accent-active-bg), #000 8%)) !important;
      border-color: color-mix(in srgb, var(--accent), #fff 10%) !important;
      box-shadow: inset 0 0 0 1px rgba(159,29,53,.18), 0 6px 16px rgba(159,29,53,.12) !important;
    }
#ribbonV2 .tool-btn .ico {
      display: grid !important;
      place-items: center !important;
      width: var(--tc-tool-icon-size) !important;
      height: var(--tc-tool-icon-size) !important;
      flex: 0 0 var(--tc-tool-icon-size) !important;
      font-size: 0 !important;
    }
#ribbonV2 .tool-btn .ico svg {
      width: var(--tc-tool-icon-size) !important;
      height: var(--tc-tool-icon-size) !important;
      stroke: color-mix(in srgb, var(--text-bright), var(--text-muted) 22%) !important;
      stroke-width: 1.55 !important;
      fill: none !important;
      overflow: visible !important;
    }
#ribbonV2 .tool-btn:hover .ico svg,
#ribbonV2 .tool-btn.active .ico svg { stroke: #ffffff !important; }
#ribbonV2 .tool-btn .label {
      display: block !important;
      max-width: 100% !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
      font-size: clamp(7px, .58vw, 9px) !important;
      line-height: 1 !important;
      color: color-mix(in srgb, var(--text-main), var(--text-muted) 8%) !important;
      font-family: var(--font-ui) !important;
      text-align: center !important;
    }
#ribbonV2 .rp-tag {
      position: absolute !important;
      left: 6px !important;
      right: 6px !important;
      bottom: 2px !important;
      height: 14px !important;
      line-height: 14px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      color: color-mix(in srgb, var(--accent), var(--text-bright) 12%) !important;
      font-family: var(--font-jetbrains, var(--font-ui)) !important;
      font-size: clamp(7px, .58vw, 9.5px) !important;
      font-weight: 650 !important;
      letter-spacing: .08em !important;
      text-transform: uppercase !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      pointer-events: none !important;
      opacity: .98 !important;
    }
#ribbonV2 .rp-tag::before,
#ribbonV2 .rp-tag::after {
      content: "" !important;
      flex: 1 1 auto !important;
      max-width: 34px !important;
      height: 1px !important;
      margin: 0 6px !important;
      background: color-mix(in srgb, var(--border-light), transparent 42%) !important;
    }
body.ui-light #ribbonV2.ribbon {
      background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%) !important;
      border-bottom-color: #d5dce5 !important;
      box-shadow: 0 1px 0 #fff inset, 0 6px 16px rgba(30,41,59,.06) !important;
    }
body.ui-light #ribbonV2 .ribbon-panel + .ribbon-panel::before { background: linear-gradient(180deg, transparent, #ccd6e1, transparent) !important; }
body.ui-light #ribbonV2 .tool-btn .ico svg { stroke: #1f2937 !important; }
body.ui-light #ribbonV2 .tool-btn:hover .ico svg,
body.ui-light #ribbonV2 .tool-btn.active .ico svg { stroke: #9f1d35 !important; }
body.ui-light #ribbonV2 .tool-btn .label { color: #354154 !important; }
body.ui-light #ribbonV2 .tool-btn:hover { background: #e9eef5 !important; border-color: #d1dbe7 !important; box-shadow: 0 5px 12px rgba(30,41,59,.06) !important; }
body.ui-light #ribbonV2 .tool-btn.active { background: rgba(159,29,53,.11) !important; border-color: rgba(159,29,53,.48) !important; }
body.ui-light #ribbonV2 .rp-tag { color: #9f1d35 !important; }
body.ui-light #ribbonV2 .rp-tag::before,
body.ui-light #ribbonV2 .rp-tag::after { background: #dce4ee !important; }
@media (max-width: 1500px) {
:root {
  --tc-ribbon-h-responsive: 68px;
  --tc-tool-icon-size: clamp(21px, 1.55vw, 24px);
}
#ribbonV2.ribbon { padding: 4px 7px 5px !important; }
#ribbonV2 .ribbon-panel { height: 58px !important; padding: 6px 3px 16px !important; }
#ribbonV2 .tool-btn { min-width: 24px !important; height: 40px !important; border-radius: 8px !important; }
#ribbonV2 .tool-btn .label { display: none !important; }
#ribbonV2 .rp-tag { font-size: 6.5px !important; letter-spacing: .055em !important; bottom: 1px !important; }
#ribbonV2 .rp-tag::before,
#ribbonV2 .rp-tag::after { max-width: 18px !important; margin: 0 3px !important; }
}
@media (max-width: 1180px) {
:root {
  --tc-topbar-h: 44px;
  --tc-ribbon-h-responsive: 62px;
  --tc-tool-icon-size: 19px;
}
.topbar { column-gap: 10px !important; padding-left: 10px !important; padding-right: 8px !important; }
.brand .brand-mark { width: 30px !important; height: 30px !important; flex-basis: 30px !important; }
.brand-turk,
.brand-cad { font-size: 16px !important; }
.brand-version,
.brand small { display: none !important; }
.menu-tabs { gap: 2px !important; padding: 2px !important; }
.menu-tabs button,
.menu-tabs label { height: 28px !important; padding: 0 7px !important; font-size: 11px !important; }
.menu-tabs button::before,
.menu-tabs label::before { width: 13px !important; height: 13px !important; }
#ribbonV2 .ribbon-panel { height: 52px !important; padding-left: 2px !important; padding-right: 2px !important; }
#ribbonV2 .tool-btn { min-width: 21px !important; height: 37px !important; }
#ribbonV2 .rp-tag { font-size: 5.8px !important; }
}
@media (max-width: 920px) {
.app { grid-template-rows: auto 58px 32px 1fr 44px !important; }
.topbar { height: auto !important; min-height: 44px !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-auto-rows: auto !important; row-gap: 4px !important; padding-top: 5px !important; padding-bottom: 5px !important; }
.menu-tabs { grid-column: 1 / -1 !important; max-width: 100% !important; overflow-x: auto !important; scrollbar-width: none !important; }
.menu-tabs::-webkit-scrollbar { display: none !important; }
#ribbonV2.ribbon { height: 58px !important; min-height: 58px !important; padding: 4px 5px !important; }
#ribbonV2 .ribbon-panel { height: 50px !important; padding-bottom: 14px !important; }
#ribbonV2 .ribbon-panel + .ribbon-panel::before { top: 8px !important; bottom: 16px !important; }
#ribbonV2 .tool-btn { min-width: 18px !important; height: 34px !important; }
#ribbonV2 .rp-tag { display: none !important; }
}

/* Source <style> block 7 */
.topbar .menu-tabs {
      padding: 3px 6px !important;
      border-radius: 12px !important;
      background: rgba(255,255,255,.025) !important;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important;
    }
body.ui-light .topbar .menu-tabs {
      background: rgba(255,255,255,.72) !important;
      box-shadow: inset 0 0 0 1px #d7dde5 !important;
    }
.menu-tabs button,
.menu-tabs label {
      border-radius: 9px !important;
    }

/* Source <style> block 9 */
cleaner command suggestions */
    .brand .brand-mark {
      width: 36px !important;
      height: 36px !important;
      flex: 0 0 36px !important;
      border-radius: 12px !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      overflow: visible !important;
    }
.brand .brand-mark svg.tc-cad-logo {
      width: 100% !important;
      height: 100% !important;
      display: block !important;
      filter: drop-shadow(0 8px 14px rgba(0,0,0,.22));
    }
.brand-title { gap: 1px !important; }
.brand-version { margin-left: 9px !important; font-weight: 300 !important; letter-spacing: .35px !important; opacity: .62 !important; }

/* Source <style> block 10 */
.brand .brand-mark {
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      border-radius: 0 !important;
    }

/* Source <style> block 11 */
:root {
  --tc20-icon-idle: rgba(224, 229, 238, .68);
  --tc20-icon-hover: rgba(244, 247, 252, .86);
  --tc20-icon-active: rgba(255, 255, 255, .92);
}
body.ui-light {
  --tc20-icon-idle: rgba(31, 41, 55, .68);
  --tc20-icon-hover: rgba(15, 23, 42, .86);
  --tc20-icon-active: rgba(15, 23, 42, .94);
}
.tool-btn .ico svg {
      stroke: var(--tc20-icon-idle) !important;
      opacity: .92 !important;
      filter: none !important;
    }
.tool-btn:hover .ico svg { stroke: var(--tc20-icon-hover) !important; }
.tool-btn.active .ico svg { stroke: var(--tc20-icon-active) !important; }
.tool-btn .ico svg [fill]:not([fill="none"]) { fill: var(--tc20-icon-idle) !important; }
.tool-btn[data-tool="select"] .ico svg path:not([fill="none"]) { fill: var(--tc20-icon-idle) !important; stroke: none !important; }
.tool-btn[data-tool="select"]:hover .ico svg path:not([fill="none"]) { fill: var(--tc20-icon-hover) !important; }
.tool-btn[data-tool="select"].active .ico svg path:not([fill="none"]) { fill: var(--tc20-icon-active) !important; }
.tool-btn:hover .ico svg [fill]:not([fill="none"]) { fill: var(--tc20-icon-hover) !important; }
.tool-btn.active .ico svg [fill]:not([fill="none"]) { fill: var(--tc20-icon-active) !important; }
.brand .brand-mark {
      width: 38px !important;
      height: 38px !important;
      flex: 0 0 38px !important;
      display: grid !important;
      place-items: center !important;
      color: var(--accent) !important;
      background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.13), transparent 34%), linear-gradient(145deg, #18181b, #252529) !important;
      border: 1px solid rgba(255,255,255,.10) !important;
      border-radius: 12px !important;
      box-shadow: 0 10px 22px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important;
      overflow: hidden !important;
    }
body.ui-light .brand .brand-mark {
      background: linear-gradient(145deg, #ffffff, #eef2f6) !important;
      border-color: #d2d8e1 !important;
      box-shadow: 0 10px 20px rgba(17,24,39,.13), inset 0 1px 0 rgba(255,255,255,.9) !important;
    }
.brand .brand-mark svg.tc20-user-logo {
      width: 92% !important;
      height: 92% !important;
      display: block !important;
      color: var(--accent) !important;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,.24));
    }
#aboutBtn::before {
      background-image: url("../assets/icons/menu/about.svg") !important;
    }

/* Source runtime style block 1 */
.tool-btn .ico svg,
.ribbon-panel .tool-btn .ico svg {
            stroke: var(--tc21-icon-stroke) !important;
            fill: none !important;
            stroke-width: 1.55 !important;
            stroke-linecap: round !important;
            stroke-linejoin: round !important;
          }
.tool-btn:hover .ico svg,
.ribbon-panel .tool-btn:hover .ico svg { stroke: var(--tc21-icon-stroke-hover) !important; }
.tool-btn.active .ico svg,
.ribbon-panel .tool-btn.active .ico svg { stroke: #ffffff !important; }
body.ui-light .tool-btn .ico svg,
body.ui-light .ribbon-panel .tool-btn .ico svg { stroke: #596271 !important; }
body.ui-light .tool-btn:hover .ico svg,
body.ui-light .ribbon-panel .tool-btn:hover .ico svg { stroke: #1f2937 !important; }

/* Source runtime style block 6 */
.tc31-view-badge {
            position: absolute;
            right: 16px;
            top: 14px;
            z-index: 24;
            padding: 7px 11px;
            border: 1px solid rgba(255,255,255,.14);
            border-radius: 6px;
            background: rgba(18,18,18,.72);
            color: rgba(255,255,255,.88);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            pointer-events: none;
            backdrop-filter: blur(8px);
          }
body.ui-light .tc31-view-badge { background: rgba(255,255,255,.82); color: #1f2937; border-color: rgba(17,24,39,.14); }

/* Source runtime style block 7 */
.topbar {
            grid-template-columns: auto minmax(0, 1fr) max-content !important;
            column-gap: 12px !important;
          }
.topbar .menu-tabs { min-width: 0 !important; }
.topbar #tc31ViewBadge {
            position: static !important;
            justify-self: end;
            margin-left: auto;
            margin-right: 0;
            white-space: nowrap;
            max-width: none;
            border-radius: 4px;
            background: rgba(159,29,53,.18);
            border-color: rgba(159,29,53,.42);
            color: var(--text-bright);
            backdrop-filter: none;
          }
body.ui-light .topbar #tc31ViewBadge {
            background: rgba(159,29,53,.10);
            color: #7f1629;
            border-color: rgba(159,29,53,.28);
          }

/* Source runtime style block 8 */
.topbar #tc31ViewBadge.tc33-feedback-btn {
            pointer-events: auto !important;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 32px;
            padding: 7px 12px;
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,.12);
            background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)), #242426;
            color: var(--text-bright);
            font: 800 11px var(--font-ui), sans-serif;
            letter-spacing: 0;
            text-transform: none;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
            transition: background .14s ease, border-color .14s ease, transform .14s ease;
          }
.topbar #tc31ViewBadge.tc33-feedback-btn:hover {
            transform: translateY(-1px);
            border-color: rgba(255,255,255,.20);
            background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)), #303033;
            box-shadow: 0 10px 20px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,.06);
          }
.topbar #tc31ViewBadge.tc33-feedback-btn:active { transform: translateY(0); }
.topbar #tc31ViewBadge.tc33-feedback-btn svg {
            width: 15px;
            height: 15px;
            flex: 0 0 auto;
            stroke: currentColor;
          }
body.ui-light .topbar #tc31ViewBadge.tc33-feedback-btn {
            background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,247,250,.82)), #ffffff;
            color: #111827;
            border-color: rgba(17,24,39,.14);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
          }
body.ui-light .topbar #tc31ViewBadge.tc33-feedback-btn:hover {
            background: linear-gradient(180deg, #ffffff, #eef2f7);
            border-color: rgba(17,24,39,.22);
            box-shadow: 0 10px 20px rgba(17,24,39,.12), inset 0 1px 0 rgba(255,255,255,.9);
          }