/* ============================================================
   COFRE — tema escuro moderno
   ============================================================ */
:root{
    --bg:        #0b1020;
    --bg-2:      #111831;
    --panel:     #161e3a;
    --panel-2:   #1c2548;
    --border:    #283163;
    --text:      #e6e9f5;
    --muted:     #8a92b8;
    --accent:    #6366f1;
    --accent-2:  #8b5cf6;
    --ok:        #22c55e;
    --warn:      #f59e0b;
    --danger:    #ef4444;
    --radius:    12px;
    --radius-sm: 8px;
    --shadow:    0 10px 30px rgba(0,0,0,.35);
    --grad:      linear-gradient(135deg, var(--accent), var(--accent-2));
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
    color:var(--text);
    background:
      radial-gradient(1100px 700px at -10% -20%, rgba(99,102,241,.18), transparent 60%),
      radial-gradient(900px 600px at 120% 10%,  rgba(139,92,246,.15), transparent 60%),
      var(--bg);
    -webkit-font-smoothing: antialiased;
}

a{color:var(--accent)}
code{background:var(--bg-2); padding:2px 6px; border-radius:6px; font-size:.85em}

/* ============================================================
   LOGIN
   ============================================================ */
.login-page{
    display:flex; align-items:center; justify-content:center;
    min-height:100vh; padding:24px;
}
.login-card{
    width:100%; max-width:380px;
    background: rgba(22,30,58,.85);
    backdrop-filter: blur(14px);
    border:1px solid var(--border);
    border-radius:16px;
    padding:34px 28px;
    box-shadow: var(--shadow);
    text-align:center;
}
.login-card .logo{
    width:64px; height:64px;
    margin: 0 auto 12px;
    border-radius:16px;
    display:grid; place-items:center;
    background: var(--grad);
    color:white;
    box-shadow: 0 8px 20px rgba(99,102,241,.45);
}
.login-card h1{margin:0 0 6px; font-size:28px}
.muted{color:var(--muted)}
.login-card form{margin-top:18px; display:grid; gap:12px}

/* ============================================================
   CAMPOS
   ============================================================ */
.field{position:relative}
.field.block{display:grid; gap:6px}
.field > span{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px}
input, select, textarea{
    width:100%;
    background: var(--bg-2);
    color: var(--text);
    border:1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 11px 13px;
    font:inherit;
    outline:none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus, textarea:focus{
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}
textarea{resize:vertical; min-height:70px}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}

.eye{
    position:absolute; right:6px; top:50%; transform:translateY(-50%);
    background:transparent; border:0; color:var(--muted);
    width:34px; height:34px; border-radius:8px; cursor:pointer;
}
.eye:hover{color:var(--text); background:rgba(255,255,255,.05)}
.login-card .eye{top:auto; bottom:6px; transform:none}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
    appearance:none; border:0; cursor:pointer;
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    font:inherit; font-weight:600;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    transition: transform .05s, background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn:active{transform:translateY(1px)}
.btn.primary{
    background: var(--grad); color:#fff;
    box-shadow: 0 6px 18px rgba(99,102,241,.35);
}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{
    background: transparent;
    color: var(--text);
    border:1px solid var(--border);
}
.btn.ghost:hover{background: rgba(255,255,255,.04); border-color: var(--accent)}
.btn.danger{
    background: rgba(239,68,68,.12);
    color: #fca5a5;
    border:1px solid rgba(239,68,68,.3);
}
.btn.danger:hover{background: rgba(239,68,68,.2); color:#fff}
button.icon{
    background:transparent; border:0; color:var(--muted);
    font-size:22px; cursor:pointer; width:34px; height:34px;
    border-radius:8px;
}
button.icon:hover{background:rgba(255,255,255,.06); color:var(--text)}

.error{
    background: rgba(239,68,68,.12);
    border:1px solid rgba(239,68,68,.3);
    color:#fca5a5;
    padding:8px 12px; border-radius:8px; font-size:14px;
    margin:0;
}

/* ============================================================
   APP LAYOUT
   ============================================================ */
.topbar{
    display:flex; justify-content:space-between; align-items:center;
    gap:14px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border);
    background: rgba(11,16,32,.6);
    backdrop-filter: blur(10px);
    position:sticky; top:0; z-index:5;
}
.brand{
    display:flex; align-items:center; gap:10px;
    font-weight:700; font-size:18px;
    color:var(--text);
}
.brand svg{color:var(--accent)}
.search input{padding:10px 14px}
.actions{display:flex; gap:8px}

/* ============================================================
   LAYOUT COM DOCK
   ============================================================ */
.layout{
    display:grid;
    grid-template-columns: 280px 1fr;
    min-height: calc(100vh - 63px);
}

.sidebar{
    border-right:1px solid var(--border);
    padding:14px 12px;
    display:flex; flex-direction:column; gap:12px;
    background: rgba(17,24,49,.45);
}
.sidebar .search input{padding:9px 12px; font-size:14px}

