/* ==========================================================================
   PFE Tasks — тема оформления
   Идея: рабочий журнал в стиле технической документации/бирок на арматуре.
   ========================================================================== */

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

:root{
    --ink-900:#0F1922;
    --ink-800:#14202B;
    --panel-700:#1C2E3D;
    --panel-600:#233A4C;
    --line-500:#35586E;
    --line-400:#4A7089;
    --text-050:#E4E9ED;
    --text-300:#8CA0AF;
    --text-500:#5C7386;
    --brass-400:#E8A33D;
    --brass-500:#C98526;
    --rust-500:#C1543A;
    --patina-500:#4F9B85;
    --steel-500:#5C7386;

    --radius-s:3px;
    --radius-m:6px;
    --font-mono:'IBM Plex Mono', ui-monospace, monospace;
    --font-sans:'IBM Plex Sans', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
    margin:0;
    background:var(--ink-800);
    background-image:
        linear-gradient(var(--line-500) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-500) 1px, transparent 1px);
    background-size:28px 28px;
    background-attachment:fixed;
    background-blend-mode:overlay;
    background-color:var(--ink-800);
    position:relative;
    color:var(--text-050);
    font-family:var(--font-sans);
    -webkit-font-smoothing:antialiased;
}
body::before{
    content:"";
    position:fixed; inset:0;
    background:rgba(15,25,34,0.86);
    pointer-events:none;
    z-index:0;
}
body > *{ position:relative; z-index:1; }

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ---------- Верхняя панель ---------- */
.topbar{
    display:flex; align-items:center; gap:24px;
    padding:14px 28px;
    background:var(--panel-700);
    border-bottom:1px solid var(--line-500);
}
.topbar-brand{
    display:flex; align-items:center; gap:10px;
    font-family:var(--font-mono);
    font-weight:600;
    letter-spacing:0.06em;
    font-size:15px;
    color:var(--text-050);
}
.brand-hole{
    width:10px; height:10px; border-radius:50%;
    background:var(--ink-800);
    border:2px solid var(--brass-400);
    display:inline-block;
}
.topbar-nav{ display:flex; gap:18px; flex:1; }
.topbar-nav a{
    font-size:14px; color:var(--text-300);
    padding:6px 2px; border-bottom:2px solid transparent;
}
.topbar-nav a:hover{ color:var(--text-050); border-color:var(--brass-400); }
.topbar-user{ display:flex; align-items:center; gap:12px; }
.topbar-rate{
    font-family:var(--font-mono); font-size:12px; color:var(--text-300);
    background:var(--panel-600); border:1px solid var(--line-500); border-radius:12px;
    padding:4px 10px; white-space:nowrap;
}

.notif-wrap{ position:relative; }

.search-modal{ max-width:560px; padding:0; overflow:hidden; }
.search-modal-input{
    width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-500);
    color:var(--text-050); padding:18px 22px; font-size:16px; font-family:inherit;
    box-sizing:border-box;
}
.search-modal-input:focus{ outline:none; }
.search-modal-input::placeholder{ color:var(--text-500); }
.search-modal-results{ max-height:60vh; overflow-y:auto; padding:8px; }
.search-hint{ padding:20px 14px; color:var(--text-500); font-size:13px; text-align:center; }
.search-group{ margin-bottom:6px; }
.search-group-label{
    font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--text-500); padding:10px 14px 6px;
}
.search-result-item{
    display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--radius-s);
    color:var(--text-050); font-size:13.5px; text-decoration:none;
}
.search-result-item:hover{ background:var(--panel-600); }
.search-result-icon{ font-size:15px; flex-shrink:0; }
.notif-bell{ font-size:15px; position:relative; width:30px; height:30px; }
.notif-bell.notif-bell-unread{ color:var(--rust-500); animation:notif-shake 3.5s ease-in-out infinite; }
.push-active{ color:var(--brass-400); border-color:var(--brass-400); }
.notif-badge{
    position:absolute; top:-4px; right:-4px;
    background:var(--rust-500); color:#fff; font-family:var(--font-mono);
    font-size:10px; font-weight:700; min-width:16px; height:16px; border-radius:9px;
    display:inline-flex; align-items:center; justify-content:center; padding:0 4px;
    animation:notif-pulse 1.6s ease-out infinite;
}
@keyframes notif-pulse{
    0%   { box-shadow:0 0 0 0 rgba(193,84,58,0.65); }
    70%  { box-shadow:0 0 0 6px rgba(193,84,58,0); }
    100% { box-shadow:0 0 0 0 rgba(193,84,58,0); }
}
@keyframes notif-shake{
    0%, 92%, 100% { transform:rotate(0deg); }
    93% { transform:rotate(-12deg); }
    94% { transform:rotate(10deg); }
    95% { transform:rotate(-8deg); }
    96% { transform:rotate(6deg); }
    97% { transform:rotate(0deg); }
}
.notif-dropdown{
    display:none; position:absolute; top:calc(100% + 8px); right:0; width:320px; max-height:400px;
    overflow-y:auto; background:var(--panel-700); border:1px solid var(--line-500);
    border-radius:var(--radius-m); box-shadow:0 8px 24px rgba(0,0,0,0.4); z-index:60;
}
.notif-dropdown.open{ display:block; }
.notif-empty{ padding:20px; text-align:center; color:var(--text-500); font-size:12.5px; }
.notif-item{
    display:block; padding:10px 14px; border-bottom:1px solid var(--line-500);
    color:var(--text-050); text-decoration:none;
}
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background:var(--panel-600); }
.notif-item-title{ font-size:12.5px; font-weight:600; margin-bottom:3px; }
.notif-item-body{ font-size:12px; color:var(--text-300); margin-bottom:3px; }
.notif-item-time{ font-size:10.5px; color:var(--text-500); font-family:var(--font-mono); }
.user-name{ font-size:13px; color:var(--text-300); }

