/* J-Inbox: J-Suite neobrutalist style. Paper, ink, lime; 2px borders, hard shadows, square corners. */
:root {
  --paper: #faf7ed;
  --ink: #181818;
  --lime: #dafa52;
  --orange: #ff8a60;
  --lilac: #cbb9ff;
  --blue: #9fd3ff;
  --yellow: #ffe066;
  --soft: #f3f1ea;
  --mute: #5d5a52;
  --rule: #e3dfd3;
  --line: 2px solid var(--ink);
  --shadow: 4px 4px 0 var(--ink);
  --shadow-s: 2px 2px 0 var(--ink);
  --top: 56px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 14px/1.45 Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border-radius: 0; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 3px solid #7555db; outline-offset: 2px; }
a { color: inherit; }
code, kbd, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
code { background: var(--soft); border: 1px solid var(--rule); padding: 0 4px; }
kbd { display: inline-block; min-width: 18px; padding: 0 4px; margin-left: 6px; border: 1.5px solid currentColor; font-size: 11px; line-height: 16px; text-align: center; }
.muted { color: var(--mute); }
.err { color: #a3260b; font-weight: 700; }
mark { background: var(--lime); color: var(--ink); padding: 0 1px; }
#app, .app { height: 100%; }
.app { display: flex; flex-direction: column; min-width: 1100px; }

/* ---- top bar ---- */
.top { height: var(--top); flex: none; display: grid; grid-template-columns: auto minmax(260px, 520px) auto; justify-content: space-between; align-items: center; gap: 24px; padding: 0 20px; background: var(--ink); color: var(--paper); border-bottom: var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 900; font-size: 16px; letter-spacing: .5px; color: var(--paper); }
.brand:hover .brand-text { color: var(--lime); }
.brand-mark { display: block; flex: none; }
.top .bm-tile { stroke: var(--lime); }
.brand-j { color: var(--lime); }
.search-trigger { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 34px; padding: 0 10px; background: #2a2a2a; color: #d8d5cb; border: 2px solid #4a4a4a; text-align: left; }
.search-trigger:hover { border-color: var(--lime); color: var(--paper); }
.search-trigger kbd { color: var(--lime); }
.top-nav { display: flex; align-items: center; gap: 4px; }
.top-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; color: var(--paper); text-decoration: none; background: none; border: 2px solid transparent; font-weight: 700; font-size: 13px; }
.top-link:hover { border-color: var(--lime); color: var(--lime); }
.top-link.has-pending { color: var(--lime); }
.pill { background: var(--lime); color: var(--ink); border: 1.5px solid var(--paper); font-size: 11px; font-weight: 900; padding: 0 6px; line-height: 16px; }
.who { max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 8px; border-left: 1px solid #444; font-weight: 700; unicode-bidi: isolate; }
.who small { color: #a9a597; font-weight: 400; }

/* ---- banners & notices ---- */
.banners { flex: none; }
.banner { display: flex; align-items: center; gap: 12px; padding: 8px 20px; border-bottom: var(--line); font-weight: 700; }
.banner code { background: var(--paper); border-color: var(--ink); }
.banner b { display: inline-grid; place-items: center; width: 20px; height: 20px; border: var(--line); background: var(--paper); font-size: 12px; }
.banner-error { background: var(--orange); }
.banner-warn { background: var(--yellow); }
.banner-link { margin-left: auto; padding: 2px 10px; border: var(--line); background: var(--paper); box-shadow: var(--shadow-s); text-decoration: none; }
.notices { position: fixed; left: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 30; max-width: 420px; }
.notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: white; border: var(--line); box-shadow: var(--shadow); font-weight: 700; }
.notice-error { background: var(--orange); }
.notice-info { background: var(--lime); }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: white; border: var(--line); box-shadow: var(--shadow-s); font-weight: 700; text-decoration: none; white-space: nowrap; }
.btn:hover:not(:disabled) { background: var(--lime); }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
.btn-primary { background: var(--lime); }
.btn-primary:hover:not(:disabled) { background: #c8ec2c; }
.btn-danger { background: var(--orange); }
.btn-big { padding: 12px 22px; font-size: 16px; box-shadow: var(--shadow); }
.link-btn { background: none; border: 0; padding: 0 4px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:hover { background: var(--lime); }

/* ---- three columns ---- */
.inbox { flex: 1; min-height: 0; display: grid; grid-template-columns: 212px 360px minmax(0, 1fr); }
@media (min-width: 1500px) { .inbox { grid-template-columns: 236px 420px minmax(0, 1fr); } }

.sidebar { overflow-y: auto; padding: 14px 12px 20px; border-right: var(--line); background: var(--paper); }
.side-title { margin: 14px 4px 6px; font-size: 11px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.side-title:first-child { margin-top: 2px; }
.filter { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 4px; padding: 7px 8px; background: transparent; border: 2px solid transparent; text-align: left; font-weight: 700; }
.filter:hover { border-color: var(--ink); background: white; }
.filter.active { background: var(--lime); border: var(--line); box-shadow: var(--shadow-s); }
.filter-label { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; unicode-bidi: isolate; }
.count { background: var(--ink); color: var(--paper); font-size: 11px; padding: 0 6px; line-height: 18px; }
.side-foot { margin-top: 24px; padding: 10px; border: 1.5px dashed #b9b4a6; font-size: 12px; color: var(--mute); }
.side-foot p { margin: 0; }

.chatlist { display: flex; flex-direction: column; min-height: 0; border-right: var(--line); background: white; }
.list-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 44px; padding: 0 14px; border-bottom: var(--line); }
.list-title { font-weight: 900; font-size: 15px; unicode-bidi: isolate; }
.stale { font-size: 11px; font-weight: 700; background: var(--yellow); border: 1.5px solid var(--ink); padding: 0 6px; }
.list-error { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px; background: var(--orange); border-bottom: var(--line); }
.chats { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.chat { border-bottom: 1px solid var(--rule); }
.chat-btn { display: flex; gap: 10px; width: 100%; padding: 10px 12px; background: none; border: 0; text-align: left; align-items: center; }
.chat-btn:hover { background: #f6f9e6; }
.chat.selected .chat-btn { background: var(--lime); box-shadow: inset 4px 0 0 var(--ink); }
.chat.busy { opacity: .55; }
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chat-top, .chat-bottom { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; font-size: 14px; unicode-bidi: isolate; }
.chat.unread .chat-title { font-weight: 900; }
.chat-time { flex: none; font-size: 11px; color: var(--mute); }
.chat-preview { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--mute); font-size: 13px; unicode-bidi: isolate; }
.chat.unread .chat-preview { color: var(--ink); }
.pin, .muted-ico { flex: none; font-size: 9px; font-weight: 900; letter-spacing: .5px; border: 1.5px solid var(--ink); padding: 0 3px; line-height: 13px; background: var(--paper); }
.muted-ico { border-style: dashed; color: var(--mute); border-color: var(--mute); }
.unread-count { flex: none; min-width: 20px; padding: 0 5px; background: var(--ink); color: var(--lime); font-size: 11px; font-weight: 900; line-height: 18px; text-align: center; }
.chat.selected .unread-count { background: var(--ink); }

.avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: var(--line); overflow: hidden; background: var(--soft); font-weight: 900; font-size: 14px; }
.avatar-s { width: 26px; height: 26px; font-size: 10px; border-width: 1.5px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.initials { max-width: 100%; overflow: hidden; white-space: nowrap; unicode-bidi: isolate; }
.av-lime { background: var(--lime); } .av-orange { background: var(--orange); } .av-lilac { background: var(--lilac); } .av-blue { background: var(--blue); } .av-yellow { background: var(--yellow); }

.net { flex: none; display: inline-block; min-width: 22px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; border: 1.5px solid var(--ink); font-size: 10px; font-weight: 900; line-height: 15px; text-align: center; unicode-bidi: isolate; }
.net-lime { background: var(--lime); } .net-orange { background: var(--orange); } .net-lilac { background: var(--lilac); } .net-blue { background: var(--blue); } .net-yellow { background: var(--yellow); } .net-ink { background: var(--ink); color: var(--paper); } .net-paper { background: var(--paper); }

/* ---- conversation ---- */
.convo { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--paper); }
.convo-empty { display: grid; place-items: center; }
.empty-card { max-width: 360px; padding: 24px; background: white; border: var(--line); box-shadow: var(--shadow); }
.empty-card h2 { margin: 0 0 8px; }
.convo-head { flex: none; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 18px; border-bottom: var(--line); background: white; }
.convo-title { flex: 1; min-width: 0; }
.convo-title h2 { text-align: left; margin: 0; font-size: 18px; font-weight: 900; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; unicode-bidi: isolate; }
.convo-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mute); }
.convo-actions { display: flex; gap: 8px; }
.messages { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 22px 18px; }
.messages:focus-visible { outline-offset: -3px; }
.history-edge { display: flex; justify-content: center; padding: 6px 0 12px; font-size: 12px; color: var(--mute); min-height: 30px; }
.dropped { margin: 0 auto 10px; width: fit-content; padding: 2px 8px; background: var(--yellow); border: 1.5px solid var(--ink); font-size: 12px; font-weight: 700; }
.day { display: flex; justify-content: center; margin: 14px 0 8px; }
.day span { font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; background: var(--paper); border: 1.5px solid var(--ink); padding: 1px 8px; }
.msg { position: relative; display: flex; flex-direction: column; align-items: flex-start; margin: 0 0 8px; max-width: 72%; }
.msg.mine { margin-left: auto; align-items: flex-end; }
.bubble { position: relative; max-width: 100%; min-width: 60px; padding: 8px 11px 5px; background: white; border: var(--line); box-shadow: var(--shadow-s); overflow: hidden; }
.mine .bubble { background: var(--lime); }
.sender { margin-bottom: 2px; font-size: 12px; font-weight: 900; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; unicode-bidi: isolate; }
.text { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-size: 14px; line-height: 1.45; max-height: 60vh; overflow-y: auto; }
.rt { unicode-bidi: isolate; }
.ext { color: #2b3fd1; text-decoration: underline; overflow-wrap: anywhere; }
.trunc { margin-top: 6px; padding-top: 4px; border-top: 1px dashed var(--mute); font-size: 12px; color: var(--mute); font-style: italic; }
.deleted { font-style: italic; color: var(--mute); }
.meta { display: flex; justify-content: flex-end; gap: 4px; margin-top: 3px; font-size: 11px; color: var(--mute); }
.mine .meta { color: #4c5420; }
.quote { display: flex; flex-direction: column; margin: 2px 0 6px; padding: 4px 8px; border-left: 4px solid var(--ink); background: rgba(24, 24, 24, .06); font-size: 12px; max-width: 420px; }
.quote-who { font-weight: 900; unicode-bidi: isolate; }
.quote-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; unicode-bidi: isolate; }
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -2px; padding: 0 6px; z-index: 1; }
.reaction { display: inline-flex; gap: 3px; align-items: center; padding: 0 5px; background: white; border: 1.5px solid var(--ink); font-size: 13px; line-height: 20px; max-width: 120px; overflow: hidden; white-space: nowrap; }
.reaction b { font-size: 11px; }
.reply-btn { position: absolute; top: 4px; right: -58px; padding: 1px 6px; font-size: 11px; font-weight: 700; background: white; border: 1.5px solid var(--ink); opacity: 0; }
.mine .reply-btn { right: auto; left: -58px; }
.msg:hover .reply-btn, .reply-btn:focus-visible { opacity: 1; }
.atts { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.att { display: block; max-width: 100%; border: var(--line); }
.att-img { object-fit: cover; background: var(--soft); }
.att-loading { background: repeating-linear-gradient(45deg, var(--soft), var(--soft) 8px, #ebe7dc 8px, #ebe7dc 16px); }
.att-missing { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 80px; min-width: 200px; padding: 8px; background: repeating-linear-gradient(-45deg, #fff, #fff 6px, #f6e1d8 6px, #f6e1d8 12px); font-size: 12px; font-weight: 700; color: #7a2d10; }
.att-file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: white; box-shadow: var(--shadow-s); text-align: left; font-weight: 700; max-width: 360px; }
.file-ico { display: grid; place-items: center; width: 26px; height: 26px; background: var(--ink); color: var(--lime); }
.file-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; unicode-bidi: isolate; }
.file-meta { flex: none; font-weight: 400; color: var(--mute); font-size: 12px; }
.att-video { max-width: 360px; }
.echo-pending .bubble { opacity: .65; border-style: dashed; }
.echo-failed .bubble { background: #ffd8c8; }
.echo-unknown .bubble { background: var(--yellow); }
.echo-meta { flex-wrap: wrap; color: var(--ink) !important; font-weight: 700; }
.new-below { position: absolute; right: 26px; bottom: 96px; padding: 6px 12px; background: var(--lime); border: var(--line); box-shadow: var(--shadow); font-weight: 900; }
.center { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 10px; text-align: center; }
.err-box { margin: 30px auto; max-width: 380px; background: white; border: var(--line); box-shadow: var(--shadow); }
.err-box p { margin: 0; }

.composer { flex: none; padding: 10px 18px 14px; border-top: var(--line); background: white; }
.composer-row { display: flex; gap: 10px; align-items: flex-end; }
.composer textarea { flex: 1; resize: none; min-height: 40px; max-height: 180px; padding: 9px 10px; border: var(--line); background: var(--paper); line-height: 1.4; }
.composer textarea:focus { background: white; }
.send { height: 40px; padding: 0 18px; }
.replying { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 4px 8px; border-left: 4px solid var(--ink); background: var(--soft); font-size: 12px; }
.replying-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--mute); unicode-bidi: isolate; }
.composer-hint { margin-top: 6px; font-size: 12px; }

.spinner { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--mute); }
.spinner .dot { width: 10px; height: 10px; background: var(--ink); animation: pulse 1s steps(2) infinite; }
@keyframes pulse { 50% { background: var(--lime); } }

/* ---- search palette ---- */
.palette-scrim { position: fixed; inset: 0; z-index: 40; display: flex; justify-content: center; align-items: flex-start; padding-top: 10vh; background: rgba(24, 24, 24, .35); }
.palette { width: 640px; max-height: 70vh; display: flex; flex-direction: column; background: white; border: var(--line); box-shadow: 8px 8px 0 var(--ink); }
.palette-input { padding: 14px 16px; border: 0; border-bottom: var(--line); font-size: 18px; outline: none; }
.palette-body { overflow-y: auto; }
.palette-status { padding: 12px 16px; font-size: 13px; }
.palette-results { list-style: none; margin: 0; padding: 0; }
.palette-results button { display: block; width: 100%; padding: 8px 16px; background: none; border: 0; border-bottom: 1px solid var(--rule); text-align: left; }
.palette-results li.on button { background: var(--lime); }
.palette-results li.on mark { background: var(--ink); color: var(--lime); }
.res { display: flex; align-items: center; gap: 10px; min-width: 0; }
.res-msg { flex-direction: column; align-items: flex-start; gap: 2px; }
.res-title { font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; unicode-bidi: isolate; max-width: 100%; }
.res .res-title { flex: 1; }
.res-text { color: var(--mute); font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; unicode-bidi: isolate; }
.palette-foot { padding: 6px 16px; border-top: var(--line); font-size: 11px; color: var(--mute); background: var(--paper); }

/* ---- gate (sign in, errors) ---- */
.gate { flex: 1; display: grid; place-items: center; padding: 40px; }
.gate-card { max-width: 520px; padding: 34px 36px; background: white; border: var(--line); box-shadow: 8px 8px 0 var(--ink); }
.gate-brand { display: flex; align-items: center; gap: 14px; font-weight: 900; font-size: 22px; }
.gate-brand .brand-j { color: var(--ink); background: var(--lime); padding: 0 3px; }
.gate-card h1 { margin: 20px 0 10px; font-size: 38px; line-height: 1.05; letter-spacing: -1.5px; font-weight: 900; }
.gate-card p { margin: 0 0 22px; }
.fine { font-size: 12px; color: var(--mute); margin: 18px 0 0 !important; }

/* ---- pages ---- */
.page { flex: 1; overflow-y: auto; padding: 26px 40px 60px; max-width: 1200px; width: 100%; margin: 0 auto; }
.page-narrow { max-width: 860px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.page-head h1 { margin: 0; font-size: 32px; font-weight: 900; letter-spacing: -1px; }
.tabs { display: flex; gap: 8px; }
.tab { padding: 6px 14px; border: var(--line); background: white; font-weight: 700; text-decoration: none; }
.tab.on { background: var(--lime); box-shadow: var(--shadow-s); }
.card { margin: 0 0 18px; padding: 18px 20px; background: white; border: var(--line); box-shadow: var(--shadow); }
.card h2 { margin: 0 0 8px; font-size: 20px; font-weight: 900; }
.table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 6px 8px; border-bottom: var(--line); }
.table td { padding: 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
.table td.actions { overflow: visible; white-space: nowrap; }
.confirm-inline { display: inline-flex; align-items: center; gap: 8px; }
.status-tag { display: inline-block; padding: 0 6px; border: 1.5px solid var(--ink); font-size: 11px; font-weight: 900; line-height: 18px; text-transform: uppercase; letter-spacing: .5px; background: var(--paper); }
.tag-ok, .tag-executed, .tag-approved { background: var(--lime); }
.tag-err, .tag-failed, .tag-denied { background: var(--orange); }
.tag-pending { background: var(--yellow); }
.tag-revoked, .tag-expired { background: #ddd; color: #555; }
.tag-off { background: white; color: var(--mute); }
.actor { display: inline-block; font-size: 10px; text-transform: uppercase; font-weight: 900; border: 1.5px solid var(--ink); padding: 0 4px; }
.actor-agent { background: var(--lilac); } .actor-human { background: var(--lime); } .actor-connector, .actor-system { background: var(--soft); }
.identity { margin: 0 0 16px; padding: 10px 14px; background: var(--yellow); border: var(--line); font-size: 14px; }
.identity b { unicode-bidi: isolate; }
.facts { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 16px; margin: 14px 0; }
.facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; font-weight: 900; color: var(--mute); padding-top: 2px; }
.facts dd { margin: 0; overflow-wrap: anywhere; unicode-bidi: isolate; }
.exact { margin: 0 0 4px; padding: 12px; max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--paper); border: var(--line); font: 14px/1.45 Arial, Helvetica, sans-serif; unicode-bidi: isolate; }
.big-emoji { font-size: 28px; }
.exact-inline { padding: 2px 6px; background: var(--paper); border: var(--line); white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: isolate; }
.hidden-char { padding: 0 2px; background: var(--orange); color: var(--ink); border: 1px solid var(--ink); font: 700 12px/1 ui-monospace, Menlo, monospace; }
.warn-line { margin: 0 0 6px; font-weight: 700; }
.decide { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.confirm-box { margin-top: 16px; padding: 14px 16px; background: var(--lime); border: var(--line); box-shadow: var(--shadow-s); }
.confirm-box p { margin: 0 0 10px; }
.confirm-box .exact { background: white; }
.warn-box { margin: 10px 0; padding: 12px 14px; background: var(--orange); border: var(--line); }
.warn-box p { margin: 0 0 8px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }
.approval-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.approval-list { list-style: none; margin: 0; padding: 0; }
.approval-list .card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.approval-link { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; }
.approval-link:hover { text-decoration: underline; }
.label { display: block; margin: 14px 0 6px; font-weight: 900; }
.code-input { width: 240px; padding: 10px 12px; border: var(--line); background: var(--paper); font: 900 24px/1 ui-monospace, Menlo, monospace; letter-spacing: 3px; text-transform: uppercase; }
.noscript { padding: 20px; }