* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f5f7fa;
    min-height: 100vh;
    padding: 20px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.header {
    background: linear-gradient(135deg, #2b579a 0%, #1c3f7a 100%);
    color: white;
    padding: 20px 30px;
    border-radius: 12px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap; /* чтобы панель не вылазила за границы */
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo i {
    font-size: 24px;
    color: #ffcc00;
}

.logo h1 {
    font-size: 24px;
    font-weight: 500;
    color: white;
}

.nav-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.nav-btn {
    padding: 6px 12px; /* компактнее */
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    transition: all 0.2s;
    white-space: nowrap;
}

.nav-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-1px);
}

.header-right {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Toolbar under banners (tabs on the left, actions on the right) */
.main-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 14px 0 10px;
}

.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* The base .nav-btn style is tuned for the dark header (white text).
   In the toolbar (light background) we override it to stay visible. */
.main-toolbar .nav-btn {
    background: #ffffff;
    border: 1px solid #dce3ef;
    color: #2b579a;
}

.main-toolbar .nav-btn:hover {
    background: #f3f6fb;
    transform: translateY(-1px);
}

/* Search */
.search-row {
    margin: 10px 0 14px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border: 1px solid #dce3ef;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.search-box i {
    color: #2b579a;
    opacity: 0.9;
}

.search-box input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
}

.search-clear {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    opacity: 0.6;
    padding: 2px 6px;
}

.search-clear:hover {
    opacity: 0.9;
}

/* компактная кнопка "Новый шаблон" в шапке */
.btn.header-cta {
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    white-space: nowrap;
}