/* ---------- Общие контейнеры ---------- */
.wrap{ max-width:1200px; margin:0 auto; padding:32px 28px 60px; }
.wrap-board{ max-width:none; padding:24px 24px 40px; }
.wrap-calendar{ max-width:1100px; padding:32px 28px 60px; }

/* ---------- Календарь ---------- */
.cal-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.cal-nav{ display:flex; align-items:center; gap:14px; }
.cal-month-label{ font-size:16px; font-weight:600; min-width:160px; text-align:center; }

.cal-legend{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.cal-legend-item{
    display:inline-flex; align-items:center; gap:6px; background:var(--panel-700);
    border:1px solid var(--line-500); border-radius:14px; padding:5px 12px 5px 8px;
    font-size:12px; color:var(--text-050); cursor:pointer; transition:opacity .15s;
}
.cal-legend-item:hover{ border-color:var(--brass-400); }
.cal-legend-hidden{ opacity:0.35; }
.cal-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; display:inline-block; }

.cal-grid-wrap{ background:var(--panel-700); border:1px solid var(--line-500); border-radius:var(--radius-m); overflow:hidden; }
.cal-weekdays{
    display:grid; grid-template-columns:repeat(7, 1fr);
    background:var(--panel-600); border-bottom:1px solid var(--line-500);
    font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--text-500);
}
.cal-weekdays span{ padding:9px 10px; }
.cal-weekend-label{ color:var(--rust-500) !important; }

.cal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); grid-auto-rows:112px; }
.cal-day{
    border-right:1px solid var(--line-500); border-bottom:1px solid var(--line-500);
    padding:6px 6px; cursor:pointer; position:relative; overflow:hidden;
    transition:background .1s;
}
.cal-day:nth-child(7n){ border-right:none; }
.cal-day:hover{ background:var(--panel-600); }
.cal-day-other{ opacity:0.35; }
.cal-day-nonworking{ background:rgba(193,84,58,0.05); }
.cal-day-today .cal-day-num{
    background:var(--brass-400); color:var(--ink-900); border-radius:50%;
    width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
    font-weight:700;
}
.cal-day-num{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-050); margin-bottom:2px; }
.cal-day-holiday{ font-size:9.5px; color:var(--rust-500); line-height:1.2; margin-bottom:3px; }
.cal-day-holiday.cal-day-off{ color:var(--text-500); }
.cal-day-events{ display:flex; flex-direction:column; gap:2px; }
.cal-pill{
    font-size:10px; padding:2px 6px; border-radius:4px; border:1px solid transparent;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cal-pill-company{ background:var(--ink-800); border-color:var(--line-500); color:var(--text-300); border-style:dashed; }
.cal-pill-deal{ background:rgba(140,160,175,0.12); border:1px solid var(--text-500); color:var(--text-050); font-weight:600; }
.cal-pill-more{ background:transparent; color:var(--text-500); cursor:pointer; }

.cal-day-list-item{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-500); cursor:pointer; }
.cal-day-list-item:last-child{ border-bottom:none; }
.cal-day-list-item:hover{ opacity:0.8; }

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

