/* =========================================================
   SENDEV TOOLS — общие стили для /tools/*
   Файл: /local/css/sendev_tools.css
   ========================================================= */

.sendev_tools_tool{
    --sendev_tools_primary:#0b61a4;
    --sendev_tools_primary_hover:#094f86;
    --sendev_tools_soft:#e8f2ff;
    --sendev_tools_soft_hover:#d8eaff;
    --sendev_tools_border:#b7d2f3;
    --sendev_tools_text:#0b2440;

    width:100%;
    font-family:inherit;
    padding:22px;
    background:linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border-radius:12px;
    border:1px solid rgba(11,97,164,.18);
    box-shadow:0 10px 28px rgba(0,0,0,.10);
    margin:40px auto;
    color:var(--sendev_tools_text);
}

.sendev_tools_tool,
.sendev_tools_tool *{ box-sizing:border-box; }

.sendev_tools_header{ margin-bottom:16px; }
.sendev_tools_title{ margin:10px 0 25px 0; font-size:22px; line-height:1.2; color: #365F97; text-align: center;}
.sendev_tools_desc{ margin:0; opacity:.92; }

.sendev_tools_grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
}
@media (min-width: 980px){
    .sendev_tools_grid{ grid-template-columns: 1fr 1fr; align-items:start; }
}

.sendev_tools_panel{
    border:1px solid var(--sendev_tools_border);
    border-radius:14px;
    padding:14px;
    background:linear-gradient(180deg, #f6fbff 0%, #f0f7ff 100%);
    box-shadow:0 10px 22px rgba(11,97,164,.08);
    min-width:0;
}

.sendev_tools_panel_head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
    flex-wrap:wrap;
}

.sendev_tools_panel_title{ font-weight:800; }
.sendev_tools_actions{ display:flex; gap:10px; flex-wrap:wrap; }

.sendev_tools_btn{
    border:1px solid rgba(0,0,0,.08);
    background:linear-gradient(180deg, var(--sendev_tools_primary) 0%, #0a5592 100%);
    color:#fff;
    border-color:rgba(11,97,164,.35);
    box-shadow:0 10px 22px rgba(11,97,164,.25);
    border-radius:12px;
    padding:9px 12px;
    cursor:pointer;
    line-height:1;
    font-size:14px;
    user-select:none;
    transition: transform .06s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
}
.sendev_tools_btn:hover{
    background:linear-gradient(180deg, var(--sendev_tools_primary_hover) 0%, #083f6a 100%);
    box-shadow:0 12px 26px rgba(11,97,164,.30);
}
.sendev_tools_btn:active{ transform:translateY(1px); box-shadow:0 7px 16px rgba(11,97,164,.22); }
.sendev_tools_btn:focus{ outline:3px solid rgba(11,97,164,.30); outline-offset:2px; }

.sendev_tools_btn_ghost{
    background:var(--sendev_tools_soft);
    color:var(--sendev_tools_primary);
    border:1px solid rgba(11,97,164,.35);
    box-shadow:0 8px 18px rgba(11,97,164,.10);
    opacity:1;
}
.sendev_tools_btn_ghost:hover{
    background:var(--sendev_tools_soft_hover);
    box-shadow:0 10px 22px rgba(11,97,164,.14);
}

.sendev_tools_label{
    display:block;
    font-size:12px;
    opacity:.98;
    margin:6px 0;
    font-weight:700;
}

.sendev_tools_input{
    width:100%;
    border:1px solid rgba(11,97,164,.28);
    border-radius:12px;
    padding:10px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size:13px;
    line-height:1.45;
    background:#fff;
    color:inherit;
    box-shadow:0 6px 16px rgba(11,97,164,.06);
}
.sendev_tools_input:focus{
    outline:none;
    border-color:rgba(11,97,164,.65);
    box-shadow:0 0 0 4px rgba(11,97,164,.18), 0 10px 18px rgba(11,97,164,.10);
}

.sendev_tools_textarea{
    width:100%;
    min-height:320px;
    resize:vertical;
    border:1px solid rgba(11,97,164,.28);
    border-radius:12px;
    padding:12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size:13px;
    line-height:1.45;
    background:#fff;
    color:inherit;
    box-shadow:0 6px 16px rgba(11,97,164,.06);
}
.sendev_tools_textarea:focus{
    outline:none;
    border-color:rgba(11,97,164,.65);
    box-shadow:0 0 0 4px rgba(11,97,164,.18), 0 10px 18px rgba(11,97,164,.10);
}

.sendev_tools_row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    margin:10px 0;
    flex-wrap:wrap;
}

.sendev_tools_hint{ font-size:12px; opacity:.95; }
.sendev_tools_hint kbd{
    font-family:inherit;
    font-size:12px;
    border:1px solid rgba(11,97,164,.25);
    border-bottom-width:2px;
    padding:1px 6px;
    border-radius:7px;
    background:#fff;
    color:#000;
    box-shadow:0 6px 14px rgba(11,97,164,.08);
}

.sendev_tools_flags{
    display:flex;
    flex-wrap:wrap;
    gap:10px 12px;
    margin-top:8px;
    align-items:center;
}
.sendev_tools_flag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    user-select:none;
    padding:6px 8px;
    border-radius:10px;
    border:1px solid rgba(11,97,164,.18);
    background:rgba(255,255,255,.85);
}
.sendev_tools_flag input{ transform: translateY(1px); }

.sendev_tools_status{
    margin-top:10px;
    font-size:13px;
    min-height:18px;
    padding:8px 10px;
    border-radius:12px;
    border:1px solid transparent;
    background:rgba(255,255,255,.78);
}
.sendev_tools_ok{
    color:#0a6b2a;
    border-color:rgba(10,107,42,.20);
    background:rgba(21,177,79,.10);
}
.sendev_tools_err{
    color:#b00020;
    border-color:rgba(176,0,32,.20);
    background:rgba(176,0,32,.08);
}

.sendev_tools_output_wrap{
    border:1px solid rgba(11,97,164,.28);
    border-radius:12px;
    background:#fff;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    max-height:520px;
    box-shadow:0 6px 16px rgba(11,97,164,.06);
    padding: 0 10px;
}

.sendev_tools_pre{
    margin:0;
    padding:12px;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.sendev_tools_code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size:13px;
    line-height:1.55;
}

/* Общая таблица */
.sendev_tools_table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    margin-top:12px;
    overflow:hidden;
    border:1px solid rgba(11,97,164,.18);
    border-radius:12px;
    background:#fff;
    box-shadow:0 6px 16px rgba(11,97,164,.06);
}
.sendev_tools_table th,
.sendev_tools_table td{
    text-align:left;
    vertical-align:top;
    padding:9px 10px;
    font-size:13px;
    border-bottom:1px solid rgba(11,97,164,.10);
}
.sendev_tools_table th{
    font-weight:800;
    background:linear-gradient(180deg, #eef6ff 0%, #e7f1ff 100%);
}
.sendev_tools_table tr:last-child td{ border-bottom:none; }

.sendev_tools_badge{
    display:inline-block;
    padding:3px 10px;
    border-radius:999px;
    font-size:12px;
    border:1px solid rgba(11,97,164,.30);
    background:rgba(11,97,164,.10);
    color:var(--sendev_tools_primary);
    font-weight:800;
    margin-left:8px;
}

/* Для безопасного fallback-копирования */
.sendev_tools_sr_only{ position:absolute; left:-9999px; top:0; opacity:0; }


/* =========================================================
   Tools index page (/tools/) — hub/listing
   (append в конец /local/css/sendev_tools.css)
   ========================================================= */

.sendev_tools_hub_bg{
    background-color:#f8f9fa;
    padding:60px 0;
}

@media (max-width: 768px){
    .sendev_tools_hub_bg{ padding:40px 0; }
}

.sendev_tools_hub{
    /* чтобы можно было использовать sendev_tools_badge и общий тон */
    --sendev_tools_primary:#0b61a4;
    --sendev_tools_primary_hover:#094f86;
    --sendev_tools_soft:#e8f2ff;
    --sendev_tools_soft_hover:#d8eaff;
    --sendev_tools_border:#b7d2f3;
    --sendev_tools_text:#0b2440;

    color: var(--sendev_tools_text);
}

.sendev_tools_hub_head{
    text-align:center;
    max-width: 820px;
    margin: 0 auto 18px;
}
.sendev_tools_hub_title{
    margin:0 0 10px;
    font-size:36px;
    font-weight:900;
    line-height:1.15;
    color:#2c3e50;
}
.sendev_tools_hub_subtitle{
    margin:0;
    font-size:18px;
    line-height:1.5;
    color:#5a6c7d;
}

@media (max-width: 768px){
    .sendev_tools_hub_title{ font-size:28px; }
}

/* Featured tool (168-ФЗ) */
.sendev_tools_hub_feature{
    display:block;
    text-decoration:none;
    color:inherit;

    margin: 22px auto 8px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid rgba(11,97,164,.22);
    background:
            radial-gradient(900px 360px at 18% 0%, rgba(11,97,164,.18), transparent 60%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 16px 38px rgba(0,0,0,.12);
    position:relative;
    overflow:hidden;
}

.sendev_tools_hub_feature::after{
    content:"";
    position:absolute;
    inset:-2px;
    background:
            linear-gradient(120deg, rgba(11,97,164,.0) 0%, rgba(11,97,164,.12) 40%, rgba(11,97,164,.0) 80%);
    transform: translateX(-60%);
    transition: transform .45s ease;
    pointer-events:none;
}

.sendev_tools_hub_feature:hover{
    transform: translateY(-2px);
    box-shadow: 0 20px 46px rgba(0,0,0,.14);
    border-color: rgba(11,97,164,.38);
}
.sendev_tools_hub_feature:hover::after{ transform: translateX(35%); }

.sendev_tools_hub_feature:focus-visible{
    outline: 4px solid rgba(11,97,164,.28);
    outline-offset: 3px;
}

.sendev_tools_hub_feature_kicker{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom: 8px;
}

.sendev_tools_hub_feature_icon{
    width:40px;
    height:40px;
    border-radius: 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(11,97,164,.10);
    border: 1px solid rgba(11,97,164,.20);
    box-shadow: 0 10px 22px rgba(11,97,164,.12);
    font-size:20px;
    flex: 0 0 auto;
}

.sendev_tools_hub_feature_title{
    margin:0 0 8px;
    font-size:22px;
    font-weight:900;
    color:#2c3e50;
    line-height:1.2;
}

.sendev_tools_hub_feature_desc{
    margin:0;
    font-size:15px;
    line-height:1.55;
    color:#5a6c7d;
}

.sendev_tools_hub_feature_hint{
    margin-top: 10px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:800;
    color: var(--sendev_tools_primary);
    opacity:.95;
}

/* Category sections */
.sendev_tools_hub_section{
    margin-top: 40px;
    border-bottom: 1px solid #dadada;
    padding-bottom: 40px;
}
.sendev_tools_hub_section_head{
    display:flex;
    align-items:baseline;
    justify-content:start;
    gap:12px;
    flex-wrap:wrap;
    margin: 0 0 10px;
}
.sendev_tools_hub_h2{
    margin:0;
    font-size:18px;
    font-weight:900;
    color:#2c3e50;
}
.sendev_tools_hub_h2_desc{
    margin:0;
    font-size:13px;
    color:#5a6c7d;
    opacity:.92;
}

/* Grid + cards */
.sendev_tools_hub_grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

@media (max-width: 1024px){
    .sendev_tools_hub_grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
    .sendev_tools_hub_grid{ grid-template-columns: 1fr; }
}

.sendev_tools_hub_card{
    display:block;
    height:100%;
    text-decoration:none;
    color:inherit;

    background:#fff;
    border-radius:14px;
    padding:16px;
    border:1px solid rgba(11,97,164,.14);
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
    transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
    position:relative;
    overflow:hidden;
}

.sendev_tools_hub_card:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(0,0,0,.12);
    border-color: rgba(11,97,164,.40);
}

.sendev_tools_hub_card:focus-visible{
    outline: 4px solid rgba(11,97,164,.26);
    outline-offset: 3px;
}

.sendev_tools_hub_card_top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom: 10px;
}

