/* SendToKobo monochrome theme — 2026-10-27. */
:root {
    --paper:#f5f4ef;
    --white:#fffefa;
    --ink:#20211f;
    --muted:#6b6d66;
    --line:#dcded5;
    --soft:#ebece5
}

* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased
}
a {
    color:inherit;
    text-decoration:none
}
button,input {
    font:inherit
}
button,a,input,summary {
    -webkit-tap-highlight-color:transparent
}
button {
    cursor:pointer
}
svg {
    display:block;
    width:24px;
    height:24px;
    flex-shrink:0
}
button:focus-visible,a:focus-visible,summary:focus-visible {
    outline:2px solid var(--ink);
    outline-offset:5px
}
button:disabled {
    cursor:not-allowed
}
.shell {
    width:calc(100% - 64px);
    max-width:720px;
    margin:0 auto
}
.topbar {
    height:94px;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px
}
.brand {
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:650;
    font-size:17px;
    letter-spacing:-.4px
}
.brand-mark {
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    background:var(--ink);
    color:var(--white);
    border-radius:10px
}
.brand-mark svg {
    width:21px;
    height:21px
}
.top-link {
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    padding:8px 0;
    font-size:13px;
    font-weight:550
}
.top-link svg {
    width:17px;
    height:17px
}
.tools-link {
    border:1px solid #c6c9bf;
    border-radius:8px;
    padding:8px 13px
}
.tools-link:hover {
    background:var(--white)
}
.hero {
    padding:40px 0 28px
}
.hero h1 {
    margin:0;
    font-size:38px;
    font-weight:600;
    letter-spacing:-1px;
    line-height:1.35
}
.hero p {
    margin:10px 0 0;
    color:var(--muted);
    font-size:14px
}
.transfer-grid {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:20px;
    align-items:stretch
}
.pair-panel {
    background:var(--ink);
    color:var(--white);
    border-radius:18px;
    padding:30px 28px;
    display:flex;
    flex-direction:column;
    min-height:0;
    text-align:center
}
.step-label {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    font-weight:500;
    letter-spacing:1px
}
.step-number {
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    border:1px solid #676961;
    border-radius:50%;
    font-size:10px;
    letter-spacing:0;
    font-family:Consolas,monospace
}
.pair-panel .step-label {
    color:#c7c7c1
}
.pair-panel h2 {
    margin:18px 0 6px;
    font-size:21px;
    font-weight:550;
    letter-spacing:.2px
}
.pair-panel p {
    margin:0;
    color:#bebeb7;
    font-size:12px
}
.code-input {
    display:flex;
    justify-content:center;
    gap:10px;
    margin:20px 0 22px
}
.code-input input {
    width:58px;
    min-width:0;
    height:66px;
    border:1px solid #575750;
    border-radius:10px;
    background:#363632;
    color:var(--white);
    font-size:32px;
    font-family:Consolas,monospace;
    text-align:center;
    outline:none;
    transition:background .15s,border .15s;
    caret-color:var(--white)
}
.code-input input::placeholder {
    color:#777770;
    font-size:19px
}
.code-input input:focus {
    background:#444440;
    border:2px solid #fffefa
}
.scan-note {
    display:flex;
    justify-content:center;
    gap:9px;
    align-items:flex-start;
    border-top:1px solid #484843;
    padding-top:18px;
    margin-top:auto;
    color:#c7c7c1;
    font-size:12px;
    line-height:1.7
}
.scan-note svg {
    width:17px;
    height:17px;
    margin-top:2px
}
.select-panel {
    background:var(--white);
    border:1px solid var(--line);
    border-radius:18px;
    padding:28px;
    display:flex;
    flex-direction:column
}
.select-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px
}
.select-heading .step-number {
    border-color:#bbbbaf
}
.select-heading .step-label {
    font-size:14px;
    letter-spacing:0
}
.quiet {
    font-size:11px;
    color:var(--muted)
}
.drop-zone {
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:168px;
    border:1px dashed #c4c4bb;
    border-radius:10px;
    background:#f9f9f4;
    color:var(--ink);
    padding:18px 12px
}
.drop-zone:hover,.drop-zone.dragging {
    background:#f1f1e9;
    border-color:var(--ink)
}
.drop-icon {
    display:grid;
    place-items:center;
    width:45px;
    height:45px;
    margin-bottom:3px
}
.drop-icon svg {
    width:35px;
    height:35px;
    stroke-width:1.4
}
.drop-title {
    font-size:15px;
    font-weight:550
}
.formats {
    color:var(--muted);
    font-size:11px;
    letter-spacing:.4px
}
.send-button {
    margin-top:18px;
    min-height:48px;
    background:var(--ink);
    color:var(--white);
    border:1px solid var(--ink);
    border-radius:9px;
    padding:10px 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:14px;
    font-weight:550
}
.send-button svg {
    width:18px;
    height:18px
}
.send-button:hover:enabled {
    background:#3d3d37
}
.send-button:disabled {
    background:#484844;
    border-color:#484844;
    color:#e5e5de
}
.file-input {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    clip-path:inset(50%)
}
.file-list {
    margin:0;
    padding:0;
    list-style:none
}
.file-list:empty {
    display:none
}
.file-list li {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    padding-top:12px
}
.file-name {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    flex:1
}
.file-size {
    font-size:10px;
    color:var(--muted)
}
.remove-file {
    width:32px;
    height:32px;
    padding:7px;
    background:transparent;
    color:var(--ink);
    border:1px solid var(--line);
    border-radius:6px
}
.remove-file svg {
    width:16px;
    height:16px
}
.help {
    margin-top:32px;
    padding-bottom:30px;
    border-bottom:1px solid var(--line)
}
.help h2 {
    font-size:12px;
    font-weight:600;
    margin:0 0 14px
}
.help ol {
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
    list-style:none
}
.help li {
    display:flex;
    gap:10px;
    font-size:12px;
    color:var(--muted);
    line-height:1.8
}
.help li span {
    color:var(--ink);
    font-family:Consolas,monospace;
    font-size:11px;
    line-height:2
}
.updates {
    padding:18px 0;
    font-size:11px;
    color:var(--muted);
    display:flex;
    gap:12px;
    align-items:baseline;
    justify-content:space-between;
    flex-wrap:wrap
}
.updates p {
    margin:0
}
.updates p strong {
    font-weight:600;
    color:var(--ink);
    margin-right:10px
}
.updates details {
    max-width:100%
}
.updates summary {
    cursor:pointer;
    min-height:30px
}
.update-body {
    padding:14px 0;
    max-width:550px
}
.update-body h3 {
    font-size:12px;
    margin:12px 0 4px
}
.update-body p {
    font-size:12px
}
.footer {
    font-size:10px;
    text-align:center;
    color:#777b70;
    padding:14px 0 20px;
    line-height:1.9
}
.tools-shell {
    max-width:760px
}
.tools-shell .hero {
    padding:48px 0 30px
}
.tool-list {
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:16px
}
.tool-card {
    display:flex;
    align-items:center;
    gap:24px;
    min-height:144px;
    padding:28px;
    border:1px solid #d8d8d0;
    border-radius:16px;
    background:var(--white);
    transition:background .15s,border .15s
}
.tool-card:hover {
    border-color:#96968a;
    background:#fdfdf7
}
.tool-icon {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:62px;
    height:62px;
    border-radius:15px;
    background:#f0f0e9;
    color:var(--ink);
    border:1px solid #e4e4db
}
.tool-icon svg {
    width:30px;
    height:30px;
    stroke-width:1.5
}
.tool-copy {
    flex:1;
    min-width:0
}
.tool-copy h2 {
    font-size:20px;
    font-weight:550;
    margin:0 0 7px
}
.tool-copy p {
    font-size:13px;
    color:var(--muted);
    margin:0
}
.arrow {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--ink);
    color:var(--white);
    flex-shrink:0
}
.arrow svg {
    width:17px;
    height:17px
}
.tools-shell .footer {
    margin-top:30px
}