.hol-row{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--line-500); font-size:13px; }
.hol-row:last-child{ border-bottom:none; }
.hol-date{ font-family:var(--font-mono); font-size:12px; color:var(--text-300); width:70px; flex-shrink:0; }
.hol-title{ flex:1; }
.hol-type{ font-size:11px; color:var(--text-500); }

@media (max-width: 720px){
    .cal-grid{ grid-auto-rows:88px; }
    .cal-month-label{ min-width:auto; }
    .cal-pill{ font-size:9px; }
}

.page-head{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:16px; margin-bottom:24px; flex-wrap:wrap;
}
.page-head h1{
    font-size:22px; margin:2px 0 0; font-weight:600;
}
.back-link{ font-size:13px; color:var(--text-300); }
.back-link:hover{ color:var(--brass-400); }

/* ---------- Кнопки ---------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:9px 16px; border-radius:var(--radius-s);
    border:1px solid var(--line-500);
    background:transparent; color:var(--text-050);
    font-size:13.5px; font-weight:500; cursor:pointer;
    transition:border-color .15s, background .15s;
}
.btn:hover{ border-color:var(--brass-400); }
.btn-primary{ background:var(--brass-400); border-color:var(--brass-400); color:var(--ink-900); font-weight:600; }
.btn-primary:hover{ background:var(--brass-500); border-color:var(--brass-500); }
.btn-ghost{ border-color:transparent; color:var(--text-300); }
.btn-ghost:hover{ color:var(--text-050); border-color:var(--line-500); }
.btn-sm{ padding:5px 10px; font-size:12.5px; }
.btn-block{ width:100%; }
.btn-danger{ color:var(--rust-500); border-color:var(--rust-500); }

/* ---------- Плашки/уведомления ---------- */
.alert{ padding:10px 14px; border-radius:var(--radius-s); font-size:13.5px; margin-bottom:18px; }
.alert-error{ background:rgba(193,84,58,0.15); border:1px solid var(--rust-500); color:#F1A897; }
.alert-ok{ background:rgba(79,155,133,0.15); border:1px solid var(--patina-500); color:#B7E4D7; }

/* ---------- Доски (список сделок) ---------- */
.board-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:16px;
}
.board-tile{
    background:var(--panel-700); border:1px solid var(--line-500);
    border-radius:var(--radius-m); padding:16px;
    display:flex; flex-direction:column; gap:8px;
    cursor:pointer;
    transition:transform .12s, border-color .12s;
}
.board-tile:hover{ transform:translateY(-2px); border-color:var(--brass-400); }
.board-tile-tag{
    display:flex; align-items:center; gap:6px;
    font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em;
    color:var(--text-500); text-transform:uppercase;
}
.tag-hole{ width:6px; height:6px; border-radius:50%; border:1.5px solid var(--text-500); }
.board-tile h3{ margin:0; font-size:16px; font-weight:600; }
.board-tile-desc{ margin:0; font-size:13px; color:var(--text-300); }
.board-tile-terms{ display:flex; gap:12px; font-size:11.5px; color:var(--text-300); font-family:var(--font-mono); }
.board-tile-stats{ margin-top:auto; padding-top:8px; display:flex; gap:12px; font-size:12px; color:var(--text-300); }
.board-tile-amount{ font-size:12.5px; color:var(--text-050); font-family:var(--font-mono); }
.board-tile-progress{
    width:100%; height:5px; background:var(--ink-800); border-radius:3px; overflow:hidden;
}
.board-tile-progress-fill{
    height:100%; background:var(--patina-500); border-radius:3px; transition:width .2s;
}
.board-tile-badge{
    display:inline-block; font-size:11px; padding:2px 8px; border-radius:10px;
    background:rgba(232,163,61,0.15); color:var(--brass-400); width:fit-content;
}
.board-tile-badge-archived{ background:rgba(140,160,175,0.15); color:var(--text-300); }

.tabs-row{ display:flex; gap:4px; margin-bottom:20px; border-bottom:1px solid var(--line-500); }
.tab-link-right{ margin-left:auto; margin-right:0; }
.tab-link{
    padding:8px 4px; margin-right:20px; font-size:13.5px; color:var(--text-300);
    border-bottom:2px solid transparent; margin-bottom:-1px;
}
.tab-link:hover{ color:var(--text-050); }
.tab-link-active{ color:var(--text-050); border-bottom-color:var(--brass-400); font-weight:600; }

.board-status-row{ margin-top:8px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.board-status-badge{
    font-size:12px; padding:4px 10px; border-radius:10px;
    background:rgba(232,163,61,0.15); color:var(--brass-400);
}
.board-status-badge-archived{ background:rgba(140,160,175,0.15); color:var(--text-300); }
.board-priority-select{
    background:var(--panel-700); border:1px solid var(--line-500); border-radius:var(--radius-s);
    color:var(--text-050); padding:8px 10px; font-size:13px; font-family:inherit;
}
.stat-overdue{ color:var(--rust-500); font-weight:600; }
.empty-state{ color:var(--text-300); font-size:14px; padding:24px; grid-column:1/-1; text-align:center; }

.board-tile-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.board-tile-title-link{ margin:0; font-size:16px; font-weight:600; }
.board-tile-actions{ display:flex; gap:4px; flex-shrink:0; }
.icon-btn{
    background:transparent; border:1px solid transparent; border-radius:var(--radius-s);
    color:var(--text-300); width:24px; height:24px; font-size:12px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.icon-btn:hover{ border-color:var(--line-500); color:var(--text-050); }
.icon-btn-danger:hover{ border-color:var(--rust-500); color:var(--rust-500); }

.link-btn{
    background:none; border:none; padding:0; color:var(--text-500); font-size:11.5px;
    cursor:pointer; text-decoration:none;
}
.link-btn:hover{ color:var(--brass-400); }
.comment-actions{ display:flex; gap:12px; margin-top:4px; }
.comment-form-actions{ display:flex; align-items:center; gap:8px; }
.comment-file-label{ font-size:11.5px; color:var(--text-300); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.comment-attachments{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.comment-attachment-chip{
    display:inline-flex; align-items:center; gap:4px; background:var(--ink-800);
    border:1px solid var(--line-500); border-radius:12px; padding:3px 8px; font-size:11.5px;
}
.comment-attachment-chip a{ color:var(--brass-400); }
.comment-attachment-chip .icon-btn{ width:16px; height:16px; font-size:10px; }
.comment-reply{ margin-left:22px; border-left:2px solid var(--line-500); padding-left:10px; }
.comment-edit-textarea{
    width:100%; min-height:50px; background:var(--ink-800); border:1px solid var(--line-500);
    border-radius:var(--radius-s); color:var(--text-050); padding:8px; font-size:13px; font-family:inherit; resize:vertical;
}
.reply-indicator{
    display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-300);
    background:var(--ink-800); border:1px solid var(--line-500); border-radius:var(--radius-s);
    padding:6px 10px; margin-top:8px;
}
.reply-indicator b{ color:var(--text-050); }

/* ---------- Канбан-доска ---------- */
.board-lists{
    display:flex; gap:16px; align-items:flex-start;
    overflow-x:auto; padding-bottom:20px;
}
.list-col{
    background:var(--panel-700);
    border:1px solid var(--line-500);
    border-radius:var(--radius-m);
    min-width:280px; max-width:280px;
    display:flex; flex-direction:column;
    max-height:calc(100vh - 160px);
}
.list-col-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px 10px;
    border-bottom:1px dashed var(--line-500);
}
.list-col-title{
    font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.05em;
    text-transform:uppercase; color:var(--text-300);
    background:transparent; border:none; color-scheme:dark;
}
.list-col-count{
    font-family:var(--font-mono); font-size:11px; color:var(--text-500);
    background:var(--ink-800); border-radius:10px; padding:2px 8px;
}
.list-col-body{
    padding:12px; display:flex; flex-direction:column; gap:10px;
    overflow-y:auto; flex:1;
}
.list-col-foot{ padding:8px 12px 12px; }
.add-card-btn{
    width:100%; text-align:left; padding:8px 10px; font-size:13px;
    color:var(--text-300); border:1px dashed var(--line-500); border-radius:var(--radius-s);
    background:transparent; cursor:pointer;
}
.add-card-btn:hover{ color:var(--brass-400); border-color:var(--brass-400); }

/* ---------- Карточка задачи (стилизована под бирку арматуры) ---------- */
.card-tag{
    position:relative;
    background:var(--panel-600);
    border:1px solid var(--line-500);
    border-radius:var(--radius-s);
    padding:10px 12px 10px 22px;
    cursor:grab;
    transition:border-color .12s, transform .12s;
}
.card-tag:hover{ border-color:var(--brass-400); transform:translateX(1px); }
.card-tag.dragging{ opacity:0.4; }
.card-tag::before{
    content:"";
    position:absolute; left:8px; top:50%; transform:translateY(-50%);
    width:7px; height:7px; border-radius:50%;
    border:1.5px solid var(--text-500);
    background:var(--ink-800);
}
.card-tag.is-done::before{ border-color:var(--patina-500); background:var(--patina-500); }
.card-tag.is-overdue::before{ border-color:var(--rust-500); background:var(--rust-500); }

/* Приоритет — цветная рамка вокруг карточки/плитки */
.priority-attention{ box-shadow:0 0 0 1.5px var(--brass-400); border-color:var(--brass-400) !important; }
.priority-urgent{ box-shadow:0 0 0 1.5px var(--rust-500); border-color:var(--rust-500) !important; }

.card-id{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-500); letter-spacing:0.04em; }
.card-title{ font-size:13.5px; margin:3px 0 8px; line-height:1.35; }
.card-title.done-title{ text-decoration:line-through; color:var(--text-300); }
.card-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:11.5px; color:var(--text-300); }
.card-deadline{ font-family:var(--font-mono); }
.card-deadline.overdue{ color:var(--rust-500); font-weight:600; }
.card-assignee{
    display:inline-flex; align-items:center; justify-content:center;
    width:20px; height:20px; border-radius:50%;
    background:var(--line-500); color:var(--text-050);
    font-size:10px; font-weight:700; font-family:var(--font-mono);
}
.card-icon-count{ display:flex; align-items:center; gap:3px; }

/* ---------- Модальные окна ---------- */
.modal-overlay{
    display:none; position:fixed; inset:0; z-index:50;
    background:rgba(10,16,22,0.72);
    align-items:flex-start; justify-content:center;
    padding:6vh 16px; overflow-y:auto;
}
.modal-overlay.open{ display:flex; }
.modal{
    background:var(--panel-700); border:1px solid var(--line-500);
    border-radius:var(--radius-m); padding:22px; width:100%; max-width:420px;
}
.modal-wide{ max-width:640px; }
.modal h3{ margin:0 0 16px; font-size:16px; }
.modal label{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; font-size:12.5px; color:var(--text-300); }
.modal input[type=text], .modal input[type=date], .modal textarea, .modal select{
    background:var(--ink-800); border:1px solid var(--line-500); border-radius:var(--radius-s);
    color:var(--text-050); padding:9px 10px; font-size:13.5px; font-family:inherit;
}
.modal input:focus, .modal textarea:focus, .modal select:focus{ outline:none; border-color:var(--brass-400); }
.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:6px; }

