* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: #fff;
    color: #111;
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", sans-serif;
}

button, input, textarea { font: inherit; color: inherit; }

.login {
    min-height: 100%;
    display: grid;
    place-items: center;
}

.login form { width: 240px; display: grid; gap: 10px; }

.login input, .login button, .modal input, .modal button {
    height: 40px;
    border: 1px solid #ddd;
    background: #fff;
    padding: 0 12px;
}

.login button, .modal div button[type="submit"] {
    border-color: #111;
    background: #111;
    color: #fff;
    cursor: pointer;
}

.app {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px 360px;
}

.pad { position: relative; min-width: 0; min-height: 0; }

#note, #note textarea { width: 100%; height: 100%; margin: 0; }

#note textarea {
    display: block;
    border: 0;
    outline: 0;
    resize: none;
    padding: 28px 32px;
    white-space: pre-wrap;
    writing-mode: horizontal-tb;
}

#st {
    position: absolute;
    top: 12px;
    right: 16px;
    color: #bbb;
    font-size: 12px;
    font-style: normal;
}

#rank-side, #side {
    border-left: 1px solid #eee;
    overflow: auto;
    padding: 16px;
    min-width: 0;
}

#rank-side header, #side header, #side header span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#rank-side b, #side b { font-weight: 500; color: #888; }

#side header button {
    border: 0;
    padding: 0;
    background: none;
    color: #888;
    cursor: pointer;
}

#side header button:hover { color: #111; }

.ranks {
    display: grid;
    gap: 6px;
    margin-top: 14px;
}

.rank {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid #f0f0f0;
    cursor: grab;
    user-select: none;
    background: #fff;
}

.rank b {
    font-weight: 500;
    color: #111;
    font-size: 13px;
}

.rank i, .firm-h i {
    font-style: normal;
    color: #bbb;
    font-size: 12px;
}

.rank.move { opacity: .45; }

.grid { display: grid; gap: 14px; margin-top: 14px; }

.firm {
    display: grid;
    gap: 8px;
}

.firm-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.firm-h b {
    font-weight: 500;
    color: #111;
    font-size: 13px;
}

.box {
    position: relative;
    border: 1px solid #e6e6e6;
    padding: 14px 14px 12px;
}

.box.on { border-color: #111; }

.box.pushed { padding-top: 28px; }

.mark {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 11px;
    font-style: normal;
    line-height: 1;
    padding: 5px 8px;
    background: #111;
    color: #fff;
    letter-spacing: .06em;
}

.card-form { display: grid; gap: 3px; padding-right: 16px; }

.card-form input {
    width: 100%;
    border: 0;
    padding: 0;
    background: none;
    outline: none;
}

.card-form input[name="alias"] { font-weight: 600; }

.card-form input[name="company"],
.card-form input[name="pub_key_id"],
.card-form input[name="remark"],
.card-form em {
    color: #888;
    font-size: 12px;
    font-style: normal;
    word-break: break-all;
}

.x {
    position: absolute;
    top: 8px;
    right: 10px;
}

.x button {
    border: 0;
    background: none;
    color: #bbb;
    cursor: pointer;
}

.dl {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.slot {
    position: relative;
}

.slot a {
    height: 34px;
}

.drop-file {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    padding: 0;
    cursor: pointer;
}

.dl a, .dl s, .dl button.push {
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #111;
    text-decoration: none;
    color: #111;
    font-size: 12px;
    letter-spacing: .08em;
    background: #fff;
    padding: 0;
    cursor: pointer;
}

.dl s { border-color: #eee; color: #ccc; text-decoration: none; }

.dl a:hover, .dl button:hover:not(:disabled) { background: #111; color: #fff; }

.dl button:disabled {
    border-color: #eee;
    color: #ccc;
    cursor: default;
}

#mask, #push-mask, #set-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    display: grid;
    place-items: center;
    padding: 20px;
    z-index: 40;
}

#mask[hidden], #push-mask[hidden], #set-mask[hidden] { display: none; }

#set-lock, #set-form {
    display: grid;
    gap: 10px;
}

#set-lock[hidden], #set-form[hidden] { display: none !important; }

#set-msg, #set-lock-msg { margin: 0; font-size: 13px; }
#set-msg.ok { color: #080; }
#set-msg.err, #set-lock-msg.err { color: #c00; }

.modal label {
    display: grid;
    gap: 6px;
    color: #666;
    font-size: 13px;
}

.modal select {
    height: 40px;
    border: 1px solid #ddd;
    background: #fff;
    padding: 0 10px;
}

.modal .hint, #push-who {
    margin: 0;
    color: #888;
    font-size: 13px;
}

#push-msg { margin: 0; font-size: 13px; }
#push-msg.err { color: #c00; }
#push-msg.ok { color: #080; }

.modal {
    width: min(360px, 100%);
    background: #fff;
    padding: 24px;
    display: grid;
    gap: 10px;
}

.modal h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }

.pick {
    display: grid;
    place-items: center;
    height: 40px;
    border: 1px dashed #ddd;
    color: #666;
    cursor: pointer;
}

.pick input { display: none; }

.pick:hover, .pick.on { border-color: #111; color: #111; }

#zip-meta {
    margin: 0;
    color: #888;
    font-size: 12px;
}

.modal div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
}

.modal div button { cursor: pointer; }

.err { margin: 10px 0 0; color: #c00; font-size: 13px; }

@media (max-width: 960px) {
    .app {
        grid-template-columns: minmax(0, 1fr) 360px;
        grid-template-rows: 1fr auto;
    }
    #rank-side {
        grid-column: 1 / -1;
        grid-row: 2;
        border-left: 0;
        border-top: 1px solid #eee;
        max-height: 28vh;
    }
    #side { grid-row: 1; }
}

.back {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    height: 40px;
    padding: 0 22px;
    display: grid;
    place-items: center;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: .08em;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.back:hover { background: #333; }

@media (max-width: 720px) {
    .app {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto 46vh;
    }
    #rank-side, #side { border-left: 0; border-top: 1px solid #eee; }
    #side { grid-row: auto; }
}