@media(max-width:820px) {
    .shell {
    width:calc(100% - 40px)
}
.transfer-grid {
    grid-template-columns:minmax(0,1fr);
    gap:16px
}
.pair-panel {
    padding:24px 20px
}
.select-panel {
    padding:24px 20px
}
.code-input {
    gap:8px
}
.code-input input {
    width:54px
}
.formats {
    font-size:10px;
    letter-spacing:0
}
.drop-title {
    font-size:13px
}
.help ol {
    gap:7px
}

}

@media(max-width:660px) {
    .shell {
    width:calc(100% - 36px)
}
.topbar {
    height:76px
}
.brand {
    font-size:15px;
    gap:8px
}
.brand-mark {
    width:30px;
    height:30px;
    border-radius:8px
}
.brand-mark svg {
    width:19px;
    height:19px
}
.top-link {
    font-size:12px
}
.tools-link {
    padding:7px 10px;
    min-height:38px
}
.hero {
    padding:29px 0 22px
}
.hero h1 {
    font-size:30px;
    letter-spacing:-.5px
}
.hero p {
    font-size:12px;
    line-height:1.8;
    max-width:300px;
    margin-top:7px
}
.transfer-grid {
    grid-template-columns:1fr;
    gap:16px
}
.pair-panel {
    padding:22px;
    min-height:0;
    border-radius:15px;
    text-align:left
}
.pair-panel h2 {
    font-size:19px;
    margin-top:20px
}
.code-input {
    justify-content:flex-start;
    margin:19px 0 20px;
    gap:12px
}
.code-input input {
    width:56px;
    height:60px;
    font-size:30px
}
.scan-note {
    justify-content:flex-start;
    padding-top:14px;
    font-size:11px
}
.select-panel {
    border-radius:15px;
    padding:22px
}
.select-heading {
    margin-bottom:14px
}
.drop-zone {
    min-height:157px
}
.drop-title {
    font-size:14px
}
.formats {
    font-size:10px;
    letter-spacing:.1px
}
.send-button {
    margin-top:16px;
    min-height:46px
}
.help {
    margin-top:25px;
    padding-bottom:20px
}
.help ol {
    grid-template-columns:1fr;
    gap:7px
}
.help li {
    font-size:11px
}
.help h2 {
    margin-bottom:10px
}
.updates {
    padding:16px 0;
    gap:4px;
    font-size:10px
}
.updates summary {
    min-height:30px
}
.footer {
    font-size:9px;
    line-height:1.9
}
.tools-shell .hero {
    padding:32px 0 25px
}
.tool-card {
    gap:16px;
    min-height:133px;
    padding:22px 18px;
    border-radius:14px
}
.tool-icon {
    width:46px;
    height:46px;
    border-radius:12px
}
.tool-icon svg {
    width:25px;
    height:25px
}
.tool-copy h2 {
    font-size:17px;
    margin-bottom:6px
}
.tool-copy p {
    font-size:11px;
    line-height:1.8
}
.arrow {
    width:27px;
    height:27px
}
.arrow svg {
    width:15px;
    height:15px
}
.tools-shell .footer {
    margin-top:20px
}

}