/* ---------- Детали карточки ---------- */
.card-detail-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.card-detail-tag{ font-family:var(--font-mono); font-size:11px; color:var(--text-500); }
.card-detail-title{
    width:100%; font-size:17px; font-weight:600; background:transparent; border:none;
    color:var(--text-050); padding:4px 0; border-bottom:1px solid transparent;
}
.card-detail-title:focus{ outline:none; border-bottom:1px solid var(--brass-400); }
.card-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0; }
.card-detail-section{ margin-top:18px; }
.card-detail-section h4{
    font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em;
    color:var(--text-500); margin:0 0 8px;
}
.card-detail-desc{
    width:100%; min-height:70px; background:var(--ink-800); border:1px solid var(--line-500);
    border-radius:var(--radius-s); color:var(--text-050); padding:10px; font-size:13.5px; font-family:inherit; resize:vertical;
}
.comment-item, .attachment-item, .activity-item{
    padding:8px 0; border-bottom:1px solid var(--line-500); font-size:13px;
}
.comment-item:last-child, .attachment-item:last-child, .activity-item:last-child{ border-bottom:none; }
.comment-head{ display:flex; justify-content:space-between; color:var(--text-300); font-size:11.5px; margin-bottom:3px; }
.comment-form{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.comment-form textarea{
    flex:1; background:var(--ink-800); border:1px solid var(--line-500); color:var(--text-050);
    border-radius:var(--radius-s); padding:8px 10px; font-size:13px; font-family:inherit; resize:vertical; min-height:38px;
}
.attachment-item{ display:flex; justify-content:space-between; align-items:center; }
.attachment-link{ color:var(--brass-400); }
.activity-item{ color:var(--text-300); font-size:12px; }
.activity-item b{ color:var(--text-050); font-weight:600; }
.file-drop{
    border:1px dashed var(--line-500); border-radius:var(--radius-s); padding:14px;
    text-align:center; font-size:12.5px; color:var(--text-300); cursor:pointer;
}
.file-drop:hover{ border-color:var(--brass-400); color:var(--brass-400); }

/* ---------- Логин ---------- */
.login-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card{
    background:var(--panel-700); border:1px solid var(--line-500); border-radius:var(--radius-m);
    padding:34px 30px; width:100%; max-width:340px; position:relative;
}
.login-tag{ display:flex; align-items:center; gap:8px; margin-bottom:18px; }
.login-tag-hole{ width:10px; height:10px; border-radius:50%; border:2px solid var(--brass-400); }
.login-tag-id{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; color:var(--text-500); }
.login-title{ margin:0; font-size:22px; font-weight:700; }
.login-subtitle{ margin:4px 0 20px; color:var(--text-300); font-size:13px; }
.login-form{ display:flex; flex-direction:column; gap:14px; }
.login-form label{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--text-300); }
.login-form input{
    background:var(--ink-800); border:1px solid var(--line-500); border-radius:var(--radius-s);
    color:var(--text-050); padding:10px 12px; font-size:14px;
}
.login-form input:focus{ outline:none; border-color:var(--brass-400); }