.sendev_tools_hub_card_icon{
    width:36px;
    height:36px;
    border-radius: 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(11,97,164,.08);
    border: 1px solid rgba(11,97,164,.18);
    box-shadow: 0 10px 22px rgba(11,97,164,.10);
    font-size:18px;
    flex: 0 0 auto;
}

.sendev_tools_hub_card_title{
    margin:0 0 8px;
    font-size:16px;
    font-weight:900;
    line-height:1.25;
    color:#2c3e50;
}

.sendev_tools_hub_card_desc{
    margin:0;
    font-size:14px;
    line-height:1.55;
    color:#5a6c7d;
}

/* Subtle “coming soon” card */
.sendev_tools_hub_card_soon{
    border-style:dashed;
    opacity:.92;
}


/* =========================================================
   Regex tester — подсветка совпадений
   ========================================================= */
.sendev_tools_hl{
    background: rgba(255, 200, 0, .58);
    border-bottom: 3px solid rgba(255, 140, 0, .85);
    border-radius: 6px;
    padding: 0 2px;
}
.sendev_tools_hl_alt{
    background: rgba(80, 200, 120, .40);
    border-bottom: 3px solid rgba(30, 140, 60, .60);
}

/* =========================================================
   CSS Grid Generator — визуальная сетка и палитра областей
   ========================================================= */

.sendev_tools_gridgen_topline{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}

.sendev_tools_gridgen_canvas_wrap{
    border:1px solid rgba(11,97,164,.28);
    border-radius:12px;
    background:linear-gradient(180deg,#ffffff 0%, #f7fbff 100%);
    box-shadow:0 10px 22px rgba(11,97,164,.10);
    padding:12px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
}

.sendev_tools_gridgen_canvas{
    display:grid;
    gap:8px;
    min-width: 420px; /* чтобы было "поярче" и ощутимее */
}

.sendev_tools_gridgen_cell{
    appearance:none;
    border:1px solid rgba(11,97,164,.25);
    border-radius:10px;
    background:rgba(11,97,164,.06);
    padding:10px 8px;
    min-height:56px;
    cursor:pointer;
    user-select:none;
    text-align:left;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    box-shadow:0 8px 16px rgba(11,97,164,.06);
    transition: transform .06s ease, box-shadow .12s ease, filter .12s ease;
}
.sendev_tools_gridgen_cell:hover{
    filter: brightness(1.02);
    box-shadow:0 10px 20px rgba(11,97,164,.10);
}
.sendev_tools_gridgen_cell:active{ transform: translateY(1px); }
.sendev_tools_gridgen_cell:focus{ outline:3px solid rgba(11,97,164,.25); outline-offset:2px; }

.sendev_tools_gridgen_cell_name{
    font-weight:800;
    font-size:12px;
    opacity:.95;
}
.sendev_tools_gridgen_cell_pos{
    font-size:11px;
    opacity:.65;
    white-space:nowrap;
}

.sendev_tools_gridgen_cell_empty{
    background:rgba(0,0,0,.03);
    border-style:dashed;
    opacity:.9;
}
.sendev_tools_gridgen_cell_empty .sendev_tools_gridgen_cell_name{
    font-weight:700;
    opacity:.7;
}

.sendev_tools_gridgen_areas{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:10px;
}

.sendev_tools_gridgen_chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid rgba(11,97,164,.25);
    background:rgba(255,255,255,.85);
    cursor:pointer;
    user-select:none;
    box-shadow:0 8px 16px rgba(11,97,164,.06);
    transition: transform .06s ease, box-shadow .12s ease, filter .12s ease;
    font-size:13px;
}
.sendev_tools_gridgen_chip:hover{
    box-shadow:0 10px 20px rgba(11,97,164,.10);
}
.sendev_tools_gridgen_chip:active{ transform: translateY(1px); }

.sendev_tools_gridgen_chip_is_active{
    border-color:rgba(11,97,164,.55);
    box-shadow:0 0 0 4px rgba(11,97,164,.14), 0 12px 24px rgba(11,97,164,.14);
}

.sendev_tools_gridgen_dot{
    width:12px;
    height:12px;
    border-radius:999px;
    background:rgba(11,97,164,.25);
    border:1px solid rgba(11,97,164,.25);
}

.sendev_tools_gridgen_subgrid{
    display:grid;
    grid-template-columns: 1fr;
    gap:12px;
}
@media (min-width: 980px){
    .sendev_tools_gridgen_subgrid{ grid-template-columns: 1fr 1fr; }
}

.sendev_tools_gridgen_code_title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:12px;
}

/* =========================================================
   API Tester — дополнения к базовым стилям SENDEV TOOLS
   (append в конец /local/css/sendev_tools.css)
   ========================================================= */

.sendev_tools_hidden{ display:none; }

/* select в стиле input */
.sendev_tools_select{
    width:100%;
    border:1px solid rgba(11,97,164,.28);
    border-radius:12px;
    padding:10px 12px;
    font-family:inherit;
    font-size:13px;
    line-height:1.45;
    background:#fff;
    color:inherit;
    box-shadow:0 6px 16px rgba(11,97,164,.06);
}
.sendev_tools_select:focus{
    outline:none;
    border-color:rgba(11,97,164,.65);
    box-shadow:0 0 0 4px rgba(11,97,164,.18), 0 10px 18px rgba(11,97,164,.10);
}

/* подзаголовок секции внутри панели */
.sendev_tools_panel_subhead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:12px 0 8px;
    flex-wrap:wrap;
}

/* поля в строках */
.sendev_tools_field{ min-width:180px; }
.sendev_tools_field_grow{ flex:1 1 auto; min-width:135px; }

.sendev_tools_row_no_margin{ margin-top:0; }
.sendev_tools_row_align_end{ align-items:flex-end; }

/* маленькая textarea (headers) */
.sendev_tools_textarea_small{ min-height:90px; }

/* компактные кнопки/иконки */
.sendev_tools_btn_sm{
    padding:7px 10px;
    font-size:12px;
    border-radius:10px;
}
.sendev_tools_icon_btn{
    width:34px;
    height:34px;
    padding:0;
    border-radius:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    line-height:1;
}

/* активное состояние (для Pretty/Raw и т.п.) */
.sendev_tools_btn_is_active{
    background:var(--sendev_tools_soft_hover);
    border-color:rgba(11,97,164,.55);
    color:var(--sendev_tools_primary);
    font-weight:800;
}

/* метка "частично" на Pretty при обрезанном ответе */
.sendev_tools_btn_is_truncated{
    border-color: rgba(176,90,0,.55) !important;
    color:#b05a00 !important;
}
.sendev_tools_btn_is_truncated::after{
    content:"частично";
    margin-left:6px;
    font-size:11px;
    padding:2px 6px;
    border-radius:999px;
    border:1px solid rgba(176,90,0,.40);
    background:rgba(176,90,0,.08);
}