.auth-status {
    font-size: 12px;
    opacity: 0.85;
    margin-right: 6px;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-primary {
    background: #4CAF50;
    color: white;
}

.btn-primary:hover {
    background: #45a049;
}

.btn-secondary {
    background: #757575;
    color: white;
}

.btn-secondary:hover {
    background: #616161;
}

.templates-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* --- Template limit banner --- */
.limit-banner{
  background: #fff7e6;
  border: 1px solid #ffd7a3;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0;
  color: #7a4b00;
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.limit-banner.info{
  background: #eef6ff;
  border: 1px solid #b6d7ff;
  color: #0b4a7a;
}
.limit-banner.info .text b{color:#063a5f;}

.limit-banner.ok{
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}
.limit-banner.ok .text b{color:#064e3b;}

.limit-banner .actions{
  margin-top: 8px;
  display:flex;
  gap:8px;
  flex-wrap: wrap;
}
.limit-banner .actions .btn{
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
}

.limit-banner .icon{font-size:18px; margin-top:1px;}
.limit-banner .text{flex:1;}
.limit-banner .text b{color:#5a3600;}

/* --- Locked templates (beyond limit) --- */
.template-row.is-locked{
  opacity: .45;
  filter: grayscale(0.8);
}
.template-row.is-locked .template-actions button{
  pointer-events: none;
}
.template-row.is-locked .tpl-desc-edit{
  pointer-events: none;
}

/* --- Admin panel --- */
.admin-panel{
  margin: 14px 0 18px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  padding: 14px;
}
.admin-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px;}
.admin-title{display:flex;align-items:center;gap:10px;}
.admin-title h2{margin:0;font-size:18px;}
.admin-sub{color:#666;font-size:12px;}
.admin-grid{display:grid;grid-template-columns: 1fr 1fr;gap:14px;}
@media (max-width: 980px){.admin-grid{grid-template-columns:1fr;}}
.admin-col{display:flex;flex-direction:column;gap:16px;}
.admin-card{border:1px solid #f0f0f0;border-radius:12px;padding:12px;}
.admin-card h3{margin:0 0 10px;font-size:14px;}
.admin-hint{color:#777;font-size:12px;margin:8px 0;}
.admin-form{display:grid;grid-template-columns: 1fr 200px;gap:10px;}
.admin-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#555;}
.admin-form input,.admin-form textarea,.admin-card textarea{border:1px solid #ddd;border-radius:10px;padding:10px;font-size:13px;}
.admin-form .full{grid-column:1 / -1;}
.admin-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px;}
.admin-actions.full{grid-column:1 / -1;justify-content:flex-start;}
.admin-list{margin-top:10px;max-height:240px;overflow:auto;border-top:1px dashed #eee;padding-top:10px;}
.admin-list .row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid #f6f6f6;}
.admin-list .row:last-child{border-bottom:none;}
.admin-list .meta{font-size:12px;color:#555;}
.admin-list .meta .small{display:block;color:#777;font-size:11px;margin-top:2px;}
.admin-list .row button{white-space:nowrap;}

.public-top{
    position: relative;
    z-index: 3;
    margin: 6px 0 14px 0;
}

.accessible-hint{
    color:#666;
    font-size:13px;
    line-height:1.35;
}

.template-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.template-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.template-header {
    background: #f8f9fa;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.template-title {
    font-size: 16px;
    font-weight: 600;
    color: #2b579a;
}

.template-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.action-btn:hover {
    background: #f0f0f0;
    color: #333;
}

/* Highlight link icon when a "share link" already exists for the template */
.action-btn.share-link-btn.has-share {
    background: #e7f7ec;
    color: #2e7d32;
}

.action-btn.share-link-btn.has-share:hover {
    background: #d9f2e1;
    color: #1b5e20;
}

.template-body {
    padding: 20px;
    flex: 1;
}

.template-description {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.5;
}

.template-info {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #999;
    margin-bottom: 15px;
}

.template-fields {
    background: #e3f2fd;
    color: #1976d2;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.template-preview {
    background: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 15px;
    margin-top: 10px;
    max-height: 200px;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.4;
    color: #666;
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 20px;
    color: #ddd;
}

.empty-state h3 {
    margin-bottom: 10px;
    color: #666;
}

.empty-state p {
    color: #999;
    margin-bottom: 20px;
}

.loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.loading i {
    font-size: 32px;
    margin-bottom: 15px;
    color: #2b579a;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.modal-header {
    padding: 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    color: #2b579a;
    font-size: 18px;
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.close-btn:hover {
    background: #f5f5f5;
    color: #333;
}

.modal-body {
    padding: 20px;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid #ddd;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s;
    background: white;
}

.form-control:focus {
    outline: none;
    border-color: #2b579a;
    box-shadow: 0 0 0 3px rgba(43, 87, 154, 0.1);
}

textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

.notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #4CAF50;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    animation: slideIn 0.3s;
}

.notification.error {
    background: #f44336;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Адаптивность */
@media (max-width: 992px) {
    .templates-container {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .header-left {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .nav-buttons {
        width: 100%;
        justify-content: center;
    }
    
    .header-right {
        justify-content: center;
    }
    
    .templates-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 10px;
    }
    
    .header {
        padding: 15px;
    }
    
    .logo h1 {
        font-size: 20px;
    }
    
    .btn {
        padding: 8px 15px;
        font-size: 14px;
    }
    
    .nav-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* =========================================================
   Redesigned list view (2026-01)
   - compact rows вместо больших карточек
   ========================================================= */

.templates-container{
    display: block; /* override grid */
    margin-top: 16px;
}

.templates-list{
    background: white;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.list-head, .template-row{
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.8fr; /* name | meta | actions */
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
}

.list-head{
    background: #f8f9fa;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    font-size: 12px;
    font-weight: 700;
    color: rgba(0,0,0,0.55);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.template-row{
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.template-row:last-child{ border-bottom: none; }

.template-row:hover{
    background: rgba(43,87,154,0.04);
}

.tpl-name{
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.tpl-name .title{
    font-weight: 700;
    color: #2b579a;
    /* Show full template names (no truncation) */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}
.tpl-name .subtitle{
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* В публичных / доступных — описание показываем полностью (без line-clamp) */
.templates-list.public .tpl-name .subtitle,
.templates-list.public .tpl-name .subtitle.desc-line{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    display: block;
    word-break: break-word;
}

.tpl-meta{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    font-size: 12px;
    color: #6b7280;
}
.badge{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #eef2ff;
    color: #1d4ed8;
    border: 1px solid rgba(29,78,216,0.12);
}
.badge.muted{
    background: #f3f4f6;
    color: #374151;
    border-color: rgba(0,0,0,0.08);
}
.badge.success{
    background: #ecfdf5;
    color: #047857;
    border-color: rgba(4,120,87,0.14);
}

.template-actions{
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}

.action-btn{
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.10);
    background: #fff;
    color: #374151;
    padding: 0;
    transition: all .15s ease;
}
.action-btn:hover{
    background: #f3f4f6;
    transform: translateY(-1px);
}
.action-btn.danger:hover{
    background: rgba(244,67,54,0.10);
    border-color: rgba(244,67,54,0.25);
    color: #b91c1c;
}

.template-preview{
    display:none; /* preview is too noisy for list view */
}

/* Public templates header (search) */
.public-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    margin: 10px 0 6px;
}
.public-toolbar .search{
    flex: 1 1 360px;
    min-width: 260px;
    display:flex;
    gap:8px;
    align-items:center;
}
.public-toolbar input[type="text"]{
    flex: 1;
    padding: 7px 12px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
}
.public-toolbar .btn{
    padding: 0 12px;
    height: 34px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1;
}
.public-toolbar .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    white-space: nowrap; /* never wrap "Найти" under the icon */
}

/* Ensure public toolbar buttons never wrap icon/text to a new line (some FA/other CSS may set flex-wrap or display:block) */
.public-toolbar .btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.public-toolbar .btn i,
.public-toolbar .btn .btn-text{
    flex: 0 0 auto;
}

.public-toolbar .btn i{
    font-size: 14px;
    display:inline-block; /* guard against FA styles that make <i> behave like a block */
    line-height: 1;
}
.public-toolbar .btn .btn-text{
    display:inline-block;
    white-space: nowrap;
}
.btn.btn-sm{
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 13px;
}

/* Inline editable description ("Мои шаблоны") */
.tpl-desc-edit{
    outline: none;
    cursor: text;
    display: block;
    white-space: pre-wrap;
    line-height: 1.35;
    padding: 6px 8px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(0,0,0,0.03);
    /* Show full description (no truncation). */
    max-height: none;
    overflow: visible;
    min-height: 34px;
}
.tpl-desc-edit:focus{
    background: rgba(59,130,246,0.08);
    border-color: rgba(59,130,246,0.35);
    max-height: 220px;
    overflow: auto;
}
.tpl-desc-edit:empty:before{
    content: attr(data-placeholder);
    color: rgba(0,0,0,0.45);
}

/* маленький разделитель в подзаголовке (ID • описание) */
.tpl-name .subtitle .sep{
    margin: 0 6px;
    opacity: 0.6;
}

/* Wider layout for public list: add author column */
.templates-list.public .list-head,
.templates-list.public .template-row{
    grid-template-columns: 1.2fr 1.1fr 0.9fr 0.8fr; /* name | author | meta | actions */
}

/* Public list without author/email column (for non-admin users) */
.templates-list.public.no-author .list-head,
.templates-list.public.no-author .template-row{
    grid-template-columns: 1.4fr 0.9fr 0.8fr; /* name | meta | actions */
}
.templates-list.public.no-author .col-author,
.templates-list.public.no-author .tpl-author-col{
    display:none;
}

/* Responsive */
@media (max-width: 900px){
  .templates-list.public .list-head,
  .templates-list.public .template-row{
    grid-template-columns: 1.4fr 0.9fr 0.8fr; /* name | meta | actions (author goes subtitle) */
  }
  .tpl-author-col, .list-head .col-author{ display:none; }
}
@media (max-width: 640px){
  .list-head{ display:none; }
  .template-row{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .template-actions{ justify-content:flex-start; }
}


/* Description line in "Мои шаблоны" */
.desc-line{
    display:flex;
    align-items:flex-start;
    gap:6px;
    min-width:0;
}
.desc-label{
    flex:0 0 auto;
    font-size:12px;
    color: rgba(0,0,0,0.70);
}
.tpl-desc-edit{
    flex:1 1 auto;
    min-width:0;
}
.tpl-desc-edit:not(:focus)::after{
    content: ' ✎';
    opacity: 1;
    font-size: 13px;
    color: rgba(0,0,0,0.85);
}

/* Public templates: description should be readable */
.public-desc{
    margin-top: 4px;
    font-size: 14px;
    color: rgba(0,0,0,0.86);
    line-height: 1.3;
    /* Show full description (no truncation). */
    display: block;
    overflow: visible;
}
.public-desc.empty{
    color: rgba(0,0,0,0.45);
    font-style: italic;
}

/* FIX: иконки в кнопках не должны наследовать margin от empty-state */
.empty-state .btn i {
  margin: 0 !important;
}


/* Premium banner (non-admin premium users) */
.limit-banner.premium{
  border-left-color: #7c3aed;
}


/* Premium contact helper inside limit banner */
#limitBanner .help {
  margin-top: 6px;
  font-size: 13px;
}
#limitBanner .help a {
  text-decoration: underline;
}


.limit-banner.warn{
  background: #fff2f2;
  border: 1px solid #ffb6b6;
  color: #7a0b0b;
}

.tabs{
  display:flex;
  gap:8px;
  align-items:center;
  margin: 10px 0 6px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}

.tab-btn{
  display:flex;
  align-items:center;
  gap:8px;
  background:#f6f7f9;
  border:1px solid #e2e6ea;
  color:#222;
  padding: 8px 10px;
  border-radius: 10px;
  cursor:pointer;
  font-size: 14px;
  min-width: 170px;
  justify-content: center;
}

.tab-btn.disabled,
.tab-btn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
}

.tab-btn.active{
  background:#fff;
  border-color:#cfd6de;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

.tab-content{
  margin-top: 8px;
}




/* Any inputs/textareas inside rows must not exceed their column */
.template-row input,
.template-row textarea,
.template-row select{
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Prevent long titles/descriptions from pushing layout */
.template-row .template-title,
.template-row .template-description{
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-actions{
  justify-content: flex-end;
  flex-wrap: wrap;
}
.template-info{
  flex-wrap: wrap;
  align-items: center;
}





/* Slightly reduce icon size to fit comfortably */
.template-actions .action-btn i{
  font-size: 14px;
}


/* === Layout fix: prevent overflow without breaking public (4-column) layout === */
.template-row > *{ min-width: 0; } /* allow grid items to shrink instead of spilling into next column */

.template-row input,
.template-row textarea,
.template-row select{
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Keep actions aligned */
.template-actions{
  justify-content: flex-end;
  align-items: center;
}

/* === Actions: keep icons in one row (only for "Мои шаблоны" list) === */
.templates-list:not(.public) .template-actions{
  flex-wrap: nowrap;
  gap: 6px;
}

.templates-list:not(.public) .template-actions .action-btn{
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.templates-list:not(.public) .template-actions .action-btn i{ font-size: 14px; }