/* ---------- Админка ---------- */
.panel{ background:var(--panel-700); border:1px solid var(--line-500); border-radius:var(--radius-m); padding:20px; margin-bottom:20px; }
.panel h3{ margin:0 0 14px; font-size:15px; }
.form-grid{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.form-grid label{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--text-300); }
.form-grid input, .form-grid select{
    background:var(--ink-800); border:1px solid var(--line-500); border-radius:var(--radius-s);
    color:var(--text-050); padding:8px 10px; font-size:13px;
}
.table{ width:100%; border-collapse:collapse; font-size:13px; }
.table th, .table td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--line-500); }
.table th{ color:var(--text-500); font-weight:500; font-size:11.5px; text-transform:uppercase; letter-spacing:0.04em; }
.inline-form{ display:flex; gap:6px; }
.inline-form input{
    background:var(--ink-800); border:1px solid var(--line-500); border-radius:var(--radius-s);
    color:var(--text-050); padding:5px 8px; font-size:12px; width:120px;
}
.badge{ padding:2px 8px; border-radius:10px; font-size:11px; }
.badge-ok{ background:rgba(79,155,133,0.18); color:var(--patina-500); }
.badge-off{ background:rgba(193,84,58,0.18); color:var(--rust-500); }

.loading{ color:var(--text-300); font-size:13px; padding:20px; }