/* meta над ответом */
.sendev_tools_meta{
    font-size:13px;
    opacity:.92;
    margin-bottom:10px;
    min-height:18px;
}

/* Tabs (Body/Headers/cURL) */
.sendev_tools_tabs{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:10px;
}
.sendev_tools_tab{
    border:1px solid rgba(11,97,164,.18);
    background:rgba(255,255,255,.85);
    border-radius:10px;
    padding:6px 10px;
    cursor:pointer;
    font-size:13px;
    user-select:none;
    box-shadow:0 6px 14px rgba(11,97,164,.06);
}
.sendev_tools_tab:hover{ box-shadow:0 8px 18px rgba(11,97,164,.10); }
.sendev_tools_tab_active{
    background:var(--sendev_tools_soft_hover);
    border-color:rgba(11,97,164,.45);
    color:var(--sendev_tools_primary);
    font-weight:800;
}

/* API tester: по умолчанию вывод НЕ переносим (как было), перенос включается чекбоксом */
.sendev_tools_api_tester .sendev_tools_pre{
    white-space:pre;
    overflow-wrap:normal;
    word-break:normal;
}
.sendev_tools_api_tester.sendev_tools_wrap_on .sendev_tools_pre,
.sendev_tools_api_tester.sendev_tools_wrap_on .sendev_tools_code{
    white-space:pre-wrap;
    overflow-wrap:anywhere;
    word-break:break-word;
}

/* Query params UI */
.sendev_tools_qp_block{ margin-top:10px; }
.sendev_tools_qp_list{ display:flex; flex-direction:column; gap:8px; }
.sendev_tools_qp_row{
    display:grid;
    grid-template-columns:1fr 1fr 34px;
    gap:8px;
    align-items:center;
}
.sendev_tools_qp_input{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; }

/* Basic auth */
.sendev_tools_auth_block{ margin-top:10px; }
.sendev_tools_auth_row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    align-items:center;
}
@media (max-width:520px){
    .sendev_tools_auth_row{ grid-template-columns:1fr; }
}

/* компактный флаг (для использования внутри actions) */
.sendev_tools_flag_compact{
    padding:5px 8px;
    border-radius:10px;
}