.dock{
    display:flex; flex-direction:column; gap:2px;
    overflow:auto;
    max-height: calc(100vh - 220px);
}
.dock-item{
    display:flex; align-items:center; gap:10px;
    background:transparent; color:var(--text);
    border:0; padding:10px 12px; border-radius:8px; cursor:pointer;
    font:inherit; text-align:left;
    transition: background .12s;
}
.dock-item:hover{background: rgba(255,255,255,.04)}
.dock-item.active{
    background: var(--panel);
    box-shadow: inset 3px 0 0 var(--accent);
}
.dock-item .dot{
    width:8px; height:8px; border-radius:50%;
    background: var(--grad); flex:none;
    box-shadow: 0 0 8px rgba(99,102,241,.5);
}
.dock-item .title{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    flex:1;
}
.dock-empty{
    color: var(--muted);
    padding: 14px 12px; font-size: 13px;
    text-align: center;
}

.hint{margin-top:auto; color:var(--muted); font-size:12px; line-height:1.5; padding: 0 4px}

/* campo com botão de olho dentro */
.with-eye{position:relative}
.with-eye input{padding-right: 42px}
.with-eye .eye{top:50%; transform:translateY(-50%); bottom:auto}

/* ============================================================
   PAINEL DE DETALHE
   ============================================================ */
.detail{
    max-width: 720px;
    margin: 0 auto;
    padding: 14px 8px;
}
.detail-head{
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 22px;
}
.detail-head h2{
    margin:0; font-size: 26px; font-weight:700;
    word-break: break-word;
}
.detail-head .meta{
    color: var(--muted); font-size: 12px;
    margin-top: 4px;
}

.field-row{
    display:grid;
    grid-template-columns: 90px 1fr auto;
    align-items:center; gap:14px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}
.field-row .lbl{
    font-size:12px; color:var(--muted);
    text-transform:uppercase; letter-spacing:.6px;
}
.field-row .val{
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    word-break: break-all;
}
.field-row .val.shown{color: var(--text)}
.field-row .ops{display:flex; gap:6px}

.btn.sm{padding: 7px 12px; font-size: 13px}

.detail-foot{
    display:flex; gap:8px;
    margin-top: 24px;
}

/* ============================================================
   CARDS
   ============================================================ */
.content{padding:22px}
.cards{
    list-style:none; margin:0; padding:0;
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap:14px;
}
.card{
    background: var(--panel);
    border:1px solid var(--border);
    border-radius: var(--radius);
    padding:16px;
    transition: border-color .15s, transform .08s, box-shadow .15s;
    cursor:pointer;
    position:relative;
    overflow:hidden;
}
.card::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
    background: var(--grad); opacity:.85;
}
.card:hover{border-color:var(--accent); transform: translateY(-1px); box-shadow: var(--shadow)}
.card .type{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11px; text-transform:uppercase; letter-spacing:.6px;
    color: var(--muted);
}
.card h3{margin:6px 0 10px; font-size:17px; word-break:break-word}
.card .row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0}
.card .row .lbl{font-size:12px; color:var(--muted)}
.card .row .val{
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    max-width: 60%;
}
.card .row .copy{
    background:transparent; color:var(--muted); border:0; cursor:pointer;
    padding:4px 8px; border-radius:6px; font-size:12px;
}
.card .row .copy:hover{background: rgba(255,255,255,.06); color:var(--text)}
.card .reveal{font-family: inherit; letter-spacing:2px; color:var(--muted)}

.empty{
    text-align:center; padding:80px 20px; color:var(--muted);
}
.empty h2{color:var(--text); margin-bottom:6px}

/* ============================================================
   MODAL
   ============================================================ */
.modal{
    position:fixed; inset:0;
    background: rgba(5,8,20,.65);
    backdrop-filter: blur(4px);
    display:none;                           /* fechado por padrão */
    align-items:center; justify-content:center;
    padding:20px; z-index:50;
}
.modal.is-open{display:flex}
/* respeita o atributo hidden — flex/grid sobrescrevem display:none por padrão */
[hidden]{display:none !important}
.modal-card{
    background: var(--panel);
    border:1px solid var(--border);
    border-radius:14px;
    width:100%; max-width:520px;
    max-height: 90vh; overflow:auto;
    box-shadow: var(--shadow);
}
.modal-card header{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px;
    border-bottom:1px solid var(--border);
}
.modal-card form{padding:18px 20px; display:grid; gap:14px}
.modal-card footer{
    display:flex; gap:8px; align-items:center;
    border-top:1px solid var(--border);
    padding-top:14px; margin-top:4px;
}
.spacer{flex:1}

/* ============================================================
   TOAST
   ============================================================ */
.toast{
    position:fixed; bottom:24px; left:50%; transform: translateX(-50%);
    background: var(--panel-2);
    border:1px solid var(--border);
    color: var(--text);
    padding: 10px 16px; border-radius: 999px;
    box-shadow: var(--shadow);
    z-index: 100;
    animation: pop .2s ease;
}
@keyframes pop{from{opacity:0; transform: translate(-50%, 6px)} to{opacity:1; transform: translate(-50%, 0)}}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 800px){
    .layout{grid-template-columns: 1fr}
    .sidebar{
        border-right:0; border-bottom:1px solid var(--border);
        max-height: 50vh;
    }
    .dock{max-height: 30vh}
    .hint{display:none}
    .field-row{grid-template-columns: 1fr; gap:8px}
    .field-row .ops{justify-content:flex-end}
}