.info-search{
    width:100%; max-width:420px; margin-bottom:20px;
    background:var(--panel-700); border:1px solid var(--line-500); border-radius:var(--radius-s);
    color:var(--text-050); padding:10px 14px; font-size:13.5px; font-family:inherit;
}
.info-search:focus{ outline:none; border-color:var(--brass-400); }

.info-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-auto-rows:130px;
    gap:14px;
}
.info-tile{
    position:relative;
    background:var(--panel-700); border:1px solid var(--line-500); border-radius:var(--radius-m);
    padding:16px; cursor:pointer; display:flex; flex-direction:column;
    transition:transform .12s, border-color .12s;
    overflow:hidden;
}
.info-tile:hover{ border-color:var(--brass-400); transform:translateY(-2px); }
.info-tile-small{ grid-column:span 1; grid-row:span 1; }
.info-tile-medium{ grid-column:span 2; grid-row:span 1; }
.info-tile-wide{ grid-column:span 2; grid-row:span 1; }
.info-tile-large{ grid-column:span 2; grid-row:span 2; }
.info-tile-icon{ font-size:22px; margin-bottom:8px; }
.info-tile-title{ font-size:14.5px; font-weight:600; margin-bottom:4px; }
.info-tile-desc{ font-size:12px; color:var(--text-300); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.info-tile-meta{ margin-top:auto; display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-500); }
.info-tile-tag{ background:var(--ink-800); border-radius:10px; padding:2px 8px; }
.info-tile-actions{ position:absolute; top:10px; right:10px; display:flex; gap:4px; }

@media (max-width: 900px){
    .info-grid{ grid-template-columns:repeat(2, 1fr); }
    .info-tile-medium, .info-tile-wide, .info-tile-large{ grid-column:span 2; }
}
@media (max-width: 520px){
    .info-grid{ grid-template-columns:1fr; }
    .info-tile-medium, .info-tile-wide, .info-tile-large{ grid-column:span 1; }
}

@media (max-width: 720px){
    .card-detail-grid{ grid-template-columns:1fr; }
    .wrap{ padding:20px 14px 40px; }
    .list-col{ min-width:240px; max-width:240px; }
}