/* History */
.sendev_tools_history_block{ margin-top:12px; }
.sendev_tools_history_list{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.sendev_tools_history_item{
    display:grid;
    grid-template-columns:70px 1fr 120px auto 34px;
    gap:8px;
    align-items:center;
    border:1px solid rgba(11,97,164,.18);
    border-radius:12px;
    padding:8px 10px;
    background:rgba(255,255,255,.85);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
    min-width:0;
}
.sendev_tools_history_method{
    font-weight:800;
    color:var(--sendev_tools_primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size:12px;
}
.sendev_tools_history_url{
    font-size:13px;
    opacity:.95;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
}
.sendev_tools_history_meta{
    font-size:12px;
    opacity:.85;
    text-align:right;
    white-space:nowrap;
}

/* Подсветка JSON/XML (токены) */
.sendev_tools_token_key{ color:#0b2440; font-weight:800; }
.sendev_tools_token_string{ color:#0a7b34; }
.sendev_tools_token_number{ color:#8a2be2; }
.sendev_tools_token_boolean{ color:#b05a00; }
.sendev_tools_token_null{ color:#6b6b6b; }
.sendev_tools_token_tag{ color:var(--sendev_tools_primary); }
.sendev_tools_token_attr{ color:#b05a00; }

/* =========================================================
   Cron Expression Generator — дополнения к SENDEV TOOLS
   (append в конец /local/css/sendev_tools.css)
   ========================================================= */

/* На случай, если ещё не добавляли в предыдущих инструментах */
.sendev_tools_hidden{ display:none; }

.sendev_tools_select{
    width:100%;
    border:1px solid rgba(11,97,164,.28);
    border-radius:12px;
    padding:10px 12px;
    font-family:inherit;
    font-size:13px;
    line-height:1.45;
    background:#fff;
    color:inherit;
    box-shadow:0 6px 16px rgba(11,97,164,.06);
}
.sendev_tools_select:focus{
    outline:none;
    border-color:rgba(11,97,164,.65);
    box-shadow:0 0 0 4px rgba(11,97,164,.18), 0 10px 18px rgba(11,97,164,.10);
}

/* Inline code в описании */
.sendev_tools_inline_code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size: 13px;
    background: rgba(11,97,164,.08);
    border: 1px solid rgba(11,97,164,.18);
    padding: 1px 6px;
    border-radius: 8px;
}

/* Пресеты */
.sendev_tools_cron_presets{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin: 2px 0 12px;
}

/* Список полей */
.sendev_tools_cron_fields{
    display:grid;
    gap:10px;
}

/* Карточка одного поля (minutes/hours/...) */
.sendev_tools_cron_field{
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    padding:12px;
    background:rgba(255,255,255,.85);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
}
.sendev_tools_cron_field_head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
    flex-wrap:wrap;
}
.sendev_tools_cron_field_title{
    font-weight:800;
}

/* Контролы режима */
.sendev_tools_cron_ctrls{
    display:grid;
    gap:10px;
}
.sendev_tools_two{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
}
@media (max-width:520px){
    .sendev_tools_two{ grid-template-columns:1fr; }
}

.sendev_tools_multiselect{
    width:100%;
    border:1px solid rgba(11,97,164,.28);
    border-radius:12px;
    padding:10px 12px;
    background:#fff;
    color:inherit;
    box-shadow:0 6px 16px rgba(11,97,164,.06);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size:13px;
    line-height:1.45;
}

/* Примечание "Важно" */
.sendev_tools_note{
    margin-top:12px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid rgba(11,97,164,.18);
    background:rgba(11,97,164,.06);
    color: rgba(11,36,64,.92);
}

/* Результат: тёмная область с cron */
.sendev_tools_cron_result{
    position:relative;
    border-radius:12px;
    overflow:hidden;
    border:1px solid rgba(11,97,164,.22);
    background:#1f232a;
    box-shadow:0 10px 22px rgba(11,97,164,.10);
}
.sendev_tools_cron_result_label{
    position:absolute;
    right:10px;
    top:10px;
    font-size:12px;
    color:rgba(255,255,255,.70);
    user-select:none;
    z-index:2;
}
.sendev_tools_cron_pre{
    margin:0;
    min-height:240px;
    max-height:420px;
    overflow:auto;
    padding:14px 12px;
    color:#e6edf3;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size:14px;
    line-height:1.45;
    white-space:pre;
}

/* Описание под cron */
.sendev_tools_cron_desc_box{
    margin-top:12px;
    border:1px solid rgba(11,97,164,.18);
    border-radius:12px;
    padding:12px;
    background:rgba(255,255,255,.85);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
}
.sendev_tools_cron_desc_title{
    font-weight:800;
    margin-bottom:6px;
}
.sendev_tools_cron_desc_text{
    color: rgba(11,36,64,.92);
}

/* Toast */
.sendev_tools_toast{
    position:fixed;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    background:rgba(0,0,0,.85);
    color:#fff;
    padding:10px 12px;
    border-radius:12px;
    font-size:14px;
    max-width:90vw;
    display:none;
    z-index:9999;
}


/* =========================================================
   CSS Filter Generator — дополнения к SENDEV TOOLS
   (append в конец /local/css/sendev_tools.css)
   ========================================================= */

.sendev_tools_css_filter .sendev_tools_dropzone{
    border:2px dashed rgba(11,97,164,.30);
    border-radius:14px;
    padding:16px;
    background:rgba(255,255,255,.85);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
    cursor:pointer;
    user-select:none;
    text-align:center;
    transition: box-shadow .15s ease, transform .05s ease, border-color .15s ease;
}
.sendev_tools_css_filter .sendev_tools_dropzone:hover{
    border-color: rgba(11,97,164,.55);
    box-shadow:0 10px 22px rgba(11,97,164,.12);
}
.sendev_tools_css_filter .sendev_tools_dropzone:active{ transform: translateY(1px); }
.sendev_tools_css_filter .sendev_tools_dropzone_drag{
    border-color: rgba(11,97,164,.75);
    background: rgba(11,97,164,.06);
}

.sendev_tools_css_filter_inputfile{ display:none; }

.sendev_tools_css_filter_preview_wrap{
    margin-top:12px;
    text-align:center;
}
.sendev_tools_css_filter_preview{
    max-width:100%;
    max-height:320px;
    border-radius:14px;
    box-shadow:0 10px 22px rgba(11,97,164,.12);
    transition: transform .2s ease, filter .2s ease;
    background:#fff;
}

/* controls grid (2 колонки) */
.sendev_tools_css_filter_controls{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
}
@media (max-width: 980px){
    .sendev_tools_css_filter_controls{ grid-template-columns: 1fr; }
}

.sendev_tools_css_filter_group{
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    padding:10px 12px;
    background:rgba(255,255,255,.85);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
}
.sendev_tools_css_filter_group label{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
}

/* Range slider (универсальный класс) */
.sendev_tools_range{
    width:100%;
    -webkit-appearance:none;
    appearance:none;
    height:6px;
    border-radius:999px;
    background: rgba(11,97,164,.16);
    outline:none;
    margin-top:8px;
}
.sendev_tools_range::-webkit-slider-runnable-track{
    height:6px;
    border-radius:999px;
    background:
            linear-gradient(to right, var(--sendev_tools_primary) 0%, var(--sendev_tools_primary) 100%) no-repeat,
            rgba(11,97,164,.16);
    background-size: var(--fill-percent, 0%) 100%;
}
.sendev_tools_range::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:16px;
    height:16px;
    border-radius:50%;
    background: var(--sendev_tools_primary);
    border: 2px solid rgba(255,255,255,.9);
    box-shadow: 0 6px 14px rgba(11,97,164,.20);
    cursor:pointer;
    margin-top: -5px; /* центрируем по треку */
}

.sendev_tools_range::-moz-range-track{
    height:6px;
    border-radius:999px;
    background:
            linear-gradient(to right, var(--sendev_tools_primary) 0%, var(--sendev_tools_primary) 100%) no-repeat,
            rgba(11,97,164,.16);
    background-size: var(--fill-percent, 0%) 100%;
}
.sendev_tools_range::-moz-range-thumb{
    width:16px;
    height:16px;
    border-radius:50%;
    background: var(--sendev_tools_primary);
    border: 2px solid rgba(255,255,255,.9);
    box-shadow: 0 6px 14px rgba(11,97,164,.20);
    cursor:pointer;
}

/* code box */
.sendev_tools_css_filter_codebox{
    position:relative;
    margin-top:12px;
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    background: rgba(255,255,255,.85);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
    overflow:hidden;
}
.sendev_tools_css_filter_codebox .sendev_tools_pre{
    margin:0;
    padding:12px;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}
.sendev_tools_css_filter_codebox .sendev_tools_code{
    font-size:13px;
}

/* чекбоксы отражения */
.sendev_tools_css_filter_checks{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:10px;
}

/* =========================================================
   Word Declension — дополнения к SENDEV TOOLS
   (append в конец /local/css/sendev_tools.css)
   ========================================================= */

.sendev_tools_decl_forms{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
}
@media (max-width: 980px){
    .sendev_tools_decl_forms{ grid-template-columns: 1fr; }
}

.sendev_tools_decl_group{
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    padding:12px;
    background: rgba(255,255,255,.85);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
}

.sendev_tools_decl_example{
    font-size:12px;
    opacity:.75;
    margin-top:6px;
}

.sendev_tools_decl_presets{
    margin-top:12px;
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    padding:12px;
    background: rgba(11,97,164,.05);
}
.sendev_tools_decl_presets_head{
    font-weight:800;
    margin-bottom:10px;
}
.sendev_tools_decl_presets_btns{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.sendev_tools_btn_sm{
    padding:7px 10px;
    font-size:12px;
    border-radius:12px;
}

.sendev_tools_decl_preview{
    border:1px dashed rgba(11,97,164,.55);
    border-radius:14px;
    padding:14px 12px;
    background: rgba(255,255,255,.90);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:18px;
    flex-wrap:wrap;
    text-align:center;
}

.sendev_tools_decl_preview_prefix{ opacity:.75; }
.sendev_tools_decl_preview_num{ font-weight:900; color: var(--sendev_tools_primary); min-width: 26px; text-align:center; }
.sendev_tools_decl_preview_word{ font-weight:800; }

.sendev_tools_decl_controls{
    margin-top:12px;
    display:grid;
    gap:10px;
}
.sendev_tools_decl_row{
    display:flex;
    gap:12px;
    align-items:center;
}
@media (max-width: 640px){
    .sendev_tools_decl_row{ flex-direction:column; align-items:stretch; }
}

.sendev_tools_decl_number{
    width: 110px;
    text-align:center;
    font-weight:800;
}

/* range slider локально для инструмента */
.sendev_tools_decl_slider{
    flex:1;
    width:100%;
    -webkit-appearance:none;
    appearance:none;
    height:6px;
    border-radius:999px;
    background: rgba(11,97,164,.16);
    outline:none;
}
.sendev_tools_decl_slider::-webkit-slider-runnable-track{
    height:6px;
    border-radius:999px;
    background:
            linear-gradient(to right, var(--sendev_tools_primary) 0%, var(--sendev_tools_primary) 100%) no-repeat,
            rgba(11,97,164,.16);
    background-size: var(--fill-percent, 0%) 100%;
}
.sendev_tools_decl_slider::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:16px;
    height:16px;
    border-radius:50%;
    background: var(--sendev_tools_primary);
    border: 2px solid rgba(255,255,255,.9);
    box-shadow: 0 6px 14px rgba(11,97,164,.20);
    cursor:pointer;
    margin-top:-5px;
}
.sendev_tools_decl_slider::-moz-range-track{
    height:6px;
    border-radius:999px;
    background:
            linear-gradient(to right, var(--sendev_tools_primary) 0%, var(--sendev_tools_primary) 100%) no-repeat,
            rgba(11,97,164,.16);
    background-size: var(--fill-percent, 0%) 100%;
}
.sendev_tools_decl_slider::-moz-range-thumb{
    width:16px;
    height:16px;
    border-radius:50%;
    background: var(--sendev_tools_primary);
    border: 2px solid rgba(255,255,255,.9);
    box-shadow: 0 6px 14px rgba(11,97,164,.20);
    cursor:pointer;
}

.sendev_tools_decl_quick{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
}

/* правила */
.sendev_tools_decl_rules{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
}
@media (max-width: 980px){
    .sendev_tools_decl_rules{ grid-template-columns: 1fr; }
}

.sendev_tools_decl_rule{
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    padding:12px;
    background: rgba(255,255,255,.85);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
    display:flex;
    gap:10px;
    align-items:flex-start;
}
.sendev_tools_decl_rule_num{
    width:24px;
    height:24px;
    border-radius:999px;
    background: var(--sendev_tools_primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:12px;
    flex:0 0 auto;
}
.sendev_tools_decl_rule_text{
    font-size:13px;
    line-height:1.35;
    opacity:.92;
}

/* =========================================================
   CSS Animation Generator — дополнения к SENDEV TOOLS
   (append в конец /local/css/sendev_tools.css)
   ========================================================= */

.sendev_tools_css_anim_layout{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
}
@media (max-width: 980px){
    .sendev_tools_css_anim_layout{ grid-template-columns: 1fr; }
}

.sendev_tools_css_anim_col{
    display:grid;
    gap:12px;
}

/* локальные "цветные" кнопки (только в этом инструменте) */
.sendev_tools_css_anim .sendev_tools_btn_primary{
    background: var(--sendev_tools_primary);
    color:#fff;
    border-color: transparent;
}
.sendev_tools_css_anim .sendev_tools_btn_primary:hover{ filter: brightness(.95); }

.sendev_tools_css_anim .sendev_tools_btn_success{
    background: rgba(16,185,129,.16);
    border: 1px solid rgba(16,185,129,.35);
    color: rgba(7,102,62,.95);
}
.sendev_tools_css_anim .sendev_tools_btn_success:hover{ background: rgba(16,185,129,.22); }

.sendev_tools_css_anim .sendev_tools_btn_danger{
    background: rgba(239,68,68,.14);
    border: 1px solid rgba(239,68,68,.30);
    color: rgba(127,29,29,.95);
}
.sendev_tools_css_anim .sendev_tools_btn_danger:hover{ background: rgba(239,68,68,.20); }

.sendev_tools_css_anim .sendev_tools_btn_sm{
    padding:7px 10px;
    border-radius:12px;
    font-size:12px;
}

/* Keyframes list */
.sendev_tools_css_anim_keyframes{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.sendev_tools_css_anim_kf{
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    padding:12px;
    background: rgba(255,255,255,.85);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
}

.sendev_tools_css_anim_kf_head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding-bottom:10px;
    margin-bottom:10px;
    border-bottom:1px solid rgba(11,97,164,.12);
    flex-wrap:wrap;
}

.sendev_tools_css_anim_percent_wrap{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:900;
    color: var(--sendev_tools_primary);
}
.sendev_tools_css_anim_percent{
    width:90px;
    text-align:center;
    font-weight:900;
}

/* 2-col row inside keyframe */
.sendev_tools_css_anim_row2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
}
@media (max-width: 520px){
    .sendev_tools_css_anim_row2{ grid-template-columns: 1fr; }
}

/* Color preview */
.sendev_tools_css_anim_color{
    display:inline-block;
    width:22px;
    height:22px;
    border-radius:8px;
    border:1px solid rgba(11,97,164,.18);
    box-shadow:0 6px 14px rgba(11,97,164,.12);
    vertical-align:middle;
    margin-left:8px;
}

/* Transform grid */
.sendev_tools_css_anim_transform{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:10px;
}
@media (max-width: 980px){
    .sendev_tools_css_anim_transform{ grid-template-columns: repeat(2, 1fr); }
}
.sendev_tools_css_anim_transform_item label{
    font-size:12px;
    opacity:.75;
    margin-bottom:6px;
    display:block;
}

/* Settings blocks */
.sendev_tools_css_anim_settings_grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:10px;
}
@media (max-width: 520px){
    .sendev_tools_css_anim_settings_grid{ grid-template-columns: 1fr; }
}

.sendev_tools_css_anim_compact{
    display:flex;
    gap:10px;
    align-items:center;
}
@media (max-width: 520px){
    .sendev_tools_css_anim_compact{ flex-direction:column; align-items:stretch; }
}

/* Preview */
.sendev_tools_css_anim_preview_wrap{
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    padding:14px;
    background: rgba(11,97,164,.05);
}

.sendev_tools_css_anim_preview_area{
    border-radius:14px;
    background: rgba(255,255,255,.90);
    border:1px dashed rgba(11,97,164,.45);
    padding:18px;
    min-height:200px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
}

.sendev_tools_css_anim_preview_box{
    width:110px;
    height:110px;
    border-radius:16px;
    background: var(--sendev_tools_primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    color:#fff;
    box-shadow:0 12px 26px rgba(11,97,164,.20);
}

.sendev_tools_css_anim_preview_hint{
    font-size:12px;
    opacity:.75;
}

/* Scrubber */
.sendev_tools_css_anim_scrubber{
    margin-top:12px;
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    padding:12px;
    background: rgba(255,255,255,.85);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
}
.sendev_tools_css_anim_scrubber_head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
    font-size:13px;
    opacity:.85;
}

.sendev_tools_css_anim_range{
    width:100%;
    -webkit-appearance:none;
    appearance:none;
    height:6px;
    border-radius:999px;
    background: rgba(11,97,164,.16);
    outline:none;
}
.sendev_tools_css_anim_range::-webkit-slider-runnable-track{
    height:6px;
    border-radius:999px;
    background:
            linear-gradient(to right, var(--sendev_tools_primary) 0%, var(--sendev_tools_primary) 100%) no-repeat,
            rgba(11,97,164,.16);
    background-size: var(--fill-percent, 0%) 100%;
}
.sendev_tools_css_anim_range::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:16px;
    height:16px;
    border-radius:50%;
    background: var(--sendev_tools_primary);
    border: 2px solid rgba(255,255,255,.9);
    box-shadow: 0 6px 14px rgba(11,97,164,.20);
    cursor:pointer;
    margin-top:-5px;
}
.sendev_tools_css_anim_range::-moz-range-track{
    height:6px;
    border-radius:999px;
    background:
            linear-gradient(to right, var(--sendev_tools_primary) 0%, var(--sendev_tools_primary) 100%) no-repeat,
            rgba(11,97,164,.16);
    background-size: var(--fill-percent, 0%) 100%;
}
.sendev_tools_css_anim_range::-moz-range-thumb{
    width:16px;
    height:16px;
    border-radius:50%;
    background: var(--sendev_tools_primary);
    border: 2px solid rgba(255,255,255,.9);
    box-shadow: 0 6px 14px rgba(11,97,164,.20);
    cursor:pointer;
}

.sendev_tools_css_anim_controls{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
}

/* Output code block */
.sendev_tools_css_anim_output{
    border:1px solid rgba(11,97,164,.22);
    border-radius:14px;
    background:#1f232a;
    box-shadow:0 10px 22px rgba(11,97,164,.10);
    overflow:auto;
    max-height: max-content;
}
.sendev_tools_css_anim_output .sendev_tools_pre{
    margin:0;
    padding:12px;
}
.sendev_tools_css_anim_output .sendev_tools_code{
    color:#e6edf3;
    white-space:pre-wrap;
    overflow-wrap:anywhere;
}

/* =========================================================
   JSON Formatter — дополнения к SENDEV TOOLS
   (append в конец /local/css/sendev_tools.css)
   ========================================================= */

.sendev_tools_json .sendev_tools_panel{ min-width:0; }

.sendev_tools_json_grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:12px;
}
@media (min-width: 980px){
    .sendev_tools_json_grid{ grid-template-columns: 1fr 1fr; align-items:start; }
}

.sendev_tools_json_actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.sendev_tools_json_textarea{
    width:100%;
    min-height:320px;
    resize:vertical;
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    padding:12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:13px;
    line-height:1.45;
    background: rgba(11,97,164,.04);
    color:#000;
    outline:none;
}
.sendev_tools_json_textarea:focus{
    border-color: rgba(11,97,164,.45);
    box-shadow: 0 0 0 3px rgba(11,97,164,.14);
}

.sendev_tools_json_row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:10px;
    flex-wrap:wrap;
}
.sendev_tools_json_hint{
    font-size:12px;
    opacity:.8;
}
.sendev_tools_json_hint kbd{
    font-family: inherit;
    font-size: 12px;
    border: 1px solid rgba(11,97,164,.24);
    border-bottom-width: 2px;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(11,97,164,.06);
    color: #000;
}
.sendev_tools_json_select_wrap{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.sendev_tools_json_output_wrap{
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    background: rgba(11,97,164,.04);

    width:100%;
    max-width:100%;
    min-width:0;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    max-height: 520px;
}

.sendev_tools_json_output_wrap .sendev_tools_pre{
    margin:0;
    padding:12px;
    white-space: pre;
    min-width:0;
}
.sendev_tools_json_output_wrap .sendev_tools_code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:13px;
    line-height:1.5;
    color:#0f172a;
}

/* В режиме минификации: разрешаем переносы */
.sendev_tools_json.sendev_tools_json_is_minified .sendev_tools_pre,
.sendev_tools_json.sendev_tools_json_is_minified .sendev_tools_code{
    white-space: pre-wrap;
    overflow-wrap:anywhere;
    word-break: break-word;
}

/* Syntax highlight tokens */
.sendev_tools_json_token_key{ color:#0b61a4; font-weight:700; }
.sendev_tools_json_token_string{ color:#0a7b34; }
.sendev_tools_json_token_number{ color:#8a2be2; }
.sendev_tools_json_token_boolean{ color:#b05a00; font-weight:600; }
.sendev_tools_json_token_null{ color:#6b7280; font-weight:600; }
.sendev_tools_json_token_punct{ opacity:.85; }

/* Для fallback копирования */
.sendev_tools_json_sr_only{
    position:absolute;
    left:-9999px;
    top:0;
    opacity:0;
}

/* =========================================================
   SQL Formatter — дополнения к SENDEV TOOLS
   (append в конец /local/css/sendev_tools.css)
   ========================================================= */

.sendev_tools_sql{
    --sendev_tools_sql_accent: var(--sendev_tools_primary);
    --sendev_tools_sql_panel_bg: rgba(11,97,164,.05);
    --sendev_tools_sql_panel_border: rgba(11,97,164,.18);

    --sendev_tools_sql_code_bg: #0b1020;
    --sendev_tools_sql_code_fg: #e6edf3;
    --sendev_tools_sql_code_border: rgba(11,97,164,.35);
    --sendev_tools_sql_focus_ring: 0 0 0 3px rgba(11,97,164,.16);
}

/* local button variants (scoped) */
.sendev_tools_sql .sendev_tools_btn_primary{
    background: var(--sendev_tools_sql_accent);
    color:#fff;
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(11,97,164,.18);
}
.sendev_tools_sql .sendev_tools_btn_primary:hover{ filter: brightness(.96); }

.sendev_tools_sql .sendev_tools_btn_sm{
    padding:7px 10px;
    border-radius:12px;
    font-size:12px;
}

/* settings area */
.sendev_tools_sql_settings{
    background: var(--sendev_tools_sql_panel_bg);
    border: 1px solid var(--sendev_tools_sql_panel_border);
}

.sendev_tools_sql_settings_row{
    display:grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap:10px;
    align-items:end;
    margin-bottom:10px;
}
@media (max-width: 1100px){
    .sendev_tools_sql_settings_row{ grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
@media (max-width: 560px){
    .sendev_tools_sql_settings_row{ grid-template-columns: 1fr; }
}

.sendev_tools_sql_field_narrow{ max-width: 240px; }
@media (max-width: 560px){
    .sendev_tools_sql_field_narrow{ max-width: none; }
}

.sendev_tools_sql_check{
    display:flex;
    align-items:center;
    gap:10px;
    user-select:none;
    padding: 8px 0;
}

.sendev_tools_sql_actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin-top:6px;
}

.sendev_tools_sql_status{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(11,97,164,.08);
    border: 1px solid rgba(11,97,164,.18);
    font-size: 13px;
    min-height: 18px;
}

/* editors */
.sendev_tools_sql_editors{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
    margin-top:12px;
}
@media (max-width: 980px){
    .sendev_tools_sql_editors{ grid-template-columns: 1fr; }
}

.sendev_tools_sql_editor_head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
}

.sendev_tools_sql_link{
    font: inherit;
    color: var(--sendev_tools_sql_accent);
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    opacity:.9;
}
.sendev_tools_sql_link:hover{ opacity:1; }

.sendev_tools_sql_textarea{
    width:100%;
    min-height: 320px;
    resize: vertical;
    font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: var(--sendev_tools_sql_code_fg);
    background:
            radial-gradient(1200px 420px at 20% 0%, rgba(11,97,164,.18), transparent 60%),
            var(--sendev_tools_sql_code_bg);
    border: 1px solid var(--sendev_tools_sql_code_border);
    border-radius: 14px;
    padding: 12px 14px;
    outline: none;
    box-shadow: 0 14px 30px rgba(0,0,0,.14);
    box-sizing: border-box;
    white-space: pre;
    tab-size: 2;
    caret-color: #93c5fd;
}
.sendev_tools_sql_textarea::placeholder{ color: rgba(230,237,243,.55); }

.sendev_tools_sql_textarea:focus{
    border-color: rgba(11,97,164,.55);
    box-shadow: var(--sendev_tools_sql_focus_ring), 0 14px 30px rgba(0,0,0,.16);
}

.sendev_tools_sql_textarea[readonly]{
    opacity: .96;
}
@media (max-width: 980px){
    .sendev_tools_sql_textarea{ min-height: 260px; }
}

/* =========================================================
   Base64 Converter — дополнения к SENDEV TOOLS
   (append в конец /local/css/sendev_tools.css)
   ========================================================= */

.sendev_tools_base64{
    --sendev_tools_base64_accent: var(--sendev_tools_primary);
    --sendev_tools_base64_panel_bg: rgba(11,97,164,.05);
    --sendev_tools_base64_panel_border: rgba(11,97,164,.18);

    --sendev_tools_base64_code_bg: #0b1020;
    --sendev_tools_base64_code_fg: #e6edf3;
    --sendev_tools_base64_code_border: rgba(11,97,164,.35);
    --sendev_tools_base64_focus_ring: 0 0 0 3px rgba(11,97,164,.16);
}

/* tabs */
.sendev_tools_base64_tabs{
    display:inline-flex;
    gap:8px;
    padding:6px;
    border-radius:14px;
    border:1px solid rgba(11,97,164,.18);
    background: rgba(255,255,255,.85);
    margin: 6px 0 12px;
}
.sendev_tools_base64_tab{
    appearance:none;
    border:1px solid transparent;
    background: transparent;
    padding: 9px 12px;
    border-radius: 12px;
    cursor:pointer;
    font-weight:800;
    color: rgba(2,6,23,.85);
}
.sendev_tools_base64_tab:hover{ background: rgba(11,97,164,.06); }
.sendev_tools_base64_tab.is_active{
    background: var(--sendev_tools_base64_accent);
    color:#fff;
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(11,97,164,.18);
}

/* panels */
.sendev_tools_base64_panel[hidden]{ display:none !important; }

.sendev_tools_base64_grid{
    display:grid;
    grid-template-columns: 1fr;
    gap:12px;
}
@media (min-width: 980px){
    .sendev_tools_base64_grid{ grid-template-columns: 1fr 1fr; align-items:start; }
}

/* input toggles (radio pills) */
.sendev_tools_base64_toggles{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}
.sendev_tools_base64_toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    user-select:none;
    padding: 6px 10px;
    border-radius: 999px;
    border:1px solid rgba(11,97,164,.18);
    background: rgba(255,255,255,.82);
}
.sendev_tools_base64_toggle input{ margin:0; }

.sendev_tools_base64_row{
    display:flex;
    gap:12px;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-top:10px;
}
.sendev_tools_base64_check{
    display:inline-flex;
    gap:10px;
    align-items:center;
    cursor:pointer;
    user-select:none;
}
.sendev_tools_base64_check input{ margin:0; }

.sendev_tools_base64_actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
}

/* scoped button variant */
.sendev_tools_base64 .sendev_tools_btn_primary{
    background: var(--sendev_tools_base64_accent);
    color:#fff;
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(11,97,164,.18);
}
.sendev_tools_base64 .sendev_tools_btn_primary:hover{ filter: brightness(.96); }

.sendev_tools_base64_meta{
    margin-top:8px;
    font-size:12px;
    opacity:.8;
}

/* code-like textarea */
.sendev_tools_base64_textarea,
.sendev_tools_base64_input{
    width:100%;
    box-sizing:border-box;
    outline:none;
    border-radius:14px;
    border:1px solid var(--sendev_tools_base64_code_border);
    background:
            radial-gradient(1200px 420px at 20% 0%, rgba(11,97,164,.18), transparent 60%),
            var(--sendev_tools_base64_code_bg);
    color: var(--sendev_tools_base64_code_fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size:13px;
    line-height:1.5;
    box-shadow: 0 14px 30px rgba(0,0,0,.14);
}
.sendev_tools_base64_textarea{
    min-height: 220px;
    resize: vertical;
    padding: 12px 14px;
    white-space: pre;
    tab-size: 2;
    caret-color: #93c5fd;
}
.sendev_tools_base64_textarea::placeholder{ color: rgba(230,237,243,.55); }

.sendev_tools_base64_input{
    padding: 10px 12px;
    background: rgba(255,255,255,.92);
    color:#0f172a;
    border: 1px solid rgba(11,97,164,.18);
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
    font-family: inherit;
}
.sendev_tools_base64_input:focus{
    border-color: rgba(11,97,164,.45);
    box-shadow: var(--sendev_tools_base64_focus_ring), 0 10px 22px rgba(0,0,0,.10);
}

.sendev_tools_base64_textarea:focus{
    border-color: rgba(11,97,164,.55);
    box-shadow: var(--sendev_tools_base64_focus_ring), 0 14px 30px rgba(0,0,0,.16);
}

/* file input */
.sendev_tools_base64_file{
    max-width:100%;
}

/* preview */
.sendev_tools_base64_preview_wrap{
    margin-top:10px;
}
.sendev_tools_base64_preview_img{
    max-width:100%;
    height:auto;
    border-radius:14px;
    border:1px solid rgba(11,97,164,.18);
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

/* =========================================================
   HTTP Status Codes — дополнения к SENDEV TOOLS
   (append в конец /local/css/sendev_tools.css)
   ========================================================= */

.sendev_tools_http_status .sendev_tools_panel{ min-width:0; }

/* Filters: group chips */
.sendev_tools_http_status_groups{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:8px;
}
.sendev_tools_http_status_chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid rgba(11,97,164,.18);
    background:rgba(255,255,255,.85);
    box-shadow:0 6px 14px rgba(11,97,164,.06);
    user-select:none;
    cursor:pointer;
}
.sendev_tools_http_status_chip input{ margin:0; transform: translateY(1px); }
.sendev_tools_http_status_chip_txt{
    font-size:13px;
    font-weight:800;
    color: rgba(2,6,23,.88);
}

.sendev_tools_http_status_quick{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
}

/* List/table */
.sendev_tools_http_status_list_wrap{
    max-height: 560px;
}
.sendev_tools_http_status_table tbody tr{
    cursor:pointer;
    transition: background .12s ease;
}
.sendev_tools_http_status_table tbody tr:hover{
    background: rgba(11,97,164,.06);
}
.sendev_tools_http_status_row_selected{
    background: rgba(11,97,164,.10) !important;
}

.sendev_tools_http_status_codepill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:56px;
    padding:4px 10px;
    border-radius:999px;
    border:1px solid rgba(11,97,164,.28);
    background: rgba(11,97,164,.08);
    color: var(--sendev_tools_primary);
    font-weight:900;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size:13px;
}

.sendev_tools_http_status_titlewrap{ display:flex; flex-direction:column; gap:2px; }
.sendev_tools_http_status_title{ font-weight:900; }
.sendev_tools_http_status_sub{ font-size:12px; opacity:.75; }

.sendev_tools_http_status_rfc{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size:12px;
    opacity:.9;
}

.sendev_tools_http_status_badge_prop{
    margin-left:8px;
    text-transform:uppercase;
    letter-spacing:.03em;
}

/* Empty states */
.sendev_tools_http_status_empty{
    padding:14px 10px !important;
    opacity:.85;
}
.sendev_tools_http_status_empty_detail{
    padding:12px;
    border:1px dashed rgba(11,97,164,.35);
    border-radius:12px;
    background: rgba(11,97,164,.04);
    opacity:.9;
}

/* Detail card */
.sendev_tools_http_status_detail{
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    background: rgba(255,255,255,.85);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
    padding:12px;
    min-height: 240px;
}
.sendev_tools_http_status_detail_head{
    display:grid;
    grid-template-columns: 92px 1fr;
    gap:10px;
    align-items:start;
    margin-bottom:10px;
}
@media (max-width:520px){
    .sendev_tools_http_status_detail_head{ grid-template-columns: 1fr; }
}

.sendev_tools_http_status_detail_code{
    display:flex;
    align-items:center;
    justify-content:center;
    height:44px;
    border-radius:14px;
    border:1px solid rgba(11,97,164,.28);
    background: rgba(11,97,164,.08);
    color: var(--sendev_tools_primary);
    font-weight:900;
    font-size:18px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

.sendev_tools_http_status_detail_name{
    font-weight:900;
    font-size:16px;
    line-height:1.25;
}
.sendev_tools_http_status_detail_meta{
    grid-column: 2 / -1;
    font-size:12px;
    opacity:.78;
}
@media (max-width:520px){
    .sendev_tools_http_status_detail_meta{ grid-column:auto; }
}

.sendev_tools_http_status_detail_desc{
    font-size:13px;
    line-height:1.45;
    margin: 6px 0 10px;
}
.sendev_tools_http_status_detail_help{
    font-size:12px;
    opacity:.85;
    padding:10px 10px;
    border-radius:12px;
    border:1px solid rgba(11,97,164,.14);
    background: rgba(11,97,164,.05);
    margin-bottom:10px;
}

.sendev_tools_http_status_detail_tips{
    border-top:1px solid rgba(11,97,164,.10);
    padding-top:10px;
}
.sendev_tools_http_status_detail_tips_title{
    font-weight:900;
    margin-bottom:6px;
}
.sendev_tools_http_status_ul{
    margin:0;
    padding-left:18px;
    display:grid;
    gap:6px;
    font-size:13px;
    line-height:1.35;
}


/* =========================================================
   Unit Converter — дополнения к SENDEV TOOLS
   (append в конец /local/css/sendev_tools.css)
   ========================================================= */

.sendev_tools_unitconv .sendev_tools_panel{ min-width:0; }

/* 2 columns inside panel */
.sendev_tools_unitconv_row2{
    display:grid;
    grid-template-columns: 1fr 180px;
    gap:10px;
    align-items:end;
}
@media (max-width: 640px){
    .sendev_tools_unitconv_row2{ grid-template-columns: 1fr; }
}

/* CSS settings box spacing */
.sendev_tools_unitconv_css{
    margin-top:12px;
    padding-top:2px;
}

/* Result card */
.sendev_tools_unitconv_result{
    display:grid;
    gap:12px;
}
.sendev_tools_unitconv_result_top{
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    padding:12px;
    background: rgba(11,97,164,.05);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
}
.sendev_tools_unitconv_result_label{
    font-size:12px;
    font-weight:900;
    opacity:.85;
    margin-bottom:8px;
}

/* Output field */
.sendev_tools_unitconv_output{
    font-weight:900;
    font-size:16px;
    letter-spacing:.01em;
}

/* Formula / explanation */
.sendev_tools_unitconv_kv{
    border:1px dashed rgba(11,97,164,.35);
    border-radius:14px;
    padding:12px;
    background: rgba(255,255,255,.85);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
    font-size:13px;
    line-height:1.35;
    opacity:.95;
}

/* Examples */
.sendev_tools_unitconv_examples_title{
    font-weight:900;
    margin-bottom:8px;
}
.sendev_tools_unitconv_examples_wrap{
    max-height: 280px;
}
.sendev_tools_unitconv_table tbody tr:hover{
    background: rgba(11,97,164,.05);
}

/* History */
.sendev_tools_unitconv_history_block{
    margin-top:12px;
}
.sendev_tools_unitconv_history_list{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:6px;
}
.sendev_tools_unitconv_history_item{
    display:grid;
    grid-template-columns: 1fr auto;
    gap:10px;
    align-items:center;
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    padding:10px 12px;
    background: rgba(255,255,255,.85);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
    min-width:0;
}
.sendev_tools_unitconv_history_left{
    min-width:0;
}
.sendev_tools_unitconv_history_line1{
    font-weight:900;
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.sendev_tools_unitconv_history_line2{
    font-size:12px;
    opacity:.8;
    margin-top:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.sendev_tools_unitconv_history_actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}
.sendev_tools_unitconv_history_empty{
    padding:10px 12px;
    border:1px dashed rgba(11,97,164,.28);
    border-radius:14px;
    background: rgba(11,97,164,.04);
    opacity:.88;
}
#uc-em-base, #uc-to {
    width: auto;
}


/* =========================================================
   Random Generator — дополнения к SENDEV TOOLS
   (append в конец /local/css/sendev_tools.css)
   ========================================================= */

.sendev_tools_random .sendev_tools_panel{ min-width:0; }

.sendev_tools_random_tabs{ margin-bottom:10px; }

/* Panels spacing */
.sendev_tools_random_panel{
    padding-top:2px;
}

/* Layout rows */
.sendev_tools_random_row2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    align-items:end;
}
@media (max-width: 640px){
    .sendev_tools_random_row2{ grid-template-columns: 1fr; }
}

.sendev_tools_random_row3{
    display:grid;
    grid-template-columns: 1fr 180px 1fr;
    gap:10px;
    align-items:end;
    margin-top:10px;
}
@media (max-width: 980px){
    .sendev_tools_random_row3{ grid-template-columns: 1fr; }
}

.sendev_tools_random_flags{ margin-top:10px; }

/* Output */
.sendev_tools_random_outwrap{
    max-height: 560px;
}

/* Password strength */
.sendev_tools_random_strength{
    margin-top:12px;
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    padding:12px;
    background: rgba(11,97,164,.05);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
}
.sendev_tools_random_strength_label{
    font-weight:900;
    font-size:12px;
    opacity:.85;
    margin-bottom:8px;
}
.sendev_tools_random_strength_bar{
    height:10px;
    border-radius:999px;
    background: rgba(11,97,164,.14);
    overflow:hidden;
    border:1px solid rgba(11,97,164,.18);
}
.sendev_tools_random_strength_fill{
    height:100%;
    width:0%;
    background: linear-gradient(90deg, rgba(239,68,68,.75), rgba(245,158,11,.75), rgba(16,185,129,.75));
}
.sendev_tools_random_strength_text{
    margin-top:8px;
    font-size:13px;
    opacity:.9;
}

/* Palette */
.sendev_tools_random_palette{
    margin-top:12px;
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    padding:12px;
    background: rgba(255,255,255,.85);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
}
.sendev_tools_random_palette_title{
    font-weight:900;
    margin-bottom:10px;
}
.sendev_tools_random_palette_grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
}
@media (max-width: 980px){
    .sendev_tools_random_palette_grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
    .sendev_tools_random_palette_grid{ grid-template-columns: 1fr; }
}

.sendev_tools_random_swatch{
    display:grid;
    grid-template-columns: 44px 1fr;
    gap:10px;
    align-items:center;
    border:1px solid rgba(11,97,164,.14);
    border-radius:12px;
    padding:8px 10px;
    background: rgba(11,97,164,.04);
}
.sendev_tools_random_swatch_chip{
    width:44px;
    height:34px;
    border-radius:10px;
    border:1px solid rgba(11,97,164,.22);
    box-shadow:0 8px 16px rgba(11,97,164,.10);
}
.sendev_tools_random_swatch_label{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size:12px;
    opacity:.9;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


/* =========================================================
   Code Minifier — дополнения к SENDEV TOOLS
   (append в конец /local/css/sendev_tools.css)
   ========================================================= */

.sendev_tools_codemin .sendev_tools_panel{ min-width:0; }

.sendev_tools_codemin_tabs{ margin-bottom:10px; }

.sendev_tools_codemin_mode{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:10px;
}

.sendev_tools_codemin_flags{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:6px;
}

.sendev_tools_codemin_indent{
    margin-top:12px;
}

/* Textareas */
.sendev_tools_codemin_textarea{
    width:100%;
    min-height: 320px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
    padding: 10px 12px;
}

/* Output wrap */
.sendev_tools_codemin_outwrap{
    max-height: 640px;
}

/* Make output code readable */
.sendev_tools_codemin .sendev_tools_pre{
    margin:0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
}

/* =========================================================
   Flexbox Generator — дополнения к SENDEV TOOLS (v2)
   Оси main/cross + раздельный gap + drag&drop
   (append в конец /local/css/sendev_tools.css)
   ========================================================= */

.sendev_tools_flexgen .sendev_tools_panel{ min-width:0; }

.sendev_tools_flexgen_row2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    align-items:end;
}
@media (max-width: 640px){
    .sendev_tools_flexgen_row2{ grid-template-columns: 1fr; }
}

.sendev_tools_flexgen_row3{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:10px;
    align-items:end;
}
@media (max-width: 980px){
    .sendev_tools_flexgen_row3{ grid-template-columns: 1fr; }
}

.sendev_tools_flexgen_basis{
    display:grid;
    grid-template-columns: 1fr 110px;
    gap:10px;
    align-items:center;
}

/* Gap blocks */
.sendev_tools_flexgen_gap_one{ margin-top:8px; }
.sendev_tools_flexgen_gap_two{ margin-top:4px; }

/* Preview */
.sendev_tools_flexgen_preview_wrap{
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    background: rgba(11,97,164,.04);
    /*padding:12px;*/
    box-shadow:0 6px 16px rgba(11,97,164,.06);
    margin-bottom:12px;
}

.sendev_tools_flexgen_preview_stage{
    width:100%;
    overflow:auto;
    border-radius:12px;
    background: rgba(255,255,255,.75);
    border:1px dashed rgba(11,97,164,.30);
    padding:12px;
}

/* Wrap to position axes over container */
.sendev_tools_flexgen_container_wrap{
    position:relative;
    display:inline-block;
    max-width:100%;
}

/* Container inside preview */
.sendev_tools_flexgen_container{
    border-radius:12px;
    border:1px solid rgba(11,97,164,.18);
    background: rgba(255,255,255,.9);
    padding:12px;
    min-height: 120px;
    box-shadow: inset 0 0 0 1px rgba(11,97,164,.06);
}

/* Items */
.sendev_tools_flexgen_item{
    border-radius:12px;
    border:1px solid rgba(11,97,164,.20);
    background: rgba(11,97,164,.08);
    box-shadow:0 6px 16px rgba(11,97,164,.08);
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
    user-select:none;
    min-width: 60px;
    min-height: 44px;
}

.sendev_tools_flexgen_item_marked{
    outline: 2px solid rgba(11,97,164,.55);
    background: rgba(11,97,164,.12);
}

/* Drag & drop */
.sendev_tools_flexgen_item_draggable{ cursor:grab; }
.sendev_tools_flexgen_dragging{ opacity:.55; cursor:grabbing; }
.sendev_tools_flexgen_drop{
    outline: 2px dashed rgba(11,97,164,.65);
    outline-offset: 2px;
}

/* Axes overlay */
.sendev_tools_flexgen_axes{
    position:absolute;
    inset: 8px;
    pointer-events:none;
    z-index: 2;
}

.sendev_tools_flexgen_axis{
    position:absolute;
    border-radius:999px;
    opacity:.9;
}

.sendev_tools_flexgen_axis_label{
    position:absolute;
    top:-18px;
    left:0;
    font-size:11px;
    font-weight:900;
    opacity:.85;
    background: rgba(255,255,255,.85);
    border:1px solid rgba(11,97,164,.18);
    padding:2px 6px;
    border-radius:999px;
}

.sendev_tools_flexgen_axis.is-h{
    left:12%;
    right:12%;
    top:50%;
    height:0;
    border-top:2px solid rgba(11,97,164,.55);
}
.sendev_tools_flexgen_axis.is-v{
    top:12%;
    bottom:12%;
    left:50%;
    width:0;
    border-left:2px solid rgba(11,97,164,.55);
}

/* arrow heads */
.sendev_tools_flexgen_axis.is-h::after{
    content:"";
    position:absolute;
    top:-6px;
    right:-2px;
    width:0; height:0;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    border-left:10px solid rgba(11,97,164,.55);
}
.sendev_tools_flexgen_axis.is-h.dir-neg::after{
    right:auto;
    left:-2px;
    border-left:none;
    border-right:10px solid rgba(11,97,164,.55);
}
.sendev_tools_flexgen_axis.is-v::after{
    content:"";
    position:absolute;
    left:-6px;
    bottom:-2px;
    width:0; height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-top:10px solid rgba(11,97,164,.55);
}
.sendev_tools_flexgen_axis.is-v.dir-neg::after{
    bottom:auto;
    top:-2px;
    border-top:none;
    border-bottom:10px solid rgba(11,97,164,.55);
}

/* axis labels position tweaks */
.sendev_tools_flexgen_axis_main .sendev_tools_flexgen_axis_label{ left:0; }
.sendev_tools_flexgen_axis_cross .sendev_tools_flexgen_axis_label{ left:0; }

/* Code wraps */
.sendev_tools_flexgen_codewrap{ max-height: 280px; }

.sendev_tools_flexgen .sendev_tools_pre{
    margin:0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
}

/* =========================================================
   SVG Optimizer — дополнения к SENDEV TOOLS
   (append в конец /local/css/sendev_tools.css)
   ========================================================= */

.sendev_tools_svgopt .sendev_tools_panel{ min-width:0; }

.sendev_tools_svgopt_flags{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.sendev_tools_svgopt_precision{
    margin-top:12px;
}

.sendev_tools_svgopt_textarea{
    width:100%;
    min-height: 320px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
    padding: 10px 12px;
}

.sendev_tools_svgopt_uploader{
    margin-bottom: 12px;
}

.sendev_tools_svgopt_drop{
    margin-top:10px;
    border:1px dashed rgba(11,97,164,.30);
    border-radius:14px;
    padding:12px;
    background: rgba(11,97,164,.04);
    cursor:pointer;
    user-select:none;
    box-shadow:0 6px 16px rgba(11,97,164,.06);
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.sendev_tools_svgopt_drop:hover{
    transform: translateY(-1px);
    background: rgba(11,97,164,.06);
}

.sendev_tools_svgopt_drop.is-drag{
    border-color: rgba(11,97,164,.55);
    background: rgba(11,97,164,.10);
}

.sendev_tools_svgopt_preview_wrap{
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    background: rgba(11,97,164,.04);
    padding:12px;
    box-shadow:0 6px 16px rgba(11,97,164,.06);
    margin-bottom:12px;
}

.sendev_tools_svgopt_preview_head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    margin-bottom:8px;
}

.sendev_tools_svgopt_preview_title{
    font-weight: 900;
}

.sendev_tools_svgopt_preview_box{
    border:1px dashed rgba(11,97,164,.30);
    border-radius:12px;
    background: rgba(255,255,255,.75);
    padding:12px;
    overflow:auto;
    min-height: 140px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sendev_tools_svgopt_preview_img{
    max-width:100%;
    max-height: 260px;
    display:block;
}

.sendev_tools_svgopt_codewrap{
    max-height: 340px;
}

.sendev_tools_svgopt .sendev_tools_pre{
    margin:0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
}


/* =========================================================
   Date Calculator — дополнения к SENDEV TOOLS
   (append в конец /local/css/sendev_tools.css)
   ========================================================= */

.sendev_tools_datecalc .sendev_tools_panel{ min-width:0; }

.sendev_tools_datecalc_row2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    align-items:end;
}
@media (max-width: 640px){
    .sendev_tools_datecalc_row2{ grid-template-columns: 1fr; }
}

.sendev_tools_datecalc_row3{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:10px;
    align-items:end;
}
@media (max-width: 980px){
    .sendev_tools_datecalc_row3{ grid-template-columns: 1fr; }
}

.sendev_tools_datecalc_block{
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    padding:12px;
    background: rgba(11,97,164,.04);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
    margin-bottom:12px;
}

.sendev_tools_datecalc_outwrap{
    max-height: 340px;
}

.sendev_tools_datecalc .sendev_tools_pre{
    margin:0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
}

/* =========================================================
   Border Radius Generator — дополнения к SENDEV TOOLS (v2)
   ========================================================= */

.sendev_tools_brr .sendev_tools_panel{ min-width:0; }

.sendev_tools_brr_row2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    align-items:end;
}
@media (max-width: 640px){
    .sendev_tools_brr_row2{ grid-template-columns: 1fr; }
}

.sendev_tools_brr_row3{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:10px;
    align-items:end;
}
@media (max-width: 980px){
    .sendev_tools_brr_row3{ grid-template-columns: 1fr; }
}

.sendev_tools_brr_lock{ margin: 6px 0 10px; }

.sendev_tools_brr_corner{
    border:1px solid rgba(11,97,164,.18);
    border-radius:14px;
    padding:10px 12px;
    background: rgba(11,97,164,.04);
    box-shadow:0 6px 16px rgba(11,97,164,.06);
    margin-bottom:10px;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.sendev_tools_brr_corner.is-active{
    border-color: rgba(11,97,164,.55);
    background: rgba(11,97,164,.07);
    box-shadow:0 10px 22px rgba(11,97,164,.10);
}

.sendev_tools_brr_corner_head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
}
.sendev_tools_brr_corner_title{
    font-weight: 900;
    line-height: 1.2;
}
.sendev_tools_brr_value{ width: 110px; }
.sendev_tools_brr_num{
    text-align:center;
    font-weight: 900;
}
.sendev_tools_brr_range{ width:100%; }

/* Stage “макет” */
.sendev_tools_brr_stage{
    position: relative;
    border-radius:14px;
    background: rgba(0,0,0,.08);
    padding: 22px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    margin-bottom: 12px;
    min-height: 360px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sendev_tools_brr_canvas{
    width: 100%;
    max-width: 640px;
    background: rgba(255,255,255,.30);
    border:1px solid rgba(255,255,255,.22);
    border-radius: 12px;
    padding: 24px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
    display:flex;
    align-items:center;
    justify-content:center;
}

.sendev_tools_brr_demo{
    width: 100%;
    max-width: 520px;
    height: 240px;
    background: rgba(255,255,255,.95);
    border:1px solid rgba(0,0,0,.20);
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
    position: relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sendev_tools_brr_demo_inner{
    width: calc(100% - 56px);
    height: calc(100% - 56px);
    background: rgba(11,97,164,.06);
    border: 1px solid rgba(0,0,0,.18);
}

/* поля вокруг макета (редактируемые input) */
.sendev_tools_brr_badges{
    position:absolute;
    inset: 0;
    pointer-events: none;
}

.sendev_tools_brr_badge{
    pointer-events: auto;
    position:absolute;
    width: 36px;
    height: 24px;
    border-radius: 7px;
    background: rgba(0,0,0,.72);
    color: #fff;
    font-weight: 900;
    font-size: 12px;
    padding: 0 6px;
    border: 1px solid rgba(255,255,255,.12);
    cursor: text;
    user-select:none;
    text-align:center;
    outline: none;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.sendev_tools_brr_badge:hover{
    transform: translateY(-1px);
    background: rgba(0,0,0,.80);
}

.sendev_tools_brr_badge:focus{
    outline: 2px solid rgba(11,97,164,.60);
    outline-offset: 2px;
}

.sendev_tools_brr_badge.is-active{
    border-color: rgba(11,97,164,.65);
    background: rgba(0,0,0,.84);
}

.sendev_tools_brr_badge_tl{ left: 12px; top: 12px; }
.sendev_tools_brr_badge_tr{ right: 12px; top: 12px; }
.sendev_tools_brr_badge_bl{ left: 12px; bottom: 12px; }
.sendev_tools_brr_badge_br{ right: 12px; bottom: 12px; }

.sendev_tools_brr_codewrap{ max-height: 320px; }

.sendev_tools_brr .sendev_tools_pre{
    margin:0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
}

/* =========================================================
   JSON ↔ CSV Converter — SENDEV TOOLS (append)
   ========================================================= */

.sendev_tools_jsoncsv .sendev_tools_panel{ min-width:0; }

.sendev_tools_jsoncsv_modes{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    align-items:end;
}

@media (max-width: 640px){
    .sendev_tools_jsoncsv_modes{ grid-template-columns: 1fr; }
}

.sendev_tools_jsoncsv_row2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    align-items:end;
}

@media (max-width: 980px){
    .sendev_tools_jsoncsv_row2{ grid-template-columns: 1fr; }
}

.sendev_tools_jsoncsv_checks{
    display:grid;
    grid-template-columns: 1fr;
    gap:10px;
    margin-top: 6px;
}

.sendev_tools_jsoncsv_actions{
    gap:10px;
    flex-wrap: wrap;
}

.sendev_tools_jsoncsv_io{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
}

@media (max-width: 980px){
    .sendev_tools_jsoncsv_io{ grid-template-columns: 1fr; }
}

.sendev_tools_jsoncsv_block{
    min-width:0;
}

.sendev_tools_jsoncsv_ta{
    min-height: 340px;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
    font-size: 13px;
    line-height: 1.45;
    tab-size: 2;
    white-space: pre;
}

@media (max-width: 980px){
    .sendev_tools_jsoncsv_ta{ min-height: 260px; }
}