@media(max-width:359px) {
    .shell {
    width:calc(100% - 28px)
}
.pair-panel,.select-panel {
    padding:20px
}
.code-input {
    gap:10px
}
.code-input input {
    width:51px;
    height:58px
}
.tool-card {
    padding:20px 14px;
    gap:12px
}
.tool-icon {
    width:40px;
    height:40px
}
.tool-copy h2 {
    font-size:16px
}
.brand {
    font-size:13px
}
.top-link {
    font-size:11px
}
.formats {
    font-size:9px
}

}

@media(prefers-reduced-motion:reduce) {
    * {
    transition:none!important
}

}


/* Live transfer states use the existing uploader's classes and IDs. */
.transfer-grid > * { min-width: 0; }
.sr-only  {
     position:absolute;
     width:1px;
     height:1px;
     padding:0;
     margin:-1px;
     overflow:hidden;
     clip:rect(0,0,0,0);
     white-space:nowrap;
     border:0;

}

.file-info,.upload-history,#uploadstatus  {
     display:none;

}

.file-info.show,.upload-history.show,#uploadstatus.show  {
     display:block;

}

.file-info  {
     margin-top:14px;

}

.file-item  {
     padding:12px 0;
     border-top:1px solid var(--line);

}

.file-header  {
     display:flex;
     align-items:center;
     gap:10px;
     min-width:0;

}

