@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root { --ink:#102c35; --muted:#587078; --paper:#f4f6f1; --white:#fffefa; --coral:#e8694f; --coral-dark:#c94e3a; --mint:#b9d8c9; --line:#d8e2dc; --danger:#b83c42; --green:#2da66f; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f1f3f8; font-family:'DM Sans',sans-serif; }
a { color:inherit; }
.shell { width:min(1180px,calc(100% - 48px)); margin:auto; }
.app-shell { display:grid; grid-template-columns:230px minmax(0,1fr); min-height:100vh; }
.sidebar { display:flex; flex-direction:column; gap:35px; padding:28px 18px; border-right:1px solid var(--line); background:#e8f0e8; }
.brand small { display:block; margin-top:3px; color:var(--muted); font:400 11px 'DM Sans',sans-serif; }
.menu { display:flex; flex-direction:column; gap:6px; }
.menu-label { margin:0 12px 8px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.menu-link { display:block; padding:11px 12px; border-radius:7px; color:var(--muted); font-size:14px; font-weight:700; text-decoration:none; }
.menu-link:hover,.menu-link.active { color:var(--ink); background:var(--white); }
.menu-logout { margin-top:auto; }
.content { min-width:0; padding:0 clamp(20px,3vw,42px) 70px; }
.content-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:42px 0 18px; }
.header-actions { display:flex; flex-wrap:wrap; gap:8px; padding-top:8px; }
.narrow-page { width:min(680px,100%); padding-top:42px; }
.user-chip { padding:9px 12px; border:1px solid var(--line); border-radius:20px; color:var(--muted); background:var(--white); font-size:12px; white-space:nowrap; }
.user-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:20px; align-items:start; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:24px 0; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; font-family:'Space Grotesk',sans-serif; font-weight:700; }
.brand-mark { display:grid; place-items:center; width:39px; height:39px; border-radius:11px 11px 11px 4px; color:#fff; background:var(--coral); }
.topbar-right { display:flex; align-items:center; gap:18px; color:var(--muted); font-size:13px; }
.topbar-right a { font-weight:700; }
main { padding:38px 0 70px; }
.eyebrow { color:var(--coral-dark); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,h3 { margin:0; font-family:'Space Grotesk',sans-serif; letter-spacing:-.035em; }
h1 { margin-top:10px; font-size:clamp(34px,5vw,54px); }
h2 { font-size:25px; }
.subtitle { max-width:650px; margin:10px 0 30px; color:var(--muted); line-height:1.6; }
.grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,350px); gap:20px; align-items:start; }
.panel { padding:18px; border:1px solid #e1e5ee; border-radius:7px; background:#fff; box-shadow:0 3px 12px rgba(46,57,78,.08); }
.panel + .panel { margin-top:20px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.filter-bar { display:flex; align-items:center; gap:10px; margin:-2px 0 18px; padding:0; color:var(--muted); font-size:13px; }
.filter-bar label { font-weight:700; }
.filter-bar select { width:auto; min-width:210px; padding:8px 10px; background:#fff; }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field.full { grid-column:1 / -1; }
label { font-size:13px; font-weight:700; }
input,select,textarea { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:#fff; font:inherit; }
textarea { min-height:90px; resize:vertical; }
input:focus,select:focus,textarea:focus { outline:2px solid rgba(232,105,79,.25); border-color:var(--coral); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 15px; border:0; border-radius:7px; color:#fff; background:var(--ink); font:700 13px 'DM Sans',sans-serif; text-decoration:none; cursor:pointer; }
.button:hover { background:#1b4955; }
.button-coral { background:var(--coral); }
.button-coral:hover { background:var(--coral-dark); }
.button-danger { color:var(--danger); background:#fae6e5; }
.button-danger:hover { background:#f4d1d0; }
.button-edit { color:#fff; background:var(--green); }
.button-edit:hover { background:#218457; }
.ticket-actions a.button, td a.button { color:#fff; background:var(--green); }
.ticket-actions a.button:hover, td a.button:hover { background:#218457; }
.form-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.notice { margin:0 0 18px; padding:12px 14px; border-radius:8px; color:#286148; background:#e2f1e6; font-size:14px; }
.notice.error { color:#8e2c35; background:#fae4e2; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { padding:13px 8px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
th { color:var(--muted); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.role,.badge { display:inline-block; padding:4px 8px; border-radius:20px; background:#e6f0e8; color:#34715a; font-size:11px; font-weight:700; }
.role.admin { color:#9a4d28; background:#fae9d9; }
.inline-form { display:inline; }
.kanban { display:grid; grid-template-columns:repeat(3,minmax(220px,1fr)); gap:10px; align-items:start; overflow-x:auto; }
.column { min-height:520px; padding:0 8px 10px; border-radius:5px; background:#f3f5fa; overflow:hidden; }
.column h3 { display:flex; justify-content:space-between; margin:0 -8px 10px; padding:10px 12px; color:#fff; font-size:14px; letter-spacing:0; }
.column:nth-child(1) h3 { background:#e4c900; }
.column:nth-child(2) h3 { background:#128ced; }
.column:nth-child(3) h3 { background:#13a9b5; }
.count { color:var(--muted); font:600 12px 'DM Sans',sans-serif; }
.ticket-card { margin-bottom:10px; overflow:hidden; border:1px solid #202020; border-radius:4px; background:var(--ticket-color); box-shadow:0 1px 3px rgba(40,52,75,.12); }
.ticket-card-header { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:62px; padding:10px 12px; background:var(--ticket-color); border-bottom:1px solid rgba(0,0,0,.22); }
.ticket-card-header h4 { margin:0; color:#fff; font-family:'Space Grotesk',sans-serif; font-size:20px; line-height:1.1; }
.ticket-header-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; }
.assigned-badge { flex:0 0 auto; padding:8px 10px; border:2px solid #111; border-radius:13px; color:#111; background:#ff6f9d; font-size:11px; font-weight:700; }
.ticket-card-body { display:flex; min-height:175px; flex-direction:column; padding:14px 12px 12px; background:rgba(255,255,255,.78); }
.ticket-card-body p { min-height:65px; margin:0 0 12px; color:#202020; font-size:13px; line-height:1.45; white-space:pre-line; }
.ticket-tags { display:flex; flex-wrap:wrap; align-items:center; gap:7px; min-height:32px; }
.type-badge { display:inline-flex; align-items:center; min-height:30px; padding:4px 9px; border:1px solid #222; border-radius:12px; color:#222; background:#fff9d9; font-size:12px; font-weight:700; }
.type-bug { background:#ffd9df; }
.type-feature { background:#d9f5df; }
.ticket-card .attachment-badge { max-width:100%; margin:0; color:#303030; }
.ticket-card .ticket-actions { margin-top:auto; padding-top:14px; }
.comment-button { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:36px; min-height:30px; margin-left:auto; padding:0 8px; border:1px solid #8c95a5; border-radius:7px; color:#263344; background:#fff; font-size:12px; font-weight:700; text-decoration:none; }
.comment-button:hover { color:#fff; border-color:#263344; background:#263344; }
.comment-button span:first-child { font-size:15px; line-height:1; }
.button-archive { color:#111; background:#ff9f16; }
.button-archive:hover { background:#e98700; }
.ticket h4 { margin:0 0 7px; font-family:'Space Grotesk',sans-serif; font-size:15px; }
.attachment-badge { display:block; overflow:hidden; margin:0 0 9px; color:var(--coral-dark); font-size:11px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.ticket p { margin:0 0 12px; color:var(--muted); font-size:12px; line-height:1.45; white-space:pre-line; }
.ticket-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; color:#7a8291; font-size:11px; }
.ticket-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.ticket-actions .button { min-height:30px; padding:0 9px; font-size:11px; }
.ticket select { padding:6px 7px; font-size:11px; }
.attachment-current { margin:16px 0 0; padding:10px 12px; border-radius:7px; color:var(--muted); background:#edf3ed; font-size:13px; }
.attachment-current a { color:var(--coral-dark); font-weight:700; }
.attachment-preview { margin:16px 0 0; color:var(--muted); font-size:13px; }
.attachment-preview img { display:block; width:110px; height:80px; margin-bottom:8px; border:1px solid var(--line); border-radius:7px; object-fit:cover; }
.color-picker { width:64px; min-height:44px; padding:4px; cursor:pointer; }
.comments-page { width:min(820px,100%); margin:0 auto; }
.readonly-ticket { overflow:hidden; border:1px solid #202020; border-radius:4px; background:var(--ticket-color); box-shadow:0 1px 3px rgba(40,52,75,.12); }
.readonly-ticket-header { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:70px; padding:14px 16px; background:var(--ticket-color); border-bottom:1px solid rgba(0,0,0,.22); }
.readonly-ticket-header h2 { color:#fff; font-size:24px; }
.readonly-ticket-body { padding:18px 16px; background:rgba(255,255,255,.78); }
.readonly-ticket-body p { margin:0; color:#202020; line-height:1.55; white-space:pre-line; }
.comments-section { margin-top:20px; padding:22px; border:1px solid var(--line); border-radius:7px; background:#fff; }
.comments-section h2 { display:flex; align-items:center; gap:8px; }
.comment-list { display:grid; gap:10px; }
.comment { padding:13px 15px; border-left:3px solid var(--coral); border-radius:5px; background:#f3f5fa; }
.comment-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--ink); font-size:13px; }
.comment-meta time { color:var(--muted); font-size:11px; }
.comment p { margin:8px 0 0; color:var(--ink); line-height:1.5; white-space:pre-line; }
.comment-delete-form { display:flex; justify-content:flex-end; margin-top:10px; }
.comment-delete { padding:5px 8px; border:0; border-radius:5px; color:#fff; background:var(--danger); font:700 11px 'DM Sans',sans-serif; cursor:pointer; }
.comment-delete:hover { background:#a92830; }
.empty-comments { margin:0 0 18px; color:var(--muted); }
.comment-form { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.comment-form textarea { min-height:110px; margin-top:7px; }
.auth-page { display:grid; place-items:center; min-height:100vh; padding:20px; background:linear-gradient(135deg,#f4f6f1,#dfece3); }
.auth-card { width:min(440px,100%); padding:32px; border:1px solid var(--line); border-radius:16px; background:var(--white); box-shadow:0 20px 50px rgba(16,44,53,.1); }
.auth-card h1 { font-size:34px; }
.auth-card .subtitle { margin-bottom:24px; }
.auth-card .field + .field { margin-top:14px; }
.auth-card form > .field + .field { margin-top:18px; }
.auth-card form > .form-grid { margin-top:18px; row-gap:18px; }
.auth-card .form-grid .field + .field { margin-top:0; }
.auth-card form > .form-grid + .field { margin-top:18px; }
.auth-card .form-actions { margin-top:22px; }
@media (max-width:800px) { .grid,.kanban { grid-template-columns:1fr; } .form-grid { grid-template-columns:1fr; } .field.full { grid-column:auto; } .topbar-right span { display:none; } }
@media (max-width:800px) { .app-shell { grid-template-columns:1fr; } .sidebar { position:static; gap:18px; padding:16px; border-right:0; border-bottom:1px solid var(--line); } .menu { flex-direction:row; flex-wrap:wrap; } .menu-label { width:100%; margin-bottom:0; } .menu-logout { margin-top:0; } .content-header,.user-layout { display:block; } .header-actions { padding-top:15px; } .user-chip { display:inline-block; margin-top:15px; } .user-layout > .panel + .panel { margin-top:20px; } }
@media (max-width:800px) { .readonly-ticket-header { align-items:flex-start; flex-direction:column; } .comments-section { padding:16px; } }
@media (max-width:520px) { .shell { width:calc(100% - 30px); } main { padding-top:20px; } .panel { padding:18px; } .topbar { padding:18px 0; } }