.file-name  {
     min-width:0;
     font-size:13px;

}

.file-size  {
     flex-shrink:0;

}

.delete-btn  {
     flex-shrink:0;
     width:34px;
     height:34px;
     border:1px solid var(--line);
     border-radius:7px;
     background:var(--white);
     color:var(--ink);
     font-size:20px;
     line-height:1;

}

.delete-btn:hover  {
     background:var(--soft);

}

.file-status  {
     margin-top:9px;
     padding:7px 10px;
     font-size:12px;
     border-radius:6px;
     background:var(--soft);
     color:var(--ink);
     overflow-wrap:anywhere;

}

.status-uploading  {
     background:#e4e5dd;
     font-weight:550;

}

.status-error,.history-status.error  {
     background:#f4e9e7;
     color:#6e302a;

}

.status-success,.history-status.success  {
     background:#eceee5;
     color:#30332b;

}

.upload-history  {
     margin-top:22px;
     padding:22px;
     border:1px solid var(--line);
     border-radius:14px;
     background:var(--white);

}

.history-title  {
     font-size:14px;
     font-weight:600;
     margin:0 0 14px;

}

.history-item + .history-item  {
     border-top:1px solid var(--line);
     margin-top:12px;
     padding-top:12px;

}

.history-header  {
     display:flex;
     justify-content:space-between;
     align-items:flex-start;
     gap:12px;

}

.history-filename  {
     font-size:13px;
     min-width:0;
     overflow-wrap:anywhere;
     word-break:break-word;

}

.history-status  {
     padding:2px 8px;
     font-size:11px;
     border-radius:4px;
     flex-shrink:0;

}

.history-message  {
     font-size:12px;
     color:var(--muted);
     margin-top:6px;
     overflow-wrap:anywhere;

}

#uploadstatus  {
     margin:18px 0;
     padding:14px;
     font-size:13px;
     border:1px solid var(--line);
     border-radius:9px;
     overflow-wrap:anywhere;

}

#uploadstatus.error  {
     border-color:#b68b86;
     background:#f4e9e7;
     color:#6e302a;

}

.navigation-notice  {
     margin:0 0 20px;
     padding:12px;
     border:1px solid var(--line);
     border-radius:9px;
     font-size:13px;
     background:var(--white);

}

#pairingNotice  {
     color:#e4e5df;
     font-size:12px !important;
     margin-bottom:14px;

}

.release-history  {
     width:100%;

}

.release-history summary  {
     text-align:right;

}

.release-note-group  {
     font-size:12px;

}

.release-note-group + .release-note-group  {
     margin-top:16px;

}

.release-date  {
     font-weight:600;
     color:var(--ink);

}

.release-note-subtitle  {
     margin-top:4px;

}

.release-note-group ul  {
     margin:6px 0;
     padding-left:20px;

}

.footer  {
     padding-bottom:4px;

}

.beian-container  {
     font-size:10px;
     text-align:center;
     color:var(--muted);
     padding:0 0 22px;

}

.beian-link  {
     display:inline-flex;
     justify-content:center;
     align-items:center;

}

.beian-icon  {
     width:12px;
     height:12px;
     margin-right:5px;

}

.toast  {
     position:fixed;
     bottom:24px;
     left:50%;
     transform:translateX(-50%);
     z-index:10;
     padding:14px 20px;
     border-radius:10px;
     background:var(--ink);
     color:var(--white);
     font-size:13px;
     max-width:calc(100% - 32px);
     width:max-content;
     opacity:0;
     visibility:hidden;
     pointer-events:none;

}

.toast.show  {
     opacity:1;
     visibility:visible;

}

@media (max-width:660px)  {
     .upload-history  {
     padding:18px;

}
 .file-header  {
     gap:7px;

}
 .file-name  {
     font-size:12px;

}
 .beian-container  {
     font-size:9px;

}
 .beian-icon  {
     width:10px;
     height:10